Question

91

onClick function of an input type=button not working

rated 0 times [ 98] [ 7] / answers: 1 / hits: 161589 / 10 Years ago, wed, february 26, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leslijessalyng

Add To Favorites

Follow

Total Points: 650

Total Questions: 85

Total Answers: 109

Location: Croatia

Member since Mon, Sep 6, 2021

3 Years ago

leslijessalyng questions

1 Vue dist path for CSS and JS not found

Fri, Feb 21, 20, 00:00, 4 Years ago

1 How do I loop through multiple pages in an API?

Tue, Jul 30, 19, 00:00, 5 Years ago

1 ReactJS and autofocus

Fri, Jul 5, 19, 00:00, 5 Years ago

1 How to fix The message port closed before a response was received. after window.location.reload() in javascript

Wed, Apr 3, 19, 00:00, 5 Years ago

1 TypeError: $ .find is not a function

Wed, Mar 13, 19, 00:00, 5 Years ago

View All

answered 10 Years ago maureen · Accepted Answer

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>