Select - then auto values

[bwakad]

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>";
    }
?>

[Soma]

You do a GET and then you catch POST?

[bwakad]

How do I post it back by ajax/javascript? I thought it was doing this automatically....

[Martijn Geerts]

In the template you search for POST, but on the form you don't post the value.

$.ajax({
  type: "POST",
  ...
  etc.

[bwakad]

Updated both to POST. See first post in topic...

[Soma]

ProcessWIre urls are "/path/" not "/path"

[bwakad]

Maybe it has to do with the data: "country="+$("#country").val(),

I read it as:

$_POST['country'] = $country.val()

should I change that?

[LostKobrakai]

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. 

[bwakad]

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

[bwakad]

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>

[diogo]

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

[LostKobrakai]

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.

[bwakad]

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

[LostKobrakai]

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.

[bwakad]

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);
                }
            });
        });
    });

[LostKobrakai]

That's correct, the full syntax would be: 

data: {
  country: $("#country").val(),
  province: $("#province").val()
}