jQuery is one really awesome JavaScript library, and there is
definitely no argument that it makes life easier. But its robustness
can be its downfall sometimes. You can do almost anything with it, but
with some things it is hard to figure out just how to do it. Today I
will take you through some jQuery selectors that you may have not known
about concerning forms.
Forms are everywhere, and more than likely if you have done web
development, one of the first things you did was put a form of some
kind some place on a web page. But, in today's world of web 2.0, you
want something fast and something that provides a lot of feedback. Most
of the time, we use JavaScript to add function to these forms, and
using jQuery it can be really easy. But, getting the information in a
form, using jQuery can be a little tricky sometimes. Lets start with
the basics.
If you have used jQuery before, then you are probably aware of the val() function, which grabs the value of the selected tags. So, lets consider the following:
<textarea id="myTA">Some Text....</textarea>
<input type="text" id="myTB" value="A Textbox....."/>
In order to get or modify the contents of either, you use the val() method like so:
var taText = $('#myTA').val();
var tbText = $('#myTB').val();
//And to modify the text
var taText = $('#myTA').val("Some new text.....");
The use of the val() method is pretty straight forward
and easy to understand. But, some form elements are a bit trickier.
Lets say you have a nice, plain ol' html select:
<select id="mySel">
<option value='1'>Opt 1</option>
<option value='2'>Opt 2</option>
<option value='3'>Opt 3</option>
</select>
How would you get the selected element? After looking through the
documentation, the answer still might elude you. To do this, we are
taking advantage of the :selected filter, which allows us to grab the, well selected option. Putting it all together we get:
//To get the value
var selVal = $("#mySel option:selected").val();
//To get the option's text
var selText = $("#mySel option:selected").text();
It's simple enough, but it is not too obvious how to go about doing
that. Something slightly more obscure is how to handle checkboxes.
Let's say you have just a checkbox, and you want to find out if it is
checked or not:
<input type="checkbox" id="myCB">
So, in order to find out if this is checked or not, the easiest way to go about doing it would be with a method called is(). All this does is check the selected elements for specific filters. Luckily, there is a :checked filter we can use, so testing the checkbox goes like so:
//Returns true on checked, false otherwise
var isChecked = $("#myCB").is(":checked"));
Then you can use this information however you want. T인용구his will give
you an answer on whether the checkbox is checked or not. Slightly more
complex are radio buttons, which come in groups. Lets take the follow
set of radio buttons:
<input type="radio" name="rg" value="r1"/> Radio 1<br/>
<input type="radio" name="rg" value="r2"/> Radio 2<br/>
<input type="radio" name="rg" value="r3"/> Radio 3
What we want here is to find which one of these is the currently
selected ones. To do this, we have to first get all of the radio
buttons in this group, so we use the name attribute. Then we use the :selected filter like we did on the select. The whole ordeal will look something like so:
$("input[name='rg']:checked").val();
Since there is no real text inside the radio button, we have to use the val() method. As long as we have a way to decode what that value means, we are in business.
These are some form selectors that I had to dig a little for, and
they certainly are not that obvious unless you spend hours reading all
the jQuery docs. Hopefully these will save you some digging of your
own. Just remember, when you need coding help, just Switch On The Code.
http://www.switchonthecode.com/tutorials/jquery-snippet-useful-form-selectors