Question

//表单提交的jquery

$(document).ready(function() {
var form = $('#form1'); // contact form
var submit = $('#submit1'); // submit button
var alert = $('.alert1'); // alert div for show alert message

// form submit event
form.on('submit', function(e) {
    e.preventDefault(); // prevent default form submit
    // sending ajax request through jQuery
    $.ajax({
        url: 'giftcard_check.php', // form action url
        type: 'POST', // form submit method get/post
        dataType: 'html', // request type html/json/xml
        data: form.serialize(), // serialize form data 
        beforeSend: function() {
            alert.fadeOut();
            submit.html('Checking....'); // change submit button text
        },
        success: function(data) {
            alert.html(data).fadeIn(); // fade in response data
            form.trigger('reset'); // reset form
            submit.html('Apply'); // reset submit button text
        },
        error: function(e) {
            console.log(e)
        }
    });
});
});

//我的表格

<p>
   <form action="" method="post" id="form1">
      <input type="text" name="valuebox" placeholder="type your code" required /> 
      <button name="submit" class="button1" type="submit" id="submit1">Apply</button>
   </form>
</p>
<div class="alert1">Hello</div>

// giftcard_check.php

include("include/dbconnection.php");

dbconnect();

session_start();

$_SESSION['fromttl']    =   0;

$valuebox   =   $_POST['valuebox'];

$query      =   "SELECT * FROM db_coupon WHERE code='$valuebox' AND publish='1'";
$result     =   mysql_query($query);
$length     =   mysql_num_rows($result);
$rows       =   mysql_fetch_array($result);
$discount   =   $rows['discount'];

if($length == 1)
{
    $_SESSION['fromttl']    =   $discount;
    echo $_SESSION['fromttl'];
}
else
{
    $_SESSION['fromttl']    =   0;
    echo "Invalid Gift Card!";
}

我的问题是如何刷新特定的div（即

 <div id="show"><?php echo $_SESSION['fromttl']; ?></div>

表格提交后立即

。

我目前的结果是在表单提交后没有刷新特定的div。我不想刷新整个页面，只有特定的div。如果我刷新整个页面，div将被刷新。

有什么解决方案吗？我被困在这里。

Answer 1

您应该尝试此操作，在return false;末尾放置一个form.on('submit',...，它将不会提交您的表单请求，您将保持同一页面：

//表单提交的jquery

$(document).ready(function() {
var form = $('#form1'); // contact form
var submit = $('#submit1'); // submit button
var alert = $('.alert1'); // alert div for show alert message

// form submit event
form.on('submit', function(e) {
    e.preventDefault(); // prevent default form submit
    // sending ajax request through jQuery
    $.ajax({
        url: 'giftcard_check.php', // form action url
        type: 'POST', // form submit method get/post
        dataType: 'html', // request type html/json/xml
        data: form.serialize(), // serialize form data 
        beforeSend: function() {
            alert.fadeOut();
            submit.html('Checking....'); // change submit button text
        },
        success: function(data) {
            alert.html(data).fadeIn(); // fade in response data
            form.trigger('reset'); // reset form
            submit.html('Apply'); // reset submit button text
            if(data != 'Invalid Gift Card!') {
              $('div.show').html(data);
            }
        },
        error: function(e) {
            console.log(e)
        }
    });
   return false;  //Will not active the form submission
});

});

//我的表格

<p>
   <form action="" method="post" id="form1">
      <input type="text" name="valuebox" placeholder="type your code" required /> 
      <button name="submit" class="button1" type="submit" id="submit1">Apply</button>
   </form>
</p>
<div class="show"></div>
<div class="alert1">Hello</div>

Answer 2

提交表单后，您可以将div的内容清除为：

 $("#show").html("");

然后，根据需要更新div内容。

Answer 3

使用jQuery empty（）清空所需分区的内容例如，如果要在表单重置后清除该div，则只需添加

...
},
        success: function(data) {
            alert.html(data).fadeIn(); // fade in response data
            form.trigger('reset'); // reset form
            $('#show').empty(); // clear div from previous content
            submit.html('Apply'); // reset submit button text
        },
...

如果＆＃34;显示＆＃34; div不需要为空使用html（）

如何在jquery表单提交后刷新特定的div

3 个答案: