Ralph
asked on
jQuery setting Dropdown values only works on page load
When I just load the form and type in a wireless_no the AJAX search comes back with values and jQuery populates the form's dropdowns correctly.
After that, once I clear the form, (using code also shown below), the same activity causes jQuery to ignore the values passed to it.
The resulting (ignored) results can be seen in the attached file.
There is no error at all in console.log on the 1st or 2nd method approach.
HTML:
jQuery populating the form:
).attr('se lected', 'selected')
jQuery function that clears the form:
(Inside a function that gets passed the formID.)
After that, once I clear the form, (using code also shown below), the same activity causes jQuery to ignore the values passed to it.
The resulting (ignored) results can be seen in the attached file.
There is no error at all in console.log on the 1st or 2nd method approach.
HTML:
<span class="field_left">Billable Status:
<select name="billable_status" ID="billable_status" style="padding-top: 4px">
<option value="billable_status_choice0">Select Billable Status</option>
<option value="billable_status_choice1">Active</option>
<option value="billable_status_choice2">Suspended</option>
<option value="billable_status_choice3">Deactivated</option>
<option value="billable_status_choice6">Other</option>
</select>
</span>
<span class="field_center" > Modem Utilization:
<select name="modem_utilization" ID="modem_utilization" style="padding-top: 4px">
<option value="modem_utilization_choice0">Select Utilization</option>
<option value="modem_utilization_choice1">On Aircraft</option>
<option value="modem_utilization_choice2">With Customer</option>
<option value="modem_utilization_choice3">In Repair</option>
<option value="modem_utilization_choice4">In Test</option>
<option value="modem_utilization_choice5">In Transit</option>
<option value="modem_utilization_choice6">With Panasonic</option>
<option value="modem_utilization_choice7">Unknown</option>
</select>
</span>
jQuery populating the form:
alert("MC 1 results.billable_status="+results.billable_status+" results.modem_utilization="+results.modem_utilization+" results.aircraft_status="+results.aircraft_status) ;
if (! results.billable_status) { results.billable_status = 'Other' ; }
if (! results.modem_utilization) { results.modem_utilization = 'Unknown' ; }
if (! results.aircraft_status) { results.aircraft_status = 'Unknown' ; }
alert("MC 2 results.billable_status="+results.billable_status+" results.modem_utilization="+results.modem_utilization+" results.aircraft_status="+results.aircraft_status) ;
wireless_no=results.wireless_no.add_phone_format() ;
$('#billable_status option:selected').removeAttr("selected") ;
$('#billable_status option:contains("' + results.billable_status + '")').attr('selected', 'selected') ;
$('#modem_utilization option:selected').removeAttr("selected") ;
$('#modem_utilization option:contains("'+results.modem_utilization +'")').attr('selected', 'selected') ;
console.log('(#modem_utilization option:contains("' + results.modem_utilization +'")'+").attr('selected', 'selected')") ;
Values are set as in code above, and the console.log = (#modem_utilization option:contains("Unknown")jQuery function that clears the form:
(Inside a function that gets passed the formID.)
$('#'+formId+' span').children().each(function(i)
{
if ($(this).attr('type') === 'text' ||
$(this).attr('type') === 'textarea' ||
$(this).attr('type') === 'tel' ||
$(this).attr('type') === 'email' ||
$(this).attr('type') === 'number' ||
$(this).attr('type') === 'date' ||
$(this).is('textarea')
)
{
$(this).val('');
}
if ($(this).is(':checkbox') || $(this).is(':radio'))
{
$(this).prop('checked', false);
}
if ($(this).is('select'))
{
$(this).find('option:eq(0)').prop('selected', true);
}
});
portion-of-form.PNG
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Here's what I ended out using:
$('#billable_status option').filter(function() { return $(this).html() == results.billable_status.tr im() ; }).prop('selected', true) ;
$('#billable_status option').filter(function()
ASKER
I think I left it as I'd work with your input; which I did and all worked out okay in the end.
Thank you Swatantra,
Ralph