将数组输入表单存储到Javascript

时间:2017-01-22 15:44:12

标签: javascript jquery html ajax forms

我有一个像这样的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传递它。

2 个答案:

答案 0 :(得分:0)

检查一下,这似乎是一个真正的解决方案:(替换你的脚本

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

答案 1 :(得分:0)

首先你需要在更改或点击按钮发送动作接收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();
});