Question

我有一个带下拉选择菜单的表单，根据您的选择，它会显示您必须填写的隐藏文本字段。当我点击“重复按钮”时，javascript工作正常，并复制整个表单。选择下拉菜单和所有未隐藏的字段都会重置，这就是我想要的。但是，所有隐藏字段最终都会复制上一个表单中的答案。

第二个问题是，如果我没有在原始表单中选择不包含隐藏字段的选项，则在复制表单上，显示下拉菜单隐藏字段的javascript将不起作用。例如，有一个选项1和2的下拉列表。如果选择1，则没有显示的隐藏字段，如果选择2，则会有一个隐藏字段，您必须回答。如果我在上一个表单中选择＃1，那么在复制形式中，下拉列表显示1和2，但如果我选择2则不会发生任何事情，那是因为在之前的表单中我选择了＃1所以我猜javascript功能没有重复？如果在复制表格上我想选择＃2怎么办？我不能。

这是我的代码

HTML

   <div class="form-group">
        <select class="selectDD" id="FHB_OrgEvent" onchange='showIfEvent();'>
            <option value="1" >1</option>
            <option value="2" >2</option>
        </select>

    <div style="display:none;" class="hidden" id="showFhbEventName">
        <input type="text" id="FHBEventName" placeholder="Name of Event"/>
    </div>

    <div style="display:none;" class="hidden" id="showFhbEventDesc">
        <input type="text" id="FHBEventDesc" placeholder="Please provide a brief description of the event or activity"/>
    </div>

</div>

<div id="add-del-buttons" class="add-del-buttons">
    <input type="button" id="btnAdd" value="duplicate">
</div>

用于显示隐藏字段的Javascript

function showIfEvent() {
    if (FHB_OrgEvent.value == "1") {
        showFhbEventName.style.display = "block";
        showFHBEventDesc.style.display = "block";
    } else {
        showFhbEventName.style.display = "none";
        showFHBEventDesc.style.display = "none";
    }
}

Javascript for Duplicate function

$('#btnAdd').click(function() {
        var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
        var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

});

如何复制表单时重置隐藏的文本字段

0 个答案: