表单始终未正确提交值答案

【问题标题】：Form not submitting values correctly all the time表单始终未正确提交值
【发布时间】：2017-07-12 20:06:35
【问题描述】：

大家好，我对我创建的代码有疑问。它是一个依赖下拉选择的表单，因此当您选择某个下拉列表时，文本框/输入会发生变化。

现在我大部分时间都在工作，接下来我会解释。我有三个文件 form.php、JavaScript 文件和 formprocess.php 文件。我在 WordPress 上有这个表格，就像我说的那样，我大部分时间都在工作。如果您选择“已使用”，下拉选项为“新”和“已使用”，如果您选择“新”，它会直接进入已使用的表格，它会弹出另一个选项来选择租赁或购买，并且根据您选择的选项，将显示不同的表格。现在，在每个包含 USED、LEASED 和 PURCHASED 的 div 中，除了两个或三个不同的值之外，它们都具有相同的值。

因此，当我提交带有 USED 选择的表单时，我收到了填写所有字段的电子邮件，但是，当我选择租赁或购买时，有时我没有填写任何字段，有时我会收到其中一些字段发送电子邮件时。以下是下面的文件，我祈祷有人能看到我看不到的东西。

form.php (HTML 表单)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Offer Submission Form</title>
    <link rel="stylesheet" type="text/css" href="css/mystyle.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/newForm.js"></script>
  </head>

<body>
 <div class="form-style-10">

  <div class="inner-wrap">

   <form action="" method="post">

    <label>Dealership Name:<em class="required-star">*</em></label><input id="dealerName" name="dealerName" type="text" placeholder="Dealership Name" style="background-color: white;"/>

    <label>Which Marketing Medium?<em class="required-star">*</em></label><select id="market" type="select" name="marketing">
        <option id="market1" value="Facebook">Facebook</option>
        <option id="market2" value="Website Banner">Website Banner</option>
        <option id="market3" value="Radio">Radio</option>
        <option id="market4" value="TV">TV</option>
        <option id="market5" value="Email">Email</option>
        <option id="market6" value="Direct Mail">Direct Mail</option>
        <option id="market7" value="All Channels">All Channels</option>
    </select>

    <label>Offer Type?</label><select id="newused" type="select" name="offerType">
        <option id="option_1" value="New">New</option>
        <option id="option_2" value="Used">Used</option>
    </select>

<div id="new" style="display:none;">
    <label>Type of Purchase?</label><select id="newPick" type="select" name="typeOfPurchase">
        <option id="newPick_1" value="Purchased">Purchased</option>
        <option id="newPick_2" value="Leased">Leased</option>
    </select>
