我正在使用javascript在表單中將文本輸入到我的網頁中。我使用的號碼，我的測試，從1開始，並通過一個遞增到1000將javascript輸入循環到html表單

num=1 

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

雖然它放入第一個數字（1）並提交，然後死機而無法做其他事情。提交表單時，表單會直接返回到當前頁面。我怎樣才能讓它正常循環，輸入1，提交，回到同一頁面（空白），輸入2，再次提交等等？謝謝

來源

2016-09-19 Jim Jamesy

您創建了一個無限循環。

你需要做num++或num = num + 1不僅僅是num+1

你不增加變量，你只計算NUM + 1是什麼。

來源

2016-09-19 04:51:41 Smeegs

即使這並沒有解決'form'將提交一次 – Mairaj

這是一個很好的點 – Smeegs

有了固定的那個傻傻的監督問題，當頁面刷新並重新輸入時，腳本可以繼承的任何方式？ –

提交表單後，HTML頁面基本上會刷新，這意味着該num始終爲1，並且只會始終提交1。如果您確實需要提交但需要提交1到100的值，那麼您需要在每次提交前將num值存儲在cookie中，然後通過從cookie中讀取值來增加值，這是唯一的方法。使用下面的函數來讀取和設置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 ""; 
}

這樣做有幫助嗎？

來源

2016-09-19 05:02:44 snit80

好吧，我們到了這個部分，任何想法該怎麼做？ –

@JimJamesy我已經添加了代碼來讀取和寫入cookie，希望有幫助 – snit80

嘗試使用SessionStorage，它甚至會在頁面重新加載時存儲數字。

$(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(); 
     } 

});

來源

2016-09-19 05:06:53 deviantxdes

任何理由不使用AJAX我不知道？

有了它，您可以在不離開當前頁面的情況下請求或提交信息。在這種情況下，這聽起來很理想。我們可以以編程方式填寫表單上的輸入內容，提交內容，更改內容並再次提交 - 只要我們滿意即可。

下面是一個quick'n'dirty示例實現。

它打印到控制檯10次。

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"; 
?>

來源

2016-09-19 05:23:22 enhzflep

當頁面被重新加載，則變量num被重新初始化爲1。因此，這使得無限循環的頁面刷新。使用像localStorage這樣的持久性存儲機制在頁面刷新後保留變量值以避免此問題。

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++; 
    } 
    }

您可以取消註釋while循環中的調試器以逐步查看更新值。呼叫如果你需要重置持續可變

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

來源

2016-09-19 05:35:04 shan

請解釋正確編輯它！ –

試試這個只是使用的sessionStorage來增加你的價值，即使你的頁面刷新此復位功能。編輯您的sessionStorage爲num + 1，當你NUM仍低於限制

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); 
    } 
}

來源

2016-09-19 05:36:00 Beginner

將javascript輸入循環到html表單

回答

1. FormAction.html

2. FormAction.php

相關問題