SitePoint Sponsor

User Tag List

Page 3 of 13 FirstFirst 1234567 ... LastLast
Results 51 to 75 of 310
  1. #51
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok I manage to solve the table name issue as below. The problem now is that each time I add few rows and submit it shows the length is just 1. So how to overcome this?

    function checkRows(form) {
    //$(form).validate().resetForm();
    alert("Length : "+$('table.dynatable tbody tr', form).length);
    if ($('table.dynatable tbody tr', form).length > 2) {
    alert("Call setup multiple row");

    }
    }

  2. #52
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Currently on the page, it's giving the length as a part of the page loading process, before any ability to add other rows can occur.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #53
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    How can I capture after the rows added? Must add more codes?

  4. #54
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    How can I capture after the rows added? Must add more codes?
    Understanding is eluding my grasp.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #55
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    How can I capture after the rows added? Must add more codes?

  6. #56
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    How can I capture after the rows added? Must add more codes?
    Repeating exactly the same thing does not help to aid understanding.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #57
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Can give me some hints where I am wrong?

  8. #58
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Can give me some hints where I am wrong?
    I would do so gladly, if I were to understand what you intend to achieve.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #59
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Is like this for now what I want is that when submit minimally must have 2 rows added. Secondly the value from the locationFrom and locationTo for the first row must be the same and same goes for the last row but between the rows it can be any as many rows it be. Next thing the row on the second row immediately after the first row the locationFrom must be the locationTo from the previous row. So this is my scenario. i am trying to do it step by step trying by myself and got stuck.

  10. #60
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Is like this for now what I want is that when submit minimally must have 2 rows added.
    Well that part seems to be fairly easy to achieve. You can edit the HTML content so that the page starts with two rows.

    Quote Originally Posted by newtomysql View Post
    Secondly the value from the locationFrom and locationTo for the first row must be the same and same goes for the last row but between the rows it can be any as many rows it be. Next thing the row on the second row immediately after the first row the locationFrom must be the locationTo from the previous row. So this is my scenario. i am trying to do it step by step trying by myself and got stuck.
    These parts look to be trickier, but I'm pretty sure that we'll have some advice for you on it as things progress.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #61
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Even I can have that done on the HTML part but as a precaution incase the user remove the second row. So I think is better to have the check and validation for minimal of 2 rows right. Ok the second part I think lets do like this can we first validate to make sure the locationFrom value and locationTo value is the same just for first row.

  12. #62
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    Even I can have that done on the HTML part but as a precaution incase the user remove the second row. So I think is better to have the check and validation for minimal of 2 rows right.
    That's right.

    Quote Originally Posted by newtomysql View Post
    can we first validate to make sure the locationFrom value and locationTo value is the same just for first row.
    How about if changing one of them causes the other one to automatically change as well. That then removes any opportunity for a validation error to occur.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #63
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Yes I can agree with you when one of it change then next one can change automatically for the first row. So about the first how to validate the row lenght to be minimum 2? Thank you.

  14. #64
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    Yes I can agree with you when one of it change then next one can change automatically for the first row. So about the first how to validate the row lenght to be minimum 2? Thank you.
    When someone tries to remove a row, check that there are more than two rows. If there aren't, refuse to perform the removal.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #65
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok I will implement one by one then. Ok will try that first then will get back to you regarding how to implelement first row with both locationFrom and locationTo to be same value.

  16. #66
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    An even better solution is to check the number of rows after they've been changed. If there are only two rows, completely disable the remove buttons. Visual indications like that become very useful for the user.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #67
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Is a good idea but I really dont know how to implement you idea about the disabling button. Thank you.

  18. #68
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Here's a simple example.

    Code javascript:
    function updateRemoveButton() {
        var list = document.getElementById('randomNumbers'),
            removeButton = document.getElementById('remove');
     
        if (list.getElementsByTagName('li').length <= 1) {
            removeButton.disabled = true;
        } else {
            removeButton.disabled = false;
        }
    }

    Because both the add button or the remove button can change the conditions under which it may be enabled or disabled, it's useful for the enable/disable part to be in a separate function, so that you can call it from wherever it may be affected.

    For example:

    Code html4strict:
    <html>
    <head>
    </head>
    <body>
    <p><button id="add">Add</button> <button id="remove">Remove</button></p>
    <ul id="randomNumbers">
    </ul>
    <script src="script.js"></script>
    </body>
    </html>

    Code javascript:
    function numberOfListItems() {
        var list = document.getElementById('randomNumbers');
        return list.getElementsByTagName('li').length;
    }
    function updateButton(button, test) {
        button.disabled = test();
    }
    function updateAddButton() {
        var button = document.getElementById('add');
        updateButton(button, function () {
            return numberOfListItems() >= 5;
        });
    }
    function updateRemoveButton() {
        var button = document.getElementById('remove');
        updateButton(button, function () {
            return numberOfListItems() <= 1;
        });
    }
    function addHandler() {
        var list = document.getElementById('randomNumbers'),
            item = document.createElement('li'),
            text = document.createTextNode(Math.random());
     
        item.appendChild(text);
        list.appendChild(item);
     
        updateAddButton();
        updateRemoveButton();
    }
    function removeHandler() {
        var list = document.getElementById('randomNumbers');
        list.removeChild(list.lastChild);
     
        updateAddButton();
        updateRemoveButton();
    }
    var add = document.getElementById('add'),
        remove = document.getElementById('remove');
     
    add.onclick = addHandler;
    remove.onclick = removeHandler;
     
    add.click();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #69
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    About the delete I managed to solve it where if below 3 rows it wont do the delete function and also on default I made it as two rows. Below is my fulls code just to make sure I am doing right things. The next thing I need your help is about validating the first row and last row both locationFrom and locationTo is the same value.


    <?php
    session_start();
    require_once('config.php');

    $link = mysql_connect(dbHost, dbUser, dbPassword);
    if(!$link)
    {
    die('Failed to connect to server: ' . mysql_error());
    }

    //Select database
    $db = mysql_select_db(dbDatabase);
    if(!$db)
    {
    die("Unable to select database");
    }

    ?>
    <html>
    <head>

    <link rel="stylesheet" type="text/css" href="my1.css" media="all">
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script src="jquery.validate.js"></script>

    <script>

    $(document).ready(function() {

    //$("#form1").validate();


    function checkRows(form) {
    //$(form).validate().resetForm();
    alert("Length : "+$('table.dynatable tbody tr', form).length);
    if ($('table.dynatable tbody tr', form).length > 2) {
    alert("Call setup multiple row");

    }
    }

    var form = $("#form1");
    checkRows(form);

    var prot = $('tr.prototype').clone().removeClass('prototype');
    $(form).data('prototype', prot);

    var id = 0;

    // Add button functionality
    $("table.dynatable button.add").click(function() {
    var form = this.form;
    id++;

    // Get a new row based on the prototype row
    //var prot = master.find(".prototype").clone();
    var prot = $(form).data('prototype').clone();
    prot.find('[name^="id"]').attr("value", id);
    prot.find('[name^="locationFrom"]').attr('name', 'locationFrom[' + id + ']');
    prot.find('[name^="locationFrom"]').attr('id', 'locationFrom[' + id + ']');
    prot.find('[name^="locationFrom"]').attr('value', '');
    prot.find('[name^="eventFrom"]').attr('name', 'eventFrom[' + id + ']');
    prot.find('[name^="eventFrom"]').attr('value', '');
    prot.find('[name^="locationTo"]').attr('name', 'locationTo[' + id + ']');
    prot.find('[name^="locationTo"]').attr('value', '');
    prot.find('[name^="eventTo"]').attr('name', 'eventTo[' + id + ']');
    prot.find('[name^="eventTo"]').attr('value', '');

    //var dropLocationFromName = 'locationFrom[' + id + ']';
    //alert("dropLocationFromName : "+dropLocationFromName);
    //$(form).find("dynamicRow").append(prot);
    $("#dynamicRow").find('tbody').append(prot);
    //$("#form1").validate();
    //$('#' + dropLocationFromName).rules('add', {required: true});
    return false;
    });



    // Remove button functionality
    $("table.dynatable button.remove").live("click", function() {

    if ($('table.dynatable tbody tr', form).length > 2)
    {
    var form = this.form;

    $(this).closest("tr").remove();
    }
    //setupFormValidation(form);
    });

    jQuery('.dOnly').live('keyup', function ()
    {
    this.value = this.value.replace(/[^0-9\.]/g,'');
    });
    });
    </script>
    <style>
    .dynatable {
    border: solid 1px #000;
    border-collapse: collapse;
    }
    .dynatable th,
    .dynatable td {
    background-color:#ccc;
    font-size:14px;
    font-color:#ffffff;
    font-family:Calibri;
    }
    .dynatable .prototype {

    }
    label.error
    {
    display: block;
    color:red;
    }

    td { vertical-align: top; }

    </style>
    </head>
    <body>
    <form action="" method="post" name="form1" enctype="multipart/form-data" id="form1" >

    <table id="table1">
    <tr>

    <td>
    Route Nameinput class="required text" type="text" name="routeName" id="routeName" value="" />

    </td>

    </tr>
    </table>
    <table class="dynatable" id="dynamicRow">
    <thead>
    <tr>
    <th>ID</th>
    <th>Location From</th>
    <th>Event From</th>
    <th>Location To</th>
    <th>Event To</th>
    <th><button class="add">Add</button></th>
    </tr>
    </thead>
    <tbody>
    <tr class="prototype">

    <td><input type="text" name="id[<?=$count;?>]" value="0" /></td>

    <?php
    $selectQuery1 ="Select tblLocationFrom.locationFromID,tblLocationFrom.locationFrom From tblLocationFrom";
    $result1 = mysql_query($selectQuery1);
    $n1 = mysql_num_rows($result1);

    echo "<td><select class='required' id='locationFrom[]' name='locationFrom[]' >";
    echo "<option value=''>-Select Location From-</option>";
    if($n1>0)
    {
    while($row1 = mysql_fetch_array($result1, MYSQL_ASSOC))
    {
    echo "<option value=".$row1['locationFromID'].">".$row1['locationFrom']."</option>";
    }
    }
    echo "</select>
    </td>";
    ?>


    <?
    $selectQuery2 ="Select tblLocationEvent.locationEventID,tblLocationEvent.locationEvent From tblLocationEvent";
    $result2 = mysql_query($selectQuery2);
    $n2 = mysql_num_rows($result2);

    echo "<td><select class='select' id='eventFrom[]' name='evenyFrom[]' >";
    echo "<option value=0>-Select Event From-</option>";
    if($n2>0)
    {
    while($row2 = mysql_fetch_array($result2, MYSQL_ASSOC))
    {
    echo "<option value=".$row2['locationEventID'].">".$row2['locationEvent']."</option>";
    }
    }
    echo "</select>
    <div id='labelEventFromError[]'></div>
    </td>";

    $selectQuery3 ="Select tblLocationTo.locationToID,tblLocationTo.locationTo From tblLocationTo";
    $result3 = mysql_query($selectQuery3);
    $n3 = mysql_num_rows($result3);

    echo "<td><select class='select' id='locationFrom[]' name='locationFrom[]' >";
    echo "<option value=0>-Select Location From-</option>";
    if($n3>0)
    {
    while($row3 = mysql_fetch_array($result3, MYSQL_ASSOC))
    {
    echo "<option value=".$row3['locationToID'].">".$row3['locationTo']."</option>";
    }
    }
    echo "</select>
    <div id='labelLocationToError[]'></div>
    </td>";


    $selectQuery4 ="Select tblLocationEvent.locationEventID,tblLocationEvent.locationEvent From tblLocationEvent";
    $result4 = mysql_query($selectQuery4);
    $n4 = mysql_num_rows($result4);

    echo "<td><select class='select' id='eventTo[]' name='evenyTo[]' >";
    echo "<option value=0>-Select Event From-</option>";
    if($n4>0)
    {
    while($row4 = mysql_fetch_array($result4, MYSQL_ASSOC))
    {
    echo "<option value=".$row4['locationEventID'].">".$row4['locationEvent']."</option>";
    }
    }
    echo "</select>
    <div id='labelEventToError[]'></div>
    </td>";


    ?>


    <td><button class="remove">Remove</button>
    </tr>
    <tr>

    <td><input type="text" name="id[<?=$count;?>]" value="0" /></td>

    <?php
    $selectQuery1 ="Select tblLocationFrom.locationFromID,tblLocationFrom.locationFrom From tblLocationFrom";
    $result1 = mysql_query($selectQuery1);
    $n1 = mysql_num_rows($result1);

    echo "<td><select class='required' id='locationFrom[]' name='locationFrom[]' >";
    echo "<option value=''>-Select Location From-</option>";
    if($n1>0)
    {
    while($row1 = mysql_fetch_array($result1, MYSQL_ASSOC))
    {
    echo "<option value=".$row1['locationFromID'].">".$row1['locationFrom']."</option>";
    }
    }
    echo "</select>
    </td>";
    ?>


    <?
    $selectQuery2 ="Select tblLocationEvent.locationEventID,tblLocationEvent.locationEvent From tblLocationEvent";
    $result2 = mysql_query($selectQuery2);
    $n2 = mysql_num_rows($result2);

    echo "<td><select class='select' id='eventFrom[]' name='evenyFrom[]' >";
    echo "<option value=0>-Select Event From-</option>";
    if($n2>0)
    {
    while($row2 = mysql_fetch_array($result2, MYSQL_ASSOC))
    {
    echo "<option value=".$row2['locationEventID'].">".$row2['locationEvent']."</option>";
    }
    }
    echo "</select>
    <div id='labelEventFromError[]'></div>
    </td>";

    $selectQuery3 ="Select tblLocationTo.locationToID,tblLocationTo.locationTo From tblLocationTo";
    $result3 = mysql_query($selectQuery3);
    $n3 = mysql_num_rows($result3);

    echo "<td><select class='select' id='locationFrom[]' name='locationFrom[]' >";
    echo "<option value=0>-Select Location From-</option>";
    if($n3>0)
    {
    while($row3 = mysql_fetch_array($result3, MYSQL_ASSOC))
    {
    echo "<option value=".$row3['locationToID'].">".$row3['locationTo']."</option>";
    }
    }
    echo "</select>
    <div id='labelLocationToError[]'></div>
    </td>";


    $selectQuery4 ="Select tblLocationEvent.locationEventID,tblLocationEvent.locationEvent From tblLocationEvent";
    $result4 = mysql_query($selectQuery4);
    $n4 = mysql_num_rows($result4);

    echo "<td><select class='select' id='eventTo[]' name='evenyTo[]' >";
    echo "<option value=0>-Select Event From-</option>";
    if($n4>0)
    {
    while($row4 = mysql_fetch_array($result4, MYSQL_ASSOC))
    {
    echo "<option value=".$row4['locationEventID'].">".$row4['locationEvent']."</option>";
    }
    }
    echo "</select>
    <div id='labelEventToError[]'></div>
    </td>";


    ?>


    <td><button class="remove">Remove</button>
    </tr>


    </tbody>
    </table>
    <input class="buttons" type="Submit" name="Submit" value="Submit">
    </form>
    </body>
    </html>

  20. #70
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    The next thing I need your help is about validating the first row and last row both locationFrom and locationTo is the same value.
    That's where you would use an onchange event on each select box. Whenver it changesd, it sets the value of the other select boxes that are related to it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #71
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    How to specifically set the onchange just to the first row? I am not sure how to start on that?

  22. #72
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Well typically you would make use of the :first selector and .change()
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #73
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Can I do like this? Please correct me. Is it mean to the be the first tr?

    $("table.dynatable tbody tr first").onchange()
    {


    }

  24. #74
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Take a look at the page I linked to to learn about how to use the :first selector, and likewise for the change method.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #75
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I tried like like this. I am trying to get the first row and second td?


    $("table.dynatable tr first td second").change( function()
    {
    alert("On change first locationFrom Column");
    }
    );


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •