Run a javascript function as user is inputting

Question

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!

lukaleli · Accepted Answer · 2013-10-08 23:53:52Z

3

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

edited Oct 8, 2013 at 23:53

answered Oct 8, 2013 at 23:48

lukaleli

3,6653 gold badges25 silver badges32 bronze badges

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

1 Comment

Ibu Over a year ago

There is a typo in the getElementById parameter

Travis J · Accepted Answer · 2013-10-08 23:53:31Z

1

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);
});

answered Oct 8, 2013 at 23:53

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

1 Comment

Dan Johnson Over a year ago

This is great! I'll be using your answer as it's perfect for what I need. Thanks for taking the time to make a demo too!

Ryan · Accepted Answer · 2013-10-08 23:51:58Z

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.

Flight Odyssey · Accepted Answer · 2013-10-08 23:51:06Z

0

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.

answered Oct 8, 2013 at 23:51

Flight Odyssey

2,28620 silver badges26 bronze badges

Collectives™ on Stack Overflow

Run a javascript function as user is inputting

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related