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

Question

我创建了具有多个表单字段的表单。我有表单字段是名称，移动，电子邮件和没有推荐人。基于选择选项（No Of Referrer）....

在这里，我创建了推荐的表格，并为学生入学流程赚取....当用户选择参与者时，我需要显示参考详细信息字段2次如果再次更改1表示显示该字段一次... ..选择No Referler字段后，我显示以下字段名称，电子邮件，移动，城市，课程......

$(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>

现在它是表单字段....但是不会根据选择动态显示表单字段...例如，如果我选择No的Referrer选项是2则需要显示表单字段2次...更改它3表示显示3次，更改为1表示只显示一次...如何根据选择显示和隐藏表单字段???

Answer 1

您需要使用$('div').clone().html()。请参阅以下工作解决方案，它在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>

Answer 2

这可以通过.clone（）和编辑克隆对象的id /名称来实现。或者：您的#select_btn已经有了数字值，在foreach中使用它们直接修改html（）输出。

Answer 3

$(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>