Link to home
Start Free TrialLog in
Avatar of Ralph
RalphFlag for United States of America

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:
<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>

Open in new window


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')") ;

Open in new window

Values are set as in code above, and the console.log = (#modem_utilization option:contains("Unknown")).attr('selected', 'selected')

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);
    }
  });

Open in new window

portion-of-form.PNG
ASKER CERTIFIED SOLUTION
Avatar of Swatantra Bhargava
Swatantra Bhargava
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Ralph

ASKER

Don't know what happened to this, I was sure I'd replied and closed this down.

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
Avatar of Ralph

ASKER

Here's what I ended out using:

$('#billable_status option').filter(function() { return $(this).html() == results.billable_status.trim()  ; }).prop('selected', true) ;