how to refresh a particular div after jquery form submission

Question

// My jquery for form submission

$(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)
        }
    });
});
});

// My form

<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!";
}

My question is how to refresh a particular div (ie,

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

) immediate after the form submission.

My current result not refreshing the particular div after form submission. I don't want to refresh whole page, only a particular div. If i refresh whole page the div will be refreshed.

Is there any solution? I am stuck here.

@JithinVarghese like...you want to clear the previous content and update the div with new content? — Viswanath Donthi, Mar 27 '15 at 09:19
`$("#show").html(new contents)`. Where does the new content come from? — Barmar, Mar 27 '15 at 09:21
Though you should not be using it that much at all, I would not name a variable `alert`, as it will overwrite `window.alert` . Name it better `$alert`, as it is a cached jQuery selection. — moonwave99, Mar 27 '15 at 10:11

score 1 · Accepted Answer · answered Mar 27 '15 at 10:07

You should try this, put a return false;at the end of your form.on('submit',... it will not submit your form request and you will stay on the same page :

// My jquery for form submission

$(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
});

});

// My form

<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>

score 0 · Answer 2 · answered Mar 27 '15 at 09:22

0

After your form submission, you can clear the content of div as:

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

Then, update the div content as you required.

answered Mar 27 '15 at 09:22

Viswanath Donthi

1,791
1
11
12

score 0 · Answer 3 · answered Mar 27 '15 at 09:45

empty the content of the division you want using jQuery empty() for example if you want to clear that div after form reset then simply add

...
},
        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
        },
...

in case that "show" div needs not to be empty use html()

how to refresh a particular div after jquery form submission

3 Answers3