web-dev-qa-db-fra.com

La fonction onClick d'un type d'entrée = "bouton" ne fonctionne pas

J'ai ce code qui en cliquant sur le bouton "Obtenir plus de champs" créera une copie de la div entière et créera des champs. Mais en cliquant sur le bouton, rien ne se passe. Tous les autres boutons fonctionnent bien. Je ne sais pas ce que je fais mal. Merci d'avance pour votre aide.

<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>
javascriptphpjqueryhtml
14
kirk

Vous devez changer l'ID du bouton pour qu'il soit différent du nom de la fonction 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>
18
MaveRick

Vous avez oublié de définir un attribut onclick pour faire quelque chose lorsque le bouton est cliqué, donc rien ne se passe est la bonne exécution, voir ci-dessous;

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

vous pouvez également essayer de créer un bouton, cela fonctionnera si vous le mettez en dehors du formulaire;

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

Quand j'essaye:

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

Cela a bien fonctionné. Je pense donc que le problème est la position de la fonction moreFields (). Assurez-vous que la fonction sera définie avant votre balise d'entrée.

Veuillez essayer:

<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!"  />

J'espère que cela a aidé.

0
NgaNguyenDuy