1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

javascript show/hide stopping a php form from submitting

Discussion in 'JavaScript' started by Ian Haney, Jan 12, 2019 at 12:42 PM.

  1. #1
    I have a php from that has javascript in that shows and hides two input fields if a specific select option in selected and just testing the form and nothing happens when I click the submit button so I thought I would comment out the javascript just to see if the form works and the form works when the javascript coding is commented out but if I leave it uncommented, the form does not work. The coding is below
    SEMrush
    
    <form class="row" method="post" action="processbookingform.php">
                      
                            <div class="form-group col-lg-4 col-md-6">
                                <label>Name</label>
                                <input type="text" placeholder="Enter Your Name..." class="form-control" name="fullname" required />
                            </div>
                            <div class="form-group col-lg-4">
                                <label>Email Address</label>
                                <input type="text" placeholder="your email address" class="form-control" name="email" required />
                            </div>
                            <div class="form-group col-lg-4 col-md-6">
                                <label>Phone number</label>
                                <input type="text" placeholder="00000000000" class="form-control" name="phonenumber" required />
                            </div>
                            <div class="form-group col-lg-4 col-md-6">
                                <label>No. Of Passengers</label>
                                <input type="number" min="1" max="16" step="1" placeholder="Number Of Passengers" class="form-control" name="noofpassengers" required />                         <
                            </div>
                          
                            <div class="form-group col-lg-4">
                                <label>Trip Type</label>
                                <select class="form-control" required name="triptype" id="pickups">
                                <option value="">Select</option>
                                <option value="ONEWAY">One Way</option>
                                <option value="RETURN">Return</option>
                                <option value="MULTI">Multiple Stops</option>
                                </select>
                            </div>
                          
                            <div class="clearfix">&nbsp;</div>
                          
                            <div class="form-group col-lg-4">
                                <label>From</label>
                                <input type="text" placeholder="Pickup" class="form-control" name="pickup" required />
                            </div>
                          
                            <div class="form-group col-lg-4">
                            <label>Pickup Date</label>
                                <input type="date" required class="form-control" placeholder="Pickup Date" name="pickupdate" value="">
                            </div>
    
                            <div class="form-group col-lg-4">
                            <label>Pickup Time</label>
                                <select required class="form-control" name="pickuptime">
                                                        <option value="">Pickup Time</option>
                                                        <option  value="01:00">1 am</option>
                                                        <option  value="02:00">2 am</option>
                                                        <option  value="03:00">3 am</option>
                                                        <option  value="04:00">4 am</option>
                                                        <option  value="05:00">5 am</option>
                                                        <option  value="06:00">6 am</option>
                                                        <option  value="07:00">7 am</option>
                                                        <option  value="08:00">8 am</option>
                                                        <option  value="09:00">9 am</option>
                                                        <option  value="10:00">10 am</option>
                                                        <option  value="11:00">11 am</option>
                                                        <option  value="12:00">12 am</option>
                                                        <option  value="13:00">1 pm</option>
                                                        <option  value="14:00">2 pm</option>
                                                        <option  value="15:00">3 pm</option>
                                                        <option  value="16:00">4 pm</option>
                                                        <option  value="17:00">5 pm</option>
                                                        <option  value="18:00">6 pm</option>
                                                        <option  value="19:00">7 pm</option>
                                                        <option  value="20:00">8 pm</option>
                                                        <option  value="21:00">9 pm</option>
                                                        <option  value="22:00">10 pm</option>
                                                        <option  value="23:00">11 pm</option>
                                                        <option  value="24:00">12 pm</option>
                                                    </select>
                            </div>
                          
                            <div class="clearfix">&nbsp;</div>
                          
                            <div class="form-group col-lg-4">
                                <label>to</label>
                                <input type="text" placeholder="Destination" class="form-control" name="destination" required />
                            </div>
                          
                      <div class="col-lg-12">
                         <div id="returninfo">
                                <div class="form-group col-lg-5" style="padding:0 !important; float: left; margin: 0 10px 0 0;">
                                <label>Return Date</label>
                            <input type="date" class="form-control returndate" placeholder="Return Date" name="returndate" value="">
                          
                                </div>
                              
                                &nbsp;
                              
                                    <div class="form-group col-lg-5" style="padding:0 !important; float: left;">
                                    <label>Return Time</label>
                                                        <select required class="form-control returntime" name="returntime">
                                                        <option value="">Return Time</option>
                                                        <option  value="01:00">1 am</option>
                                                        <option  value="02:00">2 am</option>
                                                        <option  value="03:00">3 am</option>
                                                        <option  value="04:00">4 am</option>
                                                        <option  value="05:00">5 am</option>
                                                        <option  value="06:00">6 am</option>
                                                        <option  value="07:00">7 am</option>
                                                        <option  value="08:00">8 am</option>
                                                        <option  value="09:00">9 am</option>
                                                        <option  value="10:00">10 am</option>
                                                        <option  value="11:00">11 am</option>
                                                        <option  value="12:00">12 am</option>
                                                        <option  value="13:00">1 pm</option>
                                                        <option  value="14:00">2 pm</option>
                                                        <option  value="15:00">3 pm</option>
                                                        <option  value="16:00">4 pm</option>
                                                        <option  value="17:00">5 pm</option>
                                                        <option  value="18:00">6 pm</option>
                                                        <option  value="19:00">7 pm</option>
                                                        <option  value="20:00">8 pm</option>
                                                        <option  value="21:00">9 pm</option>
                                                        <option  value="22:00">10 pm</option>
                                                        <option  value="23:00">11 pm</option>
                                                        <option  value="24:00">12 pm</option>
                                                        </select>
                                    </div>
                        </div>
                    </div>
                            <div class="clearfix">&nbsp;</div>
                          
                            <div class="form-group col-lg-12">
                            <textarea type="text" name="otherinfo" class="form-control" placeholder="Other Information"></textarea>
                            </div>
                          
                            <div class="form-group col-12 car-type">
                            <span><input type="submit" value="GET QUOTE" /></span>
                            </div>
    
                        </form>
    
    Code (markup):
    Below is the javascript coding stopping the form from working

    
    <script>
                $(document).ready(function () {
        toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
        // this will call our toggleFields function every time the selection value of our other field changes
        $("#pickups").change(function () {
            toggleFields();
        });
    
    });
    
    // this toggles the visibility of other server
    function toggleFields() {
        if ($("#pickups").val() === "RETURN")
            $("#returninfo").show();
        else
            $("#returninfo").hide();
    }
    </script>
    
    Code (markup):
    The PHP coding for the form is below

    
    <?php
    $email = $_POST['email'];
            // Sanitize E-mail Address
            $email = filter_var($email, FILTER_SANITIZE_EMAIL);
            // Validate E-mail Address
            $email = filter_var($email, FILTER_VALIDATE_EMAIL);
            if (!$email) {
                echo "Invalid Sender's Email";
            } else {
                $to = 'emailaddress';
                $subject = 'New Website Booking';
                $fullname = $_POST['fullname'];
                $email = $_POST['email'];
                $phonenumber = $_POST['phonenumber'];
                $noofpassengers = $_POST['noofpassengers'];
                $triptype = $_POST['triptype'];
                $pickup = $_POST['pickup'];
                $pickupdate = $_POST['pickupdate'];
                $pickuptime = $_POST['pickuptime'];
                $destination = $_POST['destination'];
                $returndate = $_POST['returndate'];
                $returntime = $_POST['returntime'];
                $otherinfo = $_POST['otherinfo'];
               
                $headers = 'From:' . $email . "\r\n";
                // Sender's Email
                // Message lines should not exceed 70 characters (PHP rule), so wrap it
                $message = 'A New Booking has been placed. Below is the info' . "\r\n\r\n" . 'Name: ' . $fullname . "\r\n" . 'Email: ' . $email . "\r\n" . 'Phone: ' . $phonenumber . "\r\n" . 'Passengers: ' . $noofpassengers . "\r\n" . 'Trip Type: ' . $triptype . "\r\n" . 'From: ' . $pickup . "\r\n" . 'Pickup Date: ' . $pickupdate . ' at ' . $pickuptime . "\r\n" . 'Destination: ' . $destination . "\r\n" . 'Return Date: ' . $returndate . "\r\n" . 'Return Time At: ' . $returntime . "\r\n" . 'Other Info: ' . $otherinfo;
                // Send Mail By PHP Mail Function
                if (mail($to, $subject, $message, $headers)) {
                    echo "Thank you for your booking, your booking is being processed and a member of our team will call you to confirm.";
                    echo "<br><br>";
                    echo "<a href='index.php'>Home</a>";
                } else {
                    echo "Failed to process booking, try again.";
                    echo '<a href="javascript:history.back()">Go Back</a>';
                    exit ;
                }
               
                //second mail ////
    $to      = $email;
    $subject = 'Your Booking is being processed';
    $message = 'Thank you for your booking. A member of our team will call shortly to confirm. Below is your booking.' . "\r\n\r\n" . 'Name: ' . $fullname . "\r\n" . 'Email: ' . $email . "\r\n" . 'Phone: ' . $phonenumber . "\r\n" . 'Passengers: ' . $noofpassengers . "\r\n" . 'Trip Type: ' . $triptype . "\r\n" . 'From: ' . $pickup . "\r\n" . 'Pickup Date: ' . $pickupdate . " at " . $pickuptime . "\r\n" . 'Destination: ' . $destination . "\r\n" . 'Return Date: ' . $returndate . "\r\n" . 'Return Time At: ' . $returntime . "\r\n" . 'Other Info: ' . $otherinfo;
    $headers = 'From: emailaddress' . "\r\n" .
        'Reply-To: emailaddress' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
    
    mail($to, $subject, $message, $headers);
               
            }
    ?>
    
    Code (markup):
    How can I solve it so that the javascript is kept and the php form works as I can't work it out

    Thank you in advance
     
    Ian Haney, Jan 12, 2019 at 12:42 PM IP
    SEMrush
  2. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    23
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #2
    What exactly do you mean with does not work?
    It does not submit the form data? It does not show the fields? Can you be a little more specific?
     
    jasperschellekens, Jan 12, 2019 at 1:00 PM IP
  3. Ian Haney

    Ian Haney Greenhorn

    Messages:
    17
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #3
    Sorry, when clicking the submit button on the form after filling the fields in, it don't do anything. It should redirect to processbookingform,php page that sends the email to the sites owner and displays a message confirming the form has been sent
     
    Ian Haney, Jan 12, 2019 at 1:05 PM IP
  4. hdewantara

    hdewantara Active Member

    Messages:
    429
    Likes Received:
    36
    Best Answers:
    19
    Trophy Points:
    80
    #4
    jQuery looks fine to me.
    Always validate your HTML markup through w3c validator to find and fix any fatalities, then try run your form again?
     
    hdewantara, Jan 12, 2019 at 1:46 PM IP
  5. Ian Haney

    Ian Haney Greenhorn

    Messages:
    17
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #5
    the HTML is ok, it;s the javascript causing the issue as when I comment it out, the form submits but when I uncomment the javascript, the form submit button does not do anything
     
    Ian Haney, Jan 12, 2019 at 2:03 PM IP
  6. mmerlinn

    mmerlinn Notable Member

    Messages:
    1,887
    Likes Received:
    218
    Best Answers:
    5
    Trophy Points:
    240
    #6
    If it works without Javascript, why would you need Javascript at all?
     
    mmerlinn, Jan 12, 2019 at 2:16 PM IP
  7. Ian Haney

    Ian Haney Greenhorn

    Messages:
    17
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #7
    I need javascript to make two input fields show or hide dependent on what the user selects in a select dropdown menu, for example if a user selects Return in the select dropdown menu within the form, the javascript makes the two input fields appear so the user can enter the return date and return time but if the user selects one way in the select dropdown menu, the two input fields hide so am using the javascript to show and hide two input fields

    Hope that makes sense
     
    Ian Haney, Jan 12, 2019 at 2:19 PM IP
  8. hdewantara

    hdewantara Active Member

    Messages:
    429
    Likes Received:
    36
    Best Answers:
    19
    Trophy Points:
    80
    #8
    Something inside #returninfo tries to tell you that one / two entries are still invalid and so it prevents submission? But then you hide it through your jQuery:) Hint: if #returninfo is not needed, then instead of just hide it try also to remove any required attributes inside its child elements.
     
    hdewantara, Jan 13, 2019 at 12:34 AM IP
  9. Ian Haney

    Ian Haney Greenhorn

    Messages:
    17
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #9
    I am so stupid, it was the required I had on the return time that was preventing the form was submitting, thank you hdewantara

    Thank you to others who replied as well, appreciate it
     
    Ian Haney, Jan 13, 2019 at 2:22 AM IP
  10. Spoiltdiva

    Spoiltdiva Prominent Member

    Messages:
    5,906
    Likes Received:
    1,546
    Best Answers:
    46
    Trophy Points:
    395
    #10
    You are not stupid. You are merely someone who made a mistake and has now learnt from it. At the very least, you are smarter than you were before.;)
     
    Spoiltdiva, Jan 13, 2019 at 6:38 AM IP
  11. Ian Haney

    Ian Haney Greenhorn

    Messages:
    17
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #11
    Thank you spoiltdiva. Have most definitely learned from the mistake, very true am that little bit smarter than before and know not to make the same mistake again
     
    Ian Haney, Jan 13, 2019 at 6:53 AM IP
    Spoiltdiva likes this.