Подтвердить что ты не робот

Кнопка "Отправить" не работает в форме "Bootstrap"

У меня есть форма в Bootstrap 3, которая внутри модального. Там кнопка, называемая "отправить", когда при нажатии на материал, который был введен в форму, должен быть отправлен на адрес электронной почты. Хотя, когда я нажимаю "Отправить", ничего не происходит.

Кто-нибудь знает, почему это происходит? Здесь форма:

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

Там также process.php, который отправляет форму, которая находится здесь:

<?php
//add the recipient 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);
}
?>

А затем в индексе есть также javascript, который должен отправить форму.

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

Если кто-то может помочь, это будет очень полезно!

4b9b3361

Ответ 1

Ваша проблема в этом

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

Вы установили тип дважды. Ваш браузер принимает только первый, "button".

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

Ответ 2

Замените это

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

с

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

Ответ 3

  • Если вы положили type=submit, это кнопка Отправить
  • если вы положили type=button, он просто на кнопку, он не отправляет ваши входы формы.

а также вы не хотите использовать оба этих

Ответ 4

Классы .btn предназначены для элементов или (хотя некоторые браузеры могут применять немного другой рендеринг).

Если вы используете классы .btn для элементов, которые используются для запуска функций, например. сворачивая контент, эти ссылки должны иметь роль role = "button", чтобы адекватно сообщить их значение вспомогательным технологиям, таким как программы чтения с экрана. Я надеюсь, что это поможет.