PHP Auto update selectbox based on 1st selectbox

Question

I have 2 selectboxes

 <h3>Results</h3>

   <select id="register_form" name="sport" />
    <option value="Rugby">Rugby</option>
    <option value="Cricket">Cricket</option>
    <option value="Football">Football</option>
    </select>  

    <?php
    echo'<select name="match">';
    echo'<option value="'.$row['event_id'].'">'.$row['team1'].' VS '.$row['team2'].'</option>';
    echo'</select>';
   ?>

   <input id="register_form" type="submit" value="Display" name="submit" />

User searches for a result by:

selecting sport type in 1st selectbox and then in 2nd selectbox option values are populated based on sport type.

Is it possible to do this in PHP without the user having to first press submit to get the $_POST value of sport type?

What is my best option here?

I was hoping for a PHP solution since I dont know AJAX...but if it is only possible with AJAX I guess I will have to learn — , May 15 '15 at 14:42
See when you use php it's only possible with page refresh. but with ajax without page refresh it's possible. — Alive to die - Anant, May 15 '15 at 14:43
You can achieve this with Ajax only since you do not want the reload the page every time the user select an option from first select box. There are many solutions/tutorial are available online. Search on google. — Capri82, May 15 '15 at 14:47

score 1 · Answer 1 · answered May 15 '15 at 14:45

1

PHP always need to reload the page to refresh your informations, so, as anant kumar singh said, you need to use AJAX for that. And as yak613 said, jQuery will help you to use AJAX easily

answered May 15 '15 at 14:45

skornous

71
1
5

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

1.Ajax is the only option what you asked for that(without page refresh)

When you use php it's only possible with page refresh. but with ajax without page refresh it's possible.
helping links are:-

Use jQuery to change a second select list based on the first select list option

https://www.daniweb.com/web-development/php/threads/372228/php-and-ajax-auto-populate-select-box

https://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax

edited May 23 '17 at 11:45

Community

1
1

answered May 15 '15 at 14:48

Alive to die - Anant

70,531
10
51
98

1

_ajax is the only option_? not really, you could also pre load values – Kevin May 15 '15 at 14:56
I like it Ghost, pre load values and then some javascript – javier_domenech May 15 '15 at 15:03

score 0 · Answer 3 · answered May 15 '15 at 14:57

0

You can use this Multiple Select Dropdawn lists: http://coursesweb.net/ajax/multiple-select-dropdown-list-ajax_t , it can be used for multiple sets of Select lists.

answered May 15 '15 at 14:57

CoursesWeb

4,179
3
21
27

score 0 · Answer 4 · answered May 15 '15 at 15:04

I've faced with the same problem in my project. But the needed functionality was higher - not two dependent selectboxes and bigger number. I've written a simple function to load my selectboxes:

//formId - form where selectbox is
//name - attribute "name" of selectbox
//dataSourceUrl - url to PHP-file
//affectingField - string with value that filters the selecbox's data
function loadSelectbox( formId, name, dataSourceUrl, affectingField ){
//console.log('Loading data to selectbox name="'+name+'":');

var selectbox = $('#'+formId+' select[name="'+name+'"]');

if(selectbox){
    //console.log("Selecbox found");

    if(affectingField != null){
        var affectingValue = $('#'+formId+' [name="'+affectingField+'"]').val();
        dataSourceUrl += '?affectingValue='+affectingValue;
    }

    var options = selectbox.find('option');

    var jqxhr = $.ajax({
        url: dataSourceUrl,
        dataType: 'text'
    })
    .done(function(data) {
        //console.log(data);
        if(data != ""){
            var optionsObject = JSON.parse(data);
            var i = 0;
            console.log(optionsObject);
            var options = [];
            $(optionsObject).each(
                function(){
                    options[i] = '<option value="'+$(this)[0]['val']+'">'+$(this)[0]['text']+'</option>';
                    i++;
                }
            );

            selectbox.html(options);
            if(urlParamsSet[name] == false){
                setParamFromUrl(name); 
            }
        }
        else{
            selectbox.html('<option value="">Все</option>');
        }
    })
    .fail(function() {
        alert("Problems with server answer");
    })

    selectbox.prop("disabled", false);
}
else{
    console.log("No selectbox with such name");
}

}

Not saying that this code is perfect, but it works. PHP-file must return the values to selecbox in JSON format (convert from with structure: array(index, value, text) ).

PHP Auto update selectbox based on 1st selectbox

4 Answers4

Linked