几个月前，我想我会“尝试”创建一个注册表单，除了复制和粘贴可以正常工作的代码到我的网页之外，完全没有使用 jquery 或 java 的经验。我做了一个非常漂亮的表格，但它不适用于验证。我有几个分支，即 2 个标记为业务和私人的单选按钮。如果您单击业务，它会询问一组问题，如果您单击私人另一组。我很难找到任何解释我如何“关闭”未使用的问题或如何做一个单独路径的分支的东西。如果有人可以将我引导到一个教程，该教程会给我一个很好的线索，或者任何其他帮助将不胜感激。这是我到目前为止的代码。
<HTML><HEAD><TITLE>Plans</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Join Now</title>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/additional-methods.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
//1
{
$('.newp').hide(); //hide all div
$('.tranp').hide();
$('.bushom').hide();
$('.diffadd').hide();
$('.tac').hide();
$('.conadd').hide();
$('.subbut').hide();
$('#newp').click(function()
{
$('.tranp').slideUp('slow'); //where there is an alternate use slide
$('.newp').slideDown('slow');
$('.bushom').show('slow'); //if no alternate use show. if it should not be shown in another sequence use hide
});
$('#tranp').click(function()
{
$('.newp').slideUp('slow');
$('.tranp').slideDown('slow');
$('.bushom').show('slow');
});
//2
$('.busu').hide();
$('.homeu').hide();
$('.tac').hide();
$('.conadd').hide();
$('.subbut').hide();
$('#busu').click(function()
{
// $('.newp').hide();
// $('.tranp').hide();
$('.homeu').slideUp('slow');
$('.busu').slideDown('slow');
$('.diffadd').show('slow');
});
$('#homeu').click(function()
{
// $('.newp').hide(); //an example of how we can hide completed pages so there is not to much on the screen
// $('.tranp').hide();
$('.busu').slideUp('slow');
$('.homeu').slideDown('slow');
$('.diffadd').show('slow');
});
//3
$('.addsame').hide();
$('.adddif').hide();
$('.conadd').hide();
$('.tac').hide();
$('.subbut').hide();
$('#addsame').click(function()
{
$('.conadd').hide('slow'); //here is an example where a page has to hide in one sequence but be shown in another
$('.tac').show('slow');
});
$('#adddif').click(function()
{
$('.conadd').show('slow');
$('.tac').show('slow');
});
$('.addsame').hide();
$('.adddif').hide();
$('.conadd').hide();
$('.tac').hide();
$('.agree').hide();
$('.subbut').hide();
$('#agree').click(function()
{
$('.subbut').show('slow');
});
/*
$("#signupForm").validate({
rules: {
stnantr: "required",
subtr: "required",
citytr: "required",
stnannw: "required",
suburbnw: "required",
citynw: "required"
newtran:
{
required: function(){
if($("select[name=newtran]").val() == 1){
return true;
}
else
{
return false;
}
}
}
$("#bushom").validate({
if(newtran=='trans') {
rules: {
stnantr: "required",
subtr: "required",
citytr: "required"
}
}
else {
rules: {
stnannw: "required",
suburbnw: "required",
citynw: "required"
}
},
messages: {
stnantr: "required",
subtr: "required",
citytr: "required",
stnannw: "required",
suburbnw: "required",
citynw: "required"
}
});
*/
});
</script>
<style type="text/css">
#content {
width: 600px;
margin: 1px auto;
padding: 25px;
color: #fff;
border: 10px solid #666699;
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
}
h2 {
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.option {
color: #555;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 10px;
margin-right: 20px;
}
.detail {
width: 500px;
margin-bottom: 15px;
color: #333;
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
}
a {
color: #3399CC;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
label {
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
}
label.error {
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
legend {
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
font-family: Helvetica, Arial, sans-serif;
}
.input {
color: #666;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #336666;
padding: 3px;
margin-bottom: 5px;
}
input.button {
background: #000;
border: 1px solid #666;
color: #fff;
padding: 3px;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<META content="MSHTML 6.00.2462.0" name=GENERATOR></HEAD>
<BODY text=#666666 vLink=#800080 link=#0000FF bgColor=#006699 topMargin=0 marginwidth="0" marginheight="0">
<div style="background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-position:center;
width:100%;
height:100%;">
<TABLE bgColor=#ffffff cellSpacing=0 cellPadding=0 width=700 border=0 ALIGN="center">
<TR>
<!--MAIN AD AREA-->
<TD vAlign=top align=top width=370 height="293">
<div align="top"></div>
<p align="top">
<style='mso-bidi-font-weight:bold'><span style='font-size:18pt;font-family:Arial;mso-bidi-font-family:"Arial, Helvetica, sans-serif";color:blue'>Join Now
<o:p></o:p></span></p>
<div align="top"></div>
<div id="content">
<form id="signupForm" method="POST" action="processform.php">
<div>
<fieldset>
<legend>Question 1</legend><br />
<div class="detail">Do you want to TRANSFER an EXISTING phone number <br />OR<br />
Do you want to INSTALL a NEW Service</div><br />
<input type="radio" name="newtran" value="tranp" id="tranp" /> <span class="option"> Transfer EXISTING Service</span>
<input type="radio" name="newtran" value="newp" id="newp" /><span class="option"> Install a NEW Service</span>
<br /><br />
</fieldset>
</div>
<div class="tranp"><br />
<fieldset>
<legend>TRANSFER an EXISTING Service</legend><br />
<label for="tranphtr">Existing Phone Number</label><br />
<input type="text" name="tranphtr" class="input" id="tranphtr"/><br />
<label for="cprovtr">Current Provider</label><br />
<input type="text" name="cprovtr" class="input" id="cprovtr"/><br />
<label for="anumtr">Account Number</label><br />
<input type="text" name="anumtr" class="input" id="anumtr"/><br />
</fieldset>
<br />
<fieldset>
<legend>ADDRESS of EXISTING Service</legend><br />
<label for="stnantr">Street Number and Name</label><br />
<input type="text" name="stnantr" class="input" id="stnantr"/><br />
<label for="suburbtr">Suburb</label><br />
<input type="text" name="suburbtr" class="input" id="suburbtr"/><br />
<label for="citytr">City</label><br />
<input type="text" name="citytr" class="input" id="citytr" /><br />
<label for="pcodetr">Post Code</label><br />
<input type="text" name="pcodetr" class="input" id="pcodetr"/><br />
</fieldset>
</div>
<div class="newp"><br />
<fieldset>
<legend>Customer Service Agreement</legend><br />
<div class="detail">
When ordering a NEW phone service there is a right to recourse if the installation is delayed for any reason under the telecommunications act
called the CUSTOMER SERVICE AGREEMENT.<br /><br />
If you require this protection against delays in connecting your new service please check the box labelled REQUIRE.<br /> <br />
If you decide to waive your protection under the act please check the box labelled WAIVE.<br /> <br />
There is a substantial difference in the price if you WAIVE your rights under the telecommunications act.<br /><br />
It will take the same time to install the phone if you are covered or waive your rights the difference is you have a right to
recourse if there is an unforseen delay.</div><br /><br />
<h2>WAIVE</h2>
<input type="radio" name="waivereq" value="waive" id="wav" /> <span class="option">
I WAIVE the CUSTOMER SERVICE AGREEMENT and will pay an installation fee of $70</span><br /><br />
<h2>REQUIRE</h2>
<input type="radio" name="waivereq" value="require" id="req" /><span class="option">
I REQUIRE the CUSTOMER SERVICE AGREEMENT and will pay an installation fee of $200</span>
</fieldset>
<fieldset>
<legend>Enter the ADDRESS where the NEW phone service is LOCATED</legend><br />
<label>Street Number and Name</label><br />
<input type="text" name="stnannw" class="input" id="stnannw"/><br />
<label>Suburb</label><br />
<input type="text" name="suburbnw" class="input" id="suburbnw"/><br />
<label>City</label><br />
<input type="text" name="citynw" class="input" id="citynw" /><br />
<label>Post Code</label><br />
<input type="text" name="pcodenw" class="input" id="pcodenw"/><br />
</fieldset>
</div>
<br />
<div class="bushom">
<fieldset>
<legend>Question 2</legend><br />
<div class="detail">Is this Phone Service for Home or Business Use <br /></div>
<input type="radio" name="hombus" value="homeuse" id="homeu" /> <span class="option">For Home Use</span>
<input type="radio" name="hombus" value="bususe" id="busu" /><span class="option">For Business Use</span>
<br />
</fieldset>
</div>
<div class="homeu"><br />
<fieldset>
<legend>HOME Use</legend><br />
<label for="firstnamehm">Firstname:</label><br />
<input type="text" id="firstnamehm" class="input" name="firstnamehm" /> *<br />
<label for="lastnamehm">Lastname:</label><br />
<input type="text" id="lastnamehm" class="input" name="lastnamehm" /> *<br />
<label for="emailhm">Email:</label><br />
<input type="text" id="emailhm" class="input" name="emailhm" /><br />
<label for="phonehm">Contact Phone:</label><br />
<input type="text" id="phonehm" class="input" name="phonehm" /> *<br />
</fieldset>
</div>
<div class="busu"><br />
<fieldset>
<legend>BUSINESS Use</legend><br />
<div class="detail">
<fieldset>1. For Business use the cost of the service is $6 extra per month
<br />This fee is for a standard entry in Yellow Pages<br /><br />
2. The contact person should be the person responsible for making decisions and billing for this service.<br />
Usually the proprietor or a director of the business<br />
</fieldset>
<div><br />
<label for="busnamebs">Business Name:</label><br />
<input type="text" id="busnamebs" class="input" name="busnamebs" /> *<br />
<label for="abnnbs">ABN:</label><br />
<input type="text" id="abnnbs" class="input" name="abnnbs" /> *<br />
<label for="firstnamebs">Firstname:</label><br />
<input type="text" id="firstnamebs" class="input" name="firstnamebs" /> *<br />
<label for="lastnamebs">Lastname:</label><br />
<input type="text" id="lastnamebs" class="input" name="lastnamebs" /> *<br />
<label for="emailbs">Email:</label><br />
<input type="text" id="emailbs" class="input" name="emailbs" /><br />
<label for="phonebs">Contact Phone:</label><br />
<input type="text" id="phonebs" class="input" name="phonebs" /> *<br />
</fieldset>
</div>
<br />
<div class="diffadd">
<fieldset>
<legend>Contact Address</legend><br />
<div class="detail">
<fieldset>Is the SERVICE ADDRESS (above) the same as your CONTACT ADDRESS<br />
</fieldset>
<div><br />
<input type="radio" name="adiff" value="addsame" id="addsame" /> <span class="option">YES</span>
<input type="radio" name="adiff" value="adddif" id="adddif" /><span class="option">NO</span>
<br />
</fieldset>
</div>
<div class="conadd"><br />
<fieldset>
<legend>Contact Address</legend><br />
<label>Street Number and Name</label><br />
<input type="text" name="constreetnan" class="input" id="constreetnan"/><br />
<label>Suburb</label><br />
<input type="text" name="consuburb" class="input" id="consuburb"/><br />
<label>City</label><br />
<input type="text" name="concity" class="input" id="concity" /><br />
<label>Post Code</label><br />
<input type="text" name="conpcode" class="input" id="conpcode"/><br />
</fieldset>
</div>
<div class="tac"><br />
<div class="detail">
<fieldset>
<legend>Customer Authority.</legend><br /><br />
<textarea rows="15" cols="65" readonly>
Customer Authority.
AN AUTHORITY TO SUPPLY A NEW TELEPHONE SERVICE OR TRANSFER AN EXISTING SERVICE.
</textarea><br /><br />
<h2><input type="checkbox" name="agree" value="agree" id="agree">I agree to the Terms & Conditions.</h2><br /><br />
</fieldset>
</div>
</div>
<div class="subbut"><br />
<fieldset>
<input class="button" type="submit" value="Submit"/>
</fieldset>
</div>
</form>
</div>
~结束剪辑