javascript - 从表单 : JavaScript 获取输入值

标签 javascript jquery ajax

我有一个像这样的动态表单:

enter image description here

我怎样才能让每个成年人像这样分别进入变量:

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

最佳答案

试试下面的代码

<?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 - 从表单 : JavaScript 获取输入值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49214302/

上一篇：javascript - React Native - 如何在 onPress 一项时隐藏数组中的其他项目？

下一篇：javascript - Object.assign 递归不按预期工作

相关文章：

javascript - 无法发布复杂对象

javascript - "$variable"和 "variable"之间有什么区别 - JavaScript - jQuery

javascript - 类似 Jinja 的 JS 模板语言

javascript - 点击DIV或A标签激活JS功能

javascript - 我可以在带有 phonegap 的移动设备上使用 html5 拖放吗？

javascript - node.js:异步回调值

javascript - enter() 选择上的 extra select() 究竟做了什么？

javascript - 使用 jquery 在 TinyMCE 文本区域中选择一个范围

javascript - 防止在表单提交后重定向到 php 文件

javascript - 如何以更高效、更有用的方式在 jQuery 中创建多个 ajax 调用

©2024 IT工具网  联系我们