I edited my question and started afresh.
I have a html form which contains 2 dropdown lists (#selProvincie, #selRegiune). when a new option from List1 is selected by user, List2 must change accordingly. The lists are generated thru PHP from MySQL querying two tables that have a foreign key relationship (this code is not shown for brevity).
HTML
<div class="input_frm">
<form method="post" action="<?php print data_clean($_SERVER["PHP_SELF"]);?>">
<table class="input_tbl">
<tr>
<td class="a">Select province</td>
<td class="b"><select id="selProvincie" name="Alfa" onchange="provincieChg()"></select></td>
<td class="c"><input class="button_face" type="submit" value="Submit"></td>
</tr>
<tr>
<td class="a">Select region</td>
<td class="b"><select id="selRegiune" name="Beta" onchange="regiuneChg()"></select></td>
<td class="c"></td>
</tr>
</table>
</form>
JavaScript
$(document).ready(function()
{
$.getJSON("/scripts/031A_GetProvincie.php", success = function(data)
{
var str_options = "";
for (var i=0; i < data.length; i++)
{
str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
}
$("#selProvincie").append(str_options);
$("#selProvincie").change();
});
$("#selProvincie").change(function()
{
$.getJSON("/scripts/031B_GetProvRegiune.php?provincie=" + $(this).val(), success = function(data)
{
var str_options = "";
for (var i=0; i < data.length; i++)
{
str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
}
$("#selRegiune").html("");
$("#selRegiune").append(str_options);
$("#selRegiune").change();
});
});
$("#selRegiune").change(function()
{
$.getJSON("/scripts/031C_GetProvRegiuneZona.php?regiune=" + $(this).val(), success = function(data)
{
var str_options = "";
for (var i=0; i < data.length; i++)
{
str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
}
});
});
});
Using the above as an example (I'm new to JavaScript) I want to write a new form, which has a text input field (Text1) inserted between List1 and List2. List2 is generated from the option selected in List1 AND the text in Text1. But I really don't know how to use the process the input text in JavaScript to make the whole thing work.
HTML
<div class="input_frm">
<form method="post" action="<?php print dataclean($_SERVER["PHP_SELF"]);?>">
<table class="input_tbl">
<tr>
<td class="a">Select county</td>
<td class="b"><select id="selJudet" name="Alfa" onchange="judetChg()"></select></td>
<td class="c"><input class="button_face" type="submit" value="Submit"></td>
</tr>
<tr>
<td class="a">Zone wildcard text</td>
<td class="b"><select id="selText" name="Beta" onchange="textChg()"></select></td>
<td class="c"></td>
</tr>
<tr>
<td class="a">Select zone</td>
<td class="b"><select id="selZona" name="Gamma" onchange="zonaChg()"></select></td>
<td class="c"></td>
</tr>
</table>
</form>
</div>
Question: What's the JavaScript for this form ? List2 should change anytime a change occurs in either a new option is selected from List1 OR a new the string in Text1 changes.
Your question is still a little confusing, but I'm working on the assumptions that:
With that in mind, this combination should achieve what you need. I've stripped back the HTML to the bare essentials. I've also change the id of the fields to match (what I think) you're trying to achieve.
The script could be optimised further, but this example should set you on the right path, but let me know if you have additional questions.
I've created a JsFiddle demonstrating how this works.
<form method="post" action="">
Country: <select id="selectCountry" name="Alfa"></select>
<br>
Region: <select id="selectRegion" name="Gamma"></select>
<br>
Wildcard: <input id="selectText" name="Beta">
</form>
$(document).ready(function() {
// Change to match your URL
$.getJSON("/echo/json/", function(data) {
// Override with fake data because I can't see what the PHP generates
data = ['Australia', 'Japan', 'Uganda'];
var str_options = "";
for (var i=0; i < data.length; i++) {
str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
}
$("#selectCountry").append(str_options);
});
// Filter regions based on the selected country
filterRegions = function() {
country = $("#selectCountry").val();
wildcard = $("#selectText").val();
console.log('Search for regions that match ' + country + ' and ' + wildcard);
// Change to match your PHP url
$.getJSON(" /echo/json/?country=" + country + "&wildcard=" + wildcard, function(data) {
// Override with fake data
data = ['California', 'Florida', 'Nevada'];
var str_options = "";
for (var i=0; i < data.length; i++) {
str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
}
$("#selectRegion").html(str_options);
});
};
// Filter results based on the selected region and any text search
filterResults = function(){
country = $("#selectCountry").val();
wildcard = $("#selectText").val();
region = $("#selectRegion").val();
console.log('Search for zones that match ' + country + ' and ' + wildcard + ' and ' + region);
// Change to match your PHP url
$.getJSON("/echo/json/?country=" + country + "®ion=" + region + "&wildcard=" + wildcard, function(data) {
// Display results as you need
});
};
// Attach event handlers to relevant DOM elements (instead of using inline change="Chg()" style functions)
$("#selectCountry").on("change", filterRegions);
$("#selectText").on("keyup", filterRegions);
$("#selectRegion").on("change", filterResults);
});
You will need to update the URLs being used for each getJson() request. The URLs will need to pass the values from the <input> and <select> tags as $_GET variables.
In my example, I've used fake data as an example, so remove this from your script when testing it. E.g.
data = ['California', 'Florida', 'Nevada'];
You do not need to specify $_SERVER['PHP_SELF'] because a <form> tag defaults to itself in the absence of any action attribute. E.g.
<form method="post" action="<?php print data_clean($_SERVER["PHP_SELF"]);?>">
Can simply be:
<form method="post" action="">