web-dev-qa-db-fra.com

Passer la valeur du formulaire en utilisant Ajax

En référence à ma question précédente jQuery Ajax pour trois listes déroulantes

Sur la page1)

Je choisirai le menu déroulant Bâtiment (à partir de la base de données) et le menu déroulant Étage (par appel Ajax)

alors l'url passera comme: index.php? option = com_rsform & formId = 8 & form [Building] [] = 1 & form [Floor] [] = 3

Sur la page2)

Dans le menu déroulant Bâtiment indiquant l'option avec la valeur 1 , mais le menu déroulant Floor n'affiche que "veuillez sélectionner" et [~ # ~] pas [~ # ~] obtenir la valeur (qui devrait être 3 )

Donc, dans le script, je dois écrire une instruction if pour floor ONLY, comme si l'étage recevait une valeur de url, puis afficherait la valeur, sinon exécuter le script pour appeler ajax pour floor. Les unités dans les deux cas (continuer à partir d'un autre formulaire ou commencer à nouveau par page de formulaire) obtiendront une valeur par appel à Ajax.

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

});
joomla-3.xjavascriptjqueryajax
1
allogos

Puisque vous avez le bâtiment et le sol dans l'URL, ajoutez simplement une instruction if à la liste déroulante de votre sol pour ajouter selected = "selected" à la bonne option.

Si vous souhaitez sélectionner un seul bâtiment ou un seul étage, il n’est pas nécessaire de transmettre ces données sous forme de tableau, il suffit de les transmettre sous forme d’entier. Cet exemple de code serait basé sur la transmission d'un seul entier plutôt que d'un tableau.

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

Pour la troisième liste déroulante, vous pouvez utiliser la valeur de votre variable floor pour effectuer un appel ajax contre votre base de données et obtenir quel que soit le résultat obtenu pour la troisième liste déroulante, puis définissez la valeur de la troisième liste déroulante sur ce résultat.

1
Terry Carter