onclick not working with input type=button

Question

I am trying to submit my from using js but onclick is not working when used with input type button, even alert in the function is not working....

<input type="button"  value="Register" id="org_reg_submit" class="reg_input" maxlength="100" onclick="org_reg_submit()">

function org_reg_submit(){
        alert("hi");
        document.getElementById("org_reg").submit();
}

score 0 · Accepted Answer · edited Jan 23 '17 at 15:28

0

Change the id of the button or the name of the function and the code works since you cannot have the same name of the button and a function

<script>
  function org_reg_submit(){
        alert("hi");
        document.getElementById("org_reg").submit();
}
</script>
<form id="org_reg" onsubmit="alert('form submitted')">
  <input type="button"  value="Register" id="org_reg_submit_button" class="reg_input" maxlength="100" onclick="org_reg_submit()">
  
</form>

edited Jan 23 '17 at 15:28

mplungjan

169,008
28
173
236

answered Jan 23 '17 at 14:50

coding-dude.com

758
1
8
27

2

Um the button is org_reg_submit unless someone changed the code... and that would not cause the alert to not show up... – epascarello Jan 23 '17 at 14:51
org_reg is the id of form tag like
– siva sandeep garapati Jan 23 '17 at 14:52
no it refers to form zakaria – siva sandeep garapati Jan 23 '17 at 14:55
change the ID of the button to something else than the name of the onclick function – coding-dude.com Jan 23 '17 at 14:57
it works thanks coding-dude ,can u explain why it worked when id of button is changed?? – siva sandeep garapati Jan 23 '17 at 15:01
It's because of the way DOM works in the background. The form object will get a member for each inner member (the button) and it will treat the onclick function as a member too, there's a conflict if they have the same name – coding-dude.com Jan 23 '17 at 15:04
@sivasandeepgarapati Check the link in the "This question already has an answer here" box at the top for the correct explanation – Andreas Jan 23 '17 at 15:06

b1919676 · Answer 2 · 2017-01-23T15:22:01.033

-2

For anyone who find this in the future:

ID not matching in your js function and in your HTML input code. Just match them
Ensure the js code is loaded before the HTML one

;)

edited Jan 23 '17 at 15:22

answered Jan 23 '17 at 14:50

b1919676

92
2
8

This doesn't explain the second part: "_even alert in the function is not working_" – Andreas Jan 23 '17 at 14:51
Just ensure the js code is loaded before the HTML and it will work. – b1919676 Jan 23 '17 at 15:04
1

No, it won't... – Andreas Jan 23 '17 at 15:06
Sure it does https://jsfiddle.net/6uz9zn7m/ – b1919676 Jan 23 '17 at 15:08
Your fiddle is invalid and also the HTML. If fixed, the order doesn't matter -> https://jsfiddle.net/6uz9zn7m/1/ – Andreas Jan 23 '17 at 15:13
Your code simply doesn't work, the alert isn't showing. My jsfiddle is just an example to show that js code must be loaded before the html one, althoug I know the jsfiddle structure is not being 'well used'. – b1919676 Jan 23 '17 at 15:20
Exactly. It doesn't work. But that's your code not mine. I've only moved the parts of your "solution" in the correct places... – Andreas Jan 23 '17 at 15:37
The problem is not my code (which works) but the structure: js code must be loaded before the HTML one. If the OP just keep this in mind in his own code, it will work, regardless the jsfiddle, which is what I pretended to show – b1919676 Jan 23 '17 at 15:41

onclick not working with input type=button

2 Answers2