Compare if inputs equals variables

**andyfarang** · 08-30-2012 10:10 AM

Hello,
I can program only in PHP, so I would appreciate a little help with this simple script.

Imagine a page with twenty inputs.

All I need is check, if user type in input some of specified words - in array I would like to save five or six words (different for every input) and if user type some of specified words (for this exact input) something happen - like replacing input with confirming image (that he's right).

Can you help me?

Thank you

Andy

**dmikester1** · 08-30-2012 10:23 AM

Are you using jQuery? If not, it's worth it IMO.

HTML Code:

<input type='text' id='field1' />
<input type='text' id='field2' />

jQuery:

Code:

$('#field1').blur(function() {
  var fieldVal = $(this).val();
  if(fieldVal.indexOf("words") != -1) {
    $('#specialImage1').show();
  }
});

And repeat that last part for field2 etc. Alternatively, you could change 'blur' to 'keyup' if that is what you are looking for. Hopefully this helps you get started.
Mike

**andyfarang** · 08-30-2012 10:33 AM

Thank you for your reply.

I never worked with jQuery. So I downloaded that library or what is it, rename it to jquery.js and in the same folder put file with this content. But it's not working?

HTML Code:

 <html>                                                                  
 <head>                                                                  
 <script type="text/javascript" src="jquery.js"></script>          
 <script type="text/javascript">                                         
$('#field1').blur(function() {
  var fieldVal = $(this).val();
  if(fieldVal.indexOf("words") != -1) {
    $('#specialImage1').show();
  }
});                                     
 </script>                                                               
 </head>                                                                 
 <body>                                                                  

<input type='text' id='field1' />
<input type='text' id='field2' />

                                        
 </body>                                                                 
 </html>

Thank you

**dmikester1** · 08-30-2012 02:31 PM

Well, that was all just sample code that I gave you to get started. You'll have to change the variable names and fit it into your current code. Do you have the html with the 20 inputs already created?

**andyfarang** · 08-30-2012 03:16 PM

Originally Posted by dmikester1

Well, that was all just sample code that I gave you to get started. You'll have to change the variable names and fit it into your current code. Do you have the html with the 20 inputs already created?

No, I didn't create anything yet. At first I wanna have functional script. And after that build some application on it.

I really don't have a clue which variable to change, because names of inputs and everything looks ok for me.

Thank you dmikester1

**dmikester1** · 08-30-2012 04:14 PM

Well, it would really help if you built your HTML first. Because if your 20 input id's are input1, input2, input3, etc then you would need to change the variable in my code from 'field1' to 'input1'. The other field I made up that you would have to change to match your code is 'specialImage1'.
Does that make sense?

**dmikester1** · 08-30-2012 04:32 PM

I made a fiddle for you!

Just to show you a better idea of what I'm telling you.
http://jsfiddle.net/jdYKF/

**andyfarang** · 08-30-2012 05:39 PM

Awesome!

Hey dmikester1, thank you very much. Now I get it.

Thank you, you help me a lot.

thank you, Andy

**xelawho** · 08-30-2012 07:01 PM

Andy:

just a note before you get sidetracked into thinking that jQuery has some magical properties that plain js doesn't. Have a look at the same code in normal js:

Code:

 <html>
 <head>
 <style>
 input {
    margin: 10px;
}

img {
    display: none;
}
 </style>
 </head>
 <body>
    <input type='text' id='field1' /> <img id='happyImg' src='http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-32.png' /><br />
    type 'happy' in the above blank<br />
    <input type='text' id='field2' /> <img id='sadImg' src='http://icdn.pro/images/en/s/a/sad-face-icone-8749-32.png' /><br />
    type 'sad' in the above blank 
 </body>                    
 </html>
<script type="text/javascript">
   document.getElementById('field1').onkeyup=function() {
      if(this.value=="happy") {
   document.getElementById('happyImg').style.display="block"
      }
    }
document.getElementById('field2').onkeyup=function() {
      if(this.value=="sad") {
   document.getElementById('sadImg').style.display="block"
      }
    }   
</script>
</body>
</html>

simpler, huh? and it saves you from having to load the entire jQuery library just for this trivial task...

dmikester1: Depending on case use, indexOf may not be the best method here - try entering "chappy" or "Mossad" into your input boxes and you'll see what I mean.

**andyfarang** · 08-31-2012 03:16 PM

And would be possible to count number of correct inputs? Like at the beginning 0/20 and after user fill one input change it to 1/20.

I think it's pretty easy, cause after filling input (if you're correct) this input disappear. So i't only about attributing number one to some variable. Unfortunately I can't program in javascript... .

(I'm using script from dmikester1)

Thread: Compare if inputs equals variables

Thread Tools

Display

Compare if inputs equals variables

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions