0
이 양식을 동적으로 만드는 데 어려움을 겪고 있습니다. 나는 고객이 1에서 5까지 선택할 수있는 루프를 가지고 있는데, 사용자가 그 루프 수를 선택했다. _<cfoutput>#Add#</cfoutput>을 추가 할 필요가있는 곳을 알아 내기 위해 노력하고 있습니다. 따라서 루프가 반복 될 때 번호가 추가되고 올바르게 작동합니다. 루프가 작동 중이며 "1 Loop"가 선택되면 양식이 작동합니다. 두 번째 루프를 만들기 위해 JavaScript에 _<cfoutput>#Add#</cfoutput>을 추가 할 위치가 확실치 않아서 새 이름과 ID를 수신 할 수 있도록 올바르게 작동합니다. 내가 시도한 모든 것은 자바 스크립트를 깨뜨린 것이다. 제안과 조언은 크게 감사하겠습니다! 루프의ColdFusion/Javascript 동적 양식
외관
http://jsfiddle.net/bobrierton/gettgpmj/5/ (위치 정보에 대한 자바 스크립트를 반복하지 않음)
var placeSearch, autocomplete, autocomplete2;
var componentForm = {
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
postal_code: 'short_name'
};
var componentForm2 = {
route2: 'long_name',
locality2: 'long_name',
administrative_area_level_12: 'short_name',
postal_code2: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */
(document.getElementById('autocomplete')), {
types: ['geocode']
});
autocomplete2 = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */
(document.getElementById('autocomplete2')), {
types: ['geocode']
});
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
google.maps.event.addListener(autocomplete2, 'place_changed', function() {
fillInAddress2();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
//var keys=[];for (var key in place.address_components[0]) keys.push(key);
//alert(keys):
document.getElementById('autocomplete').value =
place.address_components[0]['long_name'] + ' ' +
place.address_components[1]['long_name'];
/*document.getElementById('route').value = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete').value : '');*/
document.getElementById('route').value = '';
}
function fillInAddress2() {
// Get the place details from the autocomplete object.
var place = autocomplete2.getPlace();
for (var component in componentForm2) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm2[addressType + '2']) {
var val = place.address_components[i][componentForm2[addressType + '2']];
document.getElementById(addressType + '2').value = val;
}
}
document.getElementById('autocomplete2').value =
place.address_components[0]['long_name'] + ' ' +
place.address_components[1]['long_name'];
/*document.getElementById('route2').value = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete2').value : '');*/
document.getElementById('route2').value = '';
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
function geolocate2() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete2.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]
initialize();
document.querySelector('#chbSame').addEventListener('change', checkedAddr);
function checkedAddr() {
if (document.getElementById('chbSame').checked) {
document.getElementById('route2').value = document.getElementById('route').value;
document.getElementById('locality2').value = document.getElementById('locality').value;
document.getElementById('administrative_area_level_12').value = document.getElementById('administrative_area_level_1').value;
document.getElementById('postal_code2').value = document.getElementById('postal_code').value;
document.getElementById('autocomplete2').value = document.getElementById('autocomplete').value;
} else {
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<body onload="initialize()">
<div class="clearfix">
\t <label for="street_1">Mailing Address 1:</label>
\t <input name="street_1" type="text" maxlength="120" onfocus="geolocate()" id="autocomplete" size="54" />
</div>
<div class="clearfix">
\t <label for="m2street_1">Mailing Address 2:</label>
\t <input name="m2street_1" type="text" maxlength="120" size="54" id="route" />
</div>
<div class="clearfix">
\t <label for="city_1">City:</label>
\t <input name="city_1" type="text" maxlength="50" size="30" id="locality" />
<div class="clearfix">
\t <label for="state_1">State:</label>
\t <input type="text" name="state_1" id="administrative_area_level_1" size="8" maxlength="12">
</div>
<div class="clearfix">
\t <label for="street_1">Zip Code:</label>
\t <input name="postal_1" type="text" maxlength="12" size="8" id="postal_code" />
</div>
<script type="text/javascript">
function FillBilling_1(f) {
if(f.billingtoo_1.checked == true) {
f.pstreet_1.value = f.street_1.value;
\t f.p2street_1.value = f.m2street_1.value;
f.pcity_1.value = f.city_1.value;
\t f.pstate_1.value = f.state_1.value;
\t f.ppostal_1.value = f.postal_1.value;
}
}
</script>
<div class="clearfix">
\t <input type="checkbox" name="billingtoo_1" onclick="FillBilling_1(this.form)" id="chbSame">
\t <em>Check this box if Physical Address and Mailing Address are the same.</em>
</div>
<div class="clearfix">
\t <label for="pstreet_1">Physical Address 1:</label>
\t <input name="pstreet_1" type="text" maxlength="120" onfocus="geolocate2()" id="autocomplete2" size="53" />
</div>
<div class="clearfix">
\t <label for="p2street_1">Physical Address 2:</label>
\t <input name="p2street_1" type="text" maxlength="120" size="53" id="route2" />
</div>
<div class="clearfix">
\t <label for="pcity_1">City:</label>
\t <input name="pcity_1" type="text" maxlength="50" size="30" id="locality2" />
<div class="clearfix">
\t <label for="pstate_1">State:</label>
\t <input type="text" name="pstate_1" id="administrative_area_level_12" size="8" maxlength="12">
</div>
<div class="clearfix">
\t <label for="pstreet_1">Zip Code:</label>
\t <input name="ppostal_1" type="text" maxlength="12" size="8" id="postal_code2" />
</div>
<br>
<br>
<div class="clearfix">
\t <label for="street_2">Mailing Address 1:</label>
\t <input name="street_2" type="text" maxlength="120" onfocus="geolocate()" id="autocomplete" size="54" />
</div>
<div class="clearfix">
\t <label for="m2street_2">Mailing Address 2:</label>
\t <input name="m2street_2" type="text" maxlength="120" size="54" id="route" />
</div>
<div class="clearfix">
\t <label for="city_2">City:</label>
\t <input name="city_2" type="text" maxlength="50" size="30" id="locality" />
<div class="clearfix">
\t <label for="state_2">State:</label>
\t <input type="text" name="state_2" id="administrative_area_level_1" size="8" maxlength="12">
</div>
<div class="clearfix">
\t <label for="street_2">Zip Code:</label>
\t <input name="postal_2" type="text" maxlength="12" size="8" id="postal_code" />
</div>
<script type="text/javascript">
function FillBilling_2(f) {
if(f.billingtoo_2.checked == true) {
f.pstreet_2.value = f.street_2.value;
\t f.p2street_2.value = f.m2street_2.value;
f.pcity_2.value = f.city_2.value;
\t f.pstate_2.value = f.state_2.value;
\t f.ppostal_2.value = f.postal_2.value;
}
}
</script>
<div class="clearfix">
\t <input type="checkbox" name="billingtoo_2" onclick="FillBilling_2(this.form)" id="chbSame">
\t <em>Check this box if Physical Address and Mailing Address are the same.</em>
</div>
<div class="clearfix">
\t <label for="pstreet_2">Physical Address 1:</label>
\t <input name="pstreet_2" type="text" maxlength="120" onfocus="geolocate2()" id="autocomplete2" size="53" />
</div>
<div class="clearfix">
\t <label for="p2street_2">Physical Address 2:</label>
\t <input name="p2street_2" type="text" maxlength="120" size="53" id="route2" />
</div>
<div class="clearfix">
\t <label for="pcity_2">City:</label>
\t <input name="pcity_2" type="text" maxlength="50" size="30" id="locality2" />
<div class="clearfix">
\t <label for="pstate_2">State:</label>
\t <input type="text" name="pstate_2" id="administrative_area_level_12" size="8" maxlength="12">
</div>
<div class="clearfix">
\t <label for="pstreet_2">Zip Code:</label>
\t <input name="ppostal_2" type="text" maxlength="12" size="8" id="postal_code2" />
</div>
루프가 어디에 있습니까? 어디에서 '추가'를 만들거나 업데이트합니까? – duncan
제 생각에는 당면한 문제를 다루는 데 필요한 코드만으로 작업하는 것이 좋습니다. 알아 낸 것이 있으면 응용 프로그램에 솔루션을 통합 할 수 있습니다. –