CODEWITHSUNDEEP
phphtml
Tim C
Tim C

Reputation: 5714

PHP Auto update selectbox based on 1st selectbox

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?

Upvotes: 1

Views: 803

Answers (4)

user4610687
user4610687

Reputation:

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) ).

Upvotes: 0

CoursesWeb
CoursesWeb

Reputation: 4237

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.

Upvotes: 0

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

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

  1. When you use php it's only possible with page refresh. but with ajax without page refresh it's possible.

  2. 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

Upvotes: 0

skornous
skornous

Reputation: 71

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

Upvotes: 1

Related Questions