SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    0 Post(s)
    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...


  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Christchurch, New Zealand
    104 Post(s)
    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'); = '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) {
        // set article
        var term = 'a';
        if (this.value.match(/^[aeiou]/)) {
            term = 'an';
        // update article
    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


Posting Permissions

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