Get inputs values from a form : JavaScript

Question

I have a dynamic form Like this in image :

How can I get each adult separately in variable like this :

[["Mr.","aa","bb"],["Mrs","cc","dd"],["Dr.","ee","ff"]]

I submit the form in Ajax, so I need this data serialized. I defined class add_pax_adult_x and x is the number of each adult. I have this code below. every this is ok and I can return the data but I need to return this format as I mentioned.

$(document).on('submit','#passenger_details_form',function(event){

var toatalAdults = [];
        var adultsPax  = [];
        for(var x=1; x<=$('#adults').val(); x++){
            var inputs = $(".add_pax_adult_"+x);

            for(var i = 0; i < inputs.length; i++){
                adultsPax.push($(inputs[i]).val())
            }
            toatalAdults.push(adultsPax);

        }

        alert(toatalAdults);

});

<div class="col-sm-5 adultsDiv" style="padding-left: 0">
               
                        <select id="adults" required="" class="form-control adults" name="no_of_adults">
                            
                        <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select>
                    </div>
     <div class="col-sm-12" >
    
                    <div class="row passengerDetailsAdults">
    
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Adult 1</label>
                                <select id="pax_title" name="pax_title[]" class="form-control pax_title add_pax_adult_1">
                                    <option value="Mr." selected="">Mr.</option>
                                    <option value="Mrs">Mrs</option>
                                    <option value="Ms.">Ms.</option>
                                    <option value="Miss">Miss</option>
                                    <option value="Dr.">Dr.</option>
                                    <option value="Prof.">Prof.</option>
                                    <option value="Sir">Sir</option>
                                    <option value="Lady">Lady</option>
                                    <option value="">--</option>
                                </select>
                            </div>
    
                            <div class="form-group">
                                <label class="control-label">First Name *</label>
                                <input type="text" value="" maxlength="100" class="form-control adult_fname add_pax_adult_1" name="adult_fname[]" id="adult_fname" required>
                            </div>
    
                            <div class="form-group">
                                <label class="control-label">Last Name *</label>
                                <input type="text" value="" maxlength="100" class="form-control adult_lname add_pax_adult_1" name="adult_lname[]" id="adult_lname" required>
                                
                                             <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Adult 2</label>
                                <select id="pax_title" name="pax_title[]" class="form-control pax_title add_pax_adult_2">
                                    <option value="Mr." selected="">Mr.</option>
                                    <option value="Mrs">Mrs</option>
                                    <option value="Ms.">Ms.</option>
                                    <option value="Miss">Miss</option>
                                    <option value="Dr.">Dr.</option>
                                    <option value="Prof.">Prof.</option>
                                    <option value="Sir">Sir</option>
                                    <option value="Lady">Lady</option>
                                    <option value="">--</option>
                                </select>
                            </div>
    
                            <div class="form-group">
                                <label class="control-label">First Name *</label>
                                <input type="text" value="" maxlength="100" class="form-control adult_fname add_pax_adult_2" name="adult_fname[]" id="adult_fname" required>
                            </div>
    
                            <div class="form-group">
                                <label class="control-label">Last Name *</label>
                                <input type="text" value="" maxlength="100" class="form-control adult_lname add_pax_adult_2" name="adult_lname[]" id="adult_lname" required>
                            </div>
                            </div>
                            
                            
                                         <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Adult 3</label>
                                <select id="pax_title" name="pax_title[]" class="form-control pax_title add_pax_adult_3">
                                    <option value="Mr." selected="">Mr.</option>
                                    <option value="Mrs">Mrs</option>
                                    <option value="Ms.">Ms.</option>
                                    <option value="Miss">Miss</option>
                                    <option value="Dr.">Dr.</option>
                                    <option value="Prof.">Prof.</option>
                                    <option value="Sir">Sir</option>
                                    <option value="Lady">Lady</option>
                                    <option value="">--</option>
                                </select>
                            </div>
    
                            <div class="form-group">
                                <label class="control-label">First Name *</label>
                                <input type="text" value="" maxlength="100" class="form-control adult_fname add_pax_adult_3" name="adult_fname[]" id="adult_fname" required>
                            </div>
    
                            <div class="form-group">
                                <label class="control-label">Last Name *</label>
                                <input type="text" value="" maxlength="100" class="form-control adult_lname add_pax_adult_3" name="adult_lname[]" id="adult_lname" required>

You can use `document.querySelector('...')` to select and read the values from the inputs. — Marco, Mar 10 '18 at 21:41
Also to answer this question completely you need to post the markup of the form. — Marco, Mar 10 '18 at 21:43
My form is so so big and this is a part from my from, I use selector and can get data but I need the format like this in my question — Jsparo30, Mar 10 '18 at 21:45
Possible duplicate of [Send form data using ajax](https://stackoverflow.com/questions/21662836/send-form-data-using-ajax) — Toleo, Mar 10 '18 at 21:49
each adult attribute add different `class` and index to group, then select `class` to array ?? — Heng Lin, Mar 10 '18 at 21:58
You need to change your field names to something like this name="data[0]['adult_fname']".... notice the "0"... each person will have their own index... fiddle https://jsfiddle.net/opyms7h4/1/ — VVV, Mar 10 '18 at 22:16

score 1 · Answer 1 · answered Mar 10 '18 at 22:00

1

You say you need the data serialized, well you're in luck, just use the <form Element>.serialize() method.

i.e. You have this form

<form id="myForm">
    ...
</form>

In your script, just do this

var serialized=$("$myForm").serialize();

Voila, it is now serialized in standard AJAX notation.

answered Mar 10 '18 at 22:00

Ben

2,200
20
30

I updated my question. I used serialize. But this is not my problem. please read the question again. THX – Jsparo30 Mar 10 '18 at 22:05

score 1 · Accepted Answer · answered Mar 11 '18 at 12:33

Try below code

<?php if(isset($_GET['task']) && $_GET['task'] == 'send'){
$request = [];
foreach($_POST['pax_title'] as $k=>$pax_title){
    $request []=[$pax_title,$_POST['adult_fname'][$k],$_POST['adult_lname'][$k]];
}
print_r($request);exit(); } ?> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Passenger reservation</h1>
<b>Adult :: </b><select class="form-control" id="number_adult">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<hr>
<form action="index.php" method="post" id="passenger_details_form" class="form-inline">
      <div id="form_data">
        <div class="row">
        <div class="col-md-4">
          <div class="form-group">
            <label class="control-label">Adult 1</label>
            <select id="pax_title" name="pax_title[]" class="form-control">
                <option value="Mr." selected="">Mr.</option>
                <option value="Mrs">Mrs</option>
                <option value="Ms.">Ms.</option>
                <option value="Miss">Miss</option>
                <option value="Dr.">Dr.</option>
                <option value="Prof.">Prof.</option>
                <option value="Sir">Sir</option>
                <option value="Lady">Lady</option>
                <option value="">--</option>
            </select>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label class="control-label">First Name *</label>
            <input type="text" maxlength="100" class="form-control" name="adult_fname[]" id="adult_fname" required>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label class="control-label">Last Name *</label>
            <input type="text" maxlength="100" class="form-control" name="adult_lname[]" id="adult_lname" required>
          </div>
        </div>
      </div>
      </div>
      <hr>
      <button type="submit" class="btn btn-primary">Save</button>
</form>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="">
$(document).ready(function(){
    $('#number_adult').on('change',function(){
        for(var i=0;i<$(this).val();i++){
            var num = parseInt($('#form_data').children().length)+1;
            $('#form_data').append('<div class="row"><div class="col-md-4"><div class="form-group"><label class="control-label">Adult '+num+'</label> <select id="pax_title" name="pax_title[]" class="form-control"><option value="Mr." selected="">Mr.</option><option value="Mrs">Mrs</option><option value="Ms.">Ms.</option><option value="Miss">Miss</option><option value="Dr.">Dr.</option><option value="Prof.">Prof.</option><option value="Sir">Sir</option><option value="Lady">Lady</option><option value="">--</option></select></div></div><div class="col-md-4"><div class="form-group"><label class="control-label">First Name *</label> <input type="text" maxlength="100" class="form-control" name="adult_fname[]" id="adult_fname" required></div></div><div class="col-md-4"><div class="form-group"><label class="control-label">Last Name *</label> <input type="text" maxlength="100" class="form-control" name="adult_lname[]" id="adult_lname" required></div></div></div>');
        }
    });
    $(document).on('submit','#passenger_details_form',function(event){
        var serialized=$("#passenger_details_form").serialize();
        $.ajax({
          method: "POST",
          url: "index.php?task=send",
          data: serialized
        })
          .done(function( msg ) {
            alert( "Data Saved: " + msg );
          });
        event.preventDefault();
        return false;
    });
});
</script>

Get inputs values from a form : JavaScript

2 Answers2