how to display country code in textbox base on selection of dropdown value
Question
Below code give me the error:
facebook.htmlName=&LastName=&Email=&Password=&enterEmail=&country_name=&code=&mobile=&btn2=faceboo…:203 The specified value "+,91" is not a valid number. The value must match to the following regular expression: -?(\\d+|\\d+.\\d+|.\\d+)([eE][-+]?\\d+)?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>user registration form validation using javascript with example</title>
<script type="text/javascript">
function selectvalue(x){
var country_dropdown=document.getElementById("country");
var country_Mcode=document.getElementById("country_mcode");
if(document.getElementById("country").value=="1")
{
document.getElementById("country_mcode").value="+91"
}
if(document.getElementById("country").value=="2")
{
document.getElementById("country_mcode").value="+1"
}
if(document.getElementById("country").value=="3")
{
document.getElementById("country_mcode").value="+880"
}
if(document.getElementById("country").value=="4")
{
document.getElementById("country_mcode").value="+81"
}
if(document.getElementById("country").value=="5")
{
document.getElementById("country_mcode").value="+86"
}
}
</script>
</head>
<body>
<div id="emptyDiv">
</div>
<div id="description"></div>
<!--container start-->
<div id="container">
<div id="container_body">
<div>
<h2 class="form_title">User Registration Form Demo</h2>
<p class="head_para">Form Validated Using Javascript</p>
</div>
<!--Form start-->
<div id="form_name">
<div class="firstnameorlastname">
<form name="form" >
<div id="errorBox"></div>
<input type="text" name="Name" value="" placeholder="First Name" class="input_name" >
<input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" >
</div>
<div id="email_form">
<input type="text" name="Email" value="" placeholder="Your Email" class="input_email">
</div>
<div id="password_form">
<input type="password" name="Password" value="" placeholder="New Password" class="input_password">
</div>
<div id="Re_email_form">
<input type="text" name="enterEmail" value="" placeholder="Re-enter Email" class="input_Re_email">
</div>
<!--birthday details start-->
<div>
<h3 class="country">Country</h3>
</div>
<div>
<select name="country_name" id="country" onchange="selectvalue()">
<option value="" selected >Country</option>
<option value="1">india</option>
<option value="2">america</option>
<option value="3">Bangladesh</option>
<option value="4">japan</option>
<option value="5">china</option>
</select>
</div>
<div>
<h3 class="country">Mobile No</h3>
</div>
<div>
<input type="number" name="code" value="" class="input_name" id="country_mcode" >
</div>
<div>
<input type="number" name="mobile" value="" placeholder="Mobile No" class="input_name" >
</div>
<!--birthday details ends-->
<div>
<p id="sign_user" onClick="Submit()">Registration</p>
</div>
<div>
<input type="submit" name="btn2" value="facebook registration"/>
</div>
<div>
<p id="google_user" onClick="Submit()">Google Registration</p>
</div>
</form>
</div>
<!--form ends-->
</div>
</div>
<!--container ends-->
</body>
</html>
1 answers
solution1
0 2017-05-10 11:33:52
That happens because your input field is type=number and a + (plus) can not be added this way.
That is actually a little odd, because you can type in +10 for example. But then it is interpreted as a positive 10 and the + is removed and not stored in the value attribute. You can either change the type or remove the plus from the number making it a valid number and not a string.
This should be verifiable if you type +10 in your field and then use the console and type in document.getElementById('country_mcode')[0].value .
The returned value should be 10 not +10.
Edit: You could remove the type enforcement and add a pattern="\\+\\d{1,5}" or something similar to allow for your specific use case if the input field can be set by user.
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.