基于 HTML/JavaScript 中的用户选择动态删除表单元素

Posted 2023-03-05

【中文标题】基于 HTML/JavaScript 中的用户选择动态删除表单元素

【英文标题】：Dynamically Remove a Form Element Based on User Selection in HTML/JavaScript

【发布时间】：2018-04-02 19:46:08

【问题描述】：

我试图在选择否单选按钮时删除上传文件的选项，但是当我单击否时它并没有消失。当涉及到 javascript 时，我不知道自己在做什么。我如何让它消失（或回来）。

<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
        <input type="submit" value="Submit" /><br>
        <label for="fname">First Name:</label>
        <input type="text" required /><br>
        <label for="lname">Last Name:</label>
        <input class="lname" type="text" required/><br>
        <label for="email">Email:</label>
        <input class="email" type="text" required/><br>
        <input type="radio" name="file" value="yes" id="yes" />
        <label for="Yes">Yes</label>
        <input type="radio" name="file" value="no" id="no" />
        <label for="No" "removeElement();">No</label><br>
        <p><input type="file" size="30" required></p>
        </form>

        <script>
            function validateForm() 
                window.open("https://www.***.com");
            

            function removeElement()
                var parent = document.getId(file);
                parent.removeChild(file);
            
        </script>

任何帮助将不胜感激！

【问题讨论】：

你在使用 jQuery 和 Bootstrap 吗？

@GabrielBourgault 我真的不知道，我正在使用您在上面看到的内容。我认为它只是 html 页面上的硬编码 java 脚本

【参考方案1】：

您不能只将removeElement(); 放在html 标记的中间。

我假设你想隐藏文件标签？您首先要删除 required。

你需要在你的号码上添加一个事件监听器。

在 jQuery 中是这样的

$('#no').change(
    function() 
       if ($(this).is(':checked') && $(this).val() == 'no') 
            $(this).hide(); //Change this for the id of the element you want
        
        else 
            $(this).show(); //Change this for the id of the element you want
        
    );

部分灵感来自this source

如果您正在寻找纯 JavaScript，我的解决方案如下所示：

<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" onclick="handleChange(false);" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" onclick="handleChange(true);" />
<label for="No">No</label><br>
<p><input type="file" size="30" id="fileUpload"></p>
</form>

<script>
    function validateForm() 
        window.open("https://www.***.com");
    

    function handleChange(remove) 
        var element = document.getElementById('fileUpload');
        if (remove)
            element.style.display = 'none';
        else 
            element.style.display = 'block';
    

</script>

（未测试）

【讨论】：

这个 jquery 不是 vanilla javascript ...:(

@GabrielBourgault 是否有常规的 JavaScript 替代品？

@Noah210012 肯定有，我可以放点东西

像魅力一样工作！谢谢。

【参考方案2】：

隐藏：

document.querySelectorAll('input[type=file]').style.display = 'none';

表演：

document.querySelectorAll('input[type=file]').style.display = 'block'; //or ''

【讨论】：

这在 JavaScript 中？

插入函数removeElement()

非常感谢！我应该在 HTML 中添加什么？还是我应该保持原样？

此解决方案无法开箱即用，因为您的 HTML 中有错误。