Getting value into input textfield
Question
**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;
}
In the reg.html, by clicking on "Show city" button , regtable.html will be opened In that on selecting one of the cities radio button i have to get updated the city name in reg.html page city text field. I am unable get this done. Can anyone help me? i need this to be done using HTML,CSS and Javascript.
1 answers
solution1
0 2016-09-16 10:18:41
In the page where you give options to choose city, you have a javascript function to update the city value. This function updates the value in parent window, not in the same one. Then you can close the window. So you need to modify your function like this -
<script type="text/javascript">
function postvalue(){
window.opener.document.form.City.value = document.frm.c_name.value;
window.close();
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Getting the value of a textfield
Getting the value of a textfield in Polymer
Javascript not getting textfield value
Dynamically change value of input textField
Textfield Input Value Returning Null
Getting value of a <li> tag to TextField
Getting value of dynamically generated textfield
How to store value entered in an input textfield in a database
Emberjs Input TextField value Unicode convert
how to add value of input textfield that is next to an element?
Related Tags