Question

我想将值发布到下一页，因此我必须使用<form></form>标记。但是当我在代码中插入标记时，验证代码无效，我不知道我的代码会发生什么。有人可以告诉我如何解决它。使用标签，1和4选项验证不起作用，但同时使用2＆amp; 3选项验证正在运行。 我的问题是 - 1＆amp;的子问题究竟发生了什么？ 4，代码验证，为什么它不起作用。

window.onload=function(){
  document.getElementById("firstsubque1").style.display='none';
  document.getElementById("firstsubque2").style.display='none';
  document.getElementById("second").style.display='none';
  document.getElementById("third").style.display='none';
  document.getElementById("fourthsubque1").style.display='none';
  document.getElementById("fourthsubque2").style.display='none';

} 
function showtech()
{
  if(document.getElementById("ques1").checked)
  {
	document.getElementById("first").style.display='none';
    return false;
  }
}

function firstque()
{
   if(document.getElementById("ques1").checked)
   {
	  document.getElementById("subopt1").style.display='block';
	  document.getElementById("tbl1").style.display='none';
   	  document.getElementById("subopt2").style.display='block';
	  document.getElementById("subopt22").style.display='none';
	  document.getElementById("firstsubque1").style.display='block';
	  document.getElementById("firstsubque2").style.display='block';
    }
}

function firstqueUnchk()
{
   if(!(document.getElementById("ques1").checked))
   {
	  document.getElementById("subopt1").style.display='none';
	  document.getElementById("subopt11").style.display='none';
   	  document.getElementById("subopt2").style.display='none';
	  document.getElementById("subopt22").style.display='none';
	  document.getElementById("firstsubque1").style.display='none';
	  document.getElementById("firstsubque2").style.display='none';
   }
}

function subopt1()
{
	if(document.getElementById("subopt1").checked)
	{
	  document.getElementById("tbl1").style.display='block';
	  document.getElementById("subopt22").style.display='none';
	  document.getElementById("subopt1").style.display='block';
   	  document.getElementById("subopt2").style.display='block';
	  document.getElementById("firstsubque1").style.display='block';
	  document.getElementById("firstsubque2").style.display='block';
	}
}
function subopt1Unchk()
{
	if(!(document.getElementById("subopt1").checked))
	{
	  document.getElementById("tbl1").style.display='none';
	  document.getElementById("subopt22").style.display='none';
	  document.getElementById("subopt1").style.display='block';
   	  document.getElementById("subopt2").style.display='block';
	  document.getElementById("firstsubque1").style.display='block';
	  document.getElementById("firstsubque2").style.display='block';
	}
}
function subopt2()
{
	if(document.getElementById("subopt2").checked)
	{
	  document.getElementById("subopt11").style.display='none';
	  document.getElementById("tbl2").style.display='block';
	  document.getElementById("subopt1").style.display='block';
   	  document.getElementById("subopt2").style.display='block';
	  document.getElementById("firstsubque1").style.display='block';
	  document.getElementById("firstsubque2").style.display='block';
	}
}
function subopt2Unchk()
{
	if(!(document.getElementById("subopt2").checked))
	{
	  document.getElementById("subopt22").style.display='none';
	  document.getElementById("subopt11").style.display='none';
	  document.getElementById("subopt1").style.display='block';
   	  document.getElementById("subopt2").style.display='block';
	  document.getElementById("firstsubque1").style.display='block';
	  document.getElementById("firstsubque2").style.display='block';
	}
}
function allChecked()
{
	if((document.getElementById("subopt1").checked) && (document.getElementById("subopt2").checked))
	{
	  document.getElementById("subopt22").style.display='block';
	  document.getElementById("subopt11").style.display='block';
	  document.getElementById("subopt1").style.display='block';
   	  document.getElementById("subopt2").style.display='block';
	  document.getElementById("firstsubque1").style.display='block';
	  document.getElementById("firstsubque2").style.display='block';
	}
	else if((document.getElementById("subopt1").checked) && (!(document.getElementById("subopt2").checked)))
	{
	  document.getElementById("subopt11").style.display='block';
	  document.getElementById("subopt22").style.display='none';
	  document.getElementById("subopt1").style.display='block';
   	  document.getElementById("subopt2").style.display='block';
	  document.getElementById("firstsubque1").style.display='block';
	  document.getElementById("firstsubque2").style.display='block';
	}
	else if((document.getElementById("subopt2").checked) && (!(document.getElementById("subopt1").checked)))
	{
	  document.getElementById("subopt11").style.display='none';
	  document.getElementById("subopt22").style.display='block';
	  document.getElementById("subopt1").style.display='block';
   	  document.getElementById("subopt2").style.display='block';
	  document.getElementById("firstsubque1").style.display='block';
	  document.getElementById("firstsubque2").style.display='block';
	}
	else if((document.getElementById("ques1").checked) && (document.getElementById("ques2").checked))
	{
	  document.getElementById("subopt1").style.display='block';
	  document.getElementById("subopt11").style.display='none';
   	  document.getElementById("subopt2").style.display='block';
	  document.getElementById("subopt22").style.display='none';
	  document.getElementById("firstsubque1").style.display='block';
	  document.getElementById("firstsubque2").style.display='block';
	  document.getElementById("second").style.display='block';
	}
	else if((!(document.getElementById("thirdsubque11").checked)) && (document.getElementById("thirdsubque222").checked))
	{
		document.getElementById("thirdsubque2").style.display='none';
		document.getElementById("thirdsubque2222").style.display='none';
		document.getElementById("thirdsubque2222").style.display='none';
	}
	else if((document.getElementById("thirdsubque11").checked) && (document.getElementById("thirdsubque222").checked))
	{
		document.getElementById("thirdsubque2").style.display='block';
		document.getElementById("thirdsubque22").style.display='block';
		document.getElementById("thirdsubque2222").style.display='block';
	}
	else if((document.getElementById("ques4").checked) && (document.getElementById("fourthsubque11").checked))
	{
		document.getElementById("fourthsubque1").style.display='block';
		document.getElementById("fourthsubque2").style.display='block';
		document.getElementById("fourthsubque111").style.display='block';
	}
}

function secondque()
{
   if(document.getElementById("ques2").checked)
   {
	  document.getElementById("subopt22").style.display='none';
	  document.getElementById("subopt11").style.display='none';
	  document.getElementById("subopt1").style.display='none';
   	  document.getElementById("subopt2").style.display='none';
	  document.getElementById("firstsubque1").style.display='none';
	  document.getElementById("firstsubque2").style.display='none';
	  document.getElementById("second").style.display='block';
	  document.getElementById("secondsubque11").style.display='none';
	  document.getElementById("secondsubque1").style.display='block';
	  document.getElementById("secondsubque2").style.display='block';
	}
}

function secondqueUnchk()
{
	if(!(document.getElementById("ques2").checked))
   {
	  document.getElementById("second").style.display='none';
	  document.getElementById("secondsubque1").style.display='none';
	  document.getElementById("secondsubque2").style.display='none';
   }
}
function secondsubque1Chk()
{
	if(document.getElementById("secondsubque12").checked)
	{
	   	document.getElementById("secondsubque11").style.display='block';
		document.getElementById("second").style.display='block';
		document.getElementById("secondsubque111").style.display='none';
	}
}
function secondsubque1Unchk()
{
	if(!(document.getElementById("secondsubque12").checked))
	{
	   	document.getElementById("secondsubque11").style.display='none';
		document.getElementById("second").style.display='block';
		document.getElementById("secondsubque111").style.display='none';
	}
}

function secondsubque2Chk()
{
	if(document.getElementById("secondsubque13").checked)
	{
	   	document.getElementById("secondsubque11").style.display='block';
		document.getElementById("second").style.display='block';
		document.getElementById("secondsubque111").style.display='block';
	}
}
function secondsubque2Unchk()
{
	if(!(document.getElementById("secondsubque13").checked))
	{
	   	document.getElementById("secondsubque11").style.display='block';
		document.getElementById("second").style.display='block';
		document.getElementById("secondsubque111").style.display='none';
	}
}

function thirdque()
{
	if(document.getElementById("ques3").checked)
	{
		document.getElementById("third").style.display='block';
		document.getElementById("thirdsubque2").style.display='none';
		document.getElementById("thirdsubque222").style.display='none';
	}
}
function thirdqueUnchk()
{
	if(!(document.getElementById("ques3").checked))
	{
		document.getElementById("third").style.display='none';
		document.getElementById("thirdsubque2").style.display='none';
		document.getElementById("thirdsubque222").style.display='none';
	}
}
function thirdsubque1()
{
	if(document.getElementById("thirdsubque11").checked)
	{
		document.getElementById("third").style.display='block';
		document.getElementById("thirdsubque2").style.display='block';
		document.getElementById("thirdsubque222").style.display='block';
		document.getElementById("thirdsubque2222").style.display='none';
	}
}
function thirdsubque1Unchk()
{
	if(!(document.getElementById("thirdsubque11").checked))
	{
		document.getElementById("third").style.display='block';
		document.getElementById("thirdsubque2").style.display='none';
		document.getElementById("thirdsubque2222").style.display='none';
	}
}
function thirdsubque2()
{
	if(document.getElementById("thirdsubque222").checked)
	{
		document.getElementById("third").style.display='block';
		document.getElementById("thirdsubque2").style.display='block';
		document.getElementById("thirdsubque2222").style.display='block';
	}
}
function thirdsubque2Unchk()
{
	if(!(document.getElementById("thirdsubque222").checked))
	{
		document.getElementById("third").style.display='block';
		document.getElementById("thirdsubque2").style.display='block';
		document.getElementById("thirdsubque2222").style.display='none';
	}
}

function fourthque()
{
	if(document.getElementById("ques4").checked)
	{
		document.getElementById("fourthsubque1").style.display='block';
		document.getElementById("fourthsubque2").style.display='block';
		document.getElementById("fourthsubque111").style.display='none';
	}
}
function fourthqueUnchk()
{
	if(!(document.getElementById("ques4").checked))
	{
		document.getElementById("fourthsubque1").style.display='none';
		document.getElementById("fourthsubque2").style.display='none';
	}
}

function fourthsubque1()
{
	if(document.getElementById("ques4").checked)
	{
		document.getElementById("fourthsubque1").style.display='none';
		document.getElementById("fourthsubque2").style.display='none';
	}
}
function fourthsubque11()
{
	if(document.getElementById("fourthsubque11").checked)
	{
		document.getElementById("fourthsubque1").style.display='block';
		document.getElementById("fourthsubque2").style.display='block';
		document.getElementById("fourthsubque111").style.display='block';
	}
}

/*function validateque1()
{
	document.getElementById("error1").innerHTML="";
	if((document.getElementById("ques1").checked) && (document.getElementById("tbl1").checked))
	{
	  	if((document.getElementById("select1").value=='') && (document.getElementById("select2").value=='') && (document.getElementById("select3").value=='') && (document.getElementById("select4").value=='') && (document.getElementById("select5").value=='') && (document.getElementById("select6").value=='') && (document.getElementById("select7").value=='') && (document.getElementById("select8").value==''))
		{
			document.getElementById("error1").innerHTML="mandetory field";
			document.form.tbl1.focus();
			return false;
		}
	}
return true;	
}
*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="scripts/ques-valid.js"></script>
</head>

<body>
<form >
<table>
<tr>
  <td width="28" style="padding:0;"><input type="checkbox" name="que1" id="ques1" onclick="firstque();firstqueUnchk();allChecked();" /></td>
  <td width="745" class="style10">Network</td>
</tr>
<tr style="margin-bottom:0">
  <td style="padding:0;">&nbsp;</td>
  <td style="padding:0;" id="firstsubque1">
   <ul style="list-style:none;">
	<li style="float:left;"><input type="checkbox" name="select" style="float:left;" id="subopt1" onclick="subopt1();subopt1Unchk();allChecked();" />Internal </li><br />
	<li style="float:left;padding-left: 5%;" id="subopt11">
	 <table width="100%" height="202" id="tbl1">
	  <tr>
	    <td width="33%" style="padding: 0;">Number of Ips</td>
		<td width="67%" style="padding: 0;"><input type="text" placeholder="Number of IPs" name="select1" id="select1"/></td>
	  </tr>
	  <tr>
	    <td style="padding:0;">Servers</td>
		<td style="padding:0;"><input type="text" placeholder="Servers" name="select2" id="select2" /></td></tr>
	  <tr>
	    <td style="padding:0;">Firewalls</td>
		<td style="padding:0;"><input type="text" placeholder="Firewalls" id="select3" name="select3" /></td></tr>

	</table>
   </li>
  </ul>
  </td>
</tr>
<tr style="margin-top:0;">
  <td style="padding:0; visibility:hidden;"></td>
  <td style="padding:0;" id="firstsubque2">
   <ul style="list-style:none;">
     <li style="float:left;"><input onclick="subopt2();subopt2Unchk();allChecked();" style="float:left;" type="checkbox" name="select" id="subopt2" />External</li><br />
	 <li style="float:left;padding-left: 5%;" id="subopt22">
	  <table width="195%" id="tbl2">
	   <tr>
	     <td width="39%" style="padding:0;">Ips</td>
		 <td width="61%"style="padding:0;"><input type="text" placeholder="Number of IPs" name="select3" id="select3" /></td>
	   </tr>
	  </table>
	 </li>
	</ul>
  </td>
</tr>


<tr>
<td style="padding:0;"><input type="checkbox" name="que2" id="ques2" onclick="secondque();secondqueUnchk();allChecked();" /></td><td class="style10" style="padding:0;">Website</td></tr>
<tr id="second"><td style="padding:0;"></td>
<td width="415" style="padding-bottom:0; padding-top:0;">
<table width="110%" height="148">
<tr><td width="54%" style="padding:0;">websites</td>
<td width="46%" style="padding:0;"><input type="text" size="30"  placeholder="number of websites to be tested" /></td></tr>
<tr><td style="padding:0;">language</td><td style="padding:0;"><select style="width: 70%;height: 22px;"> 
    <option>-------select-------</option>
	<option value="">php</option>
	<option value="">Dot Net</option></select></td></tr>	
<tr><td style="padding:0;">Browser</td><td style="padding:0;"><select style="width: 70%;height: 22px;">
     <option>------select------</option>
	 <option value="">php</option>
	 <option value="">Dot Net</option></select></td></tr>
<tr><td style="padding:0;">Backend</td><td style="padding:0;"><select style="width: 70%;height: 22px;">
     <option>------select------</option>
	 <option value="">php</option>
	 <option value="">Dot Net</option></select></td></tr></table>
<ul style="list-style:none;">
<li style="float:left;" id="secondsubque1"><input type="checkbox" id="secondsubque12" onclick="secondsubque1Chk();secondsubque1Unchk()" />Regular<br /><br />
  <ul style="list-style:none;" id="secondsubque11">
   <li style="float:left;" ><input type="checkbox" id="secondsubque13" onclick="secondsubque2Chk();secondsubque2Unchk()"/>Third party framework used</li><br />
    <ul style="list-style:none;" id="secondsubque111">
	  <li style="float:left;">pages&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="pages" style="float:left;" /></li>
	</ul>
  </ul>
</li><br /><br /><br /><br /><br />
<li style="float:left;"><input type="checkbox"  id="secondsubque2" onclick="allChecked();"/></li><li style="float:left;">Cloud hosted</li>
</ul>
</td>
</tr>


<tr>
 <td style="padding :0;"><input type="checkbox" name="que3" id="ques3" onclick="thirdque();thirdqueUnchk();allChecked()" /></td>
 <td class="style10" style="padding:0;">Cloud</td></tr>
<tr id="third">
<td style="padding:0;"></td>
<td style="padding-bottom:0; padding-top:0;">
<table width="195%" height="118">
<tr><td width="53%" style="padding:0;">Cloud Apps</td>
<td width="47%" style="padding:0;"><input type="text" size="30" placeholder="number of Cloud Apps to be tested" /></td></tr>
<tr><td style="padding:0;">language</td><td style="padding:0;"><select style="width:70%;height:22px;"> 
    <option>-------select-------</option>
	<option value="">php</option>
	<option value="">Dot Net</option></select></td></tr>	
<tr><td style="padding:0;">Browser</td><td style="padding:0;"><select style="width: 70%;height: 22px;">
     <option>------select------</option>
	 <option value="">php</option>
	 <option value="">Dot Net</option></select></td></tr>
<tr><td style="padding:0;"> Database</td><td style="padding:0;"><select style="width: 70%;height: 22px;">
     <option>------select------</option>
	 <option value="">php</option>
	 <option value="">Dot Net</option></select></td></tr></table>
<ul style="list-style:none;">
  <li style="float:left;" id="thirdsubque1"><input type="checkbox" id="thirdsubque11" onclick="thirdsubque1();thirdsubque1Unchk();allChecked()" /></li>
  <li style="float:left;">Amazon Cloud Hosting<br /><br />
   <ul style="list-style:none;" id="thirdsubque2">
     <li style="float:left;" id="thirdsubque22"><input type="checkbox" id="thirdsubque222" onclick="thirdsubque2();thirdsubque2Unchk();allChecked()"/></li><li  style="float:left;" >framework used</li><br />
      <ul style="list-style:none;float:left;" id="thirdsubque2222">
	   <li style="float:left;">pages&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
	   <li style="float:left;"><input type="text" name="pages2" placeholder="Number of pages" /></li>
      </ul>
	 
  </ul>
</li><br /><br /><br /><br />
<li style="float:left;"><input type="checkbox" />Cloud Hosting</li><br /><br />
<li style="float:left;"><input type="checkbox" />Cloud Hosting</li><br /><br />
<li style="float:left;"><input type="checkbox" />Other cloud hosting&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li style="float:left;"><input type="text" placeholder="Other cloud hosting" /></li>
</ul></td>
</tr>



<tr>
 <td style="padding:0;"><input type="checkbox" name="que4" id="ques4" onclick="fourthque();fourthqueUnchk();allChecked()" /></td><td class="style10" style="padding:0;">Mobile</td>
</tr>
<tr id="fourthsubque1">
<td style="padding:0;"></td>
<td>
 <table>
   <tr>
     <td><input type="checkbox" name="select" id="fourthsubque11" onclick="fourthque();fourthsubque11();allChecked() " />Android App</td></tr>
   <tr>
     <td></td>
	 <td> 
	 <table width="289" id="fourthsubque111">
	   <tr><td width="250"><input type="checkbox" />Calls</td></tr>
	   <tr><td><input type="checkbox" />Uses</td></tr>
	   <tr><td><input type="checkbox" />Performs</td></tr>
	  </table>
	 </td>
   </tr>
</table>

</td>
</tr>
<tr id="fourthsubque2">
<td style="padding:0;"></td>
<td style="padding:0;"><input type="checkbox" name="select" id="external" onclick="fifthque()" />iOS App</td>
</tr>

</table>

<input type="submit" value="submit" />
</form>
</body>
</html>

Answer 1

我认为如果您开始学习如何调试Javascript代码将是明智之举，您可以从以下链接开始：

http://www.w3schools.com/js/js_debugging.asp

我希望它可以提供帮助。

使用表单，javascript验证不起作用

1 个答案: