Javascript code:
function doClick()
{
alert("clicked");
}
HTML code:
<div >
<table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;">
<tr>
<td width="100%">
<table border="0" style="font-family:Arial; font-size:10pt;" cellspacing="0" cellpadding="3">
<tr>
<td> Find:</td>
<td nowrap>
<input type="text" id="Find_Text" name="Find_Text" size="7" > <input type="checkbox" name="Find_ExactMatch" value="1" checked>
</td>
<td colspan="2" style="cursor:default" nowrap >Exact Match</td>
</tr>
<tr>
<td> In:</td>
<td>
<select name="Find_DataFile">
<option value="1">Stage 1</option>
<option value="2">Stage 2</option>
</select>
</td>
<td align="center" valign="top">
<input type="submit" value="Go" onclick="doClick();"/>
</td>
<td align="center"><font class="DataFG">F2<font></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Hi all,
Simple code like the above will not fire in Chrome (latest) but will under IE8 and IE10. Am I doing anything wrong ?.
Appreciate any help Thanks
After stepping thru each line in the code I supplied above (which also includes a server request to populate the dropdown named "Find_DataFile" whose code I was not able to supply) I have finally found the culprit that was causing an object not defined error (because it's id was not defined and I was calling getElementById to assign it to an temp object). All working now for IE8 IE10 Chrome and Safari. Thanks guys for all the time and effort to help me find a solution. It is much appreciated. I can breathe normally now lol !
Javascript code:
function doClick()
{
alert("clicked");
}
HTML code:
<div >
<table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;">
<tr>
<td width="100%">
<table border="0" style="font-family:Arial; font-size:10pt;" cellspacing="0" cellpadding="3">
<tr>
<td> Find:</td>
<td nowrap>
<input type="text" id="Find_Text" name="Find_Text" size="7" > <input type="checkbox" name="Find_ExactMatch" value="1" checked>
</td>
<td colspan="2" style="cursor:default" nowrap >Exact Match</td>
</tr>
<tr>
<td> In:</td>
<td>
<select name="Find_DataFile">
<option value="1">Stage 1</option>
<option value="2">Stage 2</option>
</select>
</td>
<td align="center" valign="top">
<input type="submit" value="Go" onclick="doClick();"/>
</td>
<td align="center"><font class="DataFG">F2<font></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Hi all,
Simple code like the above will not fire in Chrome (latest) but will under IE8 and IE10. Am I doing anything wrong ?.
Appreciate any help Thanks
After stepping thru each line in the code I supplied above (which also includes a server request to populate the dropdown named "Find_DataFile" whose code I was not able to supply) I have finally found the culprit that was causing an object not defined error (because it's id was not defined and I was calling getElementById to assign it to an temp object). All working now for IE8 IE10 Chrome and Safari. Thanks guys for all the time and effort to help me find a solution. It is much appreciated. I can breathe normally now lol !
Share Improve this question edited Oct 15, 2013 at 6:04 ctaylor asked Oct 15, 2013 at 2:43 ctaylorctaylor 811 gold badge2 silver badges9 bronze badges 19-
Is
doClick()the actual function name you're using, or did you change it for the question? – user2736012 Commented Oct 15, 2013 at 2:46 - It's the actual function name – ctaylor Commented Oct 15, 2013 at 2:47
- Works Here – Deepak Ingole Commented Oct 15, 2013 at 2:47
- 1 Have you tried onClick? stackoverflow./questions/4380719/onclick-or-onclick – Shylo Hana Commented Oct 15, 2013 at 3:33
- 1 @ctaylor When I said code, I meant the plete code. Not HTML and Javascript separately. Could you please post it as a single piece. – thefourtheye Commented Oct 15, 2013 at 3:36
3 Answers
Reset to default 1The submit button is a special type of button which is ONLY used inside the < form > tags. It runs whatever function you specify in the "onsubmit" attribute of the form it belongs to. Refer Here for an idea of how submit buttons interact with javascript and the form "onsubmit". You will be able to get the desired effect if you wire things up this way. so paying particular attention to the FORM markup the code would be...
<body>
<div>
<form name="myForm" action="http://www.google." onsubmit="return doClick();" method="post">
<table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;">
<tr>
<td width="100%">
<table border="0" style="font-family:Arial; font-size:10pt;" cellspacing="0" cellpadding="3">
<tr>
<td> Find:</td>
<td nowrap>
<input type="text" id="Find_Text" name="Find_Text" size="7" > <input type="checkbox" name="Find_ExactMatch" value="1" checked>
</td>
<td colspan="2" style="cursor:default" nowrap >Exact Match</td>
</tr>
<tr>
<td> In:</td>
<td>
<select name="Find_DataFile">
<option value="1">Stage 1</option>
<option value="2">Stage 2</option>
</select>
</td>
<td align="center" valign="top">
<input type="submit" value="Go" />
</td>
<td align="center"><font class="DataFG">F2<font></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
and then the javascript:
function doClick()
{
alert("I've been clicked");
}
And that works for me :)
the submit button already has a default functionality . it wont trigger the onclick function in many browsers. try changing the button type to 'button' and try to submit the form using javascript.
For your sample. It should work.
There are two things you should be sure:
- When you click the button, make sure that the Javascript code has been loaded.
- Your Javascript code must not have any syntax error.
- If the button is inside a form, after clicked, the form could be submitted.