0

i have a form which has :

<form name="myForm" action="a.php" method="post">
    <fieldset>
        <label>class</label>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>

        <label>Subject</label>
        <select>
            <option>some value from database</option>
            <option>some value from database</option>
            <option>some value from database</option>
            <option>some value from database</option>
        </select>
    </fieldset>
<form>

the thing is:

i want to show the 3 options(1,2 and 3) from the first drop down select values for the user. Suppose the user selects 1 then s/he will get corresponding values from database as the drop down values of the 2nd select. Then s/he will select one from these drop down values. finally the form will be submitted manually. Obviously depending on the first drop down select value, the second drop down select value will change accordingly.

So the challenge is to take the value from the first select drop down values to use it in the second select drop down values BEFORE THE FORM IS SUBMITTED MANUALLY. How can I do that? I am using php. What else do I need?

ADDED LATER:

so far I have got idea about the solution of the posted prob.

NOW think that,

I have to retrieve values for the second drop down list depending on the first one. If have a third drop down value to retrieve from database depending on the first and second one , and then a fourth drop down value depending on the first three , and so on for the fifth, sixth ... then how can I implement that please?

all the drop down <select></select> elements will sit side by side horizontally on the same page.

Improve this question

4 Answers 4

Reset to default
1

You need client-side scripts for it. Here is an article how to implement this feature using jQuery (popular JS framework)

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

@biakaveron, I have put addendum to my post . any reference to any article regarding the solution?
There is no difference - each "parent" drop-down must have its handler (using .change(function() {...}) call). Drop-down X changed -> reload Drop-down (X+1). With jQuery it becomes so easy ;)
@biakaveron, suppose drop-down1 in page a.php (this page is originally an html file with php extension) has a handler which calls through ajax another php (say 1.php)page. then where should the the handler for the drop-down code (which should also call another php page like 1.php through ajax)existing in 1.php be written? if 1.php has html definition in it, then a.php can't use it through ajax to get output from it, i experienced this prob. And the handler for the drop-down in 1.php can't be written in a.php, I guess. Where is the solution then?
Client code should be on client page (a.php in your example). Server side script (1.php) will just read input data ($_GET or $_POST) and return its response.
@biakaveron, for only two drop down lists, I can implement that i.e depending on the choice of the first dropdown, options for the 2nd drop down will appear. But how can I implement the 3rd drop down , options for which will depend on the selection of 2nd drop down ? ANd the 4th , 5th one? And all the drop downs have to appear on the same page horizontally. SOlution plz
|
0

You will need Javascript to handler this, override the onSelectionChange event of List Control and on change event get the values for second drop down box from server side script.

Improve this answer

4 Comments

suppose I call a javascript function using 'onSelectionChange' but how can I use the javascript variable from it in php to retrieve values from database?
@sof_user, Make a server side wrapper which will return the values to be populated in the select field. call it onSelectionChange (Ajax call) event and parse the result and populate it in second drop down and so on the third one..
ajax call will return the variable as a javascript variable. To ppopulate it in the second drop down, how can I use a javascript variable in php? php will be used to retrieve values from db as the 2nd drop down list values.
i have added a new prob to my post. Any solution?
0

you need to use javascript and AJAX to fetch the values for the second dropdown dynamically. For example using jQuery it would be:

$('#select1').change(function() {
   var selectedVal = $(this).val();

   //make an AJAX request to get your values depending on selectedVal
   //and update the values for the second select
}

In a PHP script you would then have to evaluate an incoming parameter representing the user selection for the first select and then return, for example in JSON format, the data you load from the database.

Edit: The AJAX request would then be made like this:

$.post("getsecondvals.php", { value: selectedVal }, function(data) {
   var result = $.parseJSON(data);
   $('#select2').html(''); //delete any old values

   for (var entry in result) {
      var option = $('<option></option>');
      option.text(entry);

      $('#select2').append(option);
   }
});

And your PHP script could be structured like this:

<?php
$selectedValue = $_POST['value'];
// now include everything required for your database connection
// and get the categories, use prepared statements

// finally, your resulting array should be non-associative, so
// always add new values with "[]" operator
// assuming $values is your array containing the valid options, do this:
echo json_encode($values);
?>
Improve this answer

2 Comments

I get selectedVAl as a javascript variable. Then how can I use it in php?
I have added a new prob to my post. Can u help?
0

You can try this :

onchange = "$('select[name=\'xyz\']').load('yourUrl/someFunction&country_id=' + this.value);"

this onchange attribute will be applied to first select box and give name to 2nd select box like :

The above code will send an AJAX GET request whenever you change the option from first drop down menu.

And fetch values from DB in the function which is called and return HTML. Eg:

  someFunction() {
     //get values from DB and loop
   String html = "<option></option>";
   return html;
}
Improve this answer

2 Comments

I don't have a good skill. Should I write the onchange part inside html <head> </head> part? what does 'xyz' mean? what about the 3rd, 4th .. drop down ? Can u tell in a bit more details?
yes you can write inside head tag...and xyz is just a dummy name...you need to replace it with your select name attribute !!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.