Question

我有一个动态表单，如图所示：

如何让每个成年人分别变量如下：

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

我在Ajax中提交表单，所以我需要序列化这些数据。我定义了类add_pax_adult_x，x是每个成年人的数量。我在下面有这个代码。每一个都可以，我可以返回数据，但我需要按照我的提法返回这种格式。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你说你需要序列化数据，你很幸运，只需使用<form Element>.serialize()方法。

即。你有这个表格

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

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

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

Voila，它现在以标准的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>

从表单获取输入值：JavaScript

2 个答案: