Question

我正在为用户创建一个预订表单，以便能够在活动中预订地点。我想要做的是通过选择输入创建表单字段的位数。例如，如果用户在选择字段中选择3，则将创建3个名称输入字段。最多的地方是12。

我设法做到这一点的唯一方法是使用以下脚本，该脚本显示用户选择的字段数量，并向所有其他字段添加display none，这在验证表单时是一个问题隐藏的字段也不会让我提交表单。例如，如果用户选择3，则显示3个输入，但隐藏其余9个。

<script type="text/javascript">
$(function () {

  $(".limit").hide();
  //set panels group
  var panels = $(".limit", "#delegate_panels"); 
  $('.delegate-number').change( function() {
    //hide any previously shown panels
    $(panels).hide();
    //show the slice
    $(panels).slice(0, parseInt($(this).val())).show();
  });

});
</script>

以下是选择字段的代码

<span>
  <strong>Number of delegates</strong>
</span>
<select name="quantity" class="delegate-number">
  <option>Please select...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

以下代码重复12次，并包含在#delegate_panels中。

<li class="limit">
  <div class="del-wrap">
    <span>Title:</span>
    <select name="item_options[title_1]" id="title1">
      <option value="">--</option>
      <option value="Mr.">Mr.</option>
      <option value="Mrs.">Mrs.</option>
      <option value="Miss.">Miss.</option>
      <option value="Dr.">Dr.</option>
      </select>
  </div>

  <div class="name-wrap">
    <span>Full Name:</span>
    <input type="text" id="name1" name="name1" value="" size="30" />
  </div> 
</li>

基本上我希望它能够执行上面的脚本所做的事情，但是要创建元素而不是显示切片并隐藏其余部分，这样我就可以验证所有名称字段，而不是隐藏字段来阻止表格提交。

任何想法都会非常感激。

Answer 1

如果你想在不重新加载页面的情况下这样做，我假设，jQuery是你的人（或无生命的代码库）。

粗略的jQuery脚本可能如下所示：

$(document).ready(function() {
    $("#AmountDropDown").change(function(){
        $(".datafields").remove();
        var amount = $("#AmountDropDown").val()
        for(int i = 1; i<=amount; i++) {
            var fieldhtml= "<input type='text' class='datafields' id='datafield" + i + "' name = 'datafield" + i + "'/>";
            $("#containingDiv").append(fieldhtml);
        }
    });
});

会创建像

这样的文本框

<input type='text' class='datafields' id='datafield1' name = 'datafield1'/>

你需要的不仅仅是一个文本框，但我希望你能得到它的主旨： - ）

使用选择字段值创建表单域

1 个答案: