2
votes

Comment effacer les champs de saisie et sélectionner des champs après le clonage d'éléments html via JavaScript?

J'ai un formulaire avec plusieurs champs de saisie et des options de sélection et j'utilise cloneNode pour cloner le div entier.

Ce qui se passe, c'est lorsque les champs de saisie sont définis avec des valeurs et que l'élément de sélection est sélectionné, le clone a également les mêmes valeurs.

maintenant ce que je dois faire est d'effacer les champs de saisie et de réinitialiser l'élément de sélection après le clonage.

<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/>


<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
   
    <form method="post">
    <div class="dynamicContainer">
            <div id="duplicater0">
     <div class="form-group ">
      <label class="control-label " for="name">
       Name
      </label>
      <input class="form-control" id="name" name="name" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label " for="message">
       Message
      </label>
      <textarea class="form-control" cols="10" id="message" name="message" rows="2"></textarea>
     </div>
     <div class="form-group ">
      <label class="control-label " for="select">
       Select a Choice
      </label>
      <select class="select form-control" id="select" name="select">
       <option value="First Choice">
        First Choice
       </option>
       <option value="Second Choice">
        Second Choice
       </option>
       <option value="Third Choice">
        Third Choice
       </option>
      </select>
     </div>
     
     </div>
</div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
       <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

var i = 0;
function duplicate() {
  var original = document.getElementById('duplicater' + i);
  // console.log(original);
  var clone = original.cloneNode(true); // "deep" clone

  clone.id = "duplicater" + ++i; 
  original.parentNode.appendChild(clone);
}

javascript jquery html

3 commentaires

Possibilité de duplication: stackoverflow.com/ questions / 6845058 /…

J'ai déjà essayé cette solution, je n'ai pas fonctionné

@Regolith Que clonez-vous exactement? duplicater0?

3 Réponses :

3
votes

Vous pouvez cloner l'élément au chargement de la page (en dehors de la fonction). Cela garantira que l'élément cloné sortira de ses états d'origine.

Remarque: l'attribut id doit être unique dans un document. Si vous allez faire référence à l'élément cloné avec ce id alors vous n'obtiendrez que le premier élément correspondant. Vous pouvez utiliser class à la place.

<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/>


<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
   
    <form method="post">
    <div class="dynamicContainer">
            <div id="duplicater0">
     <div class="form-group ">
      <label class="control-label " for="name">
       Name
      </label>
      <input class="form-control name" id="name" name="name" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label " for="message">
       Message
      </label>
      <textarea class="form-control message" cols="10" id="message" name="message" rows="2"></textarea>
     </div>
     <div class="form-group ">
      <label class="control-label " for="select">
       Select a Choice
      </label>
      <select class="select form-control" id="select" name="select">
       <option value="First Choice">
        First Choice
       </option>
       <option value="Second Choice">
        Second Choice
       </option>
       <option value="Third Choice">
        Third Choice
       </option>
      </select>
     </div>
     
     </div>
</div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
       <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

var i = 0;
function duplicate() {
    var original = document.getElementById('duplicater' + i);
    var clone = original.cloneNode(true); // "deep" clone
    clone.querySelector('.name').value = '';
    clone.querySelector('.message').value = '';
    clone.querySelector('.select').value = 'First Choice';

    clone.id = "duplicater" + ++i; 
    original.parentNode.appendChild(clone);
}

OU: Vous pouvez effacer la valeur de tous les contrôles clonés:

<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/>


<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
   
    <form method="post">
    <div class="dynamicContainer">
            <div id="duplicater0">
     <div class="form-group ">
      <label class="control-label " for="name">
       Name
      </label>
      <input class="form-control name" id="name" name="name" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label " for="message">
       Message
      </label>
      <textarea class="form-control message" cols="10" id="message" name="message" rows="2"></textarea>
     </div>
     <div class="form-group ">
      <label class="control-label " for="select">
       Select a Choice
      </label>
      <select class="select form-control" id="select" name="select">
       <option value="First Choice">
        First Choice
       </option>
       <option value="Second Choice">
        Second Choice
       </option>
       <option value="Third Choice">
        Third Choice
       </option>
      </select>
     </div>
     
     </div>
</div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
       <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

var i = 0;
var original = document.getElementById('duplicater' + i);
var clone = original.cloneNode(true); // "deep" clone
function duplicate() {
    clone.id = "duplicater" + ++i; 
    original.parentNode.appendChild(clone);
}

0 commentaires

0
votes

En utilisant Jquery, vous pouvez faire quelque chose comme ceci.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/>


<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
   
    <form method="post">
    <div class="dynamicContainer">
            <div id="duplicater0">
     <div class="form-group ">
      <label class="control-label " for="name">
       Name
      </label>
      <input class="form-control" id="name" name="name" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label " for="message">
       Message
      </label>
      <textarea class="form-control" cols="10" id="message" name="message" rows="2"></textarea>
     </div>
     <div class="form-group ">
      <label class="control-label " for="select">
       Select a Choice
      </label>
      <select class="select form-control" id="select" name="select">
       <option value="First Choice">
        First Choice
       </option>
       <option value="Second Choice">
        Second Choice
       </option>
       <option value="Third Choice">
        Third Choice
       </option>
      </select>
     </div>
     
     </div>
</div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
       <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

var i = 0;
function duplicate() {
        var original = document.getElementById('duplicater' + i);
        // console.log(original);
        var clone = original.cloneNode(true); // "deep" clone

        clone.id = "duplicater" + ++i; 
        original.parentNode.appendChild(clone);
          $("#duplicater"+i).find('input,textarea,select').val('');
    }

0 commentaires

0
votes

J'utiliserais jQuery .clone () pour cela, il a également une option pour le clonage profond (qui peut ne pas être nécessaire ici).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet" />


<div class="bootstrap-iso">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <form method="post">
          <div class="dynamicContainer">
            <div id="duplicater0">
              <div class="form-group ">
                <label class="control-label " for="name">Name</label>
                <input class="form-control" id="name" name="name" type="text" />
              </div>
              <div class="form-group ">
                <label class="control-label " for="message">Message</label>
                <textarea class="form-control" cols="10" id="message" name="message" rows="2"></textarea>
              </div>
              <div class="form-group ">
                <label class="control-label " for="select">Select a Choice</label>
                <select class="select form-control" id="select" name="select">
                  <option value="First Choice">
                    First Choice
                  </option>
                  <option value="Second Choice">
                    Second Choice
                  </option>
                  <option value="Third Choice">
                    Third Choice
                  </option>
                </select>
              </div>

            </div>
          </div>
          <div class="form-group">
            <div>
              <button class="btn btn-primary " name="submit" type="submit">Submit</button>
              <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

function duplicate(index = 0) {
  var $orig = $('#duplicater' + index);

  $orig
    .clone()
    .attr('id', 'duplicater' + ++index)
    .find('[name]')
    .val('')
    .end()
    .appendTo($orig.parent().append('<hr/>'));
}

0 commentaires