Give array elements individual IDs when taken from PHP file with AJAX

Question

My index.php:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<form name="form1" method="POST">
    <select id="dropdown1" name="country" onchange="window.getStates()">
        <option> Select Country</option>
        <option value="1">Pakistan</option>
        <option value="2">India</option>
        <option value="3">USA</option>
        <option value="4">UK</option>
    </select>
    <input type="text" id="area" style="display: none;" size="16" placeholder=" Enter value"></input>
    <input type="button" id="submit" style="display: none" name="submit" value="submit" onclick="submit2()">
</form>

<script type="text/javascript">
function show() {
    document.getElementById('area').style.display = 'inline-block';
    document.getElementById('submit').style.display = 'inline-block';
}
function getStates() {
    var xmlhttp;
    try {
        xmlhttp = new XMLHttpRequest;
    } catch(e) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp) {
        var form = document['form1'];
        var country = form['country'].value;

        xmlhttp.open("GET", "http://localhost/getStates.php?country="+country, true);
        xmlhttp.onreadystatechange = function() {
            if(this.readyState == 4) {
                var s = document.createElement("select");
                s.onchange = show;
                s.id = "dropdown2";
                s.name = "state";
                s.innerHTML = this.responseText;

                if(form['state']) {
                    form.replaceChild(s, form['state']);
                } else
                    form.insertBefore(s, form['submit']);
            }
        }
        xmlhttp.send(null);
    }
}

function submit2() {
    var table = document.getElementById("dropdown1").value;
    var parameter = document.getElementById("dropdown2").value;
    var value = document.getElementById("area").value;
    $.ajaxSetup({
        url: "http://localhost/database.php",
        type: "POST",
    });
    $.ajax({
        data: 'table='+table+'&parameter='+parameter+'&value='+value,
        success: function (msg) {
            alert (msg);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {   
            alert('Error submitting request.'); 
        }
    }); 
}
</script>
</body>
</html>

getStates.php:

<?php
$states = array(
    "1" => array("Parameter 1", "Parameter 2", "Parameter 3", "Parameter 4", "Select"),
    "2" => array("Parameter 1", "Parameter 2", "Parameter 3", "Parameter 4", "Select"),
    "3" => array("Parameter 1", "Parameter 2", "Parameter 3", "Parameter 4", "Select"),
    "4" => array("Parameter 1", "Parameter 2", "Parameter 3", "Parameter 4", "Select")
);

if(isset($_GET['country'])) {
    $c = $_GET['country'];
    if(isset($states[$c])) {
        for($i = count($states[$c]) -1; $i>=0; $i--) {
            echo "<option value='".$states[$c][$i]."'>".$states[$c][$i]."</option>";
        }
    }
}
?>

database.php:

<?php
header('Content-type: text/html; charset=ISO-8859-1');
try {
    if(isset($_POST['table']) && isset($_POST['parameter']) && isset($_POST['value'])){
        $table = ($_POST['table']);
        $parameter = ($_POST['parameter']);
        $value = ($_POST['value']);
        $db = mysql_connect("localhost", "root", "");
        $select = mysql_select_db('records', $db);
        $query = "INSERT INTO `".$_POST['table']."` (Parameter,Value) VALUES ('".$_POST['parameter']."','".$_POST['value']."');";
        mysql_query($query, $db);
    }
} catch(Exception $e) {
    echo 'Erreur : '.$e->getMessage().'<br />';
    echo 'N° : '.$e->getCode();
}
?>

What I want to be able to do is to assign an ID to each option in dropdown2 so I can send the text input to the table. For example, I need the first entry of the second dropdown to have an ID parameter 4, second to have an ID parameter 3, third to have an ID parameter 2 and the fourth option to have an ID parameter 1. How can I do this in index.php itself?

SOLVED:(EDIT)

Find the answer here: Get selected value in dropdown list using JavaScript?

Give array elements individual IDs when taken from PHP file with AJAX

0 Answers0