javascript issue with inputting a number in a form

Question

I am inputting age in a form in HTML which has a age field. I want to take input in age as a number only so I have defined age field as number type. I am putting a check in the javascript code if(typeof name === "string" && isNaN("age") ==="false").I observed during debugging that typeof age is string.I don't know how is it getting converted to string type automatically. I have attached my HTML and javascript codes.Plz help...

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-        1.11.3.min.js"></script>
</head>
<script src="form_js.js"></script>

<body>
    <form id="myForm">
        First Name:
        <input type="text" id="field1">
        <br> Last Name:
        <input type="text" id="field2">
        <br> Age:
        <input type="number" id="field3">
        <br>
        <br> Gender:
        <select id="field5">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </form>
    <p>
        <input type="button" onclick="insRow('Table1')" value="Insert">
    </p>
    <table id="Table1" style="width:100%">
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Gender</td>
        </tr>
    </table>
</body>

</html>

Javascript:

var count = 0;

function insRow() {
    count += 1;
    var x, y, z, a, w;

    var w = document.getElementById('Table1').insertRow(count);
    var name = $("#field1").val() + " " + $("#field2").val();
    //var age = $('#field3').val();
    //var age = $('#myForm :field3');
    //var Email = $("#field4").val();
    var gender = $("#field5").val();

    //w = document.getElementById('Table1').insertRow(count);
    //var first_name = document.getElementById("field1").value;
    //var last_name = document.getElementById("field2").value;
    var age = document.getElementById("field3").value;
    //var gender = document.getElementById("field5").value;
    if (typeof name === "string") //&& isNaN("age") ==="false")
    {

        x = w.insertCell(0);
        y = w.insertCell(1);
        a = w.insertCell(2);

        x.innerHTML = name //" " + last_name;
        y.innerHTML = age;
        a.innerHTML = gender;
        document.getElementById("myForm").reset();
    } else alert("Invalid Data");
    //var rows += "<tr><td>" + name + "</td><td>" + age + "</td><td>" + Email + "</td><td>" + Gender +"</td></tr>";
    //$("#Table1 tbody").append(rows);


}

Tushar · Accepted Answer · 2015-07-23 09:13:20Z

3

When you get any value from HTML it is by default string. To convert it to Number use parseInt or parseFloat according to your requirement.

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

var age = parseInt(document.getElementById("field3").value, 10);

OR

The parseFloat() function parses a string argument and returns a floating point number.

var age = parseFloat(document.getElementById("field3").value);

When you are checking for NaN, use variable age without quotes. And for strict comparison false should be without quotes.

isNaN("age") ==="false")

Should be

isNaN(age) === false) // Without quotes for age and false

answered Jul 23, 2015 at 9:13

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 0 · Accepted Answer · 2015-07-23 09:26:40Z

0

Note that document.getElementById(someId).value will always return you string type, if any. There are several methods to parse like parseInt(), parseFloat() and also +()

var str = document.getElementById('num').value;
var num = +(str);
alert("Type of " + num + " is " + (typeof num));

var price = +(document.getElementById('price').value);
alert("Type of " + price + " is " + (typeof price));

<input type="text" id="num" value="56" />
<input type="text" id="price" value="9.13" />

edited Jul 23, 2015 at 9:26

answered Jul 23, 2015 at 9:21

user2575725

Collectives™ on Stack Overflow

javascript issue with inputting a number in a form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related