CODEWITHSUNDEEP
javascriptjqueryhtml
Diogo Martinho
Diogo Martinho

Reputation: 137

jQuery input element on change event issue - multiple attributes class

I am currently struggling with trying to fire a jQuery onchange event in one radio element I have in my code:

<input class="flat ValidWarranty" id="ValidWarranty" name="ValidWarranty" 
type="radio" value="Yes" style="position: absolute; opacity: 0;">

I'm using an element with a multiple attribute class ("flat ValidWarranty") and it only works if I only specify one attribute and remove the other for example:

$(document).on('change', '[class=flat]', function () {

However I want to keep both attributes since I'll do different validations in the same page with other input elements that share the "flat" class.

Is it possible to do something similar like this on jQuery:

$(document).on('change', '[class=flat ValidWarranty]', function () {

Thank you

Upvotes: 0

Views: 504

Answers (2)

epascarello
epascarello

Reputation: 207501

It makes no sense to use an attribute selector for classes.

But if you really want to, you need to use quotes because of the whitespace. 

$('[class="flat ValidWarranty"]').css("color", "green")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<duv class="flat ValidWarranty">foo</div>

If it is supposed to be one or the other, than you would use multiple selectors

$('[class="flat"],[class="ValidWarranty"]').css("color", "green")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<duv class="flat">foo</div>
<duv class="ValidWarranty">foo</div>

but you really should be using class selectors and not attribute sectors.

".flat" or ".flat.ValidWarranty"

Upvotes: 1

palaѕн
palaѕн

Reputation: 73906

You can try this:

$(document).on('change', '.flat.ValidWarranty', function () {

write the classes together with . and no spaces between them.

Upvotes: 2

Related Questions