-4

I have a select box as shown below.

          <td align="center">
           <select id="selectW" name="type" onChange="this.form.submit()">
             <option value="select...">select</option>
             <option value="dollars">dollars</option>
             <option value="BP">BP</option>
           </select>

What i am looking is to generate another Select box whose options needs to be fetched from MySQL database based on the value that user selected in #selectW element.

I tried this:

<select id="selectW" name="type" onChange="this.form.submit()">

But it submit the form that it is inside it.

am90
  • 201
  • 2
  • 11
  • 1
    Write some js-function and call it like `onChange="loadMoreData()"` – u_mulder Dec 27 '15 at 15:33
  • In general the JS function you run on the change event will either look at an existing JS array (initialised at page load) or run an AJAX operation to fetch this data from the server. – halfer Dec 27 '15 at 15:36
  • This is a classic AJAX situation. See code examples in this question: http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843 – cssyphus Dec 27 '15 at 17:40

1 Answers1

1

You need to understand the basic working of form. You can achieve your result by following these steps.

1- Let's Change the onChange event.

<select id="selectW" name="type" onChange="showSecondDropDown()">

What is going to happen is that when user select any value from #selectW list a java-script function named as showSecondDropDown() is going to call so it's time to add this function is JS.

2- Defining the JS function.

<script type="text/javascript">
    function showSecondDropDown() {
       //Now get the value of selectW.
       var userSelected = jQuery("#selectW").val();

       //Now we need to get values from MYSQL based on the "userSelected"
       // value. to do so we need to call AJAX.
       jQuery.ajax({
           url: "path/to/your/php/file/relative/to/this.php",
           data: {"userSelected": userSelected },
           success: function (resp) {
               //At this stage you will get the value
               //that your php file will generate. Then based on the format
               // That your php file is returning you can generate new
               // Select Box.
               console.debug(resp); //This will print your value in Console

               //Let's assume if your php is returning full html select text
               // then you can append that in DOM like this.
               jQuery("body").append(resp);
           }
       });
    }
</script>

3- create the PHP file. Remember in the step 2 url will be pointing to this file.

Now in this file you can access the userSelected as

$_REQUEST["userSelected"];

Use this value get data from Mysql then make a string of something like this ab

where a and b are generated from MYSQL. all you have to do is echo this string

echo  "<select><option> a</option><option>b</option>";
  • but how can I show in the same page, the new drop down list ? That's what I want – am90 Dec 27 '15 at 17:58
  • the above example will not change/refresh your page you will be remains on the same page. that's the purpose of AJAX –  Dec 27 '15 at 18:32
  • i tested it, it remains in the same page, but it won't let me add a new drop list – am90 Dec 27 '15 at 18:33
  • Can you firm me that ajax is working by copying and pasting the response from console to here ? console.debug(resp); this is the response i am interested –  Dec 27 '15 at 18:34
  • no, it just duplicate the content of my page, and the page went bad as design – am90 Dec 27 '15 at 18:35
  • edit your questions and paste the php script in your question form that is being called by ajax –  Dec 27 '15 at 18:37
  • I will do it tomorrow now it's sleep time, after long day of programming, I appreciate your help and talk to you tomorrow – am90 Dec 27 '15 at 18:39
  • wait, I will post it now, and see your reply tomorrow – am90 Dec 27 '15 at 18:43