reload html table on form submit

Question

I have a form that when submitted shows a table with different data (ajax request to php file) depending on the user's input. Is there a way for me to dynamically reload the table with new information each time the user submits the form? As of now, the data keeps appending to the table after each submit and keeps adding on to the last submit data. Any suggestions would be greatly appreciated, thanks!

HTML

<form id = "infoForm" 
action="file.php" method="post">
    <b>Enter info:</b> <input type = "text" name = "info" 
id = "infoInput" maxlength = "10" required >
     <button type = "submit" id = "submit_form">Submit</button>
 </form>
 <table id = "infoTable">
     <tbody>
         <tr>
             <th>Name</th>
             <th>Number</th>
         </tr>
     </tbody>
 </table>

JavaScript

$("#infoForm").submit(function() { 
    $("#infoTable").fadeIn(400);

    //InputData is an array that contains the user input data
    $.post( "file.php", InputData,
        function( data ){

            var names = data.names; //from PHP file
            var numbers = data.numbers; //from PHP file


            var namesArray = names.split(',');
            var numbersArray = numbers.split(',');
            for(var i = 0; i < namesArray.length; i++) {
              $("#infoTable > tbody").append('<tr><td>'+namesArray[i]+'</td><td>'+numbersArray[i]+'</td></tr>');
          }


    }, "json");
    return false;

});

Also, would it not make more sense to return the `names` and `numbers` values as arrays within the JSON instead of strings which you then need to manually split? — Rory McCrossan, Aug 23 '18 at 14:54
@RoryMcCrossan Yes, you're right about returning those values as arrays. Thank you for your help! — ski11s, Aug 23 '18 at 15:01
@ski11s - take a look at this Stackoverflow question and answer, it might help you make this solution better: https://stackoverflow.com/questions/18673860/defining-a-html-template-to-append-using-jquery — Chris, Aug 23 '18 at 15:03

score 0 · Accepted Answer · answered Aug 23 '18 at 14:54

0

You need to clean the tbody then append the new records.

Try this:

$("#infoForm").submit(function() { 
    $("#infoTable").fadeIn(400);

    //InputData is an array that contains the user input data
    $.post( "file.php", InputData,
        function( data ){

            var names = data.names; //from PHP file
            var numbers = data.numbers; //from PHP file


            var namesArray = names.split(',');
            var numbersArray = numbers.split(',');
            $("#infoTable > tbody").empty(); // clean the tbody before adding new data
            for(var i = 0; i < namesArray.length; i++) {
              $("#infoTable > tbody").append('<tr><td>'+namesArray[i]+'</td><td>'+numbersArray[i]+'</td></tr>');
          }


    }, "json");
    return false;

});

answered Aug 23 '18 at 14:54

ThS

4,597
2
15
27

This is no way different from what is written in comment, infact the solution provided in comment is better because that is using chaining – brk Aug 23 '18 at 14:57
chaining ? where do you see it ? in fact you must empty the table body before entering the `for` loop. – ThS Aug 23 '18 at 14:58
He meant chaining by this `.empty() before the append()` which translates to `$("#infoTable > tbody").empty().append(rest of the code)` – brk Aug 23 '18 at 15:00
but if you do such in the loop, the tbody will continuously remove the records present in it and finally one row will be added in the end. – ThS Aug 23 '18 at 15:01
@brk I meant generally before the `append()`. If you do it in the `for` loop then you'll only see the last record appended. This answer is correct. – Rory McCrossan Aug 23 '18 at 15:02
You dont need to do it inside loop. Inside loop you can create the dom element and append it at one shot – brk Aug 23 '18 at 15:03
@ths your answer worked perfectly for me. Thank you for your help! – ski11s Aug 23 '18 at 15:03
`let someVar =''; for(var i = 0; i < namesArray.length; i++) { someVar += $(''+namesArray[i]+''+numbersArray[i]+''); } $("#infoTable > tbody").empty().append(someVar)` I guess in this case the dom will be accessed only once .Accessing dom is a costly process – brk Aug 23 '18 at 15:05
@ski11s glad that helps. – ThS Aug 23 '18 at 15:05
@brk that do the same as I done. I don't see any changes. Keep it simple, simplicity do the beauty. – ThS Aug 23 '18 at 15:07
1

You are accessing dom `namesArray.length-1` times – brk Aug 23 '18 at 15:08

reload html table on form submit

1 Answers1