We Keep Coding

How to change Id of cloned row in below jQuery code

I'm trying to achieve the change of Id But the code what I have is only having the code to change the name of the element can anyone please help to change the id of the element in the below give jquery code
Thanks in Advance.
Html View-source code is as follows
<div style="width:700px; padding:5px; background-color:white;">
<form action="/" method="post">
<a id="addNew" href="#">+</a> <a id="remove" href="#">-</a>
<table id="dataTable" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>UserName</th>
<th>Password</th>
<th>Service line</th>
<th>Track</th>
<th>subtrack</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="TemplateRow" style="border:1px solid black">
<td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[0].UserName" type="text" value="Required" /></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[0].Password" type="text" value="Required" /></td>
<td>
<select class="wrapper-dropdown Service_Line" id="z0__Service_Line" name="[0].Service_Line">
<option value="">--Select--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<select class="wrapper-dropdown Track" id="z0__Track" name="[0].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="wrapper-dropdown Sub_Track" id="z0__Sub_Track" name="[0].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>
<input type="submit" value="Save Bulk Data" />
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Iv10IHEfBVKvKHuuUa1dyFaBzngVKjKG3-va_WAZxz30jKahHLoMeCFM1qbmA9nPf01CYch9VobgyZOOv60VPsPJjlD4yUbH4F7TF0QrcJJTnMpj88n1Et9Ksa2i2y23CBEPqICCPoC18cdrY1Ral0" />
</form>
</div>
Jquery is as follows
$(document).ready(function () {
//1. Add new row
$("#addNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#dataTable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone(true);
var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
$(this).attr('name', newN);
// If you have another Type then replace with default value
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
});
});
I have tried by changing the attr(name) to attr(id) after changing like that its not changing the name but even not changing the ids too...
For more reference the Html code is as follows::
<table id="dataTable" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>UserName</th>
<th>Password</th>
<th>Service line</th>
<th>Track</th>
<th>subtrack</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null && Model.Count > 0)
{
int j = 0;
foreach (var i in Model)
{
<tr id="TemplateRow" style="border:1px solid black">
<td>#Html.TextBoxFor(a => a[j].UserName)</td>
<td>#Html.TextBoxFor(a => a[j].Password)</td>
<td>
#if (ViewBag.ServiceLineList != null)
{
#Html.DropDownListFor(a => a[j].Service_Line, ViewBag.ServiceLineList as SelectList, "--Select--", new { #class = "wrapper-dropdown Service_Line" })
}
</td>
<td>
#Html.DropDownListFor(a => a[j].Track, new SelectList(" "), "--Select--", new { #class = "wrapper-dropdown Track" })
</td>
<td>
#Html.DropDownListFor(a => a[j].Sub_Track, new SelectList(" "), "--Select--", new { #class = "wrapper-dropdown Sub_Track" })
</td>
<td>
#if (j > 0)
{
Remove
}
</td>
</tr>
j++;
}
}
</tbody>
</table>

