2

I am working on an administrative form where I have to select the client first and then select the building.

I have in the database a table with clients and another with the buildings of the clients correctly associated.

The problem is that I I wanted to do a select with the clients and a select with the buildings but instead of showing all the buildings, only showing the ones of the selected client.

I was able to do the code below after a lot of research, but I could not get it to fetch the values to bd to the salect of the building.

This form is for managers to assign tasks to technicians, where technicians will have to do pre-contracted services.

<!DOCTYPE html>
<html>
<head>

<script>
function populate(s1,s2){
 var s1 = document.getElementById(s1);
 var s2 = document.getElementById(s2);
 s2.innerHTML = "";
 if(s1.value == "Chevy"){
  var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
 } else if(s1.value == "Dodge"){
  var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
 } else if(s1.value == "Ford"){
  var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
 }
 for(var option in optionArray){
  var pair = optionArray[option].split("|");
  var newOption = document.createElement("option");
  newOption.value = pair[0];
  newOption.innerHTML = pair[1];
  s2.options.add(newOption);
 }
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>

as a final result would have to be for example if I select the client AAA must appear in buildings only the buildings associated with the customer AAA:

AAA-buildings1

AAA-buildings2

AAA-buildings3

...

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
NoobDEV-GBL
  • 354
  • 3
  • 20

1 Answers1

2

If I understand the question, you wish to (a) trap the user's SELECT choice of client, and then use that information to get the appropriate info from the database in order to populate the second SELECT.

This is exactly the type of scenario for which AJAX was created. It's actually pretty simple (more simple with jQuery than with pure js, but isn't everything...). Here are some examples on how it works:

dropdown options is dependent from another dropdown options (all value from database)

A basic video tutorial re ajax (pure javascript)

Code Examples:

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="slct1" name="slct1">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>

JS/JQuery:

$('#slct1').change(function(){
    let s1 = this.value;
    $.ajax({
        type: 'post',
         url: 'myajax.php',
        data: 's1=' + s1
    }).done(function(d){
        $('#slct2').html(d); //"d" can be any varname you want (here AND line above)
    });
});

PHP file: (myajax.php)

<?php
    $sel1 = $_POST['s1'];

    if ($sel1 == 'Chevy'){
        $out = '<option value="Cobalt">Cobalt</option>';
        $out += '<option value="Camaro">Camaro</option>';
        $out += '<option value="Malibu">Malibu</option>';
        $out += '<option value="Silverado">Silverado</option>';
    }elseif ($sel1 == 'Ford'){
        $out = '<option value="Model A">Model A</option>';
        $out += '<option value="F150">F150</option>';
        $out += '<option value="Mustang">Mustang</option>';
        $out += '<option value="Mondeo">Mondeo</option>';
    }

    echo $out;

Example 2:

Untested and off-the-cuff, but you get the idea

<?php
    include 'connect.php'; //connects to MySQL and creates $conn

    $sel1 = $_POST['s1'];

    $query = "SELECT * FROM `cars` WHERE `brand`='" .$sel1. "' ";
    $aR = mysqli_query($conn, $query);

    $out = '';
    while ($r = mysql_fetch_assoc($aR)){
        $out .= '<option value="' .$r['model']. '">' .$r['model']. '</option>';
    }
    echo $out;
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • ok i see, but my problem is implemente the sql query on your (myajax.php) file... how i make the query there? normal way? – NoobDEV-GBL Mar 28 '19 at 11:05
  • ok, tanks, i will test taht as asap i end the ical events email, i will tell you wen tested, tanks – NoobDEV-GBL Mar 28 '19 at 16:47
  • mate, i was goig nuts for that not working, but whit your help is working fine, relly tanks for the help mate, long live – NoobDEV-GBL Mar 28 '19 at 17:37
  • just one more question, if i chage the value and i have no results from sql, how i make the select empty again? – NoobDEV-GBL Mar 28 '19 at 17:53
  • 1
    From the PHP side, you will echo *something* back, and check for it in the AJAX `.done()` function. Perhaps you would echo back `nodata` or some such. Then, if `recd=="nodata"` then javascript/jQuery can replace the contents of the select `$('#slct2').html('');` OR `$('#slct2').html('');` *(or hide the 2nd select, or what-have-yer)* – cssyphus Mar 28 '19 at 18:16
  • 1
    Sorry, I used the wrong var for this answer's example - I should have used `d` instead of `recd`, as in `.done(function(d){` So, the `d` var (or `recd` or whatever you choose to call it) will contain whatever was `echo`d from the PHP side. So, if your MySQL search returns nothing, then perhaps you might `echo('nodata');` from the PHP side. Back on the js side, inside the `.done()` function, you would test for that value and act accordingly. – cssyphus Mar 28 '19 at 18:38
  • Here is [another answer](https://stackoverflow.com/questions/55402831/merge-two-forms-into-one-form-handler/55403911#55403911) that has some additional AJAX info/tricks. Upvote if you find some useful thoughts... – cssyphus Mar 28 '19 at 18:42
  • your code is working fine, but I have a class named "select2" in my bootstrap, if I remove this class it works fine if I do not have sql resuts, but when I apply this class the selectbox does not remove the last selected value. even validating the variable of how you told me, and putting the suggested code, has no changes – NoobDEV-GBL Mar 29 '19 at 10:12
  • so i find a selution to my problem : on the `done(function(d){` i added `$("#local").val('').trigger('change'); ` to remove the selected value, then i added `$("#local").empty().trigger('change'); ` to remove the options inside, and then i insert the new values from sql `$('#local').append(d).trigger('change');` now works fine – NoobDEV-GBL Mar 29 '19 at 10:43
  • I would like to thank you for all the help you gave me, it was very useful, I am now of portugual, continue with the good work, my friend. – NoobDEV-GBL Mar 29 '19 at 10:46
  • 1
    Hey, well done. Glad to see that you got it solved. Happy coding, perhaps our paths will cross again. *melhor sorte* – cssyphus Mar 29 '19 at 12:43