SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Check if first 2 Letters Equal Certain Characters in Input Field

    Hi

    I am having trouble with some javascript code that checks the first 2 letters of what the user inputs and whether it equals a certain set of characters.

    If the user for instance types in 'TT' in an input field, then i want the holding div to disappear, if anything else is typed in then this action wont happen. My code is below:

    Code:
    <script type="text/javascript">
    function checkCode() {
    	var x=document.forms["myform"]["code"].value.substring(0, 2);
    	if (x == 'TT')
    		document.getElementById('main').style.display = 'none';
    	}
    }
    </script>
    
    <div id="main">
    <form name="myform" action="check-form.php" method="post">
        <table id="table" cellpadding="0" cellspacing="0">
            <tr>
            <td>Input</td>
            <td><input id="code" type="text" name="code" onkeyup="checkCode()" onchange="checkCode()" /></td><td><input type="submit" value="SEND"/></td>
            </tr>
        </table>
    </form>
    </div>
    I believe the problem lies in the javascript line: "if (x == 'TT')", as the rest of the script responds but it just doesnt recognise whether 'x' starts with 'TT'

    Any help would be greatly appreciated

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    substring(0,2) gets the first 3 characters- you want substring (0,1), or iust see if x.indexOf('TT') ===0.

    But that doesn't explain why it doesn't work...

    maybe try getting the input with document.getElementById('code').value

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    There's a scripting error that's preventing the script from working.
    The error is that the if statement is missing an opening brace.

    Additionally, the current form name technique that you are using is similar to this:

    Code javascript:
    <a name="mylink" ...>

    and that is a technique from the past century. Only use names for elements within a form. Use unique identifiers instead to uniquely identify an element that you want to work with.

    Code html4strict:
    <form id="myform" ...>

    Then you can use this from the script:

    Code javascript:
    var form = document.getElementById('myform');
    var x = form.elements.code.value.substring(0, 2);
    ...

    Other problems are the inline event attributes that you're using. Get rid of them and use scripting to assign the event, and you won't even need to explicitly reference the form. You can get it implicitly from the this keyword that the scripting event runs under instead.

    That then leaves your HTML code much less cluttered.

    Code html4strict:
    <input name="code" />

    Put your script at the bottom, just before the </body> tag as you should do to help speed up your web page, which also allows you to directly work with page elements:

    Code javascript:
    var form = document.getElementById('myform');
    form.elements.code.onkeyup = checkCode;
    form.elements.code.onchange = checkCode;

    and then your checkCode function can get the element just with the this keyword. If you need the form, you can also use this.form

    Code javascript:
    var x = this.value.substring(0, 2);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Paul, the bracket was obvious once you mentioned it.

    Thanks also for the help in cleaning up the code, much appreciated!


Bookmarks

Posting Permissions

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