Hiding input doesnt work

Question

<input type="checkbox" name="AvatarfileSelected" value="image" id="AvatarfileSelected" onclick="$('#extra').hide('slow')"/> <span style="color:#538f05;">Change Image</span> <div id="extra"> <input type="file" name="avatarfile" id="avatarfile"></input> </div>

The above code doesn't work. Could someone show me the mistakes?

If that's the case you would see an error in the JavaScript console — Eric J.
– Eric J., Commented Jul 3, 2012 at 21:19
@Blaine Nope; semi-colons in javascript are not required for the code to work. — Daedalus
– Daedalus, Commented Jul 3, 2012 at 21:25
input tags are self-closing in XHTML, btw (referring to #avatarfile) — Don
– Don, Commented Jul 3, 2012 at 21:28
@gdoron I'm genuinely confused now about the role of the semicolon in JavaScript in-line one-liners lol — Don
– Don, Commented Jul 3, 2012 at 21:31

gdoron · Accepted Answer · 2012-07-03 21:28:07Z

You probably didn't include jQuery...

Use vanilla javascript:

onclick="document.getElementById('extra').style.display = 'none'";

Instead of:

onclick="$('#extra').hide('slow')"

(Or include jQuery if you want to use it.)

BTW, <input> doesn't have a closing tag: </input>

Replace:

<input type="file" name="avatarfile" id="avatarfile"></input>

With:

<input type="file" name="avatarfile" id="avatarfile" />

Shyju · Accepted Answer · 2012-07-03 21:21:31Z

Take out the onclick event from the HTML markup and do it in unobutrusive way. Make sure you bind your event functionalities in document ready event.

Use it like this

$(function(){ $("#AvatarfileSelected").click(function(){ $("#extra").hide(); }); });

Jsfiddle sample : http://jsfiddle.net/p9tdf/1/

Though it's the right way to use jQuery, how does it answer the question...?

Collectives™ on Stack Overflow

Hiding input doesnt work

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related