Refresh page based on selected options without using submit()

I'm currently building a webpage which allows people to enter information as well as selecting categories which the piece of information belongs to.

The category selection is based on 2 select drop down list. First one loads from DB, and after the user selected an option, the 2nd one then gets loaded. However, at this stage I'm only able to achieve this by using onChange="submit();" to get the 2nd list to reload. In the mean time, all information on the rest of the form needs to be retained.

I've copied the code for the 2 drop down lists here:

<select onChange="submit();" name="domain" id="domain" size="1">
      for ($i = 0; $i < count($domain_list1); $i ++) {
            echo "<option value=\"".$domain_list1[$i]['id']."\"";
            if ($_POST['domain'] == $domain_list1[$i]['id']) {
                  echo "SELECTED";
            echo ">";
            echo $domain_list1[$i]['name'];
            echo "</option>";

<select name="category" size="1" <?
if ($category_list1 == null || count($category_list1) == 0 ) {
      echo "Disabled>";
} else {
      echo ">";
      for ($i = 0; $i < count($category_list1); $i ++) {
            echo "<option value=\"".$category_list1[$i]['id']."\"";
            if ($_POST['category'] == $category_list1[$i]['id']) {
                  echo "SELECTED";
            echo ">";
            echo $category_list1[$i]['name'];
            echo "</option>";

What I'm concerned as that because I'm utilising the submit() function to reload the page (and populating 2nd list), it'd be hard to differenciate whether I'm just reloading the list, or whether I'm really submitting the form.

Has anyone got ways to achieve
1. Load the 2nd dropdown list based on first one's selection
2. Still retain the rest of info on the page

I'm using PHP / MYSQL / and some Javascript on the page too.
Who is Participating?
bugs021997Connect With a Mentor Commented:
I understand what you are trying to achieve, this can be easily achieved without a refresh on the current page using AJAX which will solve your problem for restoring the other form element values as well.

Check the below example site which gives you a detailed walk through on this...

Using the below example you can form the code for the dropdown...
BogoJokerConnect With a Mentor Commented:
bugs suggestion of AJAX is a good idea.  If you want to stick to your current method you could use javascript to change the action of the form right before you submit (seeing as you already submit onchange you must expect your users to have javascript enabled).

<form action="page2.php" method="post">

  <!-- When this changes, it submits the form to page1.php
  <select name="selectList" onchange="this.form.action='page1.php';this.form.submit();">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>

  <!-- When the user clicks this, it goes to the normal page2.php -->
  <input type="submit" value="Submit" />


However if you were to do this with AJAX, then the page would not need to reload every time the user selects from the first select list.  Also the AJAX's XMLHttpRequests are smaller in size, so there will be less bandwidth and less server-side processing required, since its only generating the list and not an entire page.

- Joe P
RightNLConnect With a Mentor Commented:
go for the ajax solution..

if you really don't want to go the javascript route you could have php check all the changes .. it's a bit more work but it certainly does the trick.. just let php create hidden values and check the new values against the old ones on every submit.

skumara_samyConnect With a Mentor Commented:
If you don't want to implement AJAX..then u can use this alternate,
Anyway you load the second dropdown box  data from DB, based on the selected value.
(I assuming your datas are not more than 100 records , that'swhy you select the dropdown box i right ??)
ok,let us see
1.First you create one array in php and get all the datas for your second dropdown.
2.pass this array as parameter to the onchange javascript function of first dropdown..
3.Now you filter the records by  first dropdown selected value Vs array..and store it in to the
seperate array.
4.using that array you populate OPTIONS for the second drop down..

that's all ,
(it's a  simple method for less records )

yuhannlAuthor Commented:
Thanks guys!
I had to award more points to bug as he responded quickly even though others have provided me with samples & codes.

I did however got to the sites he suggested and done coding by following the instructions.

Thanks to you all, and all the best.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.