Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi all,

I've been working on populating a secondary combobox after selecting data in a primary one...

Let's say I select a customer from the first combobox.

And now I want the projects that belong to that customer to appear into a second combobox.


By now this is my main combobox:
PHP
<div>
  <div id="elementFormulariEtiqueta">Client:</div>
  <select id="elementFormulari" style="width: 300px; height: 30px" name="cbClient" onchange="onChangeClient(this.value)">
    <option value="--- Select ---">--- Select---</option>
    <option value="My first customer">My First Customer</option>
  </select>
</div>


And this is the secondary combobox:
PHP
<div>
  <div id="elementFormulariEtiqueta">Projecte:</div>
  <select id="elementFormulari" style="width: 300px; height: 30px" name="cbProjecte" >
    <option value="--- Select ---">--- Select ---</option>
  </select>
</div>


As you can see the main combobox has an event onChange that points to onChangeClient function which is:

PHP
<pre><script>
  function onChangeClient(client)
  {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function()
    {
      if (this.readyState == 4 && this.status == 200) 
      {
        //document.getElementById("txtHint").innerHTML = this.responseText;  (I've used this to know if the function gets called...)
        document.getElementById("cbProjecte").append(this.responseText); // This is not working for me...
      }
    };
    xmlhttp.open("POST","temps_onChangeClient.php?q="+client,true);
    xmlhttp.send();
  }
</script>


At the bottom of my form I've added:
PHP
<p>Suggestions: <span id="txtHint"></span></p>

I've used this to be able to see what the temps_onChangeClient.php file returns.
Notice that, if I add echo('return this'); and uncomment the document.getElementById("txtHint").innerHTML = this.responseText; I can see the result after "Suggestions:".

The temps_onChangeClient.php file obtains the q parameter, searches the database and returns the database query resulting row, but, in order to keep thingseasier, I've changed it for:
PHP
  $arr[0] = '0';
  $arr[0] = '1';
  $arr[0] = '2';
  $arr[0] = '3';
  $arr[0] = '4';
  $arr[0] = '5';
  $arr[0] = '6';
echo($arr);


With my current data, when I select My first customer, I can see the result "Suggestions: Array" which tells me I'm getting an array (the names of the projects that belong to that customer). I'm getting also Array if I use the replacement to keep things easier I've shown before.

Now I need to add those results into the secondary combobox, but I don't know how to do it...

Searching information about this I'm seeing really strange JSON scripts which I don't understand.

Could you help me in this last step?

Thank you very much!



Old question:
I've never done that before, and I'm wayyyy lost.

I have a MySQL database and I'm making a small web page that should help me keep track of my working hours...

I'm doing that with PHP and MySQL.

My intention is to select a project (combobox 2) after selecting a customer (combobox 1).

I've seen some examples using Ajax.

But, before starting with something new... I've read in the Wikipedia smartphones can't cope with Ajax... (<a href="https://en.wikipedia.org/wiki/Ajax_(programming)">See the first one in Ajax drawbacks</a>[<a href="https://en.wikipedia.org/wiki/Ajax_(programming)" target="_blank" title="New Window">^</a>]).

I plan to start and stop my tasks from my phone so this would be needed...

How would you do it?  given I'm working in PHP and MySQL... which would be the best option to be able to dynamically fill one combobox after selecting one option in another one?

As always, thank you very much!

:thumbsup:


What I have tried:

Searching examples, reading documentation, trying it...
Posted
Updated 24-Jul-19 4:28am
v2
Comments
Richard Deeming 23-Jul-19 10:37am    
Wikipedia is wrong - all modern smartphones support Javascript and AJAX. Most of them support advanced features too[^].

The only hold-out is Opera Mini[^], which doesn't support Javascript at all.
Joan M 23-Jul-19 10:39am    
I thought this was the case... but I have enough problems knowing how to program robots... :D:D:D and preferred to ask here... and what do you think about the best way of doing it?
Richard Deeming 23-Jul-19 10:44am    
AJAX - possibly using the fetch API[^] (browser support[^], polyfill[^]) - would be my preferred option.

Otherwise, you'd need to put the lists in a <form>, use Javascript to submit the form when the first list changes, and use PHP to populate the second list based on the POSTed data.
Joan M 23-Jul-19 10:45am    
Thanks Richard, I'll take a look at those links. ;)

1 solution

That was easy at the end...

I've replaced the Id in the onchange function for the right one...

And then I've recreated the complete combobox in the PHP file temps_onChangeClient.php.

At the end I've replaced append for innerHTML like in the working sample.

That was it!
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900