簡體   English   中英

將價值帶入輸入文本字段

[英]Getting value into input textfield

**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完成此操作。

在您可以選擇城市的頁面中,您可以使用JavaScript函數更新城市值。 此函數更新父窗口中的值,而不是同一窗口中的值。 然后,您可以關閉窗口。 因此,您需要像這樣修改功能-

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM