Question

I have a simple jQuery if/else if condition but only the “if” part works, the “else if” do not, I can’t figure out why. The code represents three listboxes (ajax-populated) and when any of them clicked, a jQuery function collects the ID of the clicked item and assigns it to a variable. The first one (even when I switch places I get the correct ID number) is fine, never the second or the third. It is not working when I use three “if’s” instead of “if/else if” structure either.

$(document).ready(function() {
    $('#btn_edit_details').click(function() {
        var request_id;
        if ($('#lstbx_new_repeat_requests').val().length > 0) {
            request_id = $('#lstbx_new_repeat_requests').val();
            alert(request_id);
        }
        else if ($('#lstbx_approved_repeat_requests').val().length > 0) {
            request_id = $('#lstbx_approved_repeat_requests').val();
            alert(request_id);
        }
        else if ($('#lstbx_declined_repeat_requests').val().length > 0) {
            request_id = $('#lstbx_declined_repeat_requests').val();
            alert(request_id);
        }
if ($('#btn_edit_details').val() == 'edit') {
// rest of the code, working fine when the request_id is passed from the first "if"

And the HTML

<input type='button' id='btn_edit_details' value='edit' />
<select id='lstbx_new_repeat_requests' name='lstbx_new_repeat_requests'></select>
<select id='lstbx_approved_repeat_requests' name='lstbx_approved_repeat_requests'></select>
<select id='lstbx_declined_repeat_requests' name='lstbx_declined_repeat_requests'></select>

Answer 1

I ended up with the only way it worked for me, though it may look not so smart to you, but again – it’s the only way i could make it work… and i have no idea why it didn’t work with the really basic if/else if way. Any suggestions or comments will be warmly accepted. Thanks all for your efforts to assist.

The class of the three listboxes is lstbx_repeat_requests. When a user clicks on any of the three, I capture its id in a global var. Then I use a switch statement, as below:

1. Capture the id:

   $(document).ready(function() {
   $('.lstbx_repeat_requests').change(function() {
       //assigns a global var
       window.my_config =
       {
           lstbx_id : this.id
       };
   });
   });
   

2. Switch statement:

   $(document).ready(function() {
   $('#btn_edit_details').click(function() {
   
       var request_id;
       switch(window.my_config.lstbx_id){
           case "lstbx_new_repeat_requests":{
               request_id = $('#lstbx_new_repeat_requests').val();
               alert(request_id + " new");
               break;
           }
           case "lstbx_approved_repeat_requests":{
               request_id = $('#lstbx_approved_repeat_requests').val();
               alert(request_id + " approved");
               break;
           }
           case "lstbx_declined_repeat_requests":{
               request_id = $('#lstbx_declined_repeat_requests').val();
               alert(request_id + " declined");
               break;
           }
       }
       //rest of the code