onClick function of an input type button not working

Question

I have this code which on clicking the button  Get more fields  will create a copy of the entire div and create fields  But on clicking the button nothing is happening  All the other buttons are working fine  Don t know what I m doing wrong  Thanks for your help in advance    lt html gt   lt head gt   lt  head gt   lt body gt    lt div id  readroot  style  display  none  gt        lt input type  button  value  Remove review          onclick  this parentNode parentNode removeChild this parentNode      gt  lt br   gt  lt br   gt        lt input name  cd  value  title    gt        lt select name  rankingsel  gt           lt option gt Rating lt  option gt           lt option value  excellent  gt Excellent lt  option gt           lt option value  good  gt Good lt  option gt           lt option value  ok  gt OK lt  option gt           lt option value  poor  gt Poor lt  option gt           lt option value  bad  gt Bad lt  option gt       lt  select gt  lt br   gt  lt br   gt        lt textarea rows  5  cols  20  name  review  gt Short review lt  textarea gt       lt br   gt Radio buttons included to test them in Explorer  lt br   gt       lt input type  radio  name  something  value  test1    gt Test 1 lt br   gt       lt input type  radio  name  something  value  test2    gt Test 2   lt  div gt    lt form method  post  action  index1 php  gt        lt span id  writeroot  gt  lt  span gt        lt input type  button  id  moreFields  value  Give me more fields      gt       lt input type  submit  value  Send form    gt    lt  form gt   lt  body gt   lt  html gt    lt script gt   var counter   0    function moreFields         counter        var newFields   document getElementById  readroot   cloneNode true       newFields id           newFields style display    block       var newField   newFields childNodes      for  var i 0 i lt newField length i              var theName   newField i  name         if  theName              newField i  name   theName   counter            var insertHere   document getElementById  writeroot        insertHere parentNode insertBefore newFields insertHere      window onload   moreFields   lt  script gt

User · Accepted Answer

You have to change the ID of the button to be different from the function name JSFiddle

_x000D_

var counter = 0;_x000D_
_x000D_
_x000D_
function moreFields() {_x000D_
  counter++;_x000D_
  var newFields = document.getElementById('readroot').cloneNode(true);_x000D_
  newFields.id = '';_x000D_
  newFields.style.display = 'block';_x000D_
  var newField = newFields.childNodes;_x000D_
  for (var i = 0; i < newField.length; i++) {_x000D_
    var theName = newField[i].name_x000D_
    if (theName) newField[i].name = theName + counter;_x000D_
  }_x000D_
  var insertHere = document.getElementById('writeroot');_x000D_
  insertHere.parentNode.insertBefore(newFields, insertHere);_x000D_
}_x000D_
_x000D_
window.onload = moreFields();

_x000D_

<div id="readroot" style="display: none">_x000D_
  <input type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />_x000D_
  <br />_x000D_
  <br />_x000D_
  <input name="cd" value="title" />_x000D_
  <select name="rankingsel">_x000D_
    <option>Rating</option>_x000D_
    <option value="excellent">Excellent</option>_x000D_
    <option value="good">Good</option>_x000D_
    <option value="ok">OK</option>_x000D_
    <option value="poor">Poor</option>_x000D_
    <option value="bad">Bad</option>_x000D_
  </select>_x000D_
  <br />_x000D_
  <br />_x000D_
  <textarea rows="5" cols="20" name="review">Short review</textarea>_x000D_
  <br />Radio buttons included to test them in Explorer:_x000D_
  <br />_x000D_
  <input type="radio" name="something" value="test1" />Test 1_x000D_
  <br />_x000D_
  <input type="radio" name="something" value="test2" />Test 2</div>_x000D_
<form method="post" action="index1.php"> <span id="writeroot"></span>_x000D_
_x000D_
  <input type="button" onclick="moreFields();" id="moreFieldsButton" value="Give me more fields!" />_x000D_
  <input type="submit" value="Send form" />_x000D_
</form>

_x000D_

User · Answer

When I try    lt input type  button  id  moreFields  onclick  alert  The text will be show      return false   value  Give me more fields      gt    It s worked well  So I think the problem is position of moreFields   function  Ensure that function will be define before your input tag   Pls try    lt script type  text javascript  gt      function moreFields             alert  The text will be show           lt  script gt    lt input type  button  id  moreFields  onclick  moreFields    value  Give me more fields      gt    Hope it helped

User · Answer

You ve forgot to define an onclick attribute to do something when the button is clicked  so nothing happening is the correct execution  see below    lt input type  button  id  moreFields  onclick  moreFields    value  Give me more fields      gt                                       ----------------------

User · Answer

you could also try creating a button  this will work if you put it outside of the form    lt button onClick  moreFields    return false   gt Give me more fields  lt  button gt

[javascript] onClick function of an input type="button" not working

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to html