Question

我刚刚使用Javascript，我在pageload事件上遇到了麻烦。提交form1后，应该出现表单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>

基于给出的代码。单击form1的提交按钮后，form2将立即显示并消失。

Answer 1

我认为你应该放弃尝试这样做的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>

Javascript正文onload一次

1 个答案: