tramp-man tramp-man - 6 months ago 203
Javascript Question

jquery find next element with class name

<div class="form-group">
<label>Morgage application completed (if yes please enter date)</label>
<span id="RblMorgAppComp" class="rblLocal checkonchange">
<input id="RblMorgAppComp" type="radio" name="RblMorgAppComp" value="Yes">
<label for="RblMorgAppComp">Yes</label>
<input id="RblMorgAppComp" type="radio" name="RblMorgAppComp" value="No">
<label for="ctl00_ContentPlaceHolder1_RblMorgAppComp_1">No</label></span>
<div class="input-group date datepick">
<input name="TxtMorgAppCompDate" type="text" id="TxtMorgAppCompDate" class="form-control rddt">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>


and the following jquery.

$('.checkonchange input').change(function () {
var rdlVal = $(this).val();
if (rdlVal == 'Yes') {
//$(this).parent().parent().next('input').find('.rddt').css('border', 'solid 1px #000');
$(this).nextAll('.rddt').val('ddddd');
//$('.rddt').focus();
//alert($(this).next('.rddt').val());
//alert($(this).nextAll('.rddt').text());
//$(this).next('.rddt').css('border', 'solid 1px #000');
//$(this).closest("input['type=text']").css('border', 'solid 1px #000');
}
});


I'm trying to change the focus to the text box if the user selects yes. As you can see I have tried numerous things, but I can't get it to work.

I'm sure it must be something simple. I can't just find the class name because I have many of these radio buttons and text boxes on the 1 page.

thanks

Answer

Set value for all inputs with class .rddt which located in class .form-group (focus will be on last input)

$(this).closest('.form-group').find('.rddt').val('YES').focus();

Also you can use ID

$('#TxtMorgAppCompDate').val('YES').focus();

Example

Comments