</div>

    <!--This div section is for when client select puchased as their new opiton....--->
    <div id="purchased" style="display:none;">
        <label>Start Date:<em class="required-star">*</em></label><input id="pur_startDate" name="startDate" type="text" placeholder="01/01/2012" style="background-color: white;"/>
        <label>End Date:<em class="required-star">*</em></label><input id="pur_endDate" name="endDate" type="text" placeholder="05/07/2015" style="background-color: white;"/>
        <label>Year:<em class="required-star">*</em></label><input id="pur_vehicleYear" name="yearOfVehicle" type="text" placeholder="Vehicle Year" style="background-color: white;"/>
        <label>Make:<em class="required-star">*</em></label><input id="pur_make" name="makeOfVehicle" type="text" placeholder="Make" style="background-color: white;"/>
        <label>Model:<em class="required-star">*</em></label><input id="pur_model" name="modelOfVehicle" type="text" placeholder="Model" style="background-color: white;"/>
        <label>Trim:<em class="required-star">*</em></label><input id="pur_trim" name="trimOfVehicle" type="text" placeholder="Trim of Vehicle" style="background-color: white;"/>
        <label>Model #:<em class="required-star">*</em></label><input id="pur_input_5" name="modelNumber" type="text" placeholder="14325" style="background-color: white;"/>
        <label>Stock #:<em class="required-star">*</em></label><input id="pur_input_5" name="stockNumber" type="text" placeholder="1234" style="background-color: white;"/>
        <label>MSRP:<em class="required-star">*</em></label><input id="pur_input_5" name="msrpNumber" type="text" placeholder="15995" style="background-color: white;"/>
        <label>Selling Price:<em class="required-star">*</em></label><input id="pur_input_5" name="sellingPrice" type="text" placeholder="12895" style="background-color: white;"/>
        <label>Down Payment:<em class="required-star">*</em></label><input id="pur_input_5" name="downPayment" type="text" placeholder="1000" style="background-color: white;"/>
        <label>$XXX/ Monthly Payment:<em class="required-star">*</em></label><input id="pur_input_5" name="monthlyPayment" type="text" placeholder="$198" style="background-color: white;"/>
        <label>Last 6 of VIN:<em class="required-star">*</em></label><input id="pur_input_5" name="lastVin" type="text" placeholder="123456" style="background-color: white;"/>
        <label>Rebate:</label><input id="pur_input_5" name="rebateInfo" type="text" placeholder="Rebate on Vehicle" style="background-color: white;"/>
        <label>APR:<em class="required-star">*</em></label><input id="pur_input_5" name="aprAmount" type="text" placeholder="ARP on Vehicle" style="background-color: white;"/>
        <label>Term:<em class="required-star">*</em></label><input id="pur_input_5" name="termOfVehicle" type="text" placeholder="Residual Payment on Vehicle" style="background-color: white;"/>
        <label>Other Notes(Rebate Info, Special Details etc):</label> <textarea id="pur_textArea" name="msg" placeholder="Notes" style="background-color: white;" rows=2></textarea>
    </div>

    <!--This div section is for when client select leased as their new opiton....--->
    <div id="leased" style="display:none;">
        <label>Start Date:<em class="required-star">*</em></label><input id="lsd_startDate" name="startDate" type="text" placeholder="01/01/2012" style="background-color: white;"/>
        <label>End Date:<em class="required-star">*</em></label><input id="lsd_endDate" name="endDate" type="text" placeholder="05/07/2015" style="background-color: white;"/>
        <label>Year:<em class="required-star">*</em></label><input id="lsd_vehicleYear" name="yearOfVehicle" type="text" placeholder="Vehicle Year" style="background-color: white;"/>
        <label>Make:<em class="required-star">*</em></label><input id="lsd_make" name="makeOfVehicle" type="text" placeholder="Make" style="background-color: white;"/>
        <label>Model:<em class="required-star">*</em></label><input id="lsd_model" name="modelOfVehicle" type="text" placeholder="Model" style="background-color: white;"/>
        <label>Trim:<em class="required-star">*</em></label><input id="lsd_trim" name="trimOfVehicle" type="text" placeholder="Trim of Vehicle" style="background-color: white;"/>
        <label>Model #:<em class="required-star">*</em></label><input id="lsd_model#" name="modelNumber" type="text" placeholder="14325" style="background-color: white;"/>
        <label>Stock #:<em class="required-star">*</em></label><input id="lsd_stock#" name="stockNumber" type="text" placeholder="1234" style="background-color: white;"/>
        <label>MSRP:<em class="required-star">*</em></label><input id="lsd_msrp" name="msrpNumber" type="text" placeholder="$15,995" style="background-color: white;"/>
        <label>Selling Price:<em class="required-star">*</em></label><input id="lsd_selling_price" name="sellingPrice" type="text" placeholder="12895" style="background-color: white;"/>
        <label>Down Payment:<em class="required-star">*</em></label><input id="lsd_down_payment" name="downPayment" type="text" placeholder="1000" style="background-color: white;"/>
        <label>$XXX/ Monthly Payment:<em class="required-star">*</em></label><input id="lsd_monthly_payment" name="monthlyPayment" type="text" placeholder="198" style="background-color: white;"/>
        <label>Last 6 of VIN:<em class="required-star">*</em></label><input id="lsd_vin" name="lastVin" type="text" placeholder="123456" style="background-color: white;"/>
        <label>Rebate:</label><input id="lsd_rebate" name="rebateInfo" type="text" placeholder="Rebate on Vehicle" style="background-color: white;"/>
        <label>Term:<em class="required-star">*</em></label><input id="lsd_term" name="termOfVehicle" type="text" placeholder="ARP on Vehicle" style="background-color: white;"/>
        <label>Residual Value:<em class="required-star">*</em></label><input id="lsd_residual_value" name="residualValue" type="text" placeholder="Residual Payment on Vehicle" style="background-color: white;"/>
        <label>Miles Per Year:<em class="required-star">*</em></label><input id="lsd_miles_year" name="milesPerYear" type="text" placeholder="Residual Payment on Vehicle" style="background-color: white;"/>
        <label>Other Notes(Rebate Info, Special Details etc):</label> <textarea id="lsd_textArea" name="msg" placeholder="Notes" style="background-color: white;" rows=2></textarea>
    </div>

    <!-- IF users picks USED it will go to this section of the form...-->
    <div id="used" style="display:none;">
        <label>Start Date:<em class="required-star">*</em></label><input id="fin_startDate" name="startDate" type="text" placeholder="01/01/2012" style="background-color: white;"/>
        <label>End Date:<em class="required-star">*</em></label><input id="fin_endDate" name="endDate" type="text" placeholder="05/07/2015" style="background-color: white;"/>
        <label>Year:<em class="required-star">*</em></label><input id="fin_vehicleYear" name="yearOfVehicle" type="text" placeholder="Vehicle Year" style="background-color: white;"/>
        <label>Make:<em class="required-star">*</em></label><input id="fin_make" name="makeOfVehicle" type="text" placeholder="Make" style="background-color: white;"/>
        <label>Model:<em class="required-star">*</em></label><input id="fin_model" name="modelOfVehicle" type="text" placeholder="Model" style="background-color: white;"/>
        <label>Trim:</label><input id="fin_trim" name="trimOfVehicle" type="text" placeholder="Trim of Vehicle" style="background-color: white;"/>
        <label>Stock #:<em class="required-star">*</em></label><input id="fin_input_5" name="stockNumber" type="text" placeholder="1234" style="background-color: white;"/>
        <label>Selling Price:<em class="required-star">*</em></label><input id="fin_input_5" name="sellingPrice" type="text" placeholder="12895" style="background-color: white;"/>
        <label>Down Payment:<em class="required-star">*</em></label><input id="fin_input_5" name="downPayment" type="text" placeholder="1000" style="background-color: white;"/>
        <label>APR:<em class="required-star">*</em></label><input id="fin_input_5" name="aprAmount" type="text" placeholder="ARP on Vehicle" style="background-color: white;"/>
        <label>Term:<em class="required-star">*</em></label><input id="used_term" name="termOfVehicle" type="text" placeholder="" style="background-color: white;"/>
        <label>Other Notes(Rebate Info, Special Details etc):</label><textarea id="fin_textArea" name="msg" placeholder="Notes" style="background-color: white;" rows=2></textarea>
    </div>

        <div class="button-section"><br />
            <input type="submit" name="submit" value="Submit Offer" />
        </div>


</form> 
</body>
  </div>
</div>
</html>

form.js（JavaScript 文件）

$(document).ready(function() {
$select = $('#newused');
$('#newused').on('change',function(){

    if($(this).val() == "New"){
        if($('#new').is(":hidden")){
            $('#new').show();
            $('#purchased').show();
            $('#leased').show();
        }
        else{
            $('#used').hide();
            }
    }

    if($(this).val() == "Used"){
        if($('#used').is(":hidden")){
            $('#used').show();
        }
        else{
           $('#new').hide();
           $('#leased').hide(); 
           $('#purchased').hide();
        }
    }

});
    });

$(document).ready(function() {
$select = $('#newPick');
$('#newPick').on('change',function(){

    if($(this).val() == "Purchased"){
        if($('#purchased').is(":hidden")){
            $('#purchased').show();
        }
        else{        
            $('#leased').hide(); 
            $('#used').hide();
        }
    }

    if($(this).val() == "Leased"){
        if($('#leased').is(":hidden")){
            $('#leased').show();
        }
        else{        
            $('#purchased').hide(); 
            $('#used').hide();
        }
    }

    });
    });

formprocess.php（PHP 文件）

<?php 

//THIS SECTION IS FOR WHEN THE PURCHASED SECTION OF THE FORM IS FILLED OUT..........////        
        if(isset($_POST["purchasedSubmit"]))
        {

            // Checking For Blank Fields....
            if($_POST['dealerName']=="")
                { 
?>
                    <script type="text/javascript">
                        alert("Please complete the text marked with an *."); //java script telling user to fill in all required fields..
                    </script>
<?php
                }

//THIS IS THE INFO THAT WILL BE SENT TO INDIVIDUALS IN THE EMAIL SECTION BELOW AS LONG AS ALL THE REQUIRED FIELDS ARE FILLED IN.....//////              
        else{

            $offer = $_POST['offerType'];
            $typeOfPurchase = $_POST['typeOfPurchase'];
            $marketing = $_POST['marketing'];
            $dealerName = $_POST['dealerName'];
            $startDate = $_POST['startDate'];
            $endDate = $_POST['endDate'];
            $vehicleYear = $_POST['yearOfVehicle'];
            $vehicleMake = $_POST['makeOfVehicle'];
            $vehicleModel = $_POST['modelOfVehicle'];
            $vehicleTrim = $_POST['trimOfVehicle'];
            $modelNumber = $_POST['modelNumber'];
            $stockNumber = $_POST['stockNumber'];
            $msrp = $_POST['msrpNumber'];
            $sellingPrice = $_POST['sellingPrice'];
            $downPayment = $_POST['downPayment'];
            $monthlyPayment = $_POST['monthlyPayment'];
            $lastVin = $_POST['lastVin'];
            $aprAmount = $_POST['aprAmount'];
            $vehicleTerm = $_POST['termOfVehicle'];
            $rebate = $_POST['rebateInfo'];
            $message = $_POST['msg'];
            $message = wordwrap($message, 70);

            $msrpAmount = number_format($msrp, 2, '.', ',')
            $sellPrice = number_format($sellingPrice, 2, '.', ',')
            $dwnPayment = number_format($downPayment, 2, '.', ',')
            $monthPayment = number_format($monthlyPayment, 2, '.', ',')
            $apr = number_format($aprAmount, 2, '.', ',')
            $rebateAmount = number_format($rebate, 2, '.', ',')

            $form_content = 
            "What Type of Offer: $offer
            If your purhcase was new what was your type of purchase: $typeOfPurchase
            Which Marketing Medium: $marketing
            Dealership Name: $dealerName
            Start Date: $startDate
            End Date: $endDate
            Year of Vehicle: $vehicleYear
            Make of Vehicle: $vehicleMake
            Model of Vehicle: $vehicleModel
            Trim of Vehicle: $vehicleTrim
            Model #: $modelNumber 
            Stock #: $stockNumber
            MSRP: $msrpAmount
            Vehicle Selling Price: $sellPrice
            Down Payment on Vehicle: $dwnPayment
            '$'XXX/ Monthly Payment: $monthPayment
            Last 6 of VIN: $lastVin
            Vehicle Rebate: $rebateAmount
            Vehicle APR: $apr
            Other Notes (Rebate Info, Special Details etc): $message";

            $email_subject = "Online Offer Submission Form";

            //THIS IS THE ARRAY THAT WILL HOLD EVERYONE THAT WILL GET THE EMAIL....//////
            $arrEmail = array('Jonathan <myemail@myemail.com>');



                foreach($arrEmail as $key => $email_to)
                mail($email_to, $email_subject, $form_content);

        header('http://www.directionwebsite.com');
        }
        }
        ?>

当我使用此处选择的下拉选择提交表单时，请记住我将任何内容粘贴到字段中以快速导致现在没有验证。下面的空字段后面没有任何内容：分号是不发送任何值的空字段，但是，使用已使用的选择，这些值可能无论如何都没有存储任何内容。这是我遇到问题的购买和租赁的新选择。

What Type of Offer: Used
                        If your purhcase was new what was your type of purchase: -1
                        Which Marketing Medium: All_Channels
                        Dealership Name: duh duh duh
                        Start Date: 05/07/1983
                        End Date: 03-11-2017
                        Year of Vehicle: 1983
                        Make of Vehicle: Ford
                        Model of Vehicle: Ford
                        Trim of Vehicle: Ford
                        Model #:
                        Stock #: 12345
                        MSRP:$
                        Vehicle Selling Price:$40,000.00
                        Down Payment on Vehicle:$ 4,000.00
                        '$'XXX/ Monthly Payment:$
                        Last 6 of VIN:
                        Vehicle Rebate:$
                        Residual Value:$
                        Vehicle APR:$175.00
                        Miles Per Year:
                        Other Notes (Rebate Info, Special Details etc): fffffffffffffffffffffffffffrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

现在，当我从选项中选择新选项时，会出现另一个选项下拉列表，其中包含 LEASED 或 PURCHASED 两个选项，这是我从这两个选项中得到的结果。同样，下面的分号后没有任何内容的字段 : 是空字段。

What Type of Offer: New
                        If your purhcase was new what was your type of purchase: Purchased
                        Which Marketing Medium: Facebook
                        Dealership Name: new purchased newest try
                        Start Date:
                        End Date:
                        Year of Vehicle:
                        Make of Vehicle:
                        Model of Vehicle:
                        Trim of Vehicle:
                        Model #:
                        Stock #:
                        MSRP:$
                        Vehicle Selling Price:$
                        Down Payment on Vehicle:$
                        '$'XXX/ Monthly Payment:$
                        Last 6 of VIN:
                        Vehicle Rebate:$
                        Residual Value:$


                        Vehicle APR:$
                        Miles Per Year:
                        Other Notes (Rebate Info, Special Details etc):

JFIDDLE

【问题讨论】：

未提交的字段是否是您使用.hide() 隐藏的字段？见*.com/questions/8318428/…
是的，请参见使用的选择，我的 startDate 和 endDate 变量与品牌、型号等相同，它们对于使用的选择显示很好。因此，如果是这种情况，@Barmar 他们不会也出现在 Used 上，而不仅仅是租赁和购买的选择。我问的原因是因为我也使用过.hide()，我的意思是你可以通过我上面的代码看到这一点。
这个问题很难理解，因为它非常模糊。请具体说明您正在做什么，正在发送哪些字段，哪些没有发送。
好的，谢谢，我将在上面添加，以便我有更多空间。但是，为了快速向您解释。如果您选择 used，则会出现新的和 used 下拉列表，它会进入一个与其他选择具有几乎相同值的表单。如果您选择新的，那么另一个下拉菜单会出现租赁和购买的两种选择。所以，当我选择用过的填写所有内容时，点击提交繁荣，所有内容都会显示在我的电子邮件中。但是，如果我选择另外两个租赁和购买的值，它们会显示 18 或 23 个值中的大约 3 个或 4 个值。无论如何，@Barmar 上方会显示更多内容
这与您在问题中写的内容相同，几乎是逐字逐句。如果您没有将所有内容放在一个大段落中也会有所帮助，这很难阅读。

标签： javascript php jquery wordpress forms

【解决方案1】：

问题

值被覆盖，因为您有多个输入具有相同的name 属性以相同的形式。

可能的解决方案

为每个输入类型赋予一个唯一的名称值
将每个实例放入自己的表单中，然后显示和隐藏整个表单
通过仅序列化可见值的 Ajax 提交
使用方括号表示法将值推送到数组，这里是example

【讨论】：

问题如果我选择解决方案 1 并给输入一个唯一的名称值，我是否仍然可以将这些值存储到 php 页面中的同一个变量中。所以，假设我有汽车年。我会为输入类型做一些简单的事情，比如 year1、year2 和 year3。在 php 文件中，我可以将 $_POST['year1'] 和 year2 和 year3 放入一个名为 year 的变量中。或者那也会错过它。第二个问题是将每个实例放入自己的形式中。我可以为每个表单使用相同的提交按钮吗？唯一的问题是当表单提交时我将如何获得优惠类型值？
我基本上使用了三种不同的形式，这样我就不必更改我的 php 文件了。我以前这样做过，但是由于某种原因它不起作用，而且我没有心情去解决这个问题，所以从一开始我就是对的。感谢@KennethStoddard 的提示和帮助。我在 wordpress 中使用它，所以我想知道保存 html IDK 后是否会发生什么事情，但是为了将来的帮助，再次使用上面的多表单解决方案对我来说效果很好。
您也许可以在后端捕获这些值并按照您的建议路由它们，但我认为使用唯一名称最有意义；这将促进数据完整性。
我将如何将这些唯一名称存储到变量中。我的意思是我知道如何做到这一点，我的意思是说上面的模型 # 的一个输入名称。现在，由于两个输入的名称相同，我将使用 modelNumber 作为 php 文件中的变量。但是，在输入中使用两个不同的型号名称，我可以在 php 文件中使用相同的变量并执行以下操作..
$modelNumber = $_POST['pur_modelNumber'] 这将是购买型号的名称，下面将是租赁型号# $modelNumber = $_POST['lease_modelNumber'] 并且当发送给我的电子邮件是否会输入型号。