javascript - onclick button input not working in Chrome - Stack Overflow

admin管理员组

文章数量:1025541

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>&nbsp;Find:</td>
      <td nowrap>
        <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
      </td>
      <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
    </tr>
    <tr>
      <td>&nbsp;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>&nbsp;Find:</td>
      <td nowrap>
        <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
      </td>
      <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
    </tr>
    <tr>
      <td>&nbsp;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
• html
• google-chrome

Share Improve this question Follow edited Oct 15, 2013 at 6:04 ctaylor asked Oct 15, 2013 at 2:43 ctaylorctaylor 8111 gold badge22 silver badges99 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

 |  Show 14 more ments

3 Answers 3

Sorted by: Reset to default 1

The 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>&nbsp;Find:</td>
                          <td nowrap>
                            <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
                          </td>
                          <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
                        </tr>
                        <tr>
                          <td>&nbsp;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:

1. When you click the button, make sure that the Javascript code has been loaded.
2. Your Javascript code must not have any syntax error.
3. If the button is inside a form, after clicked, the form could be submitted.

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>&nbsp;Find:</td>
      <td nowrap>
        <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
      </td>
      <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
    </tr>
    <tr>
      <td>&nbsp;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>&nbsp;Find:</td>
      <td nowrap>
        <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
      </td>
      <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
    </tr>
    <tr>
      <td>&nbsp;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
• html
• google-chrome

Share Improve this question Follow edited Oct 15, 2013 at 6:04 ctaylor asked Oct 15, 2013 at 2:43 ctaylorctaylor 8111 gold badge22 silver badges99 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

 |  Show 14 more ments

3 Answers 3

Sorted by: Reset to default 1

The 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>&nbsp;Find:</td>
                          <td nowrap>
                            <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
                          </td>
                          <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
                        </tr>
                        <tr>
                          <td>&nbsp;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:

1. When you click the button, make sure that the Javascript code has been loaded.
2. Your Javascript code must not have any syntax error.
3. If the button is inside a form, after clicked, the form could be submitted.

本文标签： javascriptonclick button input not working in ChromeStack Overflow