3

我刚开始使用 Javascript，但在页面加载事件上遇到了麻烦。提交form1后，应该会出现form 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立即出现又消失。

4

1 回答 1

4

我认为您应该中止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-08T03:32:54.747 回答