How To Clear AJAX Form After Submit

[JakeJ]

I have an AJAX form and I'd like to clear the form fields after my form has successfully processed.

I just did my first AJAX form yesterday and got it to submit to the database, but I haven't a clue how to clear the form fields.

Thanks for the help!

[apeg]

the form submitting via ajax is the hard part... to clear your values just run through each input field and set the value to nothing... here is how its done in jQuery:

$(#containDiv input).val('');

that wont do select drop downs but you get the idea

-aPeg

[bftrs2]

I am looking to do the same thing, but didn't want to use a library like JQuery. I was trying to use something like document.myform.reset() in the ajax function after it sends the the data to the php script but that isn't working.

Any suggestions?

[aj_nsc]

document.getElementById('containerdiv').getElementsByTagName('input').value = '';

or, as you suggested:

<form id="myform">
.....
</form>

document.getElementById('myform').reset();

If it isn't working, then you need to post your code so we can tell you why.

[bftrs2]

Here is the code I was trying that isn't working, my form's id="myform":

function postData() {
    var poststr = "fname=" + encodeURI( document.getElementById("fname").value ) +
    "&lname=" + encodeURI( document.getElementById("lname").value ) +
    "&email=" + encodeURI( document.getElementById("email").value ) +
    "&month=" + encodeURI( document.getElementById("month").value ) +
    "&day=" + encodeURI( document.getElementById("day").value ) +
    "&year=" + encodeURI( document.getElementById("year").value ) +
    "&bg=" + encodeURI(chosen) +
    "&text=" + encodeURI(chosen2) +
    "&subject=" + encodeURI( document.getElementById("subject").value ) +
    "&senddata=" + encodeURI( document.getElementById("senddata").value ) +
    "&blog=" + encodeURI( document.getElementById("blog").value );

    req.open("POST", "insert.php", true);
    req.onreadystatechange = useResponse;
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.setRequestHeader("Content-length", poststr.length);
    req.setRequestHeader("Connection", "close");
    req.send(poststr);
    document.getElementById("myform").reset();
}

Basically after it runs the ajax stuff to send the data to the database (my php file handles all that) I'd like the form to clear. The code works as it should except for clearning the form after. I also tried clearing the value of each input field as you suggested but that didn't work as well. I tried moving the one line of code to clear the form to the 3rd ajax function that handles the returned data but that didn't work either. Any other suggestions or do you need to see more of the code? Thanks for your help.

[bftrs2]

Forgot to add, it's not throwing any errors in Firebug or Firefox Error Consol.

[aj_nsc]

Given the code you posted, as long as the postData() function is being called, I don't see any reason why the form isn't getting reset.

The ways to clear are form are (1) to use the reset() method - http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx or (2) to set the value of input elements to nothing using input.value = '';

If those methods don't do anything, the only assumption I can make is they either aren't getting executed.

[bftrs2]

I threw some alerts in to try and troubleshoot and they popping up okay. I only have the one form on the page so there shouldn't be any conflicts there. I'll keep playing with it and if I find a solution will post.

Thanks for taking the time to look at my code.

[bftrs2]

Yeah! I fixed the problem. According to Mozilla's dev center any control holding the name or id "reset" will mask the form.reset() function. I had a reset button on the form also and it's name was "reset". Changing the name of the button to "clear" solved the problem.

[aj_nsc]

Yeah! I fixed the problem. According to Mozilla's dev center any control holding the name or id "reset" will mask the form.reset() function. I had a reset button on the form also and it's name was "reset". Changing the name of the button to "clear" solved the problem.

Ah, interesting to know. Thanks for posting the solution.