Jump to content

Select - then auto values


bwakad
 Share

Recommended Posts

I am trying the below code to populate my values of second select, based on first select. But I don't know what I do wrong.

-EDIT - I have used POST for both, and something happens... but the values do not get passed to "province". Just displays empty...

// profile template, for registration purpose

<form>
<select id='country' name='country'> // first select
        <option value=''>Any</option>
        <?php
        foreach($pages->get("/personal-info/countries/")->children() as $country) {
            $selected = $country->name == $input->whitelist->country ? " selected='selected' " : '';
            echo "<option$selected value='{$country->name}'>{$country->title}</option>";
        }
       ?>
</select>

<select id='province' name='province'>
     <option value=''>Any</option>
</select>
</form>

// profile template, for registration purpose - EDIT - updated /path/

// In bottom I use this code to request data for second select:
<script type="text/javascript">
    $(function() {
        $("#country").bind("change", function() {
            $.ajax({
                type: "POST",
                url: "/getprovince/",
                data: "country="+$("#country").val(),
                success: function(html) {
                    $("#province").html(html);
                }
            });
        });
    });
</script>

// on page: /getprovince/ file, used to retrieve select values.

here's the code for now:

<?php 
    $country = $_POST["country"];
    foreach($pages->get("/personal-info/countries/{$country}/")->children() as $province) {
    $selected = $province->name == $input->whitelist->province ? " selected='selected' " : '';
    echo "<option$selected value='{$province->name}'>{$province->title}</option>";
    }
?>
Link to comment
Share on other sites

If the ajax call works, just return $_POST as a string from the backend and see if the right values get send to the backend. If there's something wrong with the ajax call, the send data shouldn't matter. Just try to debug both parts seperatly. 

  • Like 1
Link to comment
Share on other sites

For some reason it now works with the code as is !

As I was looking for the $_POST return I thought, maybe the location of the file was an issue...

Changed the physical location of "getprovince.php" - which did not work. I then placed the file back in it's original physical place.

After that I thought, in /getprovince/ let me echo out $_POST["country"]. I went to the front end form and it was working.

I then removed the echo statement again, and everything still works.

VERY STRANGE ...........

Link to comment
Share on other sites

Now for the third select (city) which is more difficult... I need to bind #country AND #province.... and then POST both values.

But I am not really sure how to proceed with this. My selector will be:

foreach($pages->get("/personal-info/countries/{$country}/{$province}/")->children() as $city) {
<script type="text/javascript">
//$(document).ready(function(){
    $(function() {
        $("#province").bind("change", function() {
            $.ajax({
                type: "POST",
                url: "/getcity/",
                data: "country="+$("#country").val(),
                      "province="+$("#province").val(),
                success: function(html) {
                    $("#city").html(html);
                }
            });
        });
    });
</script>
Link to comment
Share on other sites

There are some things wrong in this code.

                data: "country="+$("#country").val(),
                      "province="+$("#province").val(),

These commas aren't for seperating different data, but to seperate different datahashes in the object, like this:

{
  name: data,
  name: data,
  name: data
}

Then you need to take a look at the jQuery docs, which types "data:" does accept and use: http://api.jquery.com/jQuery.ajax/

The important part: 

  • data
    Type: PlainObject or String or Array
    Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

So you need to concat your data to a object, string or array and then pass it to data.

  • Like 1
Link to comment
Share on other sites

I'm on mobile and can't help more than this, but did you notice that your first js line is commented out?

Yes I did. The script is not inside head.inc or foot.inc, I used it with and without this line and still works (strange)... but in my foot.inc I have this :

<script>
     $(document).foundation();
</script>

And I want the script which I need for cascading, under that foot.inc script later... Just don't now if the foundation is already calling $(document).ready(function(){.

Link to comment
Share on other sites

Yes I did. The script is not inside head.inc or foot.inc, I used it with and without this line and still works (strange)... but in my foot.inc I have this :

<script>
     $(document).foundation();
</script>
And I want the script which I need for cascading, under that foot.inc script later... Just don't now if the foundation is already calling $(document).ready(function(){.

$(document).ready(); is a jQuery function which is called after the DOM is fully loaded. This is indepentend of the framework you seem to use, as long as the jQuery libraray gets loaded.

Link to comment
Share on other sites

According to documentation I have to create 2 var and then pass those in the data. The bind I am not sure of:

    $(function() {
        $("#country","#province").bind("change", function() {
            var country = "country":$("#country").val();
            var province = "province":+$("#province").val();
            $.ajax({
                type: "POST",
                url: "/getcity/",
                data:     {country: country, province: province},
                        
                success: function(html) {
                    $("#city").html(html);
                }
            });
        });
    });
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...