Input text with javascript

Question

please help me. my problem is that when I click on option = "Prestataire" it shows me 2 input text with value "Prestataire" but if I change and I click on option = "Stagiare" he shows me the first 2 input with a new input text "Stagiare" value. my goal is to have 2 input text with value "Prestataire" when I click on "Prestataire" and after when I click on "Stagiare" it removes this 2 input and create a new input with value "Stagiare". thank you in advance.

document.getElementById('contrat').onchange = function() {
  if (this.value == 'Prestataire') {
    var new_input = document.createElement('input');
    var new_input1 = document.createElement('input');
    new_input.type = "text";
    new_input.id = 'id_input';
    new_input.value = this.value;
    new_input1.type = "text";
    new_input1.id = 'id_input1';
    new_input1.value = this.value;
    document.getElementById('champ2').appendChild(new_input);
    document.getElementById('champ3').appendChild(new_input1);
  } else if (this.value == 'Stagiaire') {
    var new_input3 = document.createElement('input');
    new_input3.type = "text";
    new_input3.id = 'id_input';
    new_input3.value = this.value;
    document.getElementById('champ2').appendChild(new_input3);;
  }
};

<div id="conteneur">
  <input type="text" />
  <div id="champ1">
    <label for="contrat">Contrat *:</label>
    <select id="contrat" name="contrat">
      <option value="CDI" selected="selected">CDI</option>
      <option value="CDD">CDD</option>
      <option value="Interimaire">Interimaire</option>
      <option value="Prestataire">Prestataire</option>
      <option value="Auxiliaire">Auxiliaire saisonnier</option>
      <option value="Stagiaire">Stagiaire</option>
      <option value="Alternant">Alternant</option>
    </select>
  </div>
  <div id="champ2"></div>
  <div id="champ3"></div>
</div>

Srishti Gupta · Accepted Answer · 2018-11-30 15:03:07Z

You need to empty the divs with IDs champ2 and champ3 before appending the child in the else part.

document.getElementById("contrat").onchange = function() {
  if (this.value == "Prestataire") {
    var new_input = document.createElement("input");
    var new_input1 = document.createElement("input");
    new_input.type = "text";
    new_input.id = "id_input";
    new_input.value = this.value;
    new_input1.type = "text";
    new_input1.id = "id_input1";
    new_input1.value = this.value;
    document.getElementById("champ2").appendChild(new_input);
    document.getElementById("champ3").appendChild(new_input1);
  } else if (this.value == "Stagiaire") {
    var new_input3 = document.createElement("input");
    new_input3.type = "text";
    new_input3.id = "id_input";
    new_input3.value = this.value;
    document.getElementById("champ2").innerHTML = "";
    document.getElementById("champ3").innerHTML = "";
    document.getElementById("champ2").appendChild(new_input3);
  }
};

<div id="conteneur">
  <input type="text" />
  <div id="champ1">
    <label for="contrat">Contrat *:</label>
    <select id="contrat" name="contrat">
      <option value="CDI" selected="selected">CDI</option>
      <option value="CDD">CDD</option>
      <option value="Interimaire">Interimaire</option>
      <option value="Prestataire">Prestataire</option>
      <option value="Auxiliaire">Auxiliaire saisonnier</option>
      <option value="Stagiaire">Stagiaire</option>
      <option value="Alternant">Alternant</option>
    </select>
  </div>
  <div id="champ2"></div>
  <div id="champ3"></div>
</div>

Collectives™ on Stack Overflow

Input text with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related