JS and PHP. jsfiddle. How do I optimate the script to save into db and make selected?

Question

I have never been working with JS so im very lost here.

1. How do I save the values of countries and states into the db with php?
2. How do I set selected in < option > on the values that is in the db for current user?

http://jsfiddle.net/bdhacker/eRv2W/

<script language="javascript">
            populateCountries("country", "state");
            populateCountries("country2");
        </script>

Been trying to do it but i cant.

thanks

Answer 1

What you are asking is not a single question but is an easy task. Its 101 in web-technology. You should read some articles first or take a web lesson before asking questions. You have not asked a specific question and so I am pretty sure this question will be marked as "too broad".

The comments you got in your question are very accurate and way to go. I will too try and get your ball rolling. Please understand that since the question is too broad, there is no way we can give you a full code that you can just copy paste and run. Instead I will give you pointers and then you can work things on your own.

Understand this first:

1. Server and Client are two different things. They both need to exchange data. PHP is server side and JS is client side.
2. In client side, you have some data (SELECT BOX in your case) and you want to send this data to the server because only server has access to the database.
3. Create a page in PHP called savedata.php in your app. This page will be responsible for saving the data to database once it has got the data.
4. Create a page called getdata.php in your app. This page will be responsible for getting the data from database if you request.
5. Then you need to create two "AJAX" functions in your client code i.e. in javascript that sends the data to savedata.php to save the data and getdata.php to get the data.

First let's code the client side:

Enclose your select tags with a <form> tag.

<form id="country-form" method="POST" action="">
        <br/>Select Country (with states):
        <select id="country" name="country"></select>
        <br />State:
        <select name="state" id="state"></select>
        <br/>
        <br />Select Country (without states):
        <select id="country2" name="country2"></select>

        <input type="submit" name="submit" id="submit" value="Save"></input>
</form>

Now lets code in javascript. We will use jquery and write an ajax request to save the data if the "Save" button is clicked.

//save data.
$(document).ready(function() {
    $("#country-form").submit(function(event) {
        event.preventDefault();

        $.ajax({
            method: "POST",
            url: "http://localhost:80/myapp/savedata.php",
            data: {
                country: $("#country").val(),
                state: $("#state").val(),
                country2: $("#country2").val()
            }
            success: function(result) {
                alert(result);
            }
        });
    });
});

Let us understand what we have done here:

1. We have registered jquery so that when the document is loaded, it starts listening for "submit" of your form. When your form is submitted, we first prevent the default behaviour so that it does not submit the request and refresh the page.
2. We tell the ajax method to send the data via the post method to the given url and to send the given data. Once the data is submitted, the your PHP file returns some data to confirm the client that the operation was success or not. This is called a callback function. Read about it. Its awesome.

Now lets code up how to get the data.

//get data.
$(document).ready(function() {
    $.ajax({
        method: "POST",
        url: "http://localhost:80/myapp/getdata.php",
        success: function(result) {
            $("#country").val(result['country']);
            $("#state").val(result['state']);
            $("#country2").val(result['country2']);
        }
    });
});

What this code does is:

1. It sends an ajax request to your given URL and when the server returns the data, the callback function is called. The server will return the an array with all the values. In client side you just extract these values and set these values in the HTML via jQuery.

Now lets code server side. Since you did not say you are uncomfortable with server side code, I am gonna assume you know PHP and database well. So lets skim this part quickly.

In your savedata.php function, catch the data explained in this post. You do this using the $_POST variable. e.g. $_POST['country'];

In your getdata.php code. E.g.:

$data = array();
$data['country'] = 1;
$data['state'] = 2;
echo json_encode($data);