0
**reg.html**
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="reg.css"> </link>
<script type="text/javascript" src="reg.js"></script>
</head>
<body>
<!--container start-->
<div id="container">
<div id="container_body">
<div>
<h2 class="form_title">Registration Form Demo</h2>
<p class="head_para">Form Validation Using Javascript</p>
</div>
<!--Form start-->
<div id="form_name">
<div class="firstnameorlastname">
<form name="form" method="get" >
<input type="text" name="Name" value="" placeholder="First Name" class="input_name" required>
<input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" required >
</div>
<div id="email_form">
<input type="text" name="Email" value="" placeholder="Your Email" class="input_email" >
</div>
<div id="mobileno_form">
<input type="number" name="Mobileno" value="" placeholder="Mobile No" class="input_mobileno" maxlength="10" required>
</div>
<div id="city_form">
<input type="text" name="City" value="" placeholder="Choose City" class="input_city" >
<input type="button" onClick='window.open("regtable.html","Ratting","width=550,height=170,left=150,top=200,toolbar=1,status=1,");' value="Show City">
</div>
<div id="state_form">
<input type="text" name="State" value="" placeholder="State" class="input_state">
</div>
<div id="errorBox"></div>
<div>
<p id="sign_user" onClick="Submit()">Submit </p>
</div>
</form>
</div>
<!--form ends-->
</div>
</div>
<!--container ends-->
</body>
</html>
**reg.js**
function Submit(){
var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var mobilenoex = [0-9];
var fname = document.form.Name.value,
lname = document.form.LastName.value,
femail = document.form.Email.value,
fmobileno = document.form.Mobileno.value;
if(fname == "")
{
document.form.Name.focus() ;
document.getElementById("errorBox").innerHTML = "enter the first name";
return false;
}
if(lname == "")
{
document.form.LastName.focus() ;
document.getElementById("errorBox").innerHTML = "enter the last name";
return false;
}
if (femail == "")
{
document.form.Email.focus() ;
document.getElementById("errorBox").innerHTML = "enter the email";
return false;
}else if(!emailRegex.test(femail)){
document.form.Email.focus();
document.getElementById("errorBox").innerHTML = "enter the valid email";
return false;
}
if(fmobileno == "")
{
document.form.Mobileno.focus();
document.getElementById("errorBox").innerHTML = "enter the Mobile no";
return false;
}else if(!mobilenoex.test(fmobileno)){
document.form.Mobileno.focus();
document.getElementById("errorBox").innerHTML = "enter the valid mobileno";
return false;
}
if(fname != '' && lname != '' && femail != '' && fmobileno != ''){
document.getElementById("errorBox").innerHTML = "form submitted successfully";
}
}
**regtable.html**
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function postvalue(id){
alert(this.value);
document.form.City.value = document.frm.c_name.value;
}
</script>
<title>Choose your Cities</title>
</head>
<body>
<form name="frm">
<table border="1">
<tr id="1">
<td><input type="radio" name="c_name" class="rbox" onClick="postvalue();" value="Hyderabad" />Hyderabad</td>
</tr>
<tr id="2">
<td><input type="radio" name="c_name" class="rbox" onClick="postvalue();" value="Vizag"/> Vizag</td>
</tr>
<tr id="3">
<td><input type="radio" name="c_name" class="rbox" onClick="postvalue();" value="warangal"/>warangal</td>
</tr>
<tr id="4">
<td><input type="radio" name="c_name" class="rbox" onClick="postvalue();" value="Secunderabad"/>Secunderabad</td>
</tr>
</table>
</form>
</body>
</html>
**reg.css**
*{
margin:0px;
padding:0px;
}
body{
font-family:Tahoma, Geneva, sans-serif;
}
#container{
width:550px;
background-color:rgba(250,250,252,.9);
margin:auto;
margin-top:160px;
margin-bottom:10px;
box-shadow:0 0 3px #999;
}
#container_body{
padding:20px 10px 20px 10px;
}
.form_title{
font-size:35px;
color:#141823;
text-align:center;
padding:10px;
font-weight:normal;
}
.head_para{
font-size:19px;
color:#99a2a7;
text-align:center;
font-weight:normal;
}
#form_name{
padding:25px 0 0 15px;
}
.firstnameorlastname{
margin-right:20px;
}
.input_name{
width:207px;
padding:5px;
font-size:18px;
}
#email_form{
clear:both;
padding:15px 0 10px 0px;
}
.input_email{
width:434px;
padding:5px;
font-size:18px;
}
#mobileno_form{
padding:10px 0 10px 0px;
}
.input_mobileno{
width:434px;
padding:5px;
font-size:18px;
}
#city_form{
padding:10px 0 10px 0px;
}
.input_city{
width:334px;
padding:5px;
font-size:18px;
}
#state_form{
padding:10px 0 10px 0px;
}
.input_state{
width:434px;
padding:5px;
font-size:18px;
}
.input_button{
width: 70px;
padding:10px;
font-family:Tahoma, Geneva, sans-serif;
}
select{
padding:5px;
}
#sign_user{
font-size:14px;
color:#FFF;
text-align:center;
background-color:#3B5998;
padding:10px;
margin-top:10px;
cursor: pointer;
}
#errorBox{
color:#F00;
}
在reg.html中，點擊「顯示城市」按鈕，將打開regtable.html在選擇其中一個城市單選按鈕時，我必須更新城市名稱在reg.html頁面城市文本字段中。我無法完成這項工作。誰能幫我？我需要使用HTML，CSS和Javascript完成此操作。在輸入文本框中獲取價值
這兩個頁面在同一視圖中嗎？ – brk
不在同一視圖中。 –