存儲陣列輸入表單爲Javascript

我有一個HTML表單是這樣的：存儲陣列輸入表單爲Javascript

<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傳遞它。

來源

2017-01-22 Raissa Ditya Putri

'id'是什麼意思？ ID應該是唯一的。 –

我會建議，使用class作爲目標屬性，如class =「form-control 1st_name」，然後從javascript $（「。1st_name」）。val（「」）;我希望有所幫助。 – sT0n3

http://stackoverflow.com/questions/19529443/jquery-get-input-array-field –

檢查它，它似乎是一個真正的解決辦法:(與腳本）

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

來源

2017-01-22 16:29:28 x01saa

首先你需要在改變或點擊按鈕發送動作通過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(); 
});

來源

2017-01-22 18:15:49

存儲陣列輸入表單爲Javascript

回答

相關問題