input value undefined javascript

javascript css dom browser

10,646

Solution 1

Its getElementsByName so you are getting list of DOM elements, you need to select the particular one out of list.

function validate() {
        var inputName = document.getElementsByName("fName")[0];
        if (inputName.value == "") {
            document.getElementById("error_alert").style.visibility = "visible";
        }
    }

 #error_alert {
        visibility: hidden;
        border: 1px solid #F00;
        text-align: center;
        width: 100px;
    }

    label,
    input,
    button {
        display: block;
        margin: 2px;
    }

<h1>Titulo</h1>
    <p id="error_alert">invalid name</p>
    <label>Name:</label>
    <input type="text" name="fName" />
    <label>e-mail:</label>
    <input type="email">
    <button onClick="validate()" type="button">Enviar</button>

Solution 2

When you use document.getElementsByName, it returns an array, hence input.value will not work.

Try the following -
function validate() {
   var inputName = document.getElementsByName("fName")
        if (inputName[0].value == "") {
            document.getElementById("error_alert").style.visibility = "visible";
        }
    }
}

Solution 3

getElementsByName() returns an array, so your comparison to " " is invalid. It would be easier if you add an id to your input as well, then you can use getElementById() instead. It returns a single value that you can then compare with as you are.

<input type="text" name="fName" id="fName" />

var inputName = document.getElementById("fName");

Solution 4

Change:

if (inputName.value == " ") {

To:

if (inputName.value[0] == "") {

View more solutions

10,646

Author by

Kiogara

Updated on June 04, 2022

Comments

Kiogara almost 2 years

I want to show an error message when text box is empty on submit, but is not working and everytime I try to get the value through the console area returns undefined.

CSS

<style>
    #error_alert {
        visibility: hidden;
        border: 1px solid #F00;
        text-align: center;
        width: 100px;
    }

    label,
    input,
    button {
        display: block;
        margin: 2px;
    }
</style>

Javascript

    <script>
    function validate() {
        var inputName = document.getElementsByName("fName")
        if (inputName.value == " ") {
            document.getElementById("error_alert").style.visibility = "visible";
        }
    }
    </script>

Html

<body>
    <h1>Titulo</h1>
    <p id="error_alert">invalid name</p>
    <label>Name:</label>
    <input type="text" name="fName" />
    <label>e-mail:</label>
    <input type="email">
    <button onClick="validate()" type="button">Enviar</button>
</body>

PS: When I added x == null || as an opntion on the condition the message would turn visible everytime even when i had something written in the textarea.