как обновить конкретный DIV после отправки формы JQuery

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 пустой() , например, если вы хотите, чтобы очистить этот 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 
     }, 
... 

в случае, когда «шоу» DIV нужно не быть пустым использование HTML()