javascript - How can i refresh form after submit? - Stack Overflow

admin管理员组

文章数量:1312849

i have form like

<form id="abc">
<div>
<select >
<option id= "1"> ha1 </option>
<option id= "1"> ha2 </option>
<option id= "1"> ha3 </option>
<option id= "1"> ha4 </option>
</select>
<input type="submit">
</div>
</form>

for form submit i have used like

 $(document).ready(function() {

        $('#abc').submit(function(){

            $.post('filter.php', $(this).serialize(), function(data){

          $('#abc').reset();  //(this).reset();  

            });             

            return false;


        });

    });

Here reset is not working. Any problem with reset i am not getting. After form submit, i want to refresh form with db values (to display values selected just now).

how can i refresh page after submit or either div refresh.

i have form like

<form id="abc">
<div>
<select >
<option id= "1"> ha1 </option>
<option id= "1"> ha2 </option>
<option id= "1"> ha3 </option>
<option id= "1"> ha4 </option>
</select>
<input type="submit">
</div>
</form>

for form submit i have used like

 $(document).ready(function() {

        $('#abc').submit(function(){

            $.post('filter.php', $(this).serialize(), function(data){

          $('#abc').reset();  //(this).reset();  

            });             

            return false;


        });

    });

Here reset is not working. Any problem with reset i am not getting. After form submit, i want to refresh form with db values (to display values selected just now).

how can i refresh page after submit or either div refresh.

• javascript
• jquery
• ajax

Share Improve this question Follow edited Nov 26, 2012 at 10:06 Arun Manjhi 17399 bronze badges asked Nov 25, 2012 at 19:07 jayajaya 32733 gold badges44 silver badges1616 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

$(document).ready(function() {
    $('#abc').submit(function(){
        $.post('filter.php', $(this).serialize(), function(data){
        window.location.href=window.location.href;  
        });             
        return false;
    });

});

reloads the page by setting the href to the actual one :)

or you can also use this:

parent.document.getElementById("abc").reload();

by the way: i dont see your serverside code, you have to render the selected values, of course, i am assuming that you are returning them, my answer doesnot cover the serverside scene. my code is only for the case that you are returning the selected values from server after saving them into db.

Reset form fields using Pure JavaScript.

document.getElementById("formid").reset();

If you own server side code, you can return the values in the response and then fill the fields with these values in the callback.

Let's say this is your response JSON:

{
    data: [{
             "username": "john doe"
    }]
}


$('#abc').submit(function(){
    $.post('filter.php', $(this).serialize(), function(data){

        $('#abc').reset();  //(this).reset();  

        $('input#username').val(data.username);
    });             

    return false;
});

As said in the answer by doniyor, you can use window.location.href to refresh the page, but this will not populate your form with the values you just wrote to your database.

you have two options available for populating your form with the database, implementing both might be desirable in your case (up to you).

The first is to populate the form when you first load your html. This can be done server side by making a query to your database and getting the values, and then setting the correct radio button based on the value like so:

<input type="radio" selected="selected" />

The other option is to set the checkboxes async with jquerys .prop() method. This requires that your tags have unique ID's (which they should have anyways). Example:

$("#yourIDHere").prop('checked',true);

In the latter case, you could have the script you post to output the correct ID to use. This is up to your discretion, and is dependant on your case, but hopefully this answer points you in the right direction.

Best regards

Try to use this,

$('#abc').submit(function(){
    $.post('filter.php', $(this).serialize(), function(data){

        $('#abc').find('input:text, input:password, input:file, select, textarea').val('');
        $('#abc').find('input:radio, input:checkbox')
        .removeAttr('checked').removeAttr('selected');

    });             

  return false;
});

本文标签： javascriptHow can i refresh form after submitStack Overflow