CODEWITHSUNDEEP
javascriptjqueryhtmlformsinput
Dan Johnson
Dan Johnson

Reputation: 1482

Run a javascript function as user is inputting

I don't usually like to bother you all but I'm stuck on something and I can't find an answer anywhere, hope you guys can help me out!

I'm building a web app and designing it so the interface matches iOS7. http://danj.eu/webdesign/new

I've got an input form, and I need the button to submit the form to only turn blue and become selectable once the validation has completed. I've wrote some JS to validate the input but this only runs once! I need to run the function every time the user modifies the value of the input.

This is what I've got so far for the JS:

function validateInput(){        
if (document.getElementById('projectname').value.length < 2)
    document.getElementById('forwardbutton').style.color = "#c4c4c5";
else
    document.getElementById('forwardbutton').style.color = "#0e81ff";
}

Thanks guys!

Upvotes: 3

Views: 100

Answers (4)

lukaleli
lukaleli

Reputation: 3627

add to your input onchange listener:

var input = document.getElementById("myInput");
input.addEventListener('change', validateInput, false);

this will fire validateInput function every time the value changes. PS. you should cache your DOM elements that you get in your validation function, because it's searching through the DOM to find them always when function is fired- this can be heavy in a big DOM tree

Upvotes: 3

Travis J
Travis J

Reputation: 82277

jsFiddle Demo

You can bind to the input event using jquery which handles virtually all input events simultaneously

<input id="myInput" type="text" />
<div id="output"></div>

js

$('#myInput').bind('input',function(){
 if( this.value.length < 2 ){
  document.getElementById('output').style.color = "#c4c4c5";   
 }else{
  document.getElementById('output').style.color = "#0e81ff";
 }
 $('#output').html(this.value);
});

Upvotes: 1

Ryan
Ryan

Reputation: 7959

I do not know if you are opposed to jQuery, but I'll provide the jQuery way of doing this. It's very simple with jQuery. You'd use a keyboard event handler, specifically the Key Up event handler.

In your event handler, you'd then check the length of the field and based on the length you would set the enabled or disabled state of the button.

$('#input-element').keyup(function () {

    if (document.getElementById('projectname').value.length < 2)
        document.getElementById('forwardbutton').style.color = "#c4c4c5";
    else
        document.getElementById('forwardbutton').style.color = "#0e81ff";
    }

});

You can also use jQuery to set the color or enabled state as well, instead of your previous code. Up to you.

Upvotes: 1

Flight Odyssey
Flight Odyssey

Reputation: 2287

Do you mean

function validateInput(){        
if (document.getElementById('projectname').value.length < 2)
    document.getElementById('forwardbutton').style.color = "#c4c4c5";
else
    document.getElementById('forwardbutton').style.color = "#0e81ff";
}

and then perhaps this?

document.getElementById('projectname').onchange=validateInput;

More information would be helpful.

Upvotes: 0

Related Questions