javascript - 如何使用 php 提交输入值，具体取决于基于下拉选择显示的输入值

标签 javascript php html forms drop-down-menu

我目前有用于下拉选择和使用 JavaScript 显示/隐藏值的工作代码，具体取决于所选内容，如下面的代码所示。我想做的是根据新的和已使用的选择有三种不同的表单输入。如果您选择“已使用”，它将直接进入带有输入内容的表单。如果您选择新的，它会显示另一个下拉菜单，您可以在其中选择租赁或购买，并根据选择显示其他两个表格。我知道如何使用 POST 向 php 提交一个表单。但是，我的问题是，因为根据下拉菜单，表单会随着不同的输入而变化。我如何使用 php.ini 提交此内容？我的代码如下，有三个文件:newform.php、newForm.js 和 newformprocess.php。如果没有改变，再次发送表格我知道该怎么做。我遇到的问题是，表单会根据所选的下拉列表而变化。非常非常感谢您的帮助。谢谢你们。另外，我知道 newformprocess.php 文件的 $_POST 值等看起来不正确。这是我想使用的代码，所以我错过了。

第一个文件newform.php

<?php include('formProcess.php'); ?>
<!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">
        <h2>Please Select Your Offer Type</h2>
  <div class="inner-wrap">

   <form action="newformprocess.php" method="post">

    <label>Dealership Name:<em class="required-star">*</em></label><input id="fin_dealerName" name="input_1" type="text" placeholder="Dealership Name" />

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

    <label>Offer Type?</label><select id="newused" type="select" name="offerType">
        <option id="option_1" value="option1">New</option>
        <option id="option_2" value="option2">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="newPick1">Purchased</option>
        <option id="newPick_2" value="newPick2">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="fin_startDate" name="input_2" type="text" placeholder="01/01/2012"/>
        <label>End Date:<em class="required-star">*</em></label><input id="fin_endDate" name="input_3" type="text" placeholder="05/07/2015"/>
        <label>Year:<em class="required-star">*</em></label><input id="fin_vehicleYear" name="input_4" type="text" placeholder="Vehicle Year"/>
        <label>Make:<em class="required-star">*</em></label><input id="fin_make" name="input_5" type="text" placeholder="Make"/>
        <label>Model:<em class="required-star">*</em></label><input id="fin_model" name="input_6" type="text" placeholder="Model"/>
        <label>Trim:<em class="required-star">*</em></label><input id="fin_trim" name="input_7" type="text" placeholder="Trim of Vehicle"/>
        <label>Model #:<em class="required-star">*</em></label><input id="fin_input_5" name="input_8" type="text" placeholder="14325"/>
        <label>Stock #:<em class="required-star">*</em></label><input id="fin_input_5" name="input_9" type="text" placeholder="1234"/>
        <label>MSRP:<em class="required-star">*</em></label><input id="fin_input_5" name="input_10" type="text" placeholder="$15,995"/>
        <label>Selling Price:<em class="required-star">*</em></label><input id="fin_input_5" name="input_11" type="text" placeholder="$12,895"/>
        <label>Down Payment:<em class="required-star">*</em></label><input id="fin_input_5" name="input_12" type="text" placeholder="$1,000"/>
        <label>$XXX/ Monthly Payment:<em class="required-star">*</em></label><input id="fin_input_5" name="input_13" type="text" placeholder="$198"/>
        <label>Last 6 of VIN:<em class="required-star">*</em></label><input id="fin_input_5" name="input_14" type="text" placeholder="123456"/>
        <label>Rebate:</label><input id="fin_input_5" name="input_15" type="text" placeholder="Rebate on Vehicle"/>
        <label>APR:<em class="required-star">*</em></label><input id="fin_input_5" name="input_16" type="text" placeholder="ARP on Vehicle"/>
        <label>Term:<em class="required-star">*</em></label><input id="fin_input_5" name="input_17" type="text" placeholder="Residual Payment on Vehicle"/>
        <label>Other Notes(Rebate Info, Special Details etc):</label> <textarea id="fin_textArea" name="input_18" placeholder="Notes" 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="fin_startDate" name="input_2" type="text" placeholder="01/01/2012"/>
        <label>End Date:<em class="required-star">*</em></label><input id="fin_endDate" name="input_3" type="text" placeholder="05/07/2015"/>
        <label>Year:<em class="required-star">*</em></label><input id="fin_vehicleYear" name="input_4" type="text" placeholder="Vehicle Year"/>
        <label>Make:<em class="required-star">*</em></label><input id="fin_make" name="input_5" type="text" placeholder="Make"/>
        <label>Model:<em class="required-star">*</em></label><input id="fin_model" name="input_6" type="text" placeholder="Model"/>
        <label>Trim:<em class="required-star">*</em></label><input id="fin_trim" name="input_7" type="text" placeholder="Trim of Vehicle"/>
        <label>Model #:<em class="required-star">*</em></label><input id="fin_input_5" name="input_8" type="text" placeholder="14325"/>
        <label>Stock #:<em class="required-star">*</em></label><input id="fin_input_5" name="input_9" type="text" placeholder="1234"/>
        <label>MSRP:<em class="required-star">*</em></label><input id="fin_input_5" name="input_10" type="text" placeholder="$15,995"/>
        <label>Selling Price:<em class="required-star">*</em></label><input id="fin_input_5" name="input_11" type="text" placeholder="$12,895"/>
        <label>Down Payment:<em class="required-star">*</em></label><input id="fin_input_5" name="input_12" type="text" placeholder="$1,000"/>
        <label>$XXX/ Monthly Payment:<em class="required-star">*</em></label><input id="fin_input_5" name="input_13" type="text" placeholder="$198"/>
        <label>Last 6 of VIN:<em class="required-star">*</em></label><input id="fin_input_5" name="input_14" type="text" placeholder="123456"/>
        <label>Rebate:</label><input id="fin_input_5" name="input_15" type="text" placeholder="Rebate on Vehicle"/>
        <label>Term:<em class="required-star">*</em></label><input id="fin_input_5" name="input_16" type="text" placeholder="ARP on Vehicle"/>
        <label>Residual Value:<em class="required-star">*</em></label><input id="fin_input_5" name="input_17" type="text" placeholder="Residual Payment on Vehicle"/>
        <label>Miles Per Year:<em class="required-star">*</em></label><input id="fin_input_5" name="input_17" type="text" placeholder="Residual Payment on Vehicle"/>
        <label>Other Notes(Rebate Info, Special Details etc):</label> <textarea id="fin_textArea" name="input_18" placeholder="Notes" 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="input_2" type="text" placeholder="01/01/2012"/>
        <label>End Date:<em class="required-star">*</em></label><input id="fin_endDate" name="input_3" type="text" placeholder="05/07/2015"/>
        <label>Year:<em class="required-star">*</em></label><input id="fin_vehicleYear" name="input_4" type="text" placeholder="Vehicle Year"/>
        <label>Make:<em class="required-star">*</em></label><input id="fin_make" name="input_5" type="text" placeholder="Make"/>
        <label>Model:<em class="required-star">*</em></label><input id="fin_model" name="input_6" type="text" placeholder="Model"/>
        <label>Trim:</label><input id="fin_trim" name="input_7" type="text" placeholder="Trim of Vehicle"/>
        <label>Stock #:<em class="required-star">*</em></label><input id="fin_input_5" name="input_9" type="text" placeholder="1234"/>
        <label>Selling Price:<em class="required-star">*</em></label><input id="fin_input_5" name="input_11" type="text" placeholder="$12,895"/>
        <label>Down Payment:<em class="required-star">*</em></label><input id="fin_input_5" name="input_12" type="text" placeholder="$1,000"/>
        <label>APR:<em class="required-star">*</em></label><input id="fin_input_5" name="input_16" type="text" placeholder="ARP on Vehicle"/>
        <label>Term:<em class="required-star">*</em></label><input id="used_term" name="input_14" type="text" placeholder=""/>
        <label>Other Notes(Rebate Info, Special Details etc):</label><textarea id="fin_textArea" name="input_18" placeholder="Notes" rows=2></textarea>
    </div>

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

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

第二个文件newForm.js

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

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

    }

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

});


$select = $('#newPick');
$('#newPick').on('mousedown',function(){

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

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

    });
    });

最后一个文件newformprocess.php

<?php 

        if(isset($_POST["submit"]))
        {

            // Checking For Blank Fields....
            if($_POST['offerType']==""|| $_POST['typeOfPurchase'] =="" ||$_POST['marketing']==""||$_POST['input_1']==""||$_POST['input_2']==""||$_POST['input_3']==""||$_POST['input_4']==""||$_POST['input_5']==""||
            $_POST['input_6']==""||$_POST['input_7']==""||$_POST['input_9']==""||$_POST['input_10']==""||$_POST['input_11']==""||$_POST['input_12']==""||$_POST['input_13']==""||$_POST['input_14']=="")
                { 
?>
                    <script>
                        alert("Please complete the text marked with an *.");
                    </script>
<?php
                }

        else{

            $Offer = $_POST['offerType'];
            $typeOfpurchase = $_POST['typeOfPurchase'];
            $Marketing = $_POST['marketing'];
            $Field1 = $_POST['input_1'];
            $Field2 = $_POST['input_2'];
            $Field3 = $_POST['input_3'];
            $Field4 = $_POST['input_4'];
            $Field5 = $_POST['input_5'];
            $Field6 = $_POST['input_6'];
            $Field7 = $_POST['input_7'];
            $Field8 = $_POST['input_8'];
            $Field9 = $_POST['input_9'];
            $Field10 = $_POST['input_10'];
            $Field11 = $_POST['input_11'];
            $Field12 = $_POST['input_12'];
            $Field13 = $_POST['input_13'];
            $Field14 = $_POST['input_14'];
            $Field15 = $_POST['input_15'];
            $Field16 = $_POST['input_16'];
            $Field17 = $_POST['input_17'];
            $message = $_POST['input_18'];
            $message = wordwrap($message, 70);
            $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: $Field1
            Offer Start Date: $Field2
            Offer End Date: $Field3
            Year of Vehicle: $Field4
            Make of Vehicle: $Field5
            Model of Vehicle: $Field6
            Trim of Vehicle: $Field7
            Model # Vehicle: $Field8 
            Stock # of Vehicle: $Field9
            MSRP of Vehicle: $Field10
            Selling Price of Vehicle: $Field11
            Down Payment on Vehicle: $Field12
            XXX/ Month on Vehicle: $Field13
            Last 6 of VIN on Vehicle: $Field14
            Rebate on Vehicle: $Field15
            APR on Vehicle: $Field16 
            Residual Payment on Vehicle: $Field17 
            Other Notes (Rebate Info, Special Details etc): $message";

            $email_subject = "Online Offer Submission Form";

            $arrEmail = array('Jonathan <myemail@myemail.com?>');


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

                header('location: http://www.mydealerworld.com/thank-you-for-contacting-dealer-world/');
    }
        }

最佳答案

您可以使用 AJAX 请求发送输入值。使用 Javascript 分配变量后，只需使用 ajax 请求发送它们即可。 (例如var your_signed_variable = input.val())

$.ajax({
'url':'newformprocess.php',
'type':'post',
'data':{'submit':true,'another_key':your_assigned_variable},
success:function(){
//when successfully sent
},
error:function(){
//if an ajax error occures, do something
}
});

查看更多:
http://api.jquery.com/jquery.ajax/

关于javascript - 如何使用 php 提交输入值，具体取决于基于下拉选择显示的输入值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45021523/

上一篇：javascript - 监听特定子 vuejs 2 发出的事件

下一篇：javascript - 服务器网页窗口-打开+打印+关闭

相关文章：

html - 将对象附加到居中div的侧面

javascript - 如何在网页中设置窗口标题

javascript - 提交按钮 onClick 在表单加载时触发

javascript - 尝试创建测验计时器

php - Symfony2 表格数组？

javascript - 重叠修复导航与 jQuery 验证输入错误

javascript - 角色层次映射器/生成器(递归)

javascript - 如何在键入和检索数据时将文本框内容设为 DOTS

php - 在 PHP 中检测 IPv6？

html - 将 div 置于其他两个具有自动高度的 div 之上

©2024 IT工具网  联系我们