www.webdeveloper.com
Results 1 to 10 of 10

Thread: Compare if inputs equals variables

  1. #1
    Join Date
    Aug 2012
    Posts
    5

    Compare if inputs equals variables

    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

  2. #2
    Join Date
    May 2007
    Posts
    105
    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
    Last edited by dmikester1; 08-30-2012 at 10:26 AM.

  3. #3
    Join Date
    Aug 2012
    Posts
    5
    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

  4. #4
    Join Date
    May 2007
    Posts
    105
    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?

  5. #5
    Join Date
    Aug 2012
    Posts
    5
    Quote Originally Posted by dmikester1 View Post
    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

  6. #6
    Join Date
    May 2007
    Posts
    105
    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?

  7. #7
    Join Date
    May 2007
    Posts
    105
    I made a fiddle for you! Just to show you a better idea of what I'm telling you.
    http://jsfiddle.net/jdYKF/

  8. #8
    Join Date
    Aug 2012
    Posts
    5
    Awesome!

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

    Thank you, you help me a lot.

    thank you, Andy

  9. #9
    Join Date
    Nov 2010
    Posts
    1,085
    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.
    Last edited by xelawho; 08-30-2012 at 07:04 PM. Reason: clarification

  10. #10
    Join Date
    Aug 2012
    Posts
    5
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles