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.

<html>
<head>
</head>
<body>

<div id="readroot" style="display: none">

    <input type="button" value="Remove review"
        onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

    <input name="cd" value="title" />

    <select name="rankingsel">
        <option>Rating</option>
        <option value="excellent">Excellent</option>
        <option value="good">Good</option>
        <option value="ok">OK</option>
        <option value="poor">Poor</option>
        <option value="bad">Bad</option>
    </select><br /><br />

    <textarea rows="5" cols="20" name="review">Short review</textarea>
    <br />Radio buttons included to test them in Explorer:<br />
    <input type="radio" name="something" value="test1" />Test 1<br />
    <input type="radio" name="something" value="test2" />Test 2

</div>

<form method="post" action="index1.php">

    <span id="writeroot"></span>

    <input type="button" id="moreFields" value="Give me more fields!"  />
    <input type="submit" value="Send form" />

</form>
</body>
</html>

<script>

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<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;
</script>

open this in chrome, right click anywhere on the page -> inspect element and check the bottom right of the opened panel for a red x and click on it. are there any errors? if so, share those errors here — pythonian29033
– pythonian29033, Commented Feb 26, 2014 at 10:33
there's no onclick method defined in that button either like Sajith is saying in his answer — pythonian29033
– pythonian29033, Commented Feb 26, 2014 at 10:35
I tried the onclick() function earlier also but it still wasn't working. — kirk
– kirk, Commented Feb 26, 2014 at 10:42

MaveRick · Accepted Answer · 2015-10-18 05:51:32Z

21

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

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 < 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();

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

  <input type="button" onclick="moreFields();" id="moreFieldsButton" value="Give me more fields!" />
  <input type="submit" value="Send form" />
</form>

edited Oct 18, 2015 at 5:51

answered Feb 26, 2014 at 10:42

MaveRick

1,1896 silver badges20 bronze badges

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

4 Comments

kirk Over a year ago

MaveRick i removed the id=moreFields and it worked..Thanks alot

kirk Over a year ago

Can you tell me why it wasn't working earlier? Was something clashing?

MaveRick Over a year ago

because you where calling the object "moreFields" which is an HTML element, rather than calling the function "moreFields", each element in your document will be a JS object named as of it's ID, So you can't name a function just like an element ID

lolesque Over a year ago

Can also block on the name. I just got this bug in Chrome and Opera, but not in Firefox, maybe because the form was dynamically generated. The jsfiddle jsfiddle.net/44wuu776 has the same behavior with the 3 browsers.

pythonian29033 · Accepted Answer · 2014-02-26 10:37:13Z

2

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;

<input type="button" id="moreFields" onclick="moreFields()" value="Give me more fields!"  />
                                     ----------------------

edited Feb 26, 2014 at 10:37

pythonian29033

5,2175 gold badges34 silver badges57 bronze badges

answered Feb 26, 2014 at 10:33

SajithNair

3,8771 gold badge20 silver badges23 bronze badges

3 Comments

kirk Over a year ago

Tried the onclick() function also but still not working

pythonian29033 Over a year ago

did you put the script tag inside of the body tag?

kirk Over a year ago

Yes I put the script tag inside the body tag but it is still not working

pythonian29033 · Accepted Answer · 2014-02-26 10:46:05Z

1

you could also try creating a button, this will work if you put it outside of the form;

<button onClick="moreFields(); return false;">Give me more fields!</button>

answered Feb 26, 2014 at 10:46

pythonian29033

5,2175 gold badges34 silver badges57 bronze badges

Comments

Vini.g.fer · Accepted Answer · 2017-07-17 17:02:36Z

0

When I try:

<input type="button" id="moreFields" onclick="alert('The text will be show!!'); return false;" value="Give me more fields!"  />

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:

<script type="text/javascript">
    function moreFields() {
        alert("The text will be show");
    }
</script>

<input type="button" id="moreFields" onclick="moreFields()" value="Give me more fields!"  />

Hope it helped.

edited Jul 17, 2017 at 17:02

Vini.g.fer

12k19 gold badges66 silver badges100 bronze badges

answered Sep 2, 2015 at 1:25

ngnguyen

1,37618 silver badges14 bronze badges

Collectives™ on Stack Overflow

onClick function of an input type="button" not working

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related