使用jQuery

Question

我试图为产品提交到数据库创建动态必填字段，我找到了一个创建＆＃34;静态字段的解决方案＆＃34;强制性的，但我无法想象如何根据用户选择创建相应的字段。

这就是我处理动态表单创建的方法

＆＃13;

＆＃13;

var $input_DVD = $('<input id="dvd" input type="text" name="dvd" class="input" placeholder="Size in Mb"/>');
var $input_Book = $('<input id="book" input type="text" name="book" class="input" placeholder="Weight in Kg"/>');
var $input_FurnitureHeight = $('<input id="furnh" input type="text" class="input" name="furnh" placeholder="Height in Cm"/>');
var $input_FurnitureWidth = $('<input id="furnw" input type="text" class="input" name="furnw" placeholder="Width in Cm"/>');
var $input_FurnitureLength = $('<input id="furnl" input type="text" class="input" name="furnl"  placeholder="Length in Cm"/>');


$(document).ready(function() {
    $('select#Product_Type').on('change', function() {
        $('#container').remove();

        var val = $(this).val()
        $container = $('<fieldset id="container" class="inner" ></fieldset>');//  

        if (val == "Dvd")$input_DVD.appendTo($container);
        if (val == "Book") $input_Book.appendTo($container);
        if (val == "Furniture"){
            $input_FurnitureHeight.appendTo($container);
            $input_FurnitureWidth.appendTo($container);
            $input_FurnitureLength.appendTo($container);
        }
        $container.insertAfter($(this)).val();
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Insert your data</h1>
    <form method="post" action="add_product.php">
        <input type="hidden" name="submitted" value="true" />


    <fieldset id="product_list">
        <legend>New Product</legend>
        <label>SKU:<input type="text" name="ID"/></label>
        <label>Name:<input type="text" name="name"/></label>
        <label>Price:<input type="text" name="price"/></label>
        <label>Product Type</label>
        <select id="Product_Type" name="prtype">
            <option style="display: none;" selected>Select product type</option>
            <option value="Dvd">DVD</option>
            <option value="Book">Book</option>
            <option value="Furniture">Furniture</option>
        </select>
    </fieldset>
</div>
    <br  />
    <input type="submit" name="add" value="Add" onClick="window.location.reload()"/>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您想要强制执行某些操作（“必需”），请将required属性添加到所需的每个字段中。要使其在select上工作，您需要指定第一个或所选的选项以获得空值：value=""

<form>
  <input type="text" required>

  <select required>
    <option value="" selected>Select product type</option>
    <option value="Dvd">DVD</option>
  </select>
</form>

顺便说一下，你的onClick="window.location.reload()"错了，除非你使用react（使规则弯曲），否则html属性应全部小写

...样式<options>没有视觉效果，因此可以删除（style="display: none"）

还值得阅读constraint validation

Answer 2

使用插入字符串的疯狂字段所必需的同样适用的东西。更好的解决方案是隐藏输入而不是插入以下示例。但我要说的是你必须观察选择输入并隐藏所有元素，但选择一个

$('#select').change(function() {
  var value = $(this).val()
  // Hide the other inputs
  $('option').each(function(){
  console.log($(this).val())
    $('#'+$(this).val()).hide();
  })
  // Show the input
  $('#'+value).show()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <input type="text" name="name" placeholder="Enter name" required>
  <select id="select">
    <option selected>Default option</option>
    <option value="Book" placeholder="Enter Book Name">Book</option>
  </select>
  <!-- Dont insert html with strings its a bad option hide the input instead -->
  <input type="text" id="Book" name="Book" hidden required>
  <input type="submit" />
</form>