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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onclick not firing after onchange

    I have an input text with an onchange event that calls a function in which an alert box displays. I also have a button whose onclick calls a different function. If the user makes a change in the input text and immediately clicks the button, the onchange event fires, displaying the alert box, but the code in the function for the onclick of the button doesn't execute. I've read that this has something to do with event bubbling, but I haven't seen any solutions. Is there a solution? Is it even possible?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Is there a solution? Is it even possible?
    Posting your code may speak a lot more than what you've described.

    PS: Please use [CODE][/CODE] tags to wrap your code while posting here.
    Last edited by abduraooft; 01-22-2010 at 09:01 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by jmindrup View Post
    Is there a solution? Is it even possible?
    Well, I expect there is.

    You could disable the button while the onchange alert is being shown.

    Code:
    
    <input type = "text" onchange = "showAlert1()">
    <input type = "button" id = "al2" value = "Click Here" onclick = "showAlert2()">
    
    <script type = "text/javascript">
    
    function showAlert1() {
    document.getElementById("al2").value = "Disabled Right Now";
    document.getElementById("al2").disabled= true;
    alert ("ONE");
    document.getElementById("al2").value = "Click Here";
    document.getElementById("al2").disabled= false;
    }
    
    function showAlert2() {
    alert ("TWO");
    }
    </script>
    "Gordon Brown Pledges To Help Flood Devastated Cumbria" - Daily Telegraph
    Last edited by Philip M; 01-22-2010 at 03:58 PM.

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a textbox and a button on a web page. Im validating the value of text box on onchange event , and again when i click the button.The problem is that when i enter a value in the textbox and then directly click on submit button only the textbox's onchange event is occurring and the onclick event of the button is not getting fired.

    Code:
    <html>
    </head>
    <script language="javascript">
    function validateMyText(){
    alert("validating");
    }
    function buttonClicked(){
    alert("in buttonClicked");
    validateMyText();
    }
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="myText" id="myText" 
    onchange="validateMyText();"/> 
    <input type="button" name="myButton"
    id="myButton" onclick="buttonClicked();"/>
    </form>
    </body>
    </html>
    I understand that the alert box in the onchange handler prevents the onclick event from bubbling. Is there a workaround, or can this not be done?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Have you bothered to read Post #3?

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    The logical structure is ... illogical. Why do you need to validate an input twice, first onchange, next onclick something else?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Philip, thanks for taking the time to respond to my question. When I initially saw your suggestion, I got the idea that maybe you weren't sure what my issue was, especially since someone else responded and asked to see my code. After posting my code and seeing your last response, I figured I would give your solution a try. It does not work. The onclick event handler showAlert2() doesn't fire if a change is made to the input value and user immediately clicks the button. thanks.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Well, I do not understand what you are trying to do. However, I find that I did leave out part of the code in Post #3 - sorry, now corrected.

    When I enter a value in the box, as soon as the box loses focus alert ONE is triggered, and the button is disabled. Once the alert is dismissed the button is re-enabled, and if clicked alert TWO shows. Surely you do not want BOTH alerts to show? If you do, simply combine the two messages.

    As Kor says, "Why do you need to validate an input twice, first onchange, next onclick something else?"

    At its simplest, you may not have two modal dialog boxes active at the same time.
    Last edited by Philip M; 01-22-2010 at 04:12 PM.

  • #9
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Philip, I've basically cut and pasted your code into my page and the alert box from the onclick event handler doesn't display. Not sure if maybe it's a browser issue?

    I gave a simplified example of what I need to do. I'm not really doing validation in both event handlers. I don't actually need an alert box to display in both the onchange and onclick event handlers. The alert box might display in the onchange event, if the input fails validation. My real problem is that I have some code in the onclick event which needs to execute every time the button is clicked. The code in the onclick event doesn't involve displaying an alert box, but instead does some basic things like change values on other components. Again, the real issue here is that the onclick event handler code does not execute if the alert box is displayed when the onchange event handler fires first.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Well, it works for me as I have described in IE and in Firefox. In fact, I do not see how it can not work. In short, the idea is to disable the button while the onchange script is functioning. If that will not do, then I am afraid that I am right out of ideas. Abduraooft?

  • #11
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Phil, I literally cut and pasted your code into a one page .html file and when i perform the steps in this order, the onclick event doesn't fire. in other words the alert from the onclick event handler never displays. Here's the steps I'm performing:

    Enter a letter into the input. Without tabbing out, immediately click the button. I see the alert box from the onchange event handler, but the alert box in the onclick event handler never displays. I suppose I'll have to look at another way of doing what I'm trying to do. Thanks again for your help.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by jmindrup View Post
    Enter a letter into the input. Without tabbing out, immediately click the button. I see the alert box from the onchange event handler, but the alert box in the onclick event handler never displays.
    The button is (temporarily) disabled by the onchange event. So the alert "TWO" will only show when the button is re-enabled and clicked.

  • #13
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    gotcha. It does sound like maybe I didn't explain the scenario well enough. I need for both the onchange and onclick events to fire one right after the other with the steps I described, even if an alert box is displayed in the onchange event.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by jmindrup View Post
    gotcha. It does sound like maybe I didn't explain the scenario well enough. I need for both the onchange and onclick events to fire one right after the other with the steps I described, even if an alert box is displayed in the onchange event.
    Not possible. To recap, you may not have two modal dialog boxes active at the same time.

  • #15
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    not to mention if an alert box comes up it disrupts all scripts attempting to execute until the needed action is met in the case closing the alert box
    woot found the avatar options...i swear they didn't exist b4


  •  

    Posting Permissions

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