Refresh page based on selected options without using submit()

Posted on 2007-08-12
Last Modified: 2013-12-13
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.
Question by:yuhannl
    LVL 14

    Accepted Solution

    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...
    LVL 17

    Assisted Solution

    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
    LVL 5

    Assisted Solution

    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.

    LVL 3

    Assisted Solution

    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 )

    LVL 3

    Author Comment

    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.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
    This article will show, step by step, how to integrate R code into a R Sweave document
    The viewer will learn how to dynamically set the form action using jQuery.
    In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now