it-swarm.com.de

Submit Button funktioniert nicht in Bootstrap Form

Ich habe ein Formular in Bootstrap 3, das sich in einem Modal befindet. Es gibt eine Schaltfläche mit der Bezeichnung "Submit" (Senden), über die die in das Formular eingegebenen Daten an eine E-Mail-Adresse gesendet werden sollen Ich klicke auf "Senden", nichts passiert.

Weiß jemand, warum das passiert? Hier ist das Formular:

<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">&times;</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>

Es gibt auch die process.php, die das Formular sendet, und zwar hier:

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

Und dann gibt es im Index auch das Javascript, das das Formular senden soll.

 <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>

Wenn jemand helfen könnte, wäre das sehr dankbar!

29
user3027207

Dein Problem ist das

<button type="button" value=" Send" class="btn btn-success" type="submit" id="submit" />

Sie haben den Typ zweimal festgelegt. Ihr Browser akzeptiert nur die erste Schaltfläche.

<button type="submit" value=" Send" class="btn btn-success" id="submit" />
53
Popnoodles

Ersetzen Sie diese

 <button type="button" value=" Send" class="btn btn-success" type="submit" id="submit">

mit

<button  value=" Send" class="btn btn-success" type="submit" id="submit">
24
james
  • Wenn Sie type=submit es ist ein Submit Button
  • wenn du type=button es ist nur eine Schaltfläche, Es werden keine Formulareingaben gesendet.

und Sie möchten auch nicht beide verwenden

4
Alupotha