I have a page that i have these cascading dropdowns for state, city, zip, which is used for the business address and they work good. Now i am trying to figure out a way to have a checkbox that if the user says same as business then to copy the values from business to office. Now the problem lies because the city and zip dropdowns for the office address are dynamically created based on the state choose it never copies the selection.
How can i get this to work?
Jquery code
<script>
$(document).ready(function(){
$("select#b_state").change(function(){
var b_state = $("select#b_state option:selected").attr('value');
//alert(state);
$("#b_city").html( "" );
$("#b_zip").html( "" );
if (b_state.length > 0 ) {
//alert(state.length);
$.ajax({
type: "POST",
url: "fetch_b_city.php",
data: "b_state="+b_state,
cache: false,
beforeSend: function () {
$('#b_city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#b_city").html( html );
}
});
}
});
$(document).on("change", "select#b_city",(function(){
var b_city = $("select#b_city option:selected").attr('value');
// alert(state_id);
if (b_city.length > 0 ) {
$.ajax({
type: "POST",
url: "fetch_b_zip.php",
data: "b_city="+b_city,
cache: false,
beforeSend: function () {
$('#b_zip').html('<img src="../images/loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#b_zip").html( html );
}
});
} else {
$("#b_zip").html( "" );
}
}));
$("select#o_state").change(function(){
var o_state = $("select#o_state option:selected").attr('value');
//alert(state);
$("#o_city").html( "" );
$("#o_zip").html( "" );
if (o_state.length > 0 ) {
//alert(state.length);
$.ajax({
type: "POST",
url: "fetch_o_city.php",
data: "o_state="+o_state,
cache: false,
beforeSend: function () {
$('#o_city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#o_city").html( html );
}
});
}
});
$(document).on("change", "select#o_city",(function(){
var o_city = $("select#o_city option:selected").attr('value');
// alert(state_id);
if (o_city.length > 0 ) {
$.ajax({
type: "POST",
url: "fetch_o_zip.php",
data: "o_city="+o_city,
cache: false,
beforeSend: function () {
$('#o_zip').html('<img src="../images/loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#o_zip").html( html );
}
});
} else {
$("#o_zip").html( "" );
}
}));
$('input[name=oi]').click(function() {
//alert('Using the same address');
if ($("input[name=oi]:checked").is(':checked')) {
// Get value from business text boxes
var b_address1 = $("#b_address1").val();
var b_address2 = $("#b_address2").val();
var b_state = $('select[name=b_state] option:selected').val();
var b_city = $('select[name=b_city] option:selected').val();
var b_zip = $('select[name=b_zip] option:selected').val();
// Assign values to office text boxes
$("#o_address1").val(b_address1);
$("#o_address2").val(b_address2);
$('select[name=o_state] option[value=' + b_state + ']').attr('selected','selected');
$('select[name=o_city] option[value=' + b_city + ']').attr('selected','selected');
$('select[name=o_zip] option[value=' + b_zip + ']').attr('selected','selected');
}else{
$("#o_address1").val();
$("#o_address2").val();
$('select[name=o_state] option[value=please choose]').attr('selected','selected');
$('select[name=o_city] option[value=please choose]').attr('selected','selected');
$('select[name=o_zip] option[value=please choose]').attr('selected','selected');
};
});
});
</script>
index.php
<fieldset style="width:600px;">
<legend>Bussiness Information</legend>
<p></p>
<p>
<label for="mf">Address: </label>
<input class="mf" name="b_address1" id="b_address1" type="text"/>
<!-- <span class="validate_success">A positive message!</span> -->
</p>
<p>
<label for="mf">Address 2: </label>
<input class="mf" name="b_address2" id="b_address2" type="text"/>
<!-- <span class="validate_error">A negative message!</span> -->
</p>
<p>
<?php
$sql = "SELECT DISTINCT state FROM tbl_zip ORDER BY state ASC";
$query = mysqli_query($con, $sql);
?>
<label>State:
<select name="b_state" id = "b_state">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
<option value="<?php echo $rs["state"]; ?>"><?php echo $rs["state"]; ?></option>
<?php } ?>
</select>
</label>
</p>
<p id="b_city">
</p>
<p id="b_zip">
</p>
</fieldset>
<fieldset style="width:600px;">
<legend>Office Information</legend>
<p>
Same As Business Information: <input type="checkbox" name="oi" id="oi" onclick="sameas();" />
</p>
<p></p>
<p>
<label for="mf">Address: </label>
<input class="mf" name="o_address1" id="o_address1" type="text"/>
<!-- <span class="validate_success">A positive message!</span> -->
</p>
<p>
<label for="mf">Address 2: </label>
<input class="mf" name="o_address2" id="o_address2" type="text"/>
<!-- <span class="validate_error">A negative message!</span> -->
</p>
<p id="o_state">
<?php
$sql = "SELECT DISTINCT state FROM tbl_zip ORDER BY state ASC";
$query = mysqli_query($con, $sql);
?>
<label>State:
<select name="o_state" id = "o_state">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
<option value="<?php echo $rs["state"]; ?>"><?php echo $rs["state"]; ?></option>
<?php } ?>
</select>
</label>
</p>
<p>
<label>City:
<select name="o_city" id="o_city">
<option value="">Please Select</option>
</select>
</label>
</p>
<p id="o_zip">
</p>
<p>
<input class="button" type="submit" value="Submit" />
<input class="button" type="reset" value="Reset" />
</p>
</fieldset>
