Applying CSS to Label and Input Elements Using Values in jQuery

Question

Edit : I am aware that their is a question mark in the jQuery, CSS and HTML. Due to it being generated automatically by Yii I cannot remove it.

Using jQuery I am attempting to add and remove styling to an input and label within my HTML. I get no response when I am trying this, I believe it is due to the abnormal for="" and/or val= values of the elements generated by Yii.

Can't seem to get it working with the if else statement. When removed it applies the CSS.

It should do as follows; select Yes, with the value "Yes", and the second label and input appear.

I have created a CodePen for this as I am having issues with JSFiddle. https://codepen.io/CallumRocks/pen/rwrrvE

I have also included the relevant code below.

$(document).ready(function(){
    $('#event_Do_you_require_any_accessibility_assistance?').on('change',function(){
    if($(this).val() == 'Yes'){ 
        $("label[for='event_Please specify']").css('display', 'block');
        $("input#event_Please_specify").css('display', 'block');
    }
    else {
        $("label[for='event_Please specify']").css('display', 'none');
        $("#event_Please_specify").css('display', 'none');
    }
    });
});

label[for="event_Would you like to stay informed about updates and changes to this event?"] {
    width: 100% !important;
    line-height: 20px;
}
label[for="event_Please specify"] {
    display: none;
}
input#event_Please_specify{
    display: none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="form-group">
  <label class="required-label required" for="event_Do you require any accessibility assistance?">Do you require any accessibility assistance? <span class="required">*</span></label>
  <select class="form-control user-success" required="required" name="event_Do you require any accessibility assistance?" id="event_Do_you_require_any_accessibility_assistance?">
    <option value="">Please choose</option>
    <option value="Yes">Yes</option>
    <option value="No"> No</option>
  </select>
</div>

<div class="form-group">
  <label for="event_Please specify">Please specify</label>
  <input class="col-md-5 form-control" placeholder="Please specify" autocomplete="off" type="text" value="" name="event_Please specify" id="event_Please_specify">
</div>

You've edited your question so that your jQuery selector ID no longer matches your element's ID, so you're now going to get answers pointing this out. That being said, I've provided a solution that works with the ?. — Tyler Roper
– Tyler Roper, Commented Jul 6, 2017 at 14:07

Tyler Roper · Accepted Answer · 2017-07-06 14:10:50Z

You don't have to remove the ?. Simply escape it in jQuery using \\:

$('#event_Do_you_require_any_accessibility_assistance\\?')

Reference

Example:

$(document).ready(function(){
    $('#event_Do_you_require_any_accessibility_assistance\\?').on('change',function(){
    if($(this).val() == 'Yes'){ 
        $("label[for='event_Please specify']").css('display', 'block');
        $("input#event_Please_specify").css('display', 'block');
    }
    else {
        $("label[for='event_Please specify']").css('display', 'none');
        $("#event_Please_specify").css('display', 'none');
    }
    });
});

label[for="event_Would you like to stay informed about updates and changes to this event?"] {
    width: 100% !important;
    line-height: 20px;
}
label[for="event_Please specify"] {
    display: none;
}
input#event_Please_specify{
    display: none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="form-group">
  <label class="required-label required" for="event_Do you require any accessibility assistance?">Do you require any accessibility assistance? <span class="required">*</span></label>
  <select class="form-control user-success" required="required" name="event_Do you require any accessibility assistance?" id="event_Do_you_require_any_accessibility_assistance?">
    <option value="">Please choose</option>
    <option value="Yes">Yes</option>
    <option value="No"> No</option>
  </select>
</div>

<div class="form-group">
  <label for="event_Please specify">Please specify</label>
  <input class="col-md-5 form-control" placeholder="Please specify" autocomplete="off" type="text" value="" name="event_Please specify" id="event_Please_specify">
</div>

kevin b. · Accepted Answer · 2017-07-06 14:07:59Z

2

If you don't want to delete or escape the '?' in your id, you can opt for the jQuery 'starts with selector' like this:

$("[id^='event_Do_you_require_any_accessibility_assistance']")

$(document).ready(function(){
    $("[id^='event_Do_you_require_any_accessibility_assistance']").on('change',function(){
    debugger;
    if($(this).val() == 'Yes'){ 
        $("label[for='event_Please specify']").css('display', 'block');
        $("input#event_Please_specify").css('display', 'block');
    }
    else {
        $("label[for='event_Please specify']").css('display', 'none');
        $("#event_Please_specify").css('display', 'none');
    }
    });
});

label[for="event_Would you like to stay informed about updates and changes to this event?"] {
    width: 100% !important;
    line-height: 20px;
}
label[for="event_Please specify"] {
    display: none;
}
input#event_Please_specify{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="form-group">
  <label class="required-label required" for="event_Do you require any accessibility assistance?">Do you require any accessibility assistance? <span class="required">*</span></label>
  <select class="form-control user-success" required="required" name="event_Do you require any accessibility assistance?" id="event_Do_you_require_any_accessibility_assistance?">
    <option value="">Please choose</option>
    <option value="Yes">Yes</option>
    <option value="No"> No</option>
  </select>
</div>

<div class="form-group">
  <label for="event_Please specify">Please specify</label>
  <input class="col-md-5 form-control" placeholder="Please specify" autocomplete="off" type="text" value="" name="event_Please specify" id="event_Please_specify">
</div>

answered Jul 6, 2017 at 14:07

kevin b.

1,5341 gold badge13 silver badges24 bronze badges

2 Comments

Tyler Roper Over a year ago

This will certainly work, though it might be noteworthy to consider the performance implications. For a case like this I don't see it being an issue, but food for thought!

kevin b. Over a year ago

Good of you to mention this, because after running the tests it showed that the 'id attribute starts with selector' is 76% slower than the 'class selector' (assuming performances of class and id selector are more or less the same). In this case it won't make much difference, but if the situation expands, that 76% will make a world of difference.

n1kkou · Accepted Answer · 2017-07-06 14:02:34Z

0

Typo in select 'id'. Just remove the question mark. $('#event_Do_you_require_any_accessibility_assistance?')

In your codepen code, if you remove the question mark in HTML select id, everything is alright.

answered Jul 6, 2017 at 14:02

n1kkou

3,1402 gold badges25 silver badges34 bronze badges

Collectives™ on Stack Overflow

Applying CSS to Label and Input Elements Using Values in jQuery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related