Passing form value using Ajax

Question

Referring to my previous Question jQuery Ajax for three drop down

On page1)

I will select dropdown Building (populating from db) and dropdown Floor (by Ajax call)

then url will pass like: index.php?option=com_rsform&formId=8&form[Building][]=1&form[Floor][]=3

On Page2)

In dropdown Building showing the option with value 1 but dropdown Floor is only showing “please select” and NOT getting the value (which should be 3)

So in script I have to write if statement for floor ONLY, like if the floor getting value from url then show the value else run the script to call ajax for floor. Units in both cases (continue from another form or start fresh by form page) will get value by Ajax call.

here is code:

jQuery(document).ready(function($) {

var Floor_id    = $('#Floor');
var Building_id = $('#Building');
var Unit_id     = $('#Unit');
var initial_Floor_html = '<option value="">Please select...</option>';
var initial_Unit_html  = '<option value="">Please select...</option>';

Floor_id.html(initial_Floor_html);
Unit_id.html(initial_Unit_html);

Building_id.on('change', function(e) {

    var selectvalue = $(this).val();

    //Display 'loading' status in the target select list
    Floor_id.html('<option value="">Loading...</option>');

    if (selectvalue == '') 
    {
        Floor_id.html(initial_Floor_html);
    } 
    else 
    {
        //Make AJAX request, using the selected value as the GET
        $.ajax({
            url: 'index.php',
            data:'option=com_parkingreservation&task=getFloorsHTML&fvalue='+selectvalue,
            success: function(output) {
                Floor_id.html(output);
                updateSelect(Floor_id.val());
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status +  ' ' + thrownError);
            }
        });
    }
});

Floor_id.on('change', function(e) {
    updateSelect($(this).val());
});

function updateSelect(selectvalue) 
{
    //Display 'loading' status in the target select list
    Unit_id.html('<option value="">Loading...</option>');

    if (selectvalue == '') 
    {
        Unit_id.html(initial_Unit_html);
    } 
    else 
    {
        //Make AJAX request, using the selected value as the GET
        $.ajax({
            url: 'index.php',
            data:'option=com_parkingreservation&task=getUnitsHTML&uvalue='+selectvalue,
            success: function(output) {
                Unit_id.html(output);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status + ' ' + thrownError);
            }
        });
    }
}

});

Answer 1

Since you have the building and floor both in the url just add an if statement to your floor dropdown to add selected="selected" to the correct option.

Just as a note if your dropdown is only selecting a single building or floor there is no need to pass that data as an array, just pass it as a single integer. This code example would be based on passing a single integer rather than an array.

<?php
$JInput = JFactory::getApplication()->input;
$building = $JInput->get('building','','int');
$floor = $JInput->get('floor','','int');
?>

<select name="bulding">
<option value="1" <?php echo (($building== 1)?'echo 'selected="selected"':'');?>>Building 1</option>
<option value="2" <?php echo (($building== 2)?'echo 'selected="selected"':'');?>>Building 2</option>
<option value="3" <?php echo (($building== 3)?'echo 'selected="selected"':'');?>>Building 3</option>
</select>

<select name="floor">
<option value="1" <?php echo (($floor == 1)?'echo 'selected="selected"':'');?>>Building 1</option>
<option value="2" <?php echo (($floor == 2)?'echo 'selected="selected"':'');?>>Building 2</option>
<option value="3" <?php echo (($floor == 3)?'echo 'selected="selected"':'');?>>Building 3</option>
</select>

For the third dropdown you can use use the value from your floor variable to make an ajax call against your database and get whatever the result is for the third dropdown, then set the value of the third dropdown to that result.