To create a unique id, we can keep a count of the rows added in the jQuery, and append this to the base name (e.g. UserName) to create a unique name and id. You say there will only be one row in the HTML, so we can start the count for our new rows at 1.
Every time the "Add New" button is clicked, the steps are (numbers match the comment numbers):
Initialise our variable to start the count
generate a unique id for the row, e.g. TemplateRow-1: var newId = "TemplateRow-" + rowcount;
Clone the row and pass in the id: $trLast.clone(true).prop({ id: newId});
generate the name and id for each input: get the input name, remove the [n] to get the base name (e.g. UserName), and use this to create the new name (e.g. [1].UserName) and id (e.g. z1__UserName).
Working snippet: I show the new id using console.log so you can see what is being added:
$(document).ready(function() {
/* 1. Initialise our variable to keep count of the rows added */
var rowcount = 1;
//Add new row
$("#addNew").click(function(e) {
e.preventDefault();
var $tableBody = $("#dataTable");
var $trLast = $tableBody.find("tr:last");
// 2. Create the new id with the row count
var newId = "TemplateRow-" + rowcount;
// 3. clone the row with our new id
var $trNew = $trLast.clone(true).prop({ id: newId });
// 4. rename each input and give an id
$.each($trNew.find(':input'), function(i, val) {
oldName = $(this).attr('name');
inputParts = oldName.split(".");
// set the name and id with the base name and rowcount
$(this).attr('name', '[' + rowcount + '].'+inputParts[1]);
$(this).attr('id', 'z'+rowcount+'__'+inputParts[1]);
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
rowcount++;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dataTable" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>UserName</th>
<th>Password</th>
<th>Service line</th>
<th>Track</th>
<th>subtrack</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="TemplateRow" style="border:1px solid black">
<!-- <td><input type="text" name="username"></td>
<td><select name="serviceline"><option>1</option></select></td>
<td><input type="text" name="track"></td>
<td><input type="text" name="subtrack"></td> -->
<td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[0].UserName" type="text" value="Required" /></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[0].Password" type="text" value="Required" /></td>
<td>
<select class="wrapper-dropdown Service_Line" id="z0__Service_Line" name="[0].Service_Line">
<option value="">--Select--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<select class="wrapper-dropdown Track" id="z0__Track" name="[0].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="wrapper-dropdown Sub_Track" id="z0__Sub_Track" name="[0].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>
<button id="addNew">Add New</button>

accessing html table elements in javascript

I would like to access the html input tag which is present inside a table inside a form as shown below. I have used the function below to access the element but I'm getting undefined in the output:
function checkForm()
{
var table=document.getElementById('register').getElementsByTagName('myTab');
document.writeln(table);
}
The above function returns undefined. Why, and how can it be fixed to return the input that I need?
<!DOCTYPE HTML>
<HEAD>
<META CHARSET = "utf-8">
<TITLE>Register</TITLE>
<link rel="stylesheet" type="text/css" href="reglog.css">
</HEAD>
<BODY>
<h1 align=center>Register with our portal</h1>
<FORM id="register" onsubmit="return checkForm();" METHOD="POST">
<table name="myTab" border = 0 align=center>
<tr >
<td> Username </td>
<td> </td>
<td><input name="username" class=textbox type = text required></td>
</tr>
<tr >
<td> Password </td>
<td> </td>
<td><input name="passwd" class=textbox type = password required></td>
</tr>
<tr >
<td> Confirm Password </td>
<td> </td>
<td><input name="c_password" class=textbox type = password required></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <input class=button type = submit value = Register> </td>
</tr>
</table>
</FORM>
</BODY>
</HTML>

Javascript's getElementsByTagName function works, as it's name says, with html tag names (div, table, form, etc). In your case would be getElementsByTagName('table'). Instead you could use getElementsByName.

To get the table element with attribute myTab from the element with id register, you can chain a querySelectorAll() method to a getElementById() :
table = document.getElementById('register').querySelectorAll('table[name=myTab]')[0];
console.log(table)
<h1 align=center>Register with our portal</h1>
<FORM id="register" onsubmit="return checkForm();" METHOD="POST">
<table name="myTab" border=0 align=center>
<tr>
<td> Username </td>
<td> </td>
<td><input name="username" class=textbox type=t ext required></td>
</tr>
<tr>
<td> Password </td>
<td> </td>
<td><input name="passwd" class=textbox type=p assword required></td>
</tr>
<tr>
<td> Confirm Password </td>
<td> </td>
<td><input name="c_password" class=textbox type=p assword required></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <input class=button type=s ubmit value=R egister> </td>
</tr>
</table>
</FORM>
Note that getElementsByTagName() get the elements from their name, not from their name attribute.

There are various ways to access form elements. In your code you can access form elements using
var x = document.getElementById("register").elements;
This will give you all the elements in your form. However if you want to access first element you can use something like below code
document.getElementById("register").elements[0].value // 0 is the index as per all the elements present in your form 'register'

Unable to fetch the input values from the form in jquery

I am fetching the values from the form page and then validating it. I am using jquery to handle the input objects and fetch the values which are entered by the user.
My HTML code is:
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td>
<input name="name" type="text" id="name" />
</td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td>
<input name="emailId" type="text" id="emailId">
</td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td>
<input name="phoneNo" type="text" id="phoneNo">
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 50px">
<input type="button" value="Submit" id="submit">
</td>
</tr>
</table>
</form>
My javascript file code which is fetching the data is:
$(document).ready(function() {
$('#submit').click(function() {
var name = $('#name').find('input[name="name"]').val();
var emailId = $('#emailId').find('input[name="emailId"]').val();
var phoneNo = $('#phoneNo').find('input[name="phoneNo"]').val();
});
});
The result I am getting in the variable name or any other is "undefined".
Where am I going wrong in it?

All you need to do is get the value from the elements, like this:
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
Your code was getting a reference to the form fields, then looking for child elements (which input elements don't have, hence undefined) that were the same as the element that you already found and then trying to get the value of that.

Just remove .find('input[name="name"]') from each selector
$(document).ready(function(){
$('#submit')
.click(
function() {
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
console.log(name);
console.log(emailId);
console.log(phoneNo);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td><input name="name" type="text" id="name"/></td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td><input name="emailId" type="text" id="emailId"></td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td><input name="phoneNo" type="text" id="phoneNo"></td>
</tr>
<tr >
<td colspan="2" style="padding-top: 50px"><input type="button" value="Submit" id="submit"></td>
</tr>
</table>
</form>

take value data & Delete row table with javascript

I have 3 problems with this javascript.
User cant add more item if already limit.
Example max item 3, and value item is ab,bc,cd, how I can take value if using javascript (after all done user will be press submit then all data from table will be post (i cant take data from javascript))?
what I want build is like this : Example 2 item
|Total Item | Name Item | Delete |
| 1 | ABC | DELETE(BUTTON) |
| 2 | CDE | DELETE(BUTTON) |
This is html code, example max item is 6
<table border="0">
<tr>
<td>
Title
</td>
<td>
:
</td>
<td>
<input type="text" name="title" value="" placeholder="Input Title">
</td>
</tr>
<tr>
<td>
Show Item
</td>
<td>
:
</td>
<td>
<select name="max" id="maxitem">
<?php
for($i=1; $i<=6; $i++)
{
echo "<option value=".$i.">".$i." Item</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>
Product
</td>
<td>
:
</td>
<td>
<input type="text" name="product" id="product" value="" placeholder="Add Product">
</td>
<td>
<input type="button" id="ADD" value="Add Item">
</td>
</tr>
</table>
<table border="1" id="tblname">
<thead>
<tr>
<td>
Total Item
</td>
<td>
Name Item
</td>
<td>
DELETE
</td>
<tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<input type="submit" value="SUBMIT">
and this is javascript code :
$(document).ready(function(){
var item = 1;
$('#ADD').click(function(){
var maxitem = parseInt($("#maxitem").val()); //from max item in html
if($('#product').val()){ // check input product
if( item <= maxitem )
{
$('#tblname tbody').append($("#tblname tbody tr:last").clone());
$('#tblname tbody tr:last td:first').val(item);
$('#tblname tbody tr:last td:first').html($('#product').val());
$('#tblname tbody tr:last td:first').append("<input type='button' class='DEL' value='DELETE'>");
var item +=1;
}
else
{
alert ("Max Limit !!!");
}
}else{alert('Enter Text');}
});
// for delete row
$('body').on('click', 'input.DEL', function() {
$(this).parents('tr').remove();
});
});

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
var item = 1;
$('#ADD').click(function(){
var maxitem = parseInt($("#maxitem").val(), 10); //from max item in html
var iCount = 0;
if($('#product').val()){ // check input product
if( item <= maxitem )
{
iCount = $('#tblname tbody tr').length + 1;
szTr = "<tr><td>";
szTr = szTr + iCount + "</td>";
szTr = szTr + "<td>" +$('#product').val() +"</td>";
szTr = szTr + "<td><input type='button' class='DEL' value='DELETE'></td>";
szTr = szTr + "</tr>";
$('#tblname tbody').append(szTr);
item = item+1;
}
else
{
alert ("Max Limit !!!");
}
}else{alert('Enter Text');}
});
// for delete row
$('body').on('click', 'input.DEL', function() {
$(this).parents('tr').remove();
});
$('#get_data').click(function () {
$('#tblname tbody tr').each(function () {
alert($(this).find('td:eq(1)').text());
});
});
});
</script>
</head>
<body>
<table border="0">
<tr>
<td>
Title
</td>
<td>
:
</td>
<td>
<input type="text" name="title" value="" placeholder="Input Title">
</td>
</tr>
<tr>
<td>
Show Item
</td>
<td>
:
</td>
<td>
<select name="max" id="maxitem">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4">Item4</option>
<option value="5">Item5</option>
<option value="6">Item6</option>
</select>
</td>
</tr>
<tr>
<td>
Product
</td>
<td>
:
</td>
<td>
<input type="text" name="product" id="product" value="" placeholder="Add Product">
</td>
<td>
<input type="button" id="ADD" value="Add Item">
</td>
</tr>
</table>
<table border="1" id="tblname">
<thead>
<tr>
<td>
Total Item
</td>
<td>
Name Item
</td>
<td>
DELETE
</td>
<tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="Get Data" id="get_data">
<input type="submit" value="SUBMIT">
</body>
</html>

See if this is what you are trying to do, your description is hard to decipher:
DEMO: https://jsfiddle.net/d8kpsnxx/
<table border="0">
<tr>
<td>Title</td>
<td>:</td>
<td><input type="text" name="title" value="" placeholder="Input Title"></td>
</tr>
<tr>
<td>Show Item</td>
<td>:</td>
<td>
<select name="max" id="maxitem">
<option value=1>1 Item</option>
<option value=2>2 Item</option>
<option value=3>3 Item</option>
<option value=4>4 Item</option>
<option value=5>5 Item</option>
<option value=6>6 Item</option>
</select>
</td>
</tr>
<tr>
<td>Product</td>
<td>:</td>
<td><input type="text" name="product" id="product" value="" placeholder="Add Product"></td>
<td><input type="button" id="ADD" value="Add Item"></td>
</tr>
</table>
<table border="1" id="tblname">
<thead>
<tr>
<td>
Total Item
</td>
<td>
Name Item
</td>
<td>
DELETE
</td>
<tr>
</thead>
<tbody id="cracker">
</tbody>
</table>
<input id="submitall" type="submit" value="SUBMIT">
<script>
$(document).ready(function() {
var isAllowed = 3;
var isSet = 0;
$(this).on('click',"#ADD",function(e) {
// Prevent submission
e.preventDefault();
// Set all the value object
var drop = $("select[name=max]");
var title = $("input[name=title]");
var prod = $("input[name=product]");
// Append the table
$("#cracker").append('<tr><td>'+title.val()+': '+prod.val()+'</td><td>'+drop.val()+'</td><td><input type="submit" class="dMade" name="'+drop.val()+'" value="DELETE" /></td></tr>');
// Clear all the values to start over
drop.val("");
title.val("");
prod.val("");
// Auto increment
isSet++;
// Turn off/on submit buttons
restFormOpts();
});
$(this).on('click',".dMade",function(e) {
var traversed = $(this).parents("tr");
traversed.remove();
isSet--;
restFormOpts();
});
function restFormOpts()
{
if(isSet === isAllowed) {
$("#ADD").attr("disabled",true);
$("#submitall").attr("disabled",false);
}
else {
$("#ADD").attr("disabled",false);
$("#submitall").attr("disabled",true);
}
}
});
</script>

Validating text area in Java Script freezes all text areas

I have a Html page which uses Java Script and I am opening that page in WebView
My problem is when I enabled max length validation on text area, then after validating text area all the text areas in page are freezed and I am not able to edit or delete from any text area.
Please help me how to resolve this issue that after validating text areas no text area is freezed.
My HTML Page is as
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center>
<font size=4><b>Student Registration Form</b></font>
</center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="number" maxlength='6' name="pincode"
id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
I added max length and only number in Pincode textarea. when I entered pin code after that each text area is freezed.
If I did not put these validation in pincode text area then it never freezes.

The issue that you are facing is a bug and has already been reported as issue #35264.
I have created a workaround for it at jsfiddle. For convenience pasted code below.
HTML:
<input type="number" maxlength='6' name="pincode" id="pincode" size="30" max="999999" >
Javascript:
var pincode = document.getElementById('pincode');
var maxLength = pincode.maxLength;
pincode.onkeypress = function(e){
if( pincode.value.length >= maxLength ){
return false;
}
};
The solution is, just ensure the content of input element does not cross the max limit.
On each keypress event, compare the input value length against max length. If it is more return false so that the input will be discarded.
Set max attribute on input element, to prevent user providing input more than max value using up arrow key.

First of all what you said is not text area. It's just a text filed. Text area should be defied as <textarea rows="10" cols="15"></textarea>.
Actually maxlength attribute is used to limit number of characters that user can enter. you gave maxlength='6' here which means maximum values user here can enter is just 6 digits or character.
I hope you were trying to adjust the width of the input filed. For that, give the following attribute and value : style="width:100px;max-width:60%;". ie., <input type="number" maxlength='6' name="pincode" id="pincode" size="30" style="width:100px;max-width:60%;">

In HTML you can use max attribute to set a maximum length to an input type number.
<input type="number" min="1" max="999999" name="pincode" id="pincode" size="30">
Documentation about maxLength attribute in HTML
maxlength
If the value of the type attribute is text, email, search, password,
tel, or url, this >attribute specifies the maximum number of
characters (in Unicode code points) that the user can enter; for other
control types, it is ignored. It can exceed the value of the size
attribute. If it is not specified, the user can enter an unlimited
number of characters. Specifying a negative number results in the
default behavior; that is, the user can enter an unlimited number of
characters. The constraint is evaluated only when the value of the
attribute has been changed.
Thus its designed to be ignored for input type="number"
Look here for complete set of attributes description for < input >
It will only set the maximum allowed number as the max value specified, it won't be blocking any value grater than max Value. Max attribute shows an error popup showing that the limit is exceeded.
If you want to block the text value from not getting any bigger than 6, you can uses JavaScript
SCRIPT
<script> function validateLength(obj)
{
if(obj.value.length > 6)
obj.value = obj.value.substr(0, 6);
}
</script>
HTML
<input type="number" min="1" max="999999" name="pincode" id="pincode" onkeyup="validateLength(this)">

I think that the only way to accomplish what you want is with JavaScript. I would use a method similar to Dileep's with a few differences:
Instead of just splicing the first six characters from the current value, I would save the last entered valid value and revert to that. A similar functionality, but more stable as far as I can tell.
Instead of using an inline HTML event callback, I would recommend assigning it directly via the DOM in the JavaScript. For a discussion of the differences between these methods, see this SO.
I also think that having the input box briefly flash a different color, at least for debugging purposes, would help to see when and how the code was executing if anything doesn't work.
Finally, I would use an <input type="tel"/> rather than an <input type="number"/>. The tel will still bring up a number-pad on mobile devices, but, unlike number, won't have an empty value when non-numeric data is entered. (See this SO.)
I've put all of this into a brief JSFiddle for you to see. Feel free to reuse it if it helps:
http://jsfiddle.net/VPL5e/1/
Does this solve your problem? If you need anything else, please ask!

There is nothing wrong in your html code may be the issue is in "form validation".
anyway i am providing you that full html and form validation code.
HTML
<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
Form Validation
function validate()
{
if( document.StudentRegistration.textnames.value == "" )
{
alert( "Please provide your Name!" );
document.StudentRegistration.textnames.focus() ;
return false;
}
if( document.StudentRegistration.fathername.value == "" )
{
alert( "Please provide your Father Name!" );
document.StudentRegistration.fathername.focus() ;
return false;
}
if( document.StudentRegistration.paddress.value == "" )
{
alert( "Please provide your Postal Address!" );
document.StudentRegistration.paddress.focus() ;
return false;
}
if( document.StudentRegistration.personaladdress.value == "" )
{
alert( "Please provide your Personal Address!" );
document.StudentRegistration.personaladdress.focus() ;
return false;
}
if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if( document.StudentRegistration.City.value == "-1" )
{
alert( "Please provide your City!" );
document.StudentRegistration.City.focus() ;
return false;
}
if( document.StudentRegistration.Course.value == "-1" )
{
alert( "Please provide your Course!" );
return false;
}
if( document.StudentRegistration.District.value == "-1" )
{
alert( "Please provide your Select District!" );
return false;
}
if( document.StudentRegistration.State.value == "-1" )
{
alert( "Please provide your Select State!" );
return false;
}
if( document.StudentRegistration.pincode.value == "" ||
isNaN( document.StudentRegistration.pincode.value) ||
document.StudentRegistration.pincode.value.length != 6 )
{
alert( "Please provide a pincode in the format ######." );
document.StudentRegistration.pincode.focus() ;
return false;
}
var email = document.StudentRegistration.emailid.value;
atpos = email.indexOf("#");
dotpos = email.lastIndexOf(".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.StudentRegistration.emailid.focus() ;
return false;
}
if( document.StudentRegistration.dob.value == "" )
{
alert( "Please provide your DOB!" );
document.StudentRegistration.dob.focus() ;
return false;
}
if( document.StudentRegistration.mobileno.value == "" ||
isNaN( document.StudentRegistration.mobileno.value) ||
document.StudentRegistration.mobileno.value.length != 10 )
{
alert( "Please provide a Mobile No in the format 123." );
document.StudentRegistration.mobileno.focus() ;
return false;
}
return( true );
}
let me know if it worked or any other issue you faced in this.