OnClick event of a button not called ....

Discussion in 'Javascript' started by Vinita Sharma, Dec 29, 2004.

  1. Hi All,

    I have a strange problem. I have 2 text boxes and a button in my form. There
    is a function called on onchange event of the first text box. There is
    another function called on onclick event of the button. Things work fine if
    you move from one field to another using tab keys. But if you change
    something in the first text box and move to button using mouse, the onchange
    event of the text box is called but the onclick event of the button is not
    called.

    Any help regarding this will be highly appreciated.

    Below is my code:

    <html>
    <head>

    <script type="text/javascript">

    function myfunction1()
    {
    alert("Text Box")
    }

    function myfunction()
    {
    alert("Button button")
    }

    </script>

    </head>
    <body>
    <form name = "myform" >
    Some text
    <input type = "text" name = "txtname" onchange = "myfunction1()">
    <P>
    Some text
    <input type = "text" name = "txtname2" >
    <P>
    <input type="button" name = "btnsubmit"
    onclick="myfunction()"
    value="Call function">

    </form>
    </body>
    </html>

    Thank you,

    Vinita
    Vinita Sharma, Dec 29, 2004
    #1
    1. Advertising

  2. Vinita Sharma <> wrote in message
    news:cqunle$rm9$...
    > Hi All,
    >
    > I have a strange problem. I have 2 text boxes and a button in my form.

    There
    > is a function called on onchange event of the first text box. There is
    > another function called on onclick event of the button. Things work fine

    if
    > you move from one field to another using tab keys. But if you change
    > something in the first text box and move to button using mouse, the

    onchange
    > event of the text box is called but the onclick event of the button is not
    > called.
    >
    > Any help regarding this will be highly appreciated.
    >

    I think the calls to alert() are perturbing things here.
    If you change your functions as shown, you can use the title bar and status
    line to display the result for each event simultaneously, without altering
    the html.
    You should see a response to both events.

    function myfunction1()
    {
    document.title="Text Box";
    setTimeout('document.title=""',1000);
    }

    function myfunction()
    {
    window.status="Button"
    setTimeout("window.status=''",1000);
    }
    Stephen Chalmers, Dec 29, 2004
    #2
    1. Advertising

  3. Vinita Sharma

    Fred Oz Guest

    Vinita Sharma wrote:
    > Hi All,
    >
    > I have a strange problem. I have 2 text boxes and a button in my form. There
    > is a function called on onchange event of the first text box. There is
    > another function called on onclick event of the button. Things work fine if
    > you move from one field to another using tab keys. But if you change
    > something in the first text box and move to button using mouse, the onchange
    > event of the text box is called but the onclick event of the button is not
    > called.
    >
    > Any help regarding this will be highly appreciated.
    >

    [...]

    All the following scenarios are on Mac:

    In Safari, exactly the opposite occurs. If you change the text box
    then click on the button, only the onclick runs because the text box
    never loses focus, so the onchange doesn't fire. However, if the
    input button is a submit, then the onchange will fire provided the
    button onclick returns true.

    IE fires them sequentially, first the button onclick blocks, then the
    text onchange when you click on OK. However, if the input button is
    changed to a submit, no blocking occurs and two alerts result.

    Firefox fires the text onchange first but without blocking, so you get
    two alert boxes, with the button alert on top. Same again if the
    button is a submit.

    So the result could be described as 'unreliable' due browser vagaries
    beyond your control.

    What do you *want* to happen? If you are trying to validate a field,
    make the button a submit button. Add an onclick to validate the form
    content and if it fails, return false so the submit is canceled,
    otherwise return true. And then validate again at the server 'cos the
    user may have JavaScript turned off or may have circumvented your
    validation some other way.

    Incidentally, I'd get rid of spaces in tag attributes and your form
    should have an action, even if it's "":

    > <form name = "myform" >


    should be:

    <form name="myform" action="" >


    Have a happy new year! :p

    --
    Fred
    Fred Oz, Dec 30, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    7
    Views:
    12,419
  2. S_K
    Replies:
    6
    Views:
    1,177
    Robert Dunlop
    Nov 8, 2007
  3. BonBon
    Replies:
    0
    Views:
    516
    BonBon
    Feb 24, 2009
  4. Dipin
    Replies:
    4
    Views:
    128
  5. Replies:
    2
    Views:
    253
Loading...

Share This Page