Question

我正在尝试使用PHP将表单写入文本文件。这工作正常，但页面重新加载到空白页。

现在，我们已经在使用jQuery提交表单后出现了一条消息。目标是使页面不重新加载并且jQuery消息淡入。现在我不确定AJAX是否可以这样做但是这里是我的JS和HTML：

HTML：

<form action="form.php" method="post" name="rsvp">

                    <div id="name-block">

                        <input type="text" name="fullName" placeholder="Full Name" id ="full-name" class="textBox" tabindex="1"/>
                        <input type="text" name="email" placeholder="Email" id ="email" class="textBox" tabindex="2"/>

                    </div>

                    <label class="form-title" id="numbOfAttendees" >Number of Attendees</label>

                    <div id="attendance-block" class="form-categories">
                        <input type="number" min="1" name="attend" placeholder="eg:1" id ="numAttend" class="textBox" tabindex="6">
                    </div>

                    <div id="submit-block">
                        <h6 class="form-title" id="sposnorship">Can you help us out as a sponsor?</h6>
                        <input type="checkbox" name="sponsor" value="Yes" class="radio" id="sponsor">
                        <button type="submit" id = "button" >Submit</button>

                    </div>

                </form>

JS

$(document).ready(function() {


    $('form').bind('click', function(event){
        event.preventDefault();
        $.ajax({type: 'POST',
        url: '../form.php',
        data: 
        });
     });

 });

Answer 1

您应该使用jQuery's submit method来监听表单的submit事件，而不是click事件：

$(document).ready(function() {

$('form').submit(function(event){
    $.ajax({
      type: 'POST',
      url: '../form.php',
      data: {}
    });
    event.preventDefault();
});

});

当您event.preventDefault点击活动时，您只是停止了表单的点击事件，但表单的默认提交事件仍会触发（导致页面重新加载）。< / p>

JSFiddle示例：http://jsfiddle.net/pbhLpLay/

Answer 2

为避免页面重新加载，请使用return false而不是.preventDefault（）

 $(document).ready(function() {

  $('form').on('submit', function(event){

    $.ajax({
    type: 'POST',
    url: '../form.php',
    data: {}
    });
   return false;
 });

});

Answer 3

试试这种方式

<script>

$("#button").click(function () {

var fullname=$('#full-name').val();

var email=$('#email').val();

var number=$('#numAttend').val();

var sponsor=$('#sponsor').val();

$.ajax({ type: 'POST', url: '../form.php', data: {fullname1:fullname,email1:email,number1:number,sponsor1:sponsor}, success: function(data) { } }); }); </script>

提交表单并写入文件

3 个答案:

JSFiddle示例：http://jsfiddle.net/pbhLpLay/