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

回答

相关问题