POST 动态创建所需的输入字段答案

【问题标题】：POST dynamically created required input fieldsPOST 动态创建所需的输入字段
【发布时间】：2018-06-15 20:03:50
【问题描述】：

这是我用来发布数据的代码，它可以工作，在我添加了一个必需的参数后出现了问题，现在代码强制填充所有字段，即使它们不可见。我猜问题出在 jQuery 中的 hide() 函数中，因为它只隐藏了该字段。应该应用哪些更改以使此代码只需要可见字段？

$('#product_type').change(refresh_inputs);
refresh_inputs();
function refresh_inputs() {
    var name = $('#product_type').attr('name');
    var val = $('#product_type').val();
    $('#'+name+' div').hide();
    $('#'+val).show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="add.php" method="post" name="form1" >
    <table width="25%" border="0">
        <tr> 
            <td>SKU</td>
            <td><input type="text" name="sku" required></td>
        </tr>
        <tr> 
            <td>Name</td>
            <td><input type="text" name="name" required></td>
        </tr>
        <tr> 
            <td>Price</td>
            <td><input type="text" name="price" required></td>
        </tr>
        <tr>
            <td>Select product type</td>
            <td>
                <select id="product_type" name="products" required>
                    <option style="display: none;" selected>Select product type</option>
                    <option value="book">Book</option>
                    <option value="dvd">Dvd</option>
                    <option value="furniture">Furniture</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <div id="products">
                    <div id="book">
                        <input type="text" name="weight" placeholder="Weight" required/>
                    </div>
                    <div id="dvd">
                        <input type="text" name="capacity" placeholder="Capacity" required/>
                    </div>
                    <div id="furniture">
                        <input type="text" name="height" placeholder="Height" required/>
                        <input type="text" name="width" placeholder="Width" required/>
                        <input type="text" name="length" placeholder="Length" required/>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" name="Submit" value="Add"></td>
        </tr>
    </table>
</form>

【问题讨论】：

您可以使用 jQuery .remove() 函数代替 .hide()。

标签： javascript php jquery html post

【解决方案1】：

您可以修改 refresh_inputs 函数如下：

<script type="text/javascript">
    $('#product_type').change(refresh_inputs);
    refresh_inputs();
    function refresh_inputs() {
        var name = $('#product_type').attr('name');
        var val = $('#product_type').val();
        $('#'+name+' div').hide();
        $('#'+name+' div').find('input').removeAttr('required');
        $('#'+val).show();
        $('#'+val).find('input').attr('required', 'required');
    }
</script>

希望这会有所帮助。

【讨论】：

它几乎可以做到这一点，但是现在当我提交重量字段时，它会将值克隆到长度字段中，而当我添加家具时它只添加前 2 个字段
我很确定这不是因为我的代码，因为我所做的只是在元素中添加和删除所需的属性。那一定是另一个问题。
没错，刚刚测试，问题出在另一个文件里:)

【解决方案2】：

<script type="text/javascript">
        $('#product_type').change(refresh_inputs);
        refresh_inputs();
        function refresh_inputs() {
            var name = $('#product_type').attr('name');
            var val = $('#product_type').val();
            $('#'+name+' div').attr("required", false); // add this line only
            $('#'+name+' div').hide();
            $('#'+val).show();
         }
</script>

根据需要隐藏不移除自己设置的属性的元素。

【讨论】：