CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
ctaylor
ctaylor

Reputation: 81

onclick button input not working in Chrome

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 !

Upvotes: 0

Views: 12947

Answers (3)

user1567453
user1567453

Reputation: 2095

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.com" 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 :)

Upvotes: 1

Han
Han

Reputation: 3334

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.

Upvotes: 0

Joe
Joe

Reputation: 618

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.

Upvotes: 0

Related Questions