从表单数据填充数据表

Question

I am looking to populate a data table from the data input into the form but not having any joy...

When I press submit it clears the form and returns to top of screen but does not populate the table

A scaled-down version of the code:

  
 
  
  
  
 
   
 
    
$(document).ready(function() {
  

  		var t = $('#job-table').DataTable();
  		var counter = 1;

  		$('#submit').on('click', function() {
		var text1 = $(".add-company").val();
	    var text2 = $(".add-contact").val();
	    var text3 = $(".add-from").val();
	    var text4 = $(".add-to").val();
	    var text5 = $(".add-driver").val();
	    var text6 = $(".add-income").val();
	    var text7 = $(".add-payment").val();
	    t.row.add([
		    text1,
		    text2,
		    text3,
		    text4,
		    text5,
		    text6,
		    text7
		]).draw(false);

		counter++;
  		});

  		// Automatically add a first row of data
  		$('#submit').click();
});
 
   
 
  

The jQuery, as far as I can tell is correct so unsure what is stopping the table from populating.

Any help would be amazing

Answer 1

You have two possibilities:

1. change the type submit to button for your submit button
2. prevent default action (form submission): e.preventDefault() :

Moreover, I would suggest to change how to trigger events in jQuery:

from: $('#submit').click();

to: $('#submit').trigger('click');

The snippet:

 var t = $('#job-table').DataTable(); var counter = 1; $('#submit').on('click', function(e) { e.preventDefault(); var text1 = $(".add-company").val(); var text2 = $(".add-contact").val(); var text3 = $(".add-from").val(); var text4 = $(".add-to").val(); var text5 = $(".add-driver").val(); var text6 = $(".add-income").val(); var text7 = $(".add-payment").val(); t.row.add([ text1, text2, text3, text4, text5, text6, text7, 0, 0 ]).draw(false); counter++; }); // Automatically add a first row of data $('#submit').trigger('click'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"> <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <div class="tile" id="tile-1"> <div class="addjob tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <h2>Add info</h2> <form name="dataform" method="post"> <span> <p>Date:</p> <input class="add-date" type="date" placeholder="Placeholder Text"> </span> <span> <p>Customer/Company Name:</p> <input class="add-company" type="select" placeholder="Company-name Ltd" value="1"> </span> <span> <p>Contact Name:</p> <input class="add-contact" type="text" placeholder="John Doe" value="2"> </span> <span> <p>From:</p> <input class="add-from" type="text" placeholder="Address 1" value="3"> </span> <span> <p>To:</p> <input class="add-to" type="text" placeholder="Address 2" value="4"> </span> <span> <p>subbie Name:</p> <input class="add-driver" type="select" placeholder="Driver Name (Company)" value="5"> </span> <span> <p>Income (£):</p> <input class="add-income" type="text" placeholder="£120" value="6"> </span> <span> <p>subbie Payment (£):</p> <input class="add-payment" type="text" placeholder="£100" value="7"> </span> <span> <p>Driver Vat registered?</p> <input class="add-payment" type="text" placeholder="Yes/No" value="8"> </span> <span> <button id="submit" type="submit" value="submit">Submit</button> </span> </form> </div> <div class="viewalljob"> <h2>Job</h2> <table id="job-table" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Company Name</th> <th>Contact</th> <th>From</th> <th>To</th> <th>subbie</th> <th>Income (£)</th> <th>subbiePayment (£)</th> <th>Profit (£)</th> <th>Markup (%)</th> </tr> </thead> <tbody> </tbody> </table> </div> </div>