Save inputs in array and display all item jquery\ javascript -
i beginner in jquery. want input value of form in array = (item 01, item 02 , and) save ..
it should show items in table?
what have done , not work:
<form id="form_id"> <label for="firstname">first name:</label> <input type="text" id="firstname" name="name" value="" placeholder="max" required="required" autofocus="autofocus" /> <label for="lastname">last name:</label> <input type="text" id="lastname" name="name" value="" placeholder="max" required="required" autofocus="autofocus" /> <input type="submit" value="submit" id="submit-button" /> </form> <div id="table"> <h2>list of person</h2> <table class="footable"> <thead> <tr> <th data-class="expand"> first name </th> <th> last name </th> </tr> </thead> <tbody> <tr> <td>e.g --> array[1].firstname</td> <td>e.g --> array[1].lastname</td> </tr> </tbody> </table> </div>
the javascript code:
$(function() { $('#submit-button').click(function() { var forminputs = new array(); //get form id var id = $(this).parent().attr('id'); $('#' + id + ' input').each(function() { //get input value var inputvalue = $(this).val(); //get input id var inputid = $(this).attr('id'); //add them array forminputs[inputid] = inputvalue; }); show.... }); });
try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#submit-button").click(function(){ var data = $('#form_id').serializearray(); var obj = {}; (var = 0, l = data.length; < l; i++) { obj[data[i].name] = data[i].value; } $('table.footable tbody').append('<tr><td>'+obj['firstname']+'</td><td>'+obj['lastname']+'</td></tr>'); $("#firstname").val(''); $("#lastname").val(''); }) }) </script> <form id="form_id"> <label for="firstname">first name:</label> <input type="text" id="firstname" name="firstname" value="" placeholder="max" required="required" autofocus="autofocus" /> <label for="lastname">last name:</label> <input type="text" id="lastname" name="lastname" value="" placeholder="max" required="required" autofocus="autofocus" /> <input type="button" value="submit" id="submit-button" /> </form> <div id="table"> <h2>list of person</h2> <table class="footable"> <thead> <tr> <th data-class="expand"> first name </th> <th> last name </th> </tr> </thead> <tbody> </tbody> </table> </div>
Comments
Post a Comment