Submit button not working in Bootstrap form
124,050
Solution 1
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" />
Solution 2
Replace this
<button type="button" value=" Send" class="btn btn-success" type="submit" id="submit">
with
<button value=" Send" class="btn btn-success" type="submit" id="submit">
Solution 3
- If you put
type=submit
it is a Submit Button - if you put
type=button
it is just a button, It does not submit your form inputs.
and also you don't want to use both of these
Author by
user3027207
Updated on October 26, 2021Comments
-
user3027207 over 2 years
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!