Dynamically Remove a Form Element Based on User Selection in HTML/JavaScript

Question

I am trying to remove the option to upload a file upon the selection of the No radio button but when I click No it doesn't go away. I have no idea what I'm doing when it comes to JavaScript. How do I make it go away (or come back).

<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.stackoverflow.com");
            }

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

Any help would be greatly appreciated!

@GabrielBourgault I honestly have no idea, I'm using what you see above. I think its just hard-coded java script on an HTML page — Noah210012, Oct 22 '17 at 00:37

Gabriel Bourgault · Accepted Answer · 2017-10-22T00:52:09.147

You can't just put removeElement(); in the middle of the html tag.

I'm assuming you want to hide the file tag? You'll first want to remove the required.

You will need to add an event listener on your No.

In jQuery this looks like this

$('#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
        }
    });

Partly inspired by this source

If you're looking for pure JavaScript, here's what my solution would look like :

<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.stackoverflow.com");
    }

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

</script>

(Not tested)

@GabrielBourgault is there a regular JavaScript alternative to this? — Noah210012, Oct 22 '17 at 00:47

score 0 · Answer 2 · answered Oct 22 '17 at 00:39

0

for hide:

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

for show:

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

answered Oct 22 '17 at 00:39

mscdeveloper

2,749
1
10
17

This goes in the JavaScript? – Noah210012 Oct 22 '17 at 00:41
insert in function removeElement() – mscdeveloper Oct 22 '17 at 00:43
Thank you so much! What should I put in the HTML? or should I leave it as is? – Noah210012 Oct 22 '17 at 00:44
This solution will not work out of the box, because you have errors in the HTML. – Gabriel Bourgault Oct 22 '17 at 00:46

Dynamically Remove a Form Element Based on User Selection in HTML/JavaScript

2 Answers2