OnClick event of a button not called ....

Vinita Sharma · Dec 29, 2004

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

Stephen Chalmers · Dec 29, 2004

Vinita Sharma said:
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);
}

Fred Oz · Dec 30, 2004

Vinita said:
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!

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Why doesn't the function get called?	1	Nov 20, 2023
Problems with using event handlers for button and textarea input	1	Nov 29, 2021
Function call from button to automatic	7	Mar 17, 2023
Reversing output of user input by using while loop...	2	Sep 1, 2022
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
Backticks and class elemnt comby not working	1	Sep 2, 2024
Help me sort out this script	1	Oct 17, 2023

OnClick event of a button not called ....

Vinita Sharma

Stephen Chalmers

Fred Oz

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads