www.webdeveloper.com
Results 1 to 10 of 10

Thread: How To Clear AJAX Form After Submit

  1. #1
    Join Date
    Jun 2010
    Posts
    25

    How To Clear AJAX Form After Submit

    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!

  2. #2
    Join Date
    Sep 2009
    Posts
    146
    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:
    Code:
    $(#containDiv input).val('');
    that wont do select drop downs but you get the idea

    -aPeg

  3. #3
    Join Date
    Oct 2010
    Posts
    45

    Is there a way to do it without a library like JQuery?

    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?

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Code:
    document.getElementById('containerdiv').getElementsByTagName('input').value = '';
    or, as you suggested:

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

    Code:
    document.getElementById('myform').reset();
    If it isn't working, then you need to post your code so we can tell you why.
    Last edited by aj_nsc; 04-16-2011 at 06:45 PM.

  5. #5
    Join Date
    Oct 2010
    Posts
    45
    Here is the code I was trying that isn't working, my form's id="myform":

    Code:
    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.

  6. #6
    Join Date
    Oct 2010
    Posts
    45
    Forgot to add, it's not throwing any errors in Firebug or Firefox Error Consol.

  7. #7
    Join Date
    Dec 2005
    Posts
    2,984
    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.

  8. #8
    Join Date
    Oct 2010
    Posts
    45
    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.

  9. #9
    Join Date
    Oct 2010
    Posts
    45
    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.

  10. #10
    Join Date
    Dec 2005
    Posts
    2,984
    Quote Originally Posted by bftrs2 View Post
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles