从表单获取输入值：JavaScript

Question

我有一个像这样的动态表格：

我怎样才能像这样分别给每个成年人一个变量：

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

我在Ajax中提交了表单，因此我需要将此数据序列化。 我定义了类add_pax_adult_x，并且x是每个成人的人数。 我下面有这段代码。 一切正常，我可以返回数据，但是我需要返回如上所述的这种格式。

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

Answer 1

您说需要对数据进行序列化，如果您很幸运，只需使用<form Element>.serialize()方法即可。

即你有这种形式

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

在您的脚本中，只需执行此操作

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

瞧，现在已经以标准AJAX表示法序列化了。

Answer 2

试试下面的代码

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