By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,738 Members | 1,493 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,738 IT Pros & Developers. It's quick & easy.

OnClick event of a button not called ....

P: n/a
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

Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a

Vinita Sharma <sh******@mail.armstrong.edu> wrote in message
news:cq**********@news.armstrong.edu...
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);
}

Jul 23 '05 #2

P: n/a
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
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.