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 <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"> </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"> </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> <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"> </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
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?
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
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?
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
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
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.
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
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.
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