I have a php form that performs a series of AJAX requests after a user clicks a select box. I am trying to find a way of duplicating this series of select boxes with the associated AJAX functions using a button.
This form has a select box where a user can select a country. This then sends an ajax request that creates a select box where a user can select regions in that country and this sends an ajax request that creates a select box where a user can select prefectures in that region and this sends a final ajax request that creates a select box where a user can select a city in that prefecture. That part works with the following code.
<?php <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Connect to Database require 'connections_pdo.php'; $country = $conn->prepare("SELECT DISTINCT country FROM country ORDER BY country ASC"); $country->execute(array( 'country' )); $country->setFetchMode(PDO::FETCH_ASSOC); echo "
<html>
<head>
<script src='jquery-ui-1.10.2.custom/js/jquery-1.9.1.js'></script>
<script src='jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js'></script>
<script src='select_area.js?date=" . $date . "'></script>
</head>"; //Form To Select Geographic Area echo "
<body>
<form name='input' id='input' action='article_insert_2.php' enctype='multipart/form-data' method='post'>"; //Geographic Area echo "
<table>
<tr>
<th>
<div id='country'>Country
<br />
<select class='country' name='country[]' id='country_1'>
<option value=''></option>"; $i = 0; while ($row = $country->fetch()) { if ($i == 0) { $countries = array(); } else { } array_push($countries, $row['country']); $i++; } foreach ($countries as $d) { echo "
<option value='" . $d . "'>" . $d . "</option>"; } echo "</select>
<br/>
</div>
<button id='add_country'>Add Country</button>
</th>
<th>
<div id='region'></div>
</th>
<th>
<div id='prefecture'></div>
</th>
<th>
<div id='sub_prefecture'></div>
</th>
<th>
<div id='city'></div>
</th>
</tr>
</table>"; //Submit echo "
<input type='submit' value='Submit'>
</form>"; ?>
This is the Javascript with the AJAX code needed to create the select boxes.
$(document).ready(function() {
//AJAX request on Country select box appends a Region select box
//then an AJAX request on Region select box brings appends a Prefecture select box
//then an AJAX request on Prefecture select box appends a City Select Box
$('.country').on("change", function() {
var ids = this.id.split("_");
var id = ids[1];
var country = $("#country_" + id).val();
$.ajax({
url: 'region.php?t=' + Math.random(),
type: "POST",
data: {
country: country,
id: id
},
success: function(result) {
$("#region").append(result);
$(document).ready(function() {
$('.region').on("change", function() {
var ids = this.id.split("_");
var id = ids[1];
var country = $("#country_" + id).val();
var region = $("#region_" + id).val();
$.ajax({
url: 'prefectures.php?t=' + Math.random(),
type: "POST",
data: {
country: country,
region: region,
id: id
},
success: function(result) {
$("#prefecture").html(result);
$(document).ready(function() {
$('#prefecture_1').on("change", function() {
var ids = this.id.split("_");
var id = ids[1];
var country = $("#country_" + id).val();
var region = $("#region_" + id).val();
var prefecture = $("#prefecture_" + id).val();
$.ajax({
url: 'cities.php?t=' + Math.random(),
type: "POST",
data: {
country: country,
region: region,
prefecture: prefecture,
id: id
},
success: function(result) {
$("#city").html(result);
}
})
})
})
}
})
})
})
}
})
})
})However, I want to create a button with a function that duplicates those select boxes. At present I have the following code that will append another select box with the class country to my country div tag. However, the AJAX functions associated with the onchange event for the select boxes with the class country do not work with this new select box.
//Function to append additional select boxes with all countries to the country Div tag
var country_id = 2;
$('#add_country').on("click", function(e) {
e.preventDefault();
var options = $('#country_1 option');
var country_select = "<select class='country' name = 'country[]' id='country_" + country_id + "'>";
$.map(options, function(option) {
country_select += "<option value='" + option.value + "'>" + option.value + "</option>";
})
country_select += "</select><br />";
$('#country').append(country_select);
country_id++;
})Please let me know if I need to clarify anything or add additional code.
