如何根据php中的选择添加和删除多个表单字段

Question

I create the form with multiple form field.I have the Form Fields are Name,Mobile,Email and No Of Referrer. Based on selection option(No Of Referrer)....

Here i create the form for Refer and earn for student admission process.... when the user select no of referrer as 2 i need to show reference details fields 2 times if change again 1 means show the field one time.... After select the No of Referrer field i show the following field Name,Email,Mobile,City,Course...

$(document).ready(function() {
  toggleFields();
  $("#select_btn").change(function() {
    toggleFields();
  });

});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleFields() {
  if ($("#select_btn").val() <= 5 && $("#select_btn").val() != 0)
    $("#parentPermission").show();
  else
    $("#parentPermission").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
  <p>Name:
    <input type="text" name="player_name" />
  </p>
  <p>Mobile:
    <input type="text" name="mobile" />
  </p>
  <p>Email:
    <input type="text" name="player_email" />
  </p>
  <p>No of Referrer:
    <select id="select_btn" name="age">
      <option value="0">--Select--</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
    </select>

    <div id="parentPermission">
      <p>Name:
        <input type="text" name="reference_name" />
      </p>
      <p>Mobile:
        <input type="text" name="reference_mobile" />
      </p>
      <p>Email:
        <input type="text" name="reference_email" />
      </p>
      <p>City:
        <select id="city" name="City">
          <option value="0">--Select City--</option>
          <option value="Mumbai">Mumbai</option>
          <option value="Chennai">Chennai</option>
          <option value="Delhi">Delhi</option>
          <option value="Jammu">Jammu</option>
          <option value="Ooty">Ooty</option>
        </select>
      </p>
      <p>Course:
        <select id="course" name="Course">
          <option value="B.com">B.com</option>
          <option value="B.A">B.A</option>
          <option value="MBA">MBA</option>
          <option value="B.Sc">B.Sc</option>
          <option value="BCA">BCA</option>
        </select>
      </p>
      <p>You must have parental permission before you can play.</p>
    </div>
    <p align="center">
      <input type="submit" value="Join!" />
    </p>
</form>

Now it is the form field....But does not dynamically shows the form field based on selection... For example if i select No of Referrer option is 2 then need to show the form field 2 times... change it 3 means show 3 times,change to 1 means show only one times... How to do show and hide the form field based on the selection???

</div>

Answer 1

You need to use $('div').clone().html(). See the below working solution and it has some changes in html.

$(document).ready(function() {
  $('#hidden-div').hide();
  $("#select_btn").change(function() {
    toggleFields();
  });

});

function toggleFields() {
  var selectVal = $("#select_btn").val();
  if (selectVal <= 5) {
    $hiddenHtml = $('#hidden-div').clone().html();
    $("#parentPermission").html('');
    for (var i = 0; i < selectVal; i++) {
      $("#parentPermission").append($hiddenHtml);
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
  <p>Name:
    <input type="text" name="player_name" />
  </p>
  <p>Mobile:
    <input type="text" name="mobile" />
  </p>
  <p>Email:
    <input type="text" name="player_email" />
  </p>
  <p>No of Referrer:
    <select id="select_btn" name="age">
      <option value="0">--Select--</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
    </select>
    <div id="hidden-div">
      <p>Name:
        <input type="text" name="reference_name" />
      </p>
      <p>Mobile:
        <input type="text" name="reference_mobile" />
      </p>
      <p>Email:
        <input type="text" name="reference_email" />
      </p>
      <p>City:
        <select id="city" name="City">
          <option value="0">--Select City--</option>
          <option value="Mumbai">Mumbai</option>
          <option value="Chennai">Chennai</option>
          <option value="Delhi">Delhi</option>
          <option value="Jammu">Jammu</option>
          <option value="Ooty">Ooty</option>
        </select>
      </p>
      <p>Course:
        <select id="course" name="Course">
          <option value="B.com">B.com</option>
          <option value="B.A">B.A</option>
          <option value="MBA">MBA</option>
          <option value="B.Sc">B.Sc</option>
          <option value="BCA">BCA</option>
        </select>
      </p>
      <p>You must have parental permission before you can play.</p>
    </div>
    <div id="parentPermission">

    </div>
    <p align="center">
      <input type="submit" value="Join!" />
    </p>
</form>

</div>