您好我已经完成了对“Javascript”的任务，虽然我无法找到有关如何使某些字段互斥的任何信息，基本上是我的表单的顶部部分，用户必须将地址插入必填字段然后进一步向下表格是一个收音机复选框，用户必须选择家庭住址或其他，（家庭是他们已经插入的顶级地址）表格已经过验证，如果选择家里他们不需要在其他地方插入任何东西，但我需要为了使它互相排斥，所以如果他们选择其他它不能与上面相同，任何人可以帮助我或给我一个教程的链接，因为我只能找到相互排斥的单选按钮的信息或复选框什么都没有用户输入文本框谢谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Joes Fruit and Vegetable Store</title>
<script>
//calender dropdown menu
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
// function validate
function validate_form ()
{
//validate name
valid = true;
if ( document.input.name.value == "")
{
alert ( "Please enter your name");
valid = false;
}
// validate address
if ( document.input.address.value == "")
{
alert ( "Please enter your Address" );
valid = false;
}
// validate Town
if ( document.input.town.value == "")
{
alert ( "Please enter your Town" );
valid = false;
}
// validate postcode
var y = document.getElementById("postcode").value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Postcode must be in numbers.");
document.getElementById("postcode").focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Postcode should be 4 digit");
document.getElementById("postcode").focus();
return false;
}
// validate home phone
var y = document.getElementById('hphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Home Phone number must be in numbers.");
document.getElementById('hphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Home Phone number should be 10 digit");
document.getElementById('hphone').focus();
return false;
}
// validate work phone
var y = document.getElementById('wphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("work Phone number must be in numbers.");
document.getElementById('wphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Work Phone number should be 10 digit");
document.getElementById('wphone').focus();
return false;
}
// validate fax
var y = document.getElementById('fax').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Fax number must be in numbers.");
document.getElementById('fax').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Fax Phone number should be 10 digit");
document.getElementById('fax').focus();
return false;
}
// validate email
{
var x=document.forms["input"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
// validate radio buttons
var o = document.getElementById('rad1');
var t = document.getElementById('rad2');
if ( (o.checked == false ) && (t.checked == true ) )
{
// validate alternative address
if ( document.input.street.value == "")
{
alert ( "Please enter alternative Address" );
valid = false;
}
// validate alternative suburb town
if ( document.input.suburb.value == "")
{
alert ( "Please enter alternative Suburb or town" );
valid = false;
}
} // validate alternative postcode
if ( (o.checked == false ) && (t.checked == true ) )
{
var y = document.getElementById('postcode2').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Alternative Postcode must be in numbers.");
document.getElementById('postcode2').focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Alternative Postcode should be 4 digit");
document.getElementById('postcode2').focus();
return false;
}
}
//validate message box
var o = document.getElementById("card");
if (o.checked == true )
{
if ( document.input.message.value == "" || document.input.message.value == "Please Enter message here" )
{
alert ( "Please enter message" );
valid = false;
}
return valid;
}
}
</script>
</head>
<body>
<b>Order form for Joe's Fruit Shop</b><br>
<br>
<b> * means you must fill in the details.</b><br>
<br>
<b>Your details:</b><br>
<br>
<!-- Beggining of Form -->
<form name="input" action="Joes.html" onsubmit="return validate_form ()">
<!--name input form -->
* Name: <input type="text" name="name" id="name" onclick="this.value='';" placeholder="Enter your Name"><br>
<br>
<!-- Address input form -->
* Address: <input type="text" name="address" id="address" onclick="this.value='';" placeholder="Enter your street address"><br>
<br>
<!-- Town & state dropdown form-->
* Suburb or Town: <input type="text" name="town" id="town" onclick="this.value='';" placeholder="Town"> * State:
<!-- state drop down list -->
<select name="state">
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<!-- post code input form -->
* Postcode: <input type='text' name="postcode" id="postcode" onclick="this.value='';" placeholder="****"><br>
<br>
<!-- Home phone input form-->
* Phone: <input type='text' name="hphone" id="hphone" onclick="this.value='';" placeholder="x-xxxx-xxx">
<!-- work phone input form -->
* Work phone <input type='text' name="wphone" id="wphone" onclick="this.value='';" placeholder="x-xxxx-xxx"><br>
<br>
<!-- Fax input form-->
*Fax: <input type='text' name="fax" id="fax" onclick="this.value='';" placeholder="0x-xxxx-xxx">
<!-- Email input form-->
* Email address: <input type='text' name="email" id="email" onclick="this.value='';" onsubmit="return validateForm();" placeholder="Enter your current email"><br>
<br>
<br>
<!-- credit card form --> <b>Credit card details:</b><br>
<br>
* Type:
<select name="credit card">
<option selected="selected" value="AMEX">Amex</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
</select>
<!--credit card month expiry date-->
*Expiry date:
<select name="expiration_month">
<option value="">Choose...</option>
<option selected="selected" value="1">January</option>
<option value="2">Febuary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<!-- Credit card year expiry date-->
<select name="expiration_year">
<option value="">Choose...</option>
<option selected="selected" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<br>
<br>
<b>Purchase details</b><br>
<br>
<!-- Product dropdown form-->
* Product:
<select name="product">
<option value="carrot">Bag of carrots</option>
<option value="zucchini">Zucchini</option>
<option value="cabbage">Cabbage</option>
<option value="grapes">Grapes</option>
<option value="tomatoes">TAS</option>
<option value="apples">Apples</option>
<option value="banana">banana</option>
<option selected="selected" value="cucumber">Cucumber</option>
</select>
<!-- Quantity dropdown form-->
Quantity:
<select name="quantity">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<br>
<br>
* <b>Deliver to:</b>
<br>
<br>
<!-- Address Radio check buttons-->
<input type='radio' id="rad1" name='rad' checked="checked">Home Address<br>
<input type='radio' id="rad2" name='rad'/>Other Address<br>
<br>
<!-- alternative street form-->
Street <input type='text' name="street" id="street" onclick="this.value='';" placeholder="Street"><br>
<br>
<!-- alternative Suburb form-->
Suburb <input type='text' name="suburb" id="suburb" onclick="this.value='';" placeholder="Suburb or town"><br>
<br>
<!-- alternative State dropdown form-->
State
<select name="state">
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<br>
<br>
<!-- alternative post code form -->
Postcode:<input type='text' name="postcode2" id="postcode2" onclick="this.value='';" placeholder="****"><br>
<br>
<br>
* Date delivery required:
<!-- Calender drop down menu-->
<select id="daydropdown">
</select>
<select id="monthdropdown">
</select>
<select id="yeardropdown">
</select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
<br>
<br>
<!-- include a card option-->
Include a card: <input type="checkbox" name="card" id="card">Yes<br>
<br>
Personal message on card: <textarea name="message" id="message" cols="20" rows="10" onclick="this.value='';">Please Enter message here</textarea><br>
<br>
Click on <b>Submit</b> when done; click on <b> Clear form</b> to reset.
<!-- submit button-->
<input type="submit" value="Submit">
<!-- reset button-->
<input type="reset" value="Reset">
</form><br>
<script>
<!--
document.write("<i>Last updated "+document.lastModified+"<I>");
//-->
</script>
</body>
</html>
答案 0 :(得分：0)
这是不完整的。我为你的一些选择添加了功能。复制并检查自己的变化所在。我想你可以做其余的事情
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Joes Fruit and Vegetable Store</title>
<script>
//calender dropdown menu
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
// function validate
function validate_form ()
{
//validate name
valid = true;
if ( document.input.name.value == "")
{
alert ( "Please enter your name");
valid = false;
}
// validate address
if ( document.input.address.value == "")
{
alert ( "Please enter your Address" );
valid = false;
}
// validate Town
if ( document.input.town.value == "")
{
alert ( "Please enter your Town" );
valid = false;
}
// validate postcode
var y = document.getElementById("postcode").value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Postcode must be in numbers.");
document.getElementById("postcode").focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Postcode should be 4 digit");
document.getElementById("postcode").focus();
return false;
}
// validate home phone
var y = document.getElementById('hphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Home Phone number must be in numbers.");
document.getElementById('hphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Home Phone number should be 10 digit");
document.getElementById('hphone').focus();
return false;
}
// validate work phone
var y = document.getElementById('wphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("work Phone number must be in numbers.");
document.getElementById('wphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Work Phone number should be 10 digit");
document.getElementById('wphone').focus();
return false;
}
// validate fax
var y = document.getElementById('fax').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Fax number must be in numbers.");
document.getElementById('fax').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Fax Phone number should be 10 digit");
document.getElementById('fax').focus();
return false;
}
// validate email
{
var x=document.forms["input"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
// validate radio buttons
var o = document.getElementById('rad1');
var t = document.getElementById('rad2');
if ( (o.checked == false ) && (t.checked == true ) )
{
// validate alternative address
if ( document.input.street.value == "")
{
alert ( "Please enter alternative Address" );
valid = false;
}
// validate alternative suburb town
if ( document.input.suburb.value == "")
{
alert ( "Please enter alternative Suburb or town" );
valid = false;
}
} // validate alternative postcode
if ( (o.checked == false ) && (t.checked == true ) )
{
var y = document.getElementById('postcode2').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Alternative Postcode must be in numbers.");
document.getElementById('postcode2').focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Alternative Postcode should be 4 digit");
document.getElementById('postcode2').focus();
return false;
}
}
//validate message box
var o = document.getElementById("card");
if (o.checked == true )
{
if ( document.input.message.value == "" || document.input.message.value == "Please Enter message here" )
{
alert ( "Please enter message" );
valid = false;
}
return valid;
}
}
function fnc1()
{
document.getElementById("hsuburb").value=document.getElementById("town").value;
document.getElementById("hstate").value=document.getElementById("state").value;
document.getElementById("postcode2").value=document.getElementById("postcode").value;
document.getElementById("hsuburb").disabled="disabled";
document.getElementById("hstate").disabled="disabled";
document.getElementById("postcode2").disabled="disabled";
}
function fnc2(myid)
{
value=document.getElementById(myid).value;
a=document.getElementById("town").value;
b=document.getElementById("state").value;
c=document.getElementById("postcode").value;
if(value==a)
{alert("change your town");
document.getElementById(myid).value='';
}
else if(value==b)
{alert("change your state");
document.getElementById("default").selected="Selected";
}
else if(value==c)
{alert("change your postcode");
document.getElementById(myid).value='';
}
}
function fnc3()
{
document.getElementById("hsuburb").disabled=false;
document.getElementById("hstate").disabled=false;
document.getElementById("postcode2").disabled=false;
}
</script>
</head>
<body>
<b>Order form for Joe's Fruit Shop</b><br>
<br>
<b> * means you must fill in the details.</b><br>
<br>
<b>Your details:</b><br>
<br>
<!-- Beggining of Form -->
<form name="input" action="Joes.html" onsubmit="return validate_form ()">
<!--name input form -->
* Name: <input type="text" name="name" id="name" onclick="this.value='';" placeholder="Enter your Name"><br>
<br>
<!-- Address input form -->
* Address: <input type="text" name="address" id="address" onclick="this.value='';" placeholder="Enter your street address"><br>
<br>
<!-- Town & state dropdown form-->
* Suburb or Town: <input type="text" name="town" id="town" onclick="this.value='';" placeholder="Town"> * State:
<!-- state drop down list -->
<select name="state" id="state" >
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<!-- post code input form -->
* Postcode: <input type='text' name="postcode" id="postcode" onclick="this.value='';" placeholder="****"><br>
<br>
<!-- Home phone input form-->
* Phone: <input type='text' name="hphone" id="hphone" onclick="this.value='';" placeholder="x-xxxx-xxx">
<!-- work phone input form -->
* Work phone <input type='text' name="wphone" id="wphone" onclick="this.value='';" placeholder="x-xxxx-xxx"><br>
<br>
<!-- Fax input form-->
*Fax: <input type='text' name="fax" id="fax" onclick="this.value='';" placeholder="0x-xxxx-xxx">
<!-- Email input form-->
* Email address: <input type='text' name="email" id="email" onclick="this.value='';" onsubmit="return validateForm();" placeholder="Enter your current email"><br>
<br>
<br>
<!-- credit card form --> <b>Credit card details:</b><br>
<br>
* Type:
<select name="credit card">
<option selected="selected" value="AMEX">Amex</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
</select>
<!--credit card month expiry date-->
*Expiry date:
<select name="expiration_month">
<option value="">Choose...</option>
<option selected="selected" value="1">January</option>
<option value="2">Febuary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<!-- Credit card year expiry date-->
<select name="expiration_year">
<option value="">Choose...</option>
<option selected="selected" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<br>
<br>
<b>Purchase details</b><br>
<br>
<!-- Product dropdown form-->
* Product:
<select name="product">
<option value="carrot">Bag of carrots</option>
<option value="zucchini">Zucchini</option>
<option value="cabbage">Cabbage</option>
<option value="grapes">Grapes</option>
<option value="tomatoes">TAS</option>
<option value="apples">Apples</option>
<option value="banana">banana</option>
<option selected="selected" value="cucumber">Cucumber</option>
</select>
<!-- Quantity dropdown form-->
Quantity:
<select name="quantity">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<br>
<br>
* <b>Deliver to:</b>
<br>
<br>
<!-- Address Radio check buttons-->
<input type='radio' id="rad1" name='rad' onClick="fnc1()">Home Address<br>
<input type='radio' id="rad2" name='rad' onClick="fnc3()" />Other Address<br>
<br>
<!-- alternative street form-->
Street <input type='text' name="street" id="hstreet" onclick="this.value='';" placeholder="Street"><br>
<br>
<!-- alternative Suburb form-->
Suburb <input type='text' name="suburb" id="hsuburb" onclick="this.value='';" placeholder="Suburb or town" onChange="fnc2(this.id)"><br>
<br>
<!-- alternative State dropdown form-->
State
<select name="state" id="hstate" onChange="fnc2(this.id)">
<option value="-1" id="default">select</option>
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<br>
<br>
<!-- alternative post code form -->
Postcode:<input type='text' name="postcode2" id="postcode2" onclick="this.value='';" placeholder="****" onChange="fnc2(this.id)"><br>
<br>
<br>
* Date delivery required:
<!-- Calender drop down menu-->
<select id="daydropdown">
</select>
<select id="monthdropdown">
</select>
<select id="yeardropdown">
</select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
<br>
<br>
<!-- include a card option-->
Include a card: <input type="checkbox" name="card" id="card">Yes<br>
<br>
Personal message on card: <textarea name="message" id="message" cols="20" rows="10" onclick="this.value='';">Please Enter message here</textarea><br>
<br>
Click on <b>Submit</b> when done; click on <b> Clear form</b> to reset.
<!-- submit button-->
<input type="submit" value="Submit">
<!-- reset button-->
<input type="reset" value="Reset">
</form><br>
<script>
<!--
document.write("<i>Last updated "+document.lastModified+"<I>");
//-->
</script>
</body>
</html>