www.webdeveloper.com
Results 1 to 10 of 10

Thread: Clear Form After Submit

  1. #1
    Join Date
    Jun 2012
    Posts
    12

    Clear Form After Submit

    Hello!

    I'm working with a form for users to submit their id to a form, which carries that information over and submits to another form. I've managed to complete the function of carrying over the data; however, the field does not clear after submission. This is a bit of a security risk for our users and I was hoping someone could assist me in finding a remedy.

    Thank You!

  2. #2
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    Can't you simply set the .value property to NULL? In other words:

    Code:
    function something()
    {
        // Do something
    
        // After doing that, clear the elements
    
        document.getElementById("some_element_id").value = "";
    }
    Not sure if that's what you need? Seems pretty simple.

  3. #3
    Join Date
    Jun 2012
    Posts
    12
    nope. doing so disables the function of the script.

  4. #4
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    If altering the .value property of the form element is causing your function to become unpredictable or broken in some way, then you're doing something wrong. I'm also confused at how your form elements are retaining data if you're submitting the form. Are you submitting via AJAX? If not, they should be automatically cleared once the page refreshes.

    You could try setting the .value property to "" when you actually declare the element, like so:

    Code:
    <input type="text" value="" size="25" maxlength="65" id="some_text" name="some_text" />
    Altering .value doesn't effect the parent function whatsoever. If you need help with your code you're going to have to post it.

  5. #5
    Join Date
    Jun 2012
    Posts
    12
    the code:
    Code:
    <script type="text/javascript"> 
    function post_to_url( params, method) 
    {
    method = "post"
    var form = document.getElementById("form1");
    form.setAttribute("method", method);
    form.setAttribute("target" , "_blank");
    var path= "domain.com";
    form.setAttribute("action", path);
    form.submit();
     }     
     function ValidateSubmit()
     {
       if(document.getElementById("txtUsername").value=="")
       {
       alert("Please enter username.")
       return false;
       }
       return true;
     }
    </script>
    </head>
    <body>
    <h3 class="orange_hader toggle open"> Login</h3>
    <ul style="display:block;">
      <li class="loginWidget">
    
    <form id="form1">
    User Name:
    <input type ="text" name ="txtUsernameRL" id="txtUsername" value=""/>
    <div class="SubmitEnrol" style="margin-top: 5px;">
            <input type="button" value="Submit" name="Submitbtn" id="Submitbtn" class="submitLogIn bigBtn" onsubmit='return doLoginRefresh()' onclick="if(!ValidateSubmit()){return;} else {post_to_url(txtUsername.value,'post')}" />
    </form>
    </li>
    </ul>
    I'm, unfortunately, working within a widget in a wordpress CMS. This seems to hinder javascript from functioning as it normally would sometimes.

  6. #6
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    Okay, I still don't understand why the JavaScript wouldn't work. I despise WordPress and this apparently seems to be another reason to add to my list.

    Anyway, after looking at your code I can see a few things that don't seem quite right. I don't know if rewriting your code will fix the errors, but it'll be worth a shot since I can't see the rest of it. Anyway:

    Code:
    onsubmit='return doLoginRefresh()' 
    onClick="if(!ValidateSubmit()){return;} else {post_to_url(txtUsername.value,'post')}" />
    This is unnecessary, surely? Plus, it's atrocious to look at. People really need to get into the habit of using event handlers more appropriately. In-line coding is archaic.

    You're also passing in "post" when calling the function, but then you're forcing it to "post" in the function itself. The function is passing in both the .value and "post", but that's unnecessary since you're hard-coding the value. I've taken the liberty of cleaning up some of your code and rewriting it to better suit standard practice. I still can't figure out why altering .value would stop the function working. By the way, you were also missing a closing </div> tag.

    Code:
    <h3 class="orange_hader toggle open">Login</h3>
    
    <ul style="display:block;">
            <li class="loginWidget">
                <form id="form1">
                    User Name:
                    <input type ="text" name ="txtUsernameRL" id="txtUsername" value="" />
                        <div class="SubmitEnrol" style="margin-top: 5px;">
                            <input type="button" value="Submit" name="Submitbtn" id="Submitbtn" class="submitLogIn bigBtn" />
                        </div>
                </form>
            </li>
    </ul>
    
    <script type="text/javascript"> 
    
    document.getElementById("Submitbtn").addEventListener("click", ValidateSubmit, false);
    document.getElementById("Submitbtn").addEventListener("submit", doLoginRefresh, false);
    
    function post_to_url(params, method) 
    {
    	method = "post"
    	
    	var form = document.getElementById("form1");
    	var txtUsername = document.getElementById("txtUsername").value;
    	
    	form.setAttribute("method", method);
    	form.setAttribute("target" , "_blank");
    	
    	var path= "domain.com";
    	
    	form.setAttribute("action", path);
    	form.submit();
    }     
    
    function ValidateSubmit()
    {
    	if(document.getElementById("txtUsername").value=="")
    	{
    		alert("Please enter username.")
    		return false;
    	}
    	return true;
    }
    </script>
    Also, using return true and return false in your ValidateSubmit function will have no effect on the script. It's good practice to put them in, but just thought I'd throw that out there too. There's nothing to return to.
    Last edited by George88; 08-06-2012 at 03:09 PM.

  7. #7
    Join Date
    Jun 2012
    Posts
    12
    I really can't stand working with wordpress and the base of this code was provided by one of our vendors. It wasn't functioning when they sent it over and I've managed to get this far... thus the frankenstein like code before you. It would seem that the wordpress devil strikes again. It seems to not function whatsoever. I don't receive a prompt that there is no username when the field is empty.

    (thank you for your patience and help by the way)

  8. #8
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    I've just tested the above code in all browsers. I can't for the life of me figure out why it doesn't work in MSIE. The function is simply not being called when the "click" event fires. All other browsers work as expected.

    For now I'm going to have to say I'm sorry but I can't help further. Someone else might be able to, though. Also, I'm not too clued up on my CSS, but isn't it illegal to have spaces in your class names?

    Sorry.

  9. #9
    Join Date
    Jun 2012
    Posts
    12
    yes... that would be the genius vendor.. they also made our orange headers labeled "blue"

  10. #10
    Join Date
    Jun 2012
    Posts
    12
    Thank you again for your help! I greatly appreciate it.

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