Javascript主体只加载一次_Javascript_Html

Javascript主体只加载一次

javascript html

Javascript主体只加载一次,javascript,html,Javascript,Html,我刚刚开始使用Javascript，在pageload事件上遇到了麻烦。提交表格1后，应显示表格2 <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/ja

我刚刚开始使用Javascript，在pageload事件上遇到了麻烦。提交表格1后，应显示表格2

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


函数隐藏（obj1）{
obj1=document.getElementById（obj 1）；
if（document.cookie.indexOf（'mycokie'）=-1）{
document.cookie='mycookie=1'；
obj1.style.display='none'；
}否则{
obj1.style.display='block'；
}
}
功能显示（obj2）{
var cookie=“测试”
obj2=document.getElementById（obj2）；
obj2.style.display='block'；
document.cookie='mycookie=1'；
}

基于给定的代码。单击form1的submit按钮后，form2立即出现并消失。

我认为您应该中止尝试执行此操作的

onload

方法。如果要发布到同一页面，可能应该使用查询字符串

？submitted=true

将表单设置为post，然后可以使用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>

现在您有了这个函数，您可以调用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>


//读取页面的GET URL变量并将其作为关联数组返回。
函数getUrlVars（）
{
var vars=[]，散列；
var hashes=window.location.href.slice（window.location.href.indexOf（'？'）+1）.split（'&'）；
for（var i=0；i

您真的想要提交表格吗？或者你是想展示下一部分要完成的信息吗？@johnGerdsen tnx询问。。在我的情况下，他们需要提交表单，然后会弹出另一个表单，顺便说一句，我发布的代码只是一个原型，因为我无法正确处理onload事件：（“提交”是表单的特殊含义。您是否只想隐藏表单1并显示表单2？与其提交，不如存储所有值，移动到下一个表单并向作用域中添加更多值。然后在最后只提交一次这些值。顺便说一句，表单实际上是隐藏的，但由于表单提交会导致一个页面刷新，然后你的onload方法再次启动并隐藏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>