SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alert on field change

    I have a text field with an integer as the value. If the user enters an integer lower than that value I would like to trigger an alert.

    So if the current value is 5, and the user enters 4, I need an alert. This alert MUST trigger BEFORE the submit button is pressed! It would be ideal if it could trigger as the value is entered.

    Possible?

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, just add a onsubmit event handler to the form and check if that fields value is less than the entered one. You can do this by comparing defaultValue (asuming the page loaded with a value) with the inputs value property. Don't forget to use parseInt to compare the values.

    Have fun.

  3. #3
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay. So I've been fartin' around with this for over an hour and have thrown my hands up. I'm not a javascript coder (just php) and can't seem to put together what you suggested.
    Code:
    <script type="text/javascript">
    function ck_bounce_max() {
    	var defaultValue = <?php echo $row_prefs['bounce_max']; ?>;
    	var newValue = parseInt(document.getElementById("bounce_max"));
    	
    	if(defaultValue < newValue) {
    		alert('warning message here');
    	}
    }
    </script>
    EDIT: Come to think of it, I'm not sure this will work anyway. The submit button has already been pressed so passing an alert won't do any good - it's too late by then.

    A returnConfirm would be better so the user can cancel the form post if they don't like the alert message. However, it would still be ideal if an alert would trigger if the user enters a smaller int BEFORE the submit button is pressed.

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to use the onSubmit handler. Something like this
    Code:
    <script>
    function validateForm(oForm) {
        var iDefaultNumber = parseInt(oForm.magicNumber.defaultValue, 10);
        var bFormOk;
    
        if(parseInt(oForm.magicNumber.value, 10) < iDefaultNumber) {
    	alert("Number entered cannot be lower than " + iDefaultNumber);     
    	bFormOk = false;
        } else {
    	bFormOk = true;
        }
    
        return bFormOk;
    }
    </script>
    
    <form onsubmit="return validateForm(this);">
    	<input type="text" name="magicNumber" value="5">
    	<input type="submit" value="Go!">
    </form>

  5. #5
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really appreciate the help.

    That won't work for me though. In your (excellent!) script, if the user wants to enter a lower number and go ahead after the alert, they can't.

    The alert is there just to let them know that an action will be performed IF they decide to use a lower number. They still need to be able to continue and submit the form if they want to.

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So they will basically need some sort of confirmation? Try this
    Code:
    <script>
    function validateForm(oForm) {
        var iDefaultNumber = parseInt(oForm.magicNumber.defaultValue, 10);
        var bFormOk;
    
        if(parseInt(oForm.magicNumber.value, 10) < iDefaultNumber) {
    	bFormOk = window.confirm("The number you entered is too high, you really really really sure u wanna continue?");
        }
    
        return bFormOk;
    }
    </script>
    
    <form onsubmit="return validateForm(this);">
    	<input type="text" name="magicNumber" value="5">
    	<input type="submit" value="Go!">
    </form>

  7. #7
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You, sir, have saved my a$$.

    Thank you very much! That's perfect!

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really hope that a$$ stays for "day"



    Cheers


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
  •