Question

我是jQuery的初学者。我希望我的表单的所有输入值都在一个数组=（项目01，项目02和和）中保存..

它应该在表格中显示项目吗？

我做了什么并且不起作用：

<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>

Javascript代码：

  $(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....
    });
});

Answer 1

试试这个

 <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>

Answer 2

这应该有效

<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);

在jsfiddle

上

将输入保存在数组中并显示所有项jquery \ javascript

2 个答案: