Store Array Input Form to Javascript

Question

I have a HTML form like this:

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

And a JavaScript like this:

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

That each input form stored to javascript variables. If I have an array input form like this:

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

How to pass it? I usually use name="data[]" in input form, but I want to pass it using javascript.

I would suggest, using class as target attribute like class="form-control 1st_name" and then from javascript $(".1st_name").val(""); I hope that helps. — sT0n3, Jan 22 '17 at 15:52
http://stackoverflow.com/questions/19529443/jquery-get-input-array-field — Renjith V R, Jan 22 '17 at 15:53
I mean an input type contains array, how to store to javascript variables? I try Renjith way, but didn't work :'( — Raissa Ditya Putri, Jan 22 '17 at 15:59

x01saa · Answer 1 · 2017-01-22T17:10:05.417

Check it, It seems to be a true solution:(replace with your scripts)

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

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

score 0 · Answer 2 · answered Jan 22 '17 at 18:15

first of all you need on change or on click button to send action receive by javascript as my given cod may help you help you

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

Store Array Input Form to Javascript

2 Answers2