Show hidden element when form validation is successful

Question

I'm trying to show a div if all fields of a HTML form are filled with at least one character.

<input name="name" id="name" value="" required placeholder="Name"></input>
<input name="surname" id="surname" value="" required placeholder="Surname"></input>
<input name="email" id="email" value="" required placeholder="Email"></input>
<textarea name="comments" value="" required placeholder="Comments"></textarea>
<div id="test" style="display:none;">test</div>

and I've got this script

<script type="text/javascript">
    if(document.getElementById('name').value!='' && 
       document.getElementById('surname').value!='' && 
       document.getElementById('email').value!='' && 
       document.getElementById('message').value!=''){
           document.getElementById('test').style.display = 'block';
    }
</script>

but it doesn't work. Why? I tried to move the script from top to the bottom of the file but the div 'test' is always hidden. what is wrong with my sciript?

Answer 1

You need to call that script every time a field is changed.

For instance:

<input name="name" id="name" value="" required placeholder="Name" onchange="myFunction()"></input>
etc.

<script type="text/javascript">
    function myFunction() {
        if(document.getElementById('name').value!='' &&
           document.getElementById('surname').value!='' &&
           document.getElementById('email').value!='' &&
           document.getElementById('message').value!=''){
               document.getElementById('test').style.display = 'block';
        }
    }
</script>

Answer 2

I see you linked jquery. Why not use it if you have it?

$('input').on('change', function(){
    if($('#name').val() != '' && $('#surname').val() != '' && $('#email').val() != '' && $('#comments').val() != ''){
        $('#test').show();
    }else{
        //This part is optional
        $('#test').hide();
    }
});

You should also add id="comments" in your textarea

Answer 3

You have two errors, first you have not assigned any ID to your textarea which you are using in your script. Second, the function must be called upon everytime the user makes any change, so you need to bind the onchange event.

So, it should be:

HTML:

<input name="name" id="name" value="" required placeholder="Name" onchange="myUpdateFunction()"></input>
<input name="surname" id="surname" value="" required placeholder="Surname" onchange="myUpdateFunction()"></input>
<input name="email" id="email" value="" required placeholder="Email" onchange="myUpdateFunction()"></input>
<textarea name="comments" id="message" value="" required placeholder="Comments" onchange="myUpdateFunction()"></textarea>
<div id="test" style="display:none;">test</div>

JavaScript:

<script type="text/javascript">
function myUpdateFunction() {
    if(document.getElementById('name').value!='' &&
       document.getElementById('surname').value!='' &&
       document.getElementById('email').value!='' &&
       document.getElementById('message').value!='') {
           document.getElementById('test').style.display = 'block';
    }
}
</script>

Answer 4

The first issue is when the script is running. As coded it will run as soon as the page renders the script, and never again.

You will probably want to wire it up to the on change event of each text box so you can know when to show the hidden field.

Second, where is the "message" element? Is that supposed to be comments? If so, comments is missing an Id (has a name but no Id)

Answer 5

http://jsfiddle.net/7hafkwhj/1/

First of all it could be a good idea to wrap your elements inside an html tag form:

<form id="form">
    <input name="name" type="text" placeholder="Name" required></input>
    <input name="surname" type="text" placeholder="Surname" required></input>
    <input name="email" type="email" placeholder="Email" required></input>
    <textarea name="comment" placeholder="Comments" required></textarea>
</form>
<div id="message">Ok, roger</div>

Also, I don't understand why you should use jQuery for this kind of stuff. You can make the same thing using native Javascript:

(function() {
    var form = document.getElementById('form'),
    message = document.getElementById('message');

    function makeCheck() 
    {
        i = 0;
        while(i < form.elements.length) {
            if(form.elements[i].value === '')
            {
                return false;
            }
            i++;
        }
        return true;
    }

    function displayMessage() 
    {
        if(makeCheck()) 
        {
            message.style.display = 'block';
        }
        else 
        {
            message.style.display = 'hide';
        }
    }

    for(i = 0; i < form.elements.length; i++)
    {
        form.elements[i].onkeyup = function () {
            displayMessage();
        };
    }
})();