数か月前、自分のWebページに問題なく機能するコードをコピーして貼り付ける以外は、jqueryやjavaの経験がまったくないサインアップフォームを作成することに「挑戦する」と思いました。私はかなり派手なフォームを作成しましたが、検証では機能しません。私はフォームにいくつかのブランチを持っています。つまり、ビジネスとプライベートのラベルが付いた2つのラジオボタンがあります。[ビジネス]をクリックすると、1つの質問セットが表示され、[プライベート]をクリックすると別のセットの質問が表示されます。未使用の質問を「オフにする」方法や、別の経路である分岐を行う方法を説明するものを見つけるのに苦労しています。誰かが私に素晴らしい手がかりを与えるチュートリアルに私を導くことができれば、または他の助けをいただければ幸いです。これが私がこれまでに持っているコードです。
<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>
〜end snip