コーディングに小さな問題があります。私は自分の個人的な功績として、通常の古いメモ帳でこれを構築しています (判断しないでください)。これに伴い、Javascript と HTML のみを使用して、CSS と共にこれを構築したいと考えています。
私のコードは次のとおりです:
HTML
<html>
<h1>Please join our email list</h1>
<body>
<script language="javascript" src="country.js"></script>
<form name="myForm">
<label for="email_address1">Email Address:</label>
<input type="text" id="email_address1" name="email_address1">
<span id="email_address1_error">*</span><br></br>
<label for="email_address2">Re-enter Email Address:</label>
<input type="text" id="email_address2" name="email_address2">
<span id="email_address2_error">*</span><br></br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name">
<span id="first_name_error">*</span><br></br>
<label for="select_country">Select your country:</label>
<select id="myList" onchange="choice(),validate()">
<option value="0"></option>
<option value="1">United States</option>
<option value="2">Canada</option>
</select><span id="country_error"> *</span><br></br>
<span for="res_code" id="res_code_lbl">Zip/Province Code: </span><input type="text" id="res_code" name="res_code"><span id="res_code_error"> *</span>
<br></br>
<button type="button" id="joinButton" onclick="validate(),joinList()">Join Our List</button>
</form>
</body>
</html>
Javascript
function validate(){
var e = document.getElementById("myList");
var f = e.options[e.selectedIndex].value;
if(f == 0)
{
document.getElementById("country_error").innerHTML="Choose a country!";
}
else{
document.getElementById("country_error").innerHTML="*";
}
}
function choice(){
var e = document.getElementById("myList");
var f = e.options[e.selectedIndex].value;
if(f == 1){
document.getElementById("res_code_lbl").innerHTML="Zip Code: ";
}
else if(f == 2){
document.getElementById("res_code_lbl").innerHTML="Province Code: ";
}
}
function joinList(){
var e1 = document.getElementById("email_address1").value;
var e2 = document.getElementById("email_address2").value;
var n = document.getElementById("first_name").value;
var c = document.getElementById("res_code").value;
if(e1 == null){
document.getElementById("email_address1_error").innerHTML="Enter your email address!";
}
else{
document.getElementById("email_address1_error").innerHTML="*";
if(e1 != e2){
document.getElementById("email_address2_error").innerHTML="Your email address must match!";
}
else{
document.getElementById("email_address2_error").innerHTML="*";
if(n == null){
document.getElementById("first_name_error").innerHTML="Enter your first name!";
}
else{
document.getElementById("first_name_error").innerHTML="*";
if(c == null){
document.getElementById("res_code_error").innerHTML="Enter a valid State/Province Code!";
}
else{
document.getElementById("res_code_error").innerHTML="*";
if((e1 != null) && (e1 = e2) && (n != null) && (c != null)){
location.href='countryjoin.html';
}
}
}
}
}
}
私はこれがたくさんあることを知っているので、CSS を割愛します :P 基本的に、どの入力も null でないことを検証したいと思います。検証関数が実行されると、null であってもすべてのフィールドが null ではないかのように許可されるように見えますが、location.href の変更は開始されません。正しく機能する唯一のフィールドは選択リストです。これは、送信ボタンで onchange および onclick で機能します。
どんなフィードバックでも大歓迎です! ありがとうございました！