2016-09-16 2 views
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.Получение значения во входной TextField

+0

эти две страницы в одном представлении? – brk

+0

не в том же виде. –

ответ

0

На странице, где указаны параметры выбора города, у вас есть функция javascript для обновления значения города. Эта функция обновляет значение в родительском окне, а не в том же самом. Затем вы можете закрыть окно. Таким образом, вам необходимо изменить свою функцию следующим образом:

 <script type="text/javascript"> 
     function postvalue(){ 
      window.opener.document.form.City.value = document.frm.c_name.value; 
      window.close(); 
     } 
    </script> 
+0

Это сработало для вас? Я не понимаю. –

+0

Да, это действительно работает. Вы должны поместить этот скрипт в файл regtable.html. Замените эту функцию на эту. –

+0

Я заменил. это не работает. –

Смежные вопросы