attaching a change event

[jimfog]

I am trying to attach a change event(usuing jquery) to a form radio button such that when the user selects either of the radio buttonsan alert message appear-it is for testing only. Here is the html:

<form action="" method="post">  <input type="radio" class="formBuzType" name="buztype" value="5"> salon spa <br>  <input type="radio" class="formBuzType" name="buztype" value="4"> car <br>	    </form>

and here is the js code:

('.formBuzType').change(function(){alert('hi');});

On Google Dev Tools I get the following error message:Uncaught TypeError: Object .formBuzType has no method 'change' WHat the above means?

[dsonesuk]

?? '$' as in

$(function(){$('.formBuzType').change(function(){alert('hi');});});

works for me

[jimfog]

Ι cannot believe I forgot to put the dollar sign ...anyway.I have 1 question though: Is it necessary for the code to be in a function?

[dsonesuk]

depends where you place the code, if you place it below inputs then no, if not then you have use $(function(){ }); which acts similar to $(document).ready(function(){ }); and runs when page is fully loaded.

[jimfog]

if you place it below inputs then no...

Are you referring to inline javascript?

[dsonesuk]

As in

<form action="" method="post">  <input type="radio" class="formBuzType" name="buztype" value="5"> salon spa <br>  <input type="radio" class="formBuzType" name="buztype" value="4"> car <br>		    </form>  <script type="text/javascript">/*<![CDATA[*//*---->*/$('.formBuzType').change(function(){alert('hi');});/*--*//*]]>*/</script>

Where the targetted input have been created, so the event can be applied

[jimfog]

Now, I got it thanks.

[jimfog]

but I have 1 more quesion...not related to this topic...but I am not going to open a new one since probably you are going to answer anywaysince you know js very good. I have a form with 2 radio buttons, and each is associated with a different value.I want every time the user checks a radio button(onchange event) the corresponding value is "submitted". Doing this with PHP is easy but I want to write js code so that ajax can do it.What I have managed so far is that by selecting either buttons the same value is "grabbed"...i mean the one radio button has value 5 and the other 4 but always 5 is "gets " grabbed...here is the code...HTML and js:

<form action="" method="post">  <input type="radio" class="formBuzType" name="buztype" value="5"> salon spa <br>  <input type="radio" class="formBuzType" name="buztype" value="4"> car <br>	    </form><script>$(function(){$('.formBuzType').change(function(){var value=$('.formBuzType').val()alert(value);});});	    </script>	   

[dsonesuk]

you have to get the value of input that was selected, that is where $(this) is used

$(function(){$('.formBuzType').change(function(){var InputValue = $(this).val();alert(InputValue);});});

this specific element with class .formBuzType that triggered change event

[davej]

Is this thread done? I don't want to hijack it, but I would like to ask when it is important to use fancy comment delimiters such as those that are seen below. Thanks.

<script type="text/javascript">/*<![CDATA[*//*---->*/ [...script code...] /*--*//*]]>*/</script>

Edited May 31, 2013 by davej

[thescientist]

Is this thread done? I don't want to hijack it, but I would like to ask when it is important to use fancy comment delimiters such as those that are seen below. Thanks.

it isn't (anymore)http://w3schools.inv...showtopic=47631 Edited May 31, 2013 by thescientist

[justsomeguy]

You would need the CDATA comments if you're using an XHTML doctype, but it's not needed for HTML5.

[thescientist]

really? I didn't know it was an issue.

[justsomeguy]

Since it needs to be valid XML, seeing things like < and & in Javascript code break the XML parsing. The CDATA tells the XML parser that this is character data, not XML code. Then again, I don't see why anyone would use XHTML anyway.