Looping a javascript input to a html form

Question

I'm using javascript to enter text into my webpage in a form. I'm using numbers for my test, starting at 1 and incrementing by one to 1000.

num=1

while (num<1001){
  document.getElementById('numberIn').value=num
  document.forms[0].submit()
  num+1
}

While it puts in the first number (1) and submits, it then freezes and fails to do anything further. The form just directs back to the current page when it is submitted. How can I get it to loop properly, inputting 1, submitting, directing back to the same page (blank), inputting 2, submitting again, etc, etc? Thanks

Smeegs · Accepted Answer · 2016-09-19 04:51:41Z

2

You've created an infinite loop.

You need to do num++ or num = num + 1 not just num+1

You're not incrementing the variable, you just calculating what num+1 is.

answered Sep 19, 2016 at 4:51

Smeegs

9,2346 gold badges46 silver badges79 bronze badges

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

4 Comments

Mairaj Ahmad Over a year ago

Even this doesn't solve the problem form will be submitted only once

Jim Jamesy Over a year ago

With that silly oversight fixed, any way the script can be carried over to when the page refreshes and inputs it again?

snit80 Over a year ago

@JimJamesy please look at my answer

snit80 Over a year ago

@Smeegs that is definitely not going to solve the problem

deviantxdes · Accepted Answer · 2016-09-19 05:06:53Z

0

Try using SessionStorage, it stores the number even tho the page reloads.

$( document ).ready(function() {
        var num = 1000;
    if (!sessionStorage['currentNo']) {  
        sessionStorage['currentNo'] = 0;
    }

        if(sessionStorage['currentNo']<= num)
        {
          document.getElementById('numberIn').value=sessionStorage['currentNo'];
           sessionStorage['currentNo'] = sessionStorage['currentNo']+1;
          document.forms[0].submit();
        }

});

answered Sep 19, 2016 at 5:06

deviantxdes

4775 silver badges17 bronze badges

Comments

snit80 · Accepted Answer · 2016-09-19 05:10:15Z

0

Once the form is submitted, HTML page is basically refreshed and it means that that num will always be 1 and you will only submit 1 always. If you indeed need to submit but need to submit values from 1 to 100, then you will need to store the num value in a cookie before submitting each time and then increment the value by reading it from the cookie, that is the only way. Use the below functions to read and set cookie

var createCookie = function(name, value, days) {
var expires;
if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
}
else {
    expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
if (document.cookie.length > 0) {
    c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
        c_start = c_start + c_name.length + 1;
        c_end = document.cookie.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = document.cookie.length;
        }
        return unescape(document.cookie.substring(c_start, c_end));
    }
}
return "";
}

does that help?

edited Sep 19, 2016 at 5:10

answered Sep 19, 2016 at 5:02

snit80

7317 silver badges15 bronze badges

2 Comments

Jim Jamesy Over a year ago

Okay, we got to this part, any idea how to do this?

snit80 Over a year ago

@JimJamesy I have added code to read and write into cookie, hope that helps

enhzflep · Accepted Answer · 2016-09-19 05:23:22Z

Any reason not to use AJAX I wonder?

With it, you can request or submit info without leaving the current page. In this case, it sounds ideal. We can programmatically fill input(s) on the form, submit it, change elements and submit it again - as many times as we please.

Here's a quick'n'dirty sample implementation.

It prints to the console 10 times.

1. FormAction.html

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id){return document.getElementById(id);}

function myAjaxPostForm(url, formElem, successCallback, errorCallback)
{
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function()
    {
        if (this.readyState==4 && this.status==200)
            successCallback(this);
    }
    ajax.onerror = function()
    {
        console.log("AJAX request failed to: " + url);
        errorCallback(this);
    }
    ajax.open("POST", url, true);
    var formData = new FormData(formElem);
    ajax.send( formData );
}
////////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    byId('goBtn').addEventListener('click', onGoBtn, false);
}

var curIter = 0, maxIter=10;
function onGoBtn(evt)
{
    byId('numberIn').value = curIter;
    myAjaxPostForm('formAction.php', byId('mForm'), onAjaxDone);

    function onAjaxDone(ajax)
    {
        console.log(ajax.responseText);
        curIter++;
        if (curIter < maxIter)
        {
            byId('numberIn').value = curIter;
            myAjaxPostForm('formAction.php', byId('mForm'), onAjaxDone);
        }
    }
}
</script>
<style>
</style>
</head>
<body>
    <button id='goBtn'>GO!</button>
    <form id='mForm'>
        <input type='number' id='numberIn' name='numberIn'/>
    </form>
</body>
</html>

2. FormAction.php

<?php
    echo $_POST['numberIn'] . "\n";
?>

Beginner · Accepted Answer · 2016-09-19 05:42:43Z

0

try this just use sessionStorage to increment your value even your page refresh. edit your sessionStorage to num + 1 when your num is still less than limit

if ( localStorage.getItem('completed') == "true" ) {
  console.log('Completed');

  // do something here
} else {
  var num = (localStorage.getItem('num') == null) ? 1 : localStorage.getItem('num');
  num = parseInt(num);

  if (num < 5) {
    localStorage.removeItem('num');
    localStorage.setItem('num', num+1);

    document.getElementById('numberIn').value=num
    document.forms[0].submit();
  } else {
    localStorage.setItem('completed',true);
  }
}

edited Sep 19, 2016 at 5:42

answered Sep 19, 2016 at 5:36

Beginner

4,1183 gold badges19 silver badges27 bronze badges

Comments

shan · Accepted Answer · 2016-09-19 06:29:34Z

When the page is reloaded, the variable num is re-initialized to 1. Thus this makes an infinite loop of page refresh. Use some persistent storage mechanism like localStorage to retain the variable value after page refresh to avoid this problem.

if(localStorage.getItem("num") == null || localStorage.getItem("num") == 'null'){
    localStorage.setItem("num", 1);
    num=Number(localStorage.getItem("num"));
    while (num<1001){
      //debugger;
      document.getElementById('numberIn').value=num;
      console.log(num);
      document.forms[0].submit();
      num++;
    }
  }

You can uncomment the debugger in while loop to see the updating values, step by step. Call this reset function if you need to reset the persistent variable

reset = function(){ localStorage.getItem("num", null); }

Collectives™ on Stack Overflow

Looping a javascript input to a html form

6 Answers 6

4 Comments

Comments

2 Comments

1. FormAction.html

2. FormAction.php

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

2 Comments

1. FormAction.html

2. FormAction.php

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related