Avoid form submitting multiple times through Javascript

Question

Let me Clear what title means: In my code for a validation purpose of one field dependent on field "t1" I need to auto submit my form once (Just Once). But my below code is submitting it infinite times and I know the reason why its happening. I guess Reason is everytime the form submits again JS in header runs. Please help me avoid this. Following is my code:

<html>
<head>
<script>
window.onload = function()
{   
    var f = document.getElementById("CheckForm");
    var temp = document.getElementById("CheckForm.t1");
    if(f.name == "CheckForm")
    {
      var temp1 = document.getElementById("t1");
      temp1.value = "Task";
    }
      document.CheckForm.submit();
}
</script>
</head>
<body>
      <form name="CheckForm" id="CheckForm" method="Post">
    <input type="text" id="t1" name="t1"/>
</form>
</body>
</html>

I tried stopping it using variable like flag and static variables like arguments.callee.count = ++arguments.callee.count || 1 and placing my CheckForm.submit() line in if clause. But nothing worked. Any advice or help is appreciable.

I am not sure why you have implemened the script the way you have ... butthis could be easily handle on the server side through cookie, ip adress or just loading a new page when the form has been submitted ie not re-serve this same page — brendosthoughts
– brendosthoughts, Commented Feb 26, 2014 at 4:30
Your url will change the next time you visit the page.. like ?CheckForm=Task. Then you can compare this in javascript and let it not submit again — SajithNair
– SajithNair, Commented Feb 26, 2014 at 4:32
@brendosthoughts Can you help me how to do this through cookies and ip address or by loading new page? — Vineeth Varma
– Vineeth Varma, Commented Mar 2, 2014 at 7:02
@VineethVarma I can indeed .. is there some reason that you have not adapted one of the suggestions below , specificaly robG's? I will write a way to handle it in php and post as an answer if your server side is in ruby or some other language it should be easy enough to adapt ip, addresses are nto an ideal way but I can show you how to check them in answer as well — brendosthoughts
– brendosthoughts, Commented Mar 2, 2014 at 20:14

SajithNair · Accepted Answer · 2014-02-26 04:34:56Z

1

<html>
<head>
<script>
window.onload = function()
{   
    var f = document.getElementById("t1");
    var temp = document.getElementById("CheckForm.t1");
    if(f.name == "CheckForm")
    {
      var temp1 = document.getElementById("CheckForm.t1");
      temp1.value = "Task";
    }
      if(window.location.search=="")document.CheckForm.submit();
}
</script>
</head>
<body>
      <form name="CheckForm">
              <input type="text" id="t1"/>
      </form>
</body>
</html>

answered Feb 26, 2014 at 4:34

SajithNair

3,8851 gold badge20 silver badges23 bronze badges

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

4 Comments

Vineeth Varma Over a year ago

Approach is fine. But I have form method Post type. Excuse me I missed to mention that.

SajithNair Over a year ago

You can still do this by giving a ?var=foo in your form action. <form action="?var=foo" method="post">

Vineeth Varma Over a year ago

I have an select element on which my requirement is rotating. I think I can submit form when user focus on it. So is it possible to add onfocus event from Javascript? I tried it with if(document.getElementById("selectElement").focus) submit(); but this is placing focus as soon as the form loads. I want it to happen only when user places the cursor there.

Vineeth Varma Over a year ago

I dont have access to edit code as the application is already built on cloud. I can customize only through html head additions. In ref to '?var=foo'. Thanks.

RobG · Accepted Answer · 2014-02-26 04:38:04Z

Surely your form is more complex than:

  <form name="CheckForm">
          <input type="text" id="t1">
  </form>

That will not submit anything to the server since there are no successful controls (the only control doesn't have a name).

Since the form is just submitting to the same page, you can submit a hidden value like:

  <form name="CheckForm">
          <input type="text" id="t1">
          <input type="hidden" name="hasBeenSubmitted" value="yes">
  </form>

Now when the form submits the URL of the new page will include ...?hasBeenSubmitted=yes so you can look for that value in the URL, e.g.

if (/hasBeenSubmitted=yes/.test(window.location.search)) {
    // this page loaded because the form was submitted
}

If it exists, don't submit the form again.

brendosthoughts · Accepted Answer · 2014-03-02 20:30:44Z

So since you are using a post method the easiest way's to handle this is to ubmitted to a new url , however you seem set on keeping the form submitted to the same url in which case is you are using php (or really any other language) you can check if the http request has a post attribute with a value t1

<?php 

if(isset($_POST['t1']){
        $your_text=$_POST['t1'];
        /*do some string checking to make safe and the throw into your database or mdo whatever you please with data
        if you wanted to include the ip address of the user you can get a basic and most likely client ip address like so

        $ip_address= $_SERVER['REMOTE_ADDR'];

        if you are handing a mulitpage form look into php session or similar tech ... cookies is kind of over kill for this scenario

         then include a succes page as the form has been submitted
         or you could end php with this tag ?> and then have your html and start again with <?
        */

        include 'form_submitted.php';

}else{
    //this would be the html page that you included in your question and can be handle in same ways as form submitted 
    include 'my_form.php'
}
?>

Ip address may not be best included as it would stop 2 user from filling out the form if they are in the same LAN for eg. 2 people in same office or same house (if your page is acttual on the worldwide web). I would take a look at @RobG answer as it he is basically suggesting the same type of thing with a get instead of post ANyways hope this helps

Collectives™ on Stack Overflow

Avoid form submitting multiple times through Javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related