Javascript body onload

我剛剛在使用Javascript和我在頁面加載事件的麻煩。提交表格1後，應出現表格2。Javascript body onload

<html> 
<head> 
<script src="jquery1.9.1.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="sCss.css"> 
</head> 
<script type="text/javascript"> 
function hide(obj1) {  
    obj1 = document.getElementById(obj 1); 
    if (document.cookie.indexOf('mycookie') == -1) { 
     document.cookie = 'mycookie = 1'; 
     obj1.style.display = 'none'; 
    } else { 
     obj1.style.display = 'block'; 
    } 
} 

function show(obj2) { 
    var cookie = "test" 
    obj2 = document.getElementById(obj2); 
    obj2.style.display = 'block'; 
    document.cookie = 'mycookie = 1'; 
} 

</script> 
<body onload="hide('form2')"> 
    <form id="form1" onsubmit="show('form2')"> 
     <table id="table1" border="1" > 
     <tr> 
      <td> 
      <input type="text" name="txt1" id="txt1" /> 
      </td> 
      <td> 
      <input type="submit" name="submit1" id="submit1" /> 
      </td> 
     </tr> 
     </table> 
    </form> 
    <form id="form2"> 
     <table id="table2" border="1" > 
     <tr> 
      <td> 
      <input type="text" name="txt2" id="txt2" /> 
      </td> 
      <td> 
      <input type="submit" name="submit2" id="submit2" /> 
      </td> 
     </tr> 
     </table> 
    </form> 
</body> 
</html>

根據給出的代碼。點擊form1的提交按鈕後，form2出現並立即消失。

來源

2013-10-08 zxc

你真正想要提交表單？或者您是否想要顯示下一部分信息要完成？ –

@johnGerdsen tnx詢問..在我的情況下，他們需要提交表單，然後另一種形式將彈出，btw我張貼的代碼只是一個原型，因爲我無法妥善處理onload事件:( – zxc

'提交'意味着一些特殊的你只是想隱藏form1並顯示form2？ – sync

我想你應該放棄試圖做到這一點的onload方法。如果你想發佈到同一頁面，也許你應該設置你的表格以查詢字符串發佈?submitted=true然後，你可以閱讀這與JavaScript，以確定你是否應該顯示你的下一個表格。

看一看

<form id="form1" action="index.html?submitted=true" method="post" onsubmit="show('form2')"> 
<table id="table1" border="1" > 
<tr> 
<td> 
<input type="text" name="txt1" id="txt1"> 
</td> 
<td> 
<input type="submit" name="submit1" id="submit1"> 
</td> 
</tr> 
</table> 
</form>

見我已經改變了行動，以反映當前頁面（假設它index.html）和我已經添加一旦表單提交你的查詢字符串（?submitted=true）可使用Javascript從URL解析這個並顯示第二個表單。

您可以創建一個Javascript函數（取自jquery get querystring from URL）爲您解析查詢字符串。

// Read a page's GET URL variables and return them as an associative array. 
function getUrlVars() 
{ 
    var vars = [], hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for(var i = 0; i < hashes.length; i++) 
    { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
}

現在，你有這個功能，你可以對方法onload事件或任何你認爲合適的一個電話，看看是否submitted已設置。

//Simple conditional to see if the query string 'submitted' is set to true 
if(getUrlVars()["submitted"] == "true"){ 
    //Hide Form1, Show Form2 
};

雖然這可能不是最好的方法和某種形式的動態編程語言的會適合你更好，我總是很開心的學習，這將讓你去。

終極密碼：

<html> 
<head> 

</head> 
<script type="text/javascript"> 
// Read a page's GET URL variables and return them as an associative array. 
function getUrlVars() 
{ 
    var vars = [], hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for(var i = 0; i < hashes.length; i++) 
    { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
} 
function hide(obj1) 
{  
    obj1 =document.getElementById(obj1);  
    obj1.style.display='none'; 
} 

function show(obj2) 
{ 
    obj2=document.getElementById(obj2); 
    obj2.style.display='block'; 
} 

function isItSubmitted(){ 
    if(getUrlVars()["submitted"] == "true"){ 
    hide('form1'); 
    show('form2'); 
    } 
    else{ 
    hide('form2'); 
    console.log('notsubmitted'); 
} 
} 
</script> 
<body onload="isItSubmitted();"> 
<form id="form1" action="index.html?submitted=true" method="post" onsubmit="show('form2')"> 
<table id="table1" border="1" > 
<tr> 
<td> 
<input type="text" name="txt1" id="txt1"> 
</td> 
<td> 
<input type="submit" name="submit1" id="submit1"> 
</td> 
</tr> 
</table> 
</form> 

<form id="form2"> 
<table id="table2" border="1" > 
<tr> 
<td> 
<input type="text" name="txt2" id="txt2"> 
</td> 
    <td> 
    <input type="submit" name="submit2" id="submit2"> 
    </td> 
</tr> 
</table> 
</form> 
</body> 
</html>

來源

2013-10-08 03:32:54

它的工作！我改變了一對夫婦，但這給了我一個想法非常感謝！ – zxc

歡迎光臨。快樂的編碼。 –

Javascript body onload

回答

相關問題