模态联系表单必填字段不起作用

时间:2014-06-12 07:38:54

标签: php twitter-bootstrap mailing

我的页面上有一个模态,其中有一个联系表单。无论如何,像邮件这样的字段应该是必需的,但它只是立即发送,即使字段没有填写......这怎么可能?

模态:

<div class="modal fade" id="form-content" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="border-bottom: none;">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Contact</h4>
          </div>
        <div class="modal-body">
          <form class="contact" name="contact">
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input type="text" name="name" class="form-control" placeholder="Name" required="required">
            </div>
            <br/>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                <input type="email" name="email" class="form-control" placeholder="Mail">
            </div>
            <br/>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                <input type="url" name="website" class="form-control" placeholder="Website">
            </div>
            <br/>
            <textarea rows="6" name="message" class="form-control" placeholder="Message"></textarea>
          </form>
        </div>
        <div class="modal-footer" style="border-top: none;">
          <input class="btn btn-success" type="submit" value="Send!" id="submit">
        </div>
      </div>
    </div>
  </div>

PHP脚本:

<?php
$myemail = 'mail@mail.nl';
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
$website = strip_tags($_POST['website']);
echo "<br><span  style=\"display:table; margin:0 auto;\" class=\"alert alert-success\" id=\"alert-message\" data-alert=\"alert\">Your message has been received. Thank you!</span>";


$to = $myemail;
$email_subject = "Contact formulier van: $name";
$email_body = "Je hebt een nieuw bericht ontvangen via het contactformulier. ".
"Hier zijn de de details:\n Naam: $name \n ".
"Email: $email\n Website: $website \n Bericht: \n $message";
$headers = "From: $email\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}?>

修改 我还有一个main.js,向人们展示表格已被发送:

    $(document).ready(function () {
  $("input#submit").click(function(){
    $.ajax({
      type: "POST",
      url: "process.php", // 
      data: $('form.contact').serialize(),
      success: function(msg){
        $("#thanks").html(msg)
        $("#form-content").modal('hide'); 
        $('#thanks').delay(3000).fadeOut()
      },
      error: function(){
        alert("failure");
      }
    });
  });
});

2 个答案:

答案 0 :(得分:1)

您错过了表单中的操作和方法:action="yourpage.php" method="POST"

其中action引用您的php页面,method引用您发送数据的方式,在本例中为POST,如您的PHP代码中$_POST['name'](等)。

此外,提交内容 表格标记,而不是外部。

这样的事情:

<div class="modal fade" id="form-content" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header" style="border-bottom: none;">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Contact</h4>
      </div>
    <div class="modal-body">
      <form class="contact" name="contact">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-user"></i></span>
            <input type="text" name="name" class="form-control" placeholder="Name" required="required">
        </div>
        <br/>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="email" name="email" class="form-control" placeholder="Mail">
        </div>
        <br/>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-globe"></i></span>
            <input type="url" name="website" class="form-control" placeholder="Website">
        </div>
        <br/>
        <textarea rows="6" name="message" class="form-control" placeholder="Message"></textarea>
        <div class="modal-footer" style="border-top: none;">
          <input class="btn btn-success" type="submit" value="Send!" id="submit">
        </div>
      </form>
    </div>
  </div>
</div>

参考:http://www.w3schools.com/tags/tag_form.asp

答案 1 :(得分:0)

您必须在表单开放标记中提及表单方法和操作。然后检查输出。 例如,Form结构应该像,

<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>