SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question onchange input form help

    I am looking to toggle onchange a div to display: visible to show the article 'a' if the first entered letter of the input field is aeiou or 'an' for any other letter. Keep in mind I want it in a separate div - not tacked onto the front on the input value.

    And, once the input field has a value, toggle the submit button to display: visible.


    Unfortunately, I have no clue on the vowel toggle.

    Any direction would be very helpful...

    thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    You have the input element on which you're going to place the article "a" or "an" in a div just before it.

    Code javascript:
    <input type="text" name="myObject">

    Then we
    • attach an event to the input
    • create the div if it doesn't already exist


    Code javascript:
    var input = document.getElementById('myObject');
    input.onchange = updateArticle;
     
    // create article
    if (!document.getElementById('myArticle')) {
    	var div = document.createElement('div');
    	div.id = 'myArticle';
    	input.parentNode.insertBefore(div, input);
    }

    Now that things are ready, we can put together the updateArticle() function which will
    • clear the div
    • work out if "a" or "an" is to be used
    • update the div


    Code javascript:
    function updateArticle() {
        var myArticle = document.getElementById('myArticle');
        // clear article
        while (myArticle.firstChild) {
            myArticle.removeChild(myArticle.firstChild);
        }
        // set article
        var term = 'a';
        if (this.value.match(/^[aeiou]/)) {
            term = 'an';
        }
        // update article
        myArticle.appendChild(document.createTextNode(term));
    }
    Last edited by paul_wilkins; Feb 16, 2008 at 18:46.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •