Question

我想在不重新加载页面的情况下将数据提交到php页面。我有一些代码，但它似乎无法正常工作 - 它将我发送到action

中指定的页面

HTML：

<div class="content">
                        <div id="form">
                            <form action="form.php" id="contactForm" method="post">
                                <span>Name</span>
                                <input type="text" name="name" id="name" class="name" placeholder="Enter your name" tabindex=1 />
                                <span>Email</span>
                                <input type="text" name="email" id="email" class="email" placeholder="Enter your email" tabindex=2 />
                                <span>Message</span>
                                <textarea class="message" id="message" placeholder="Enter your message" tabindex=3></textarea>
                                <input type="submit" name="submit" id="submit" value="Send e-mail" class="submit" tabindex=4>
                            </form>
                        </div>

的Javascript / Jquery的：

<script type='text/javascript'>
/* attach a submit handler to the form */
$("#contactForm").submit(function (e) {

  /* stop form from submitting normally */
  e.preventDefault();
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
      url = $form.attr( 'action' );

  /* Send the data using post */
  var posting = $.post( url, { name: $('#name').val(), email: $('#email').val(), msg: $('#message').val() } );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>

修改：在控制台中，我在$("#contactForm").submit(function(event) {上发出uncaught referenceerror

时收到错误消息

Answer 1

您没有使用表单ID。请改用表单ID。

<div id="form">
    <form action="form.php" id="contactForm" method="post">
        <span>Name</span>
        <input type="text" name="name" id="name" class="name" placeholder="Enter your name" tabindex=1 />
        <span>Email</span>
        <input type="text" name="email" id="email" class="email" placeholder="Enter your email" tabindex=2 />
        <span>Message</span>
        <textarea class="message" id="message" placeholder="Enter your message" tabindex=3></textarea>
        <input type="submit" name="submit" id="submit" value="Send e-mail" class="submit" tabindex=4>
    </form>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$("#contactForm").submit(function (e) {
    e.preventDefault();
    var $form = $( this ),
        url = $form.attr( 'action' );
    var posting = $.post( url, { name: $('#name').val(), email: $('#email').val(), msg: $('#message').val() } );
    posting.done(function( data ) {
        alert('success');
    });
});
</script>

Answer 2

尝试以下方法：

$("#contactForm").submit(function (e) {
   // Your code
   return false;
});

preventDefault()与return false之间存在question的差异，并提供了一些很好的答案。

event.preventdefault在提交表单时无效

2 个答案: