Showing/Hiding Div in Form based on selected option

JavaScript
1

Hi there,

Can somebody please tell me why this is not working?

I have used the code exactly as described in this JSFiddle:

But I have changed it to match my field names and values…

Here is my fiddle:

I can’t see any difference between the functionality of both fiddles (unless i’m missing something so obvious it’s escaping my eyes)

HTML:

<select name="photo-reject-list" id="photo-reject-list">
        	<option value="wholenotvisible">Your whole face was not visible</option>
            <option value="notvalid">Your picture was not a valid one of you</option>
            <option value="porn">Rejected for pornographic/replusive content</option>
            <option value="hazy">Your picture was hazy</option>
            <option value="notvisible">Your face was not clearly visible</option>
            <option value="morethanone">More than one person was shown in the picture</option>
            <option value="upsidedown">The picture was upside down</option>
            <option value="notrecent">The picture wasn't recent enough</option>
            <option value="toocropped">This picture is too cropped. Please provide the original so we can crop it</option>
            <option value="other">Write your own reason</option>
		</select>
        <br />
        	 
        <div id="otherType" style="display:none;">
				<label for="specify">Enter Reason:</label>
				<input type="text" name="specify" size="50"/>
				</div>
            <br />
            <input class="search-btn" type="submit" value="Reject" />

Javascript:

$('#photo-reject-list').on('change',function(){
    if( $(this).val()==="other"){
    $("#otherType").show()
    }
    else{
    $("#otherType").hide()
    }
});
2

There are three errors in the console:

  • VM190:374 Uncaught TypeError: Cannot read property ‘getAttribute’ of undefined
    at HTMLDocument.handleDocumentMouseOverEvent (eval at E_c (:3:298), :374:62)
    handleDocumentMouseOverEvent @ VM190:374
  • VM190:374 Uncaught TypeError: Cannot read property ‘getAttribute’ of undefined
    at HTMLDocument.handleDocumentMouseOverEvent (eval at E_c (:3:298), :374:62)
    handleDocumentMouseOverEvent @ VM190:374
  • VM190:927 0
    (index):45 Uncaught ReferenceError: $ is not defined
    at window.onload ((index):45)
    window.onload @ (index):45

The last error seems to be most important, where you don’t have jQuery. From the original jsfiddle, there is a settings panel at the upper right of the Javascript panel. Click that and you’ll see that jQuery 1.9.1 is framework that’s being used

That same setting needs to be made on your jsfiddle.

When you’ve told jsfiddle that you’re using jQuery, save it and reload and it should work for you.

3

Thanks Paul - I edited the settings as you suggested and the JSFiddle works now.

However, it’s still not working when I make the changes to my test site.

This is what I have in my :

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$('input.description').on('change', function() {
    $('input.description').not(this).prop('checked', false);  
});

</script>

<script>
$('#photo-reject-list').on('change',function(){
    if( $(this).val()==="other"){
    $("#otherType").show()
    }
    else{
    $("#otherType").hide()
    }
});
</script>

So you can see I have included jQuery…

And the

4

Those selectors don’t exist on the page when the script runs from the head section.

Move the scripts down to the end of the body, just before the </body> tag.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.