CODEWITHSUNDEEP
javascripthtmlformsvalidation
Vineeth Varma
Vineeth Varma

Reputation: 609

Avoid form submitting multiple times through Javascript

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.

Upvotes: 0

Views: 174

Answers (3)

brendosthoughts
brendosthoughts

Reputation: 1703

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

Upvotes: 0

RobG
RobG

Reputation: 147413

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.

Upvotes: 1

SajithNair
SajithNair

Reputation: 3867

<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>

Upvotes: 1

Related Questions