Form not submitting values correctly all the time

Question

Hello everyone I am having an issue with the code I created. it is a drop down select depended form so when you pick a certain drop down the text boxes/inputs change.

Now I got it working for the most part and I will explain that next. I have three files the form.php, JavaScript file, and the formprocess.php file. I have this form on WordPress and like I said I have it working for the most part. The drop down selections are New and Used if you pick Used it goes right to the used form if you pick new it brings up another selection to pick either leased or purchased and depending on the one you pick there a different form will show. Now in each div that holds USED, LEASED, and PURCHASED all have the same values besides like two or three different ones.

So, when I submit the form with USED selection I get the email with all the fields filled in but, when I pick leased or purchased some times I get no fields filled in and some times I get a few of them field in when the email is sent. Here are the files below I am praying someone can see something that I am not.

form.php (HTML FORM)

<!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 FILE)

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

<?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');
        }
        }
        ?>

When I submit the form with the drop down selection used picked here is a result of what I get back keep in mind I pasted anything into fields for quickness cause right now no validation. The empty fields below that have nothing after : semi colons are the empty fields that are not sending any values but, with the used selection those values might have nothing stored anyways. Its the new selection with purchased and leased that I am having trouble with.

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

Now when I pick new from the selection another selection drop down appears with two choices either LEASED or PURCHASED and here is the results I get from those two. Again the fields below that have nothing after semi colons : is the empty fields.

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

Are the fields that aren't being submitted the ones that you hide with `.hide()`? See https://stackoverflow.com/questions/8318428/submit-form-fields-inside-displaynone-element — Barmar, Jul 12 '17 at 20:11
Yes, see in say the used selection I have startDate and endDate variables same with make, model, etc and they show up fine for Used selection. So, if that was the case @Barmar wouldn't they show up on Used also and not just leased and purchased selection. Reason I ask because I also have used.hide() also I mean you can see that with my code above. — Jonathan Vasiliou, Jul 12 '17 at 20:16
It's hard to understand the question because it's very vague. Please be specific of exactly what you're doing, and which fields are being sent and which are not being sent. — Barmar, Jul 12 '17 at 20:19
Ok thank you I am going to add that above so I have more room. But, to quick explain it to you. What happens is you have new and used drop down if you select used it goes to a form with almost the same values as the other selections. If you pick new then another drop down happens with two choices leased and purchased. So, when I pick used fill everything in, hit submit boom everything is displayed in my email. But, if I choose the other two leased and purchased they show about 3 or 4 values out of the 18 or 23 values. Anyways more will be displayed above @Barmar — Jonathan Vasiliou, Jul 12 '17 at 20:23
That's the same thing you wrote in the question, almost word for word. It would also help if you didn't put everything in one big paragraph, it's hard to read. — Barmar, Jul 12 '17 at 20:24

Kenneth Stoddard · Accepted Answer · 2017-07-25T05:05:21.570

1

The Problem

Values are being overridden due to the fact that you have multiple inputs with the same name attribute in the same form.

Possible Solutions

Give each input type a unique name value
Place each instance into its own form and show and hide the entire form
Submit via Ajax serializing only the values that are visible
Use square bracket notation to push the values to an array, here is an example

edited Jul 25 '17 at 05:05

answered Jul 21 '17 at 02:22

Kenneth Stoddard

1,409
11
13

Question if I choose solution 1 and give input a unique name value could I still store those values into the same variable in the php page. So, say I have year of the car. I would do something simple like year1, year2, and year3 for the input type. In the php file can I do $_POST['year1'] and year2 and year3 into one variable named year. Or would that miss it up also. The second question is for placing each instance into its own form. Can I use the same submit button for each form the only problem with this is how would I get the offer type value when form submits do to it being out of form – Jonathan Vasiliou Jul 21 '17 at 13:37
I basically used three different forms so that I wouldn't have to change my php file. I did this before but, for some reason it didn't work and I was not in the mood to figure out the issue so, from the get go I was right. Thank you @KennethStoddard for the tips and the help. I was working in wordpress with it so I wonder if something happen once I saved the html IDK but, again for future help use the multiple form solution above it worked fine for me. – Jonathan Vasiliou Jul 21 '17 at 16:44
You could perhaps capture these values on the backend and route them as you suggest but I think it makes the most sense to use unique names; this will promote data integrity. – Kenneth Stoddard Jul 21 '17 at 16:53
How would I go about store those unique names into a variable. I mean I know how to do that what I mean is say for the one input name above for the model #. Right now since it is the same name for two inputs I would use modelNumber as the variable in the php file. But, with two different names for the model number in the inputs can I use the same variable in the php file and do something like below.. – Jonathan Vasiliou Jul 21 '17 at 16:57
$modelNumber = $_POST['pur_modelNumber'] which would be the name for the purchase model number and below will be for the leased model# $modelNumber = $_POST['lease_modelNumber'] and when the email is sent to me will it have an input for the model number. – Jonathan Vasiliou Jul 21 '17 at 16:58
I'm afraid I would need to know more about how the DB is structured. We are probably outside the scope of the initial question at this point. There is always more than one way to do any one thing. If it makes sense to whitelist a list of names that map to another on the backend due to how the DB is set up, then perhaps do that. But, if it makes sense to change the schema of the DB to account for variations in the type of value being submitted, maybe that's the way to go. – Kenneth Stoddard Jul 21 '17 at 17:05
There is no DB with this form, basically our graphic designer gets the emails and places the values that the user typed in into the design of the banners etc.. The only issue I think I have now because with using three different forms I get everything I need but, now I think the validations are going to be the next issue and throw an error whether I fill in the all the fields or not. But, thank you for the help before it pointed me in the right direction for sure. – Jonathan Vasiliou Jul 21 '17 at 17:35
You can also use square brackets to push to an array, updated my answer. – Kenneth Stoddard Jul 25 '17 at 05:10
Everything is good now @KennethStoddard I used different forms and everything works fine now. Thank you for all your help. – Jonathan Vasiliou Jul 26 '17 at 14:52
Good to hear; if the provided solution worked, then can you go ahead and mark it as the accepted answer. Thanks – Kenneth Stoddard Jul 26 '17 at 15:02

Form not submitting values correctly all the time

1 Answers1