Menu
I have a form in Bootstrap 3 that's inside a modal. There's a button called "submit" where when it's clicked the stuff that was entered in the form should be sent to an email address. Although when I click "Submit" nothing happens.
Does anyone know why this happens? Here's the form:
<div class="modal fade" id="contactPop" tabindex="-1" role="dialog" aria-labelledby="contactModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <!-- Close button. --> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <!-- Title. --> <h3 class="modal-title" style="font-family: 'Lato', sans-serif; font-weight: 700;"> Contact Us <small style="font-family: 'Lato', sans-serif; font-weight:400;"> You matter to us.</small> </h3> </div> <!-- User input fields. --> <form class="contact" action="process.php" method="post"> <div class="modal-body"> <div class="row"> <div class="col-sm-6"> <label class="control-label">Subject</label> <input type="text" class="form-control" required="required" placeholder="I aciddentally the website!" name="subject"> </div> <div class="col-sm-6"> <label class="control-label">Username</label> <input type="text" class="form-control" required="required" placeholder="Notch" name="username"> </div> </div> <br> <div class="row"> <div class="col-sm-6"> <label class="control-label">Message</label> <textarea class="form-control" rows="8" style="resize: vertical;" required="required" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget fermentum justo, sit amet semper." name="message"></textarea> </div> <div class="col-sm-6"> <label class="control-label">Email</label> <input type="email" class="form-control" required="required" placeholder="[email protected]" name="email"> </div> <div class="col-sm-6" style="line-height: 21px;"> <br> <p>Responses are usually received within 1-2 business days.</p> <p>Please be as clear and concise as possible, in order to help us process your inquiry faster.</p> </div> </div> </div> <!-- Close & submit buttons. --> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button> <button type="button" value=" Send" class="btn btn-success" type="submit" id="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button> </div> </div> </div> </div> There's also the process.php that sends the form, which is here:
<?php //add the recipient's address here $myemail = '[email protected]'; //grab named inputs from html then post to #thanks if (isset($_POST['name'])) { $name = strip_tags($_POST['name']); $email = strip_tags($_POST['email']); $message = strip_tags($_POST['message']); echo "<span class=\"alert alert-success\" >Your message has been received, and we will get back to you as soon as possible. Here is what you submitted:</span><br><br>"; echo "<stong>Name:</strong> ".$name."<br>"; echo "<stong>Email:</strong> ".$email."<br>"; echo "<stong>Message:</strong> ".$message."<br>"; //generate email and send! $to = $myemail; $email_subject = "Contact form submission: $name"; $email_body = "You have received a new message. ". " Here are the details:\n Name: $name \n ". "Email: $email\n Message \n $message"; $headers = "From: $myemail\n"; $headers .= "Reply-To: $email"; mail($to,$email_subject,$email_body,$headers); } ?> And then in the index there's also the javascript that is supposed to submit the form.
<script type="text/javascript"> $(document).ready(function () { $("input#submit").click(function(){ $.ajax({ type: "POST", url: "process.php", //process to mail data: $('form.contact').serialize(), success: function(msg){ $("#thanks").html(msg) //hide button and show thank you $("#form-content").modal('hide'); //hide popup }, error: function(){ alert("failure"); } }); }); }); </script> If someone could help that would be greatly appreciated!
835
Sometimes the problem is caused by old versions of the Javascript files, cached by your browser and can be fixed by clearing the browser cache. You can use the browser console of your browser for debugging. After the Javascript error is fixed, the submit button will automatically be enabled.
Submit button automatically submits a form on click. Using HTML forms, you can easily take user input. The <form> tag is used to get user input, by adding the form elements. Different types of form elements include text input, radio button input, submit button, etc.
To link a submit button to another webpage using HTML Form Tags: Using the HTML Form's Action Attribute, we can link the submit button to a separate page in the HTML Form element. Here, declare/write the “Submit button” within HTML Form Tags and give the File Path inside the HTML form's action property.
Your problem is this
<button type="button" value=" Send" class="btn btn-success" type="submit" id="submit" /> You've set the type twice. Your browser is only accepting the first, which is "button".
<button type="submit" value=" Send" class="btn btn-success" id="submit" /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
