Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    430
    Thanks
    6
    Thanked 3 Times in 3 Posts

    onchange does not seem to run javascript

    My form has error checking features that check if various fields have the correct content.

    i.e. the Full Name field needs to names and my checkValidFormInput() routine check this and should change the red X to a green tick image. But this only happens when the user comes out of the field. Either by using the tab key or clicking out of the field or in another field.

    What method should I be using to have this work so it changes the images as the user types in the field.

    my form field is like so...
    Code:
    <input type="text" name="customerName" id="customerName" value="<?=$fullname;?>" style="width: 200px; float: left;" onchange="checkValidFormInput();">
    This is the line from checkValidFormInput() that checks the field.
    Code:
    redX = '<img alt="Invalid" src="images/redX.png" style="width: 18px; float: left;">';
    greenTick = '<img alt="Valid" src="images/icongreentick.png">';
    
    		var fID = document.getElementById('customerName'); fID.value = fID.value.trim();
    		if (fID.value.trim().split(' ').length < 2) {
    		document.getElementById('customerNameImg').innerHTML = redX;//
    		} else {
    		document.getElementById('customerNameImg').innerHTML = greenTick;//
    		}

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    What browser are you checking it with? Google Chrome seems to limit it's use. You may have to install a 'Preview' button to overcome this.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    430
    Thanks
    6
    Thanked 3 Times in 3 Posts
    yes the page does have a preview page, but before they get there the booking page checks everything first, but if they do not enter all the info correctly on the first run of the page it reloads it and enters all the info back in the form and highlights all the fields that need checking. When the field is corrected and valid the tick show as they should do, but only if the user goes to another field or clicks out of the field. I am looking to have the tick show as I would have thought it would do as I am using onchange in the field.

    This does the same for both Firefox and Internet Explorer, latest versions.

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    430
    Thanks
    6
    Thanked 3 Times in 3 Posts
    basically what I am after is a javascript that does a check when the field changes or while the field is being typed in.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Try using onblur instead of onchange - then it will do the check each time the field loses the focus.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    430
    Thanks
    6
    Thanked 3 Times in 3 Posts
    after looking at the other methods I could have used it turns out i should have been using onkeyup, seems to be working now.

    Thank you anyway.


  •  

    Posting Permissions

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