jQuery reset form after post?

Question

I have a form; I am using jQuery to post this form, but now I wonder how I can "reset" the form when I posted done?

My jQuery and PHP code:

<?php
chdir('../');
    include("_mysql.php");
    include("_settings.php");
    include("_functions.php");
chdir('admin');

if (isset($_POST['rubric'])) { 
    if (empty($_POST['rubric']) && empty($_POST['content'])) { 
        echo '<div class="alert alert-error alert-box">Du måste fylla i alla fält.</div>'; 
    }
    else { 
        $rubric = $_POST['rubric'];
        $sql = "INSERT INTO ".PREFIX."news(`date`, `poster`)
        VALUES('".time()."', '".$userID."')"; 
        mysql_query($sql);
        $id = mysql_insert_id();
        $sql2 = "INSERT INTO ".PREFIX."news_contents(`newsID`,  `headline`, `content`)
        VALUES('".$id."', '".$rubric."', '".$_POST['content']."')";
        mysql_query($sql2);
        echo '<div class="alert alert-box alert-success">Klart, nyheten postad.</div>'; 
    }
}
?>

    $("#form").submit(function(event) {
    event.preventDefault();
    var poster = $.post('addnews.php', $(this).serialize());
    poster.done(function(data) {
        $(".result").html(data);
    });
});

Does anyone know how I can do this? Because now when I post a new the rubric and content is still there, and I dont really know how to unset the variables.

And I really still want my error, and accept message left if possible.

T.J. Crowder · Accepted Answer · 2013-07-08 07:36:05Z

5

HTMLFormElements have a reset function, so:

$("#form").submit(function(event) {
    var form = this;             // <=== Remember the form element

    event.preventDefault();
    var poster = $.post('addnews.php', $(this).serialize());
    poster.done(function(data) {
        $(".result").html(data);
        form.reset();            // <=== Use `reset`
    });
});

answered Jul 8, 2013 at 7:36

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tommy Over a year ago

Thank you very much! :) Worked perfectly, i have one more small question do you know how i can do to show the message just a few seconds?

T.J. Crowder Over a year ago

If the message is what you're displaying in the line $(".result").html(data);, then: setTimeout(function() { $(".result").hide(); }, 3000); will hide those elements after 3 seconds. Or alternately, you can make them empty rather than hidden via .empty() instead of .hide().

Tommy Over a year ago

I have a little problem again ^^! my textarea content is always empty when i post it? Even if i write something there

T.J. Crowder Over a year ago

@Tommy: Best to post that as a separate question, including the markup of the form and your code (which I'm guessing is pretty much the above).

Ayyappan Sekar · Accepted Answer · 2013-07-08 07:54:10Z

0

You can use form reset() method like

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

or in jQuery

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

answered Jul 8, 2013 at 7:54

Ayyappan Sekar

11.5k2 gold badges22 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery reset form after post?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related