将数组输入表单存储到 Javascript答案

【问题标题】：Store Array Input Form to Javascript将数组输入表单存储到 Javascript
【发布时间】：2017-01-23 03:00:20
【问题描述】：

我有一个这样的 HTML 表单：

<div class="form-group">
    <label for="first_name">1st Name</label>
    <input type="text" id="first_name" placeholder="First Name" class="form-control"/>
</div>

<div class="form-group">
    <label for="last_name">Last Name</label>
    <input type="text" id="last_name" placeholder="Last Name" class="form-control"/>
</div>

<div class="form-group">
    <label for="email">Email</label>
    <input type="text" id="email" placeholder="Email Address" class="form-control"/>
</div>

还有这样的 JavaScript：

function addRecord() {
// get values
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var email = $("#email").val();

// Add record
$.post("ajax/addRecord.php", {
    first_name: first_name,
    last_name: last_name,
    email: email
}, function (data, status) {
    // close the popup
    $("#add_new_record_modal").modal("hide");

    // read records again
    readRecords();

    // clear fields from the popup
    $("#first_name").val("");
    $("#last_name").val("");
    $("#email").val("");
});}

表示将每个输入表单存储到 javascript 变量中。如果我有这样的数组输入形式：

<div class="form-group">
    <label for="first_name">1st Name</label>
    <input type="text" id="data[]" placeholder="First Name" class="form-control"/>
</div>

<div class="form-group">
    <label for="last_name">Last Name</label>
    <input type="text" id="data[]" placeholder="Last Name" class="form-control"/>
</div>

<div class="form-group">
    <label for="email">Email</label>
    <input type="text" id="data[]" placeholder="Email Address" class="form-control"/>
</div>

如何通过？我通常在输入表单中使用name="data[]"，但我想使用javascript传递它。

【问题讨论】：

id 是什么意思？ ID 应该是唯一的。
我建议，使用类作为目标属性，如 class="form-control 1st_name" 然后从 javascript $(".1st_name").val("");我希望这会有所帮助。
stackoverflow.com/questions/19529443/…
我的意思是输入类型包含数组，如何存储到javascript变量？我尝试了 Renjith 的方式，但没有成功:'(

标签： javascript jquery html ajax forms

【解决方案1】：

检查一下，这似乎是一个真正的解决方案：(用你的脚本替换)

<script>
function addRecord() {
    $.ajax({
        url: 'ajax/addRecord.php',
        type: 'post',
        data: $('form[name="data"]').serializeArray(),
        success: function(response){
            // close the popup
            $("#add_new_record_modal").modal("hide");

            // read records again
            readRecords();

            // clear fields from the popup
            $("#first_name").val("");
            $("#last_name").val("");
            $("#email").val("");
        }
    });
}
</script>

HTML 部分：

<form method="post">
    <div class="form-group">
        <label for="first_name">1st Name</label>
        <input type="text" name="data[]" placeholder="First Name" class="form-control"/>
    </div>

    <div class="form-group">
        <label for="last_name">Last Name</label>
        <input type="text" name="data[]" placeholder="Last Name" class="form-control"/>
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <input type="text" name="data[]" placeholder="Email Address" class="form-control"/>
    </div>
    <button onclick="addRecord();">submit</button>
</form>

【讨论】：

【解决方案2】：

首先，您需要更改或单击按钮以通过 javascript 发送操作接收因为我给的鳕鱼可能会帮助你

 <form id="contactForm1" action="/your_url" method="post">
     <input type="submit">
 </form>
 <script type="text/javascript">
     var frm = $('#contactForm1');
    frm.submit(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            alert('ok');
        }
    });

    ev.preventDefault();
});

【讨论】：