Onclick function of button can not work in form.javascript jquery

Question

In my code, onclick function of addDvcPeople() works fine without form. But once form added, the onclick function of addDvcPeople() works fail. Here is the code without form which works fine:

<div class="dvcOnShlv" id="dvcOnShlv">
<!--<form action="modify_idc_addDVC.php?act=add&table=IDC" method="POST">-->
  <table border="1px" cellspacing="0"  id="staTable">
  <tr>
    <h2 align="center">IDCtable</h2>
  </tr>
  <tr>
  <td style="width:15%" id="addDvcWorker">engineer<br /><input type="button" id="addDvcPeople" onclick="addDvcPeople()" value="addpeople"></td>
  </tr>
 </table>
<!--</form>-->
</div>

My addDvcPeople() code is:

<script>
 function addDvcPeople()
{
    alert("test");
}
</script>

Once "form" sentence is added, function addDvcPeople() did nothing. I don't know why.Who can help me ?

@guradio, without form , test dialog will appear, But in form, there is nothing. — stack
– stack, Commented Aug 8, 2017 at 2:05

Obsidian Age · Accepted Answer · 2017-08-08 02:23:08Z

2

The main problem that you have is that you have given your button the same ID as your function name. You need to ensure that these are different, or your function will always come through as undefined:

function addDvcPeople() {
  alert("test");
}

<form>
  <input type="button" id="addDvcPeople" onclick="addDvcPeople()" value="Button">
</form>

Here this is shown working with a different ID:

function addDvcPeople() {
  alert("test");
}

<form>
  <input type="button" id="addDvcPeopleID" onclick="addDvcPeople()" value="Button">
</form>

A secondary problem you'll encounter is that form submission has a default behaviour of actually submitting a form, even without a submit input, meaning that your form will disappear after the button is clicked:

function addDvcPeople() {
  alert("test");
}

<form>
  <button onclick="addDvcPeople()">Button</button>
</form>

To resolve this, you need to override the default form submission by passing through the event:

function addDvcPeople(event) {
  event.preventDefault();
  alert("test");
}

<form>
  <button onclick="addDvcPeople(event)">Button</button>
</form>

Note that in the above example, the page does not refresh, and the alert appears.

Hope this helps! :)

edited Aug 8, 2017 at 2:23

answered Aug 8, 2017 at 2:17

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stack Over a year ago

Wow , you are expert. Thank you very much!!

Tran Audi · Accepted Answer · 2017-08-08 02:10:12Z

1

You just do not set the duplicate id and function name

answered Aug 8, 2017 at 2:10

Tran Audi

6071 gold badge8 silver badges24 bronze badges

1 Comment

stack Over a year ago

@Tran Audi,addDvcWorker and addDvcPeople are different.Duplicate function name is the key. i change id="addDvcPeople" onclick="addDvcPeoplef()", then it works fine. Thankyou ！！

Collectives™ on Stack Overflow

Onclick function of button can not work in form.javascript jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related