kenoli Posted August 19, 2014 Share Posted August 19, 2014 I'm working with the following script but have clearly done something wrong. I would expect "Select something." to show up initially in the #message div and then to be replace by something like "add_gallery button checked" as appropriate for the radio button selected. Instead, nothing happens. What is wrong with my script? Thanks, --Kenoli <!doctype html><html> <head> <title>Test Radio Select</title> </head> <body><div id="select"><ul><li><input type="radio" name="select" value="add_gallery" > Add a new gallery<br/></li><li><input type="radio" name="select" value="change_name_gallery" > Change the name of a gallery<br/></li><li><input type="radio" name="select" value="delete_gallery" > Delete a gallery<br/></li></ul></div><p><div id="message" ></div></p><script src="http://code.jquery.com/jquery-latest.min.js"></script><script>$(document).ready(function() { // Initial content $(#message).html("Select something."); // New message when button checked if ($('#select ul li input:radio:checked')) { var value = $(this).attr('value'); $(#message).html(value + " button checked."); }};</script> </body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 19, 2014 Share Posted August 19, 2014 You should use your browser's developer tools, you'll see error messages in the console there. In this case it's because you didn't quote the selectors. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2014 Share Posted August 20, 2014 (edited) So much wrong with this 1. closing ')};' should be '});' 2. $(this) usually refers to current element that was triggered by event. The event here is '$(document).ready(function()' which refers to the actual document or window with '$(this)' that does not have a value to retrieve, $(this) should be for this to work the same that was used in the if condition. 3. i should place .val() at end if condition if ($('#select ul li input:radio:checked').val()) OR if ($('#select ul li input:radio').is(':checked')) because it passes if checked or not, and shows as [object Object] which will show as undefined. Edited August 20, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
kenoli Posted August 20, 2014 Author Share Posted August 20, 2014 Thanks for catching the syntax issues. The rest makes sense. I get very confused about selectors. I was not sure how to select for "checked". What you have to say helps clarify what creates a focus that "this" can relate to. Essentially what you are saying here is that there needs to be an event triggered before there is an element to refer to with "this." Is that correct? Why does checking the radio button not consist of an event? Could it with the right syntax? Why does the val() need to be appended to the end of the selector? I never would have thought of that. Is there a good reference to query syntax. I actually have a couple of ebooks, but they get all caught up in examples and don't really have very comprehensive references. I will try all of this out. Thanks, --Kenoli Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2014 Share Posted August 20, 2014 (edited) $('#select ul li input:radio:checked') is object, that why it passes if condition if checked or not. But! adding val() will check object that is checked value event for form elements such as radio inputs mainly refers to click, change, while 'checked' is a state of selection for specific form elements. Edited August 20, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
kenoli Posted August 20, 2014 Author Share Posted August 20, 2014 Thanks for the replies. I was clearly very off base. I fixed things with the following code: <!doctype html><html> <head> <title>Test Radio Select</title> </head> <body><div id="select"><ul><li><input class="clown" type="radio" name="select" value="add_gallery" > Add a new gallery<br/></li><li><input class="clown" type="radio" name="select" value="change_name_gallery" > Change the name of a gallery<br/></li><li><input class="clown" type="radio" name="select" value="delete_gallery" > Delete a gallery<br/></li></ul></div><p><div id="message" ></div></p><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' ></script><script>$(document).ready(function() { // Initial content $('#message').html('Select something.'); // New content $("input[name='select']").on( "click", function() { var page = $(this).attr('value'); //alert(page); // Debug //$("#message").html(page + " was selected!" ); // Debug $("#message").load('content/' + page + '.php'); });});</script> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now