Save inputs in array and display all item jquery\ javascript

Question

I am a beginner in jQuery. I want all my input value of my form in an array = (item 01, item 02 and and) save ..

It should show items in a table?

What I have done and it does 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 all 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 the form ID
        var id = $(this).parent().attr('id');
        $('#' + id + ' input').each(function() {
            //Get the input value
            var inputValue = $(this).val();
            //Get the input id
            var inputId = $(this).attr('id');
            //Add them to the array
            formInputs[inputId] = inputValue;
        });

        show....
    });
});

There aren't any inputs on that form, can you show us the actual HTML (or a section of it, if it's very large)? — Anthony Grist
– Anthony Grist, Commented Apr 18, 2013 at 12:34

Dau · Accepted Answer · 2013-04-18 12:53:45Z

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 = {};
      for (var i = 0, l = data.length; i < 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 all person</h2>
<table class="footable">
    <thead>
        <tr>
            <th data-class="expand"> First Name </th>
            <th> Last Name </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>

Xotic750 · Accepted Answer · 2013-04-18 13:03:37Z

This should 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="button" value="submit" id="submit-button" />
</form>
<div id="table">

<h2>List of all person</h2>

    <table class="footable">
        <thead>
            <tr>
                <th data-class="expand">First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

var names = [],
    tbody = $("#table tbody");

function getInfo(e) {
    var nameObj = {
        first: e.target.form[0].value,
        last: e.target.form[1].value
    };

    names.push(nameObj);

    e.target.form[0].value = "";
    e.target.form[1].value = "";
    tbody.empty();

    names.forEach(function (name) {
        var tr = $("<tr>");

        tr.append($("<td>").text(name.first));
        tr.append($("<td>").text(name.last));

        tbody.append(tr);
    });
}

$("#submit-button").on("click", getInfo);

On jsfiddle

Collectives™ on Stack Overflow

Save inputs in array and display all item jquery\ javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related