0
私はアドレス情報を入力するためにgoogle places APIを使用していますが、入力できる最大11個のアドレスがあります。問題は各アドレスに対して5つのフォームすべてに対して自動的にデータを入力していることです。それがオンのスライドIDのアドレスにあります。私は自分の機能のx倍のコピーを作らずにこれをしたいと思っていますが、私はそれについてどうやって行くのかと固執しています。 ここに私が何をしているかを示すコードがあります。まずオートコンプリート用のinitコードを呼び出します。それはここを求め以下の機能を介して再作成されている塩基形態でいたので、我々は私の機能を何度も記入しないようにするにはどうしたらいいですか？
} 0
function initAutoCompleteDynamic() {
//I could have used a loop here for simplicity sake I am just doing manaully for now.
//set property values here.. .
autocomplete1 = new google.maps.places.Autocomplete(
(document.getElementById('prop1address0')),
{ types: ['geocode'] });
autocomplete1.addListener('place_changed', fillinAddressDynamic);
autocomplete2 = new google.maps.places.Autocomplete(
(document.getElementById('prop1address1')),
{ types: ['geocode'] });
autocomplete2.addListener('place_changed', fillinAddressDynamic);
}
//here I call fillinAddressDynamic
function fillinAddressDynamic() {
alert("value of which slide is " + whichSlide);
var place = autocomplete1.getPlace();
var success = true;
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
var field = addressType;
var completeaddress = '';
if (componentFormProduction[addressType]) {
var val = place.address_components[i][componentFormProduction[addressType]];
document.getElementById(cR0[addressType]).value = val;
if (field == "street_number") {
var streetnum = document.getElementById("streetnumber0").value = val;
}
if (field == "route") {
if (streetnum) {
completeaddress1 = streetnum + ' ' + val;
}
else {
completeaddress1 = val;
}
document.getElementById('prop1address0').value = completeaddress1;
}
}
}
whichSlide++;
var place2 = autocomplete2.getPlace();
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
var field = addressType;
var completeaddress = '';
if (componentFormProduction[addressType]) {
var val = place.address_components[i][componentFormProduction[addressType]];
document.getElementById(cR1[addressType]).value = val;
if (field == "street_number") {
var streetnum = document.getElementById("streetnumber1").value = val;
}
if (field == "route") {
if (streetnum) {
completeaddress1 = streetnum + ' ' + val;
}
else {
completeaddress1 = val;
}
document.getElementById('prop1address1').value = completeaddress1;
}
}
}
whichSlide++;
から数えるようwhichSlideはゼロに等しくなるようにグローバルに初期化されます。
function GetPropertySlide(idx, slideID) {
var retval = "" +
"<div id = 'hidden" + slideID + "' class='item lx-width-690 lx-align-center OtherIncomeSlidePropertyAddresses'>" +
"<div id = 'slideNumber" + idx + "'class='item lx-width-690 lx-align-center'>" +
" <input name='Properties[" + idx + "].ID' id='propertyID" + idx + "' type='hidden' value='0'>" +
" <div class='lx-row lx-font-bold lx-font-size-26 lx-margin-top-30'>" +
" Tell us about property # " + (idx + 1) + " - Dynamic properties slide" + "?" +
" </div>" +
" <div class='lx-row'>" +
" <button type='button' style = 'button margin-left:10px;' class='btn-btn-success' onclick='InitiateDeleteProperty(" + idx + ");'>Delete Me!</button>" +
" <button type='button' style = 'button margin-left:10px;' class='btn-btn-danger' onclick='clearform();'>Clear Me!</button>" +
" <button type='button' style = 'button margin-left:10px;' class='btn-btn-danger margin left 10px' onclick='MarketValue();'>Pull Market Value</button>" +
" <button type='button' style = 'button margin-left:10px;' class='btn-btn-danger margin left 10px' onclick='initAutoCompleteDynamic()'>Pull Address</button>" +
" </div>" +
" <div id='divpropaddress" + idx + "' class='lx-width-100-pct lx-align-center lx-row'>" +
" <div class='lx-row lx-width-550'>" +
" <div class='lx-word-wrap lx-font-size-18 lx-margin-top-30'>" +
" Address" +
" </div>" +
" <div class='lx-width-100-pct lx-margin-top-8'>" +
" <input name='Properties[" + idx + "].Address' class='form-control lx-font-color-lightblack lx-height-42' id = 'prop1address" + idx + "' type='text' value='' autocomplete='off' />" +
" </div>" +
" </div> " +
" <div class='lx-row lx-margin-top-15'>" +
" <input id= 'streetnumber" + idx + "'type='text'>' " +
" </div>" +
" <div class='lx-row lx-margin-top-15'> " +
" <div class='lx-float-left lx-margin-right-15'> " +
" <div class='lx-font-size-18'> " +
" City" +
" </div> " +
" <div class='lx-width-250 lx-margin-top-8'>" +
" <input name='Properties[" + idx + "].City' class='form-control lx-font-color-lightblack lx-height-42' id = 'prop1city" + idx + "' type='text' value='' autocomplete='off' />" +
" </div>" +
" </div> " +
" <div class='lx-float-left lx-margin-right-15'> " +
" <div class='lx-font-size-18'> " +
" State" +
" </div> " +
" <div class='lx-width-150 lx-margin-top-8'> " +
" <input name='Properties[" + idx + "].State' class = 'form-control lx-font-color-lightblack lx-height-42' id = 'prop1state" + idx + "' type='text' value='' autocomplete = 'off' />" +
" </div> " +
" </div> " +
" <div class='lx-float-left'> " +
" <div class='lx-font-size-18'> " +
" Zip Code" +
" </div> " +
" <div class='lx-width-120 lx-margin-top-8'> " +
" <input name='Properties[" + idx + "].ZipCode' class = 'form-control lx-font-color-lightblack lx-height-42' id = 'prop1zipcode" + idx + "' autocomplete = 'off' />" +
" </div> " +
" </div> " +
" </div> " +
" </div> " +
" <div class='lx-font-size-18 lx-margin-top-15'> What type of Property do you Own?</div> " +
" <div class='lx-float-left'> " +
" <div class='lx-width-550 lx-margin-top-15'> " +
" <select class='lx-form-properties-control lx-color-1 lx-height-42 ' + data-val='true' + data-val-number='The field PropertyTypeID must be a number.' + data-val-required='The PropertyTypeID field is required.' id = 'propertytypeid" + idx + "' name='Properties[" + idx + "].PropertyTypeID'><option value='- 1'>Property Type</option>' " +
" <option value= '0' > Single Family</option >" +
" <option value='1'>Condos/Co-op</option>" +
" <option value='2'>Townhouse</option>" +
" <option value='3'>Multi Family</option>" +
" <option value='4'>Manufactured</option>" +
" </select >" +
" </div> " +
" </div> " +
" <div class='lx-margin-top-60 lx-row '> " +
" <div class='lx-square-42 lx-float-left lx-margin-top-30'> " +
" <input name='Properties[" + idx + "].HasRental' class='form-control lx-font-color-lightblack' id='HasRental" + idx + "' type= 'checkbox' value= 'false' data-val-required='The HasRental field is required.' data-val='' /> " +
" </div> " +
" <div class='lx-float-left lx-font-size-18 lx-margin-left-10 lx-margin-top-36 lx-width-75-pct'> " +
" I am renting this property." +
" </div> " +
" </div> " +
" <div id= 'divmonthlyrentrow" + idx + "' class='lx-width-550 lx-margin-top-8 hidden'> " +
" <div class='lx-row'> " +
" <div class='lx-float-left lx-font-size-18 lx-margin-left-10 lx-margin-top-8'> " +
" What is the monthly rent you are collecting? " +
" </div> " +
" </div> " +
" <div class='lx-row '> " +
" <div class='input-icon'> " +
" <i> $</i> " +
" <input name='Properties[" + idx + "].monthlyrent' class = 'form-control lx-font-color-lightblack lx-height-42' id = 'monthlyrent" + idx + "' autocomplete = 'off' />" +
" </div> " +
" </div> " +
" </div> " +
" <div id = 'divtaxrow" + idx + "' class='lx-width-500 lx-margin-top-15 lx-row'> " +
" <div class='lx-square-42 lx-float-left'> " +
" <input name='Properties[" + idx + "].IsTaxIncluded' class = 'form-control lx-font-color-lightblack' id = 'IsTaxIncluded" + idx + "' type= 'checkbox' value= 'false' data-val=''/>" +
" </div> " +
" <div class='lx-float-left lx-font-size-18 lx-margin-left-10 lx-margin-top-10 lx-width-75-pct'> " +
" Tax included in payment ? " +
" </div> " +
" </div> " +
" <div id = 'divtaxamountrow" + idx + "' class='lx-width-550 lx-margin-top-15 hidden'> " +
" <div class='lx-row'> " +
" <div class='lx-word-wrap lx-font-size-18 '> " +
" Tax Amount" +
" <button type= 'button' style = 'button margin-left:10px;' class='btn-btn-primary margin left 5px ' onclick= 'PullAmount();' title='Pull Tax Amount'>Pull</button > " +
" </div> " +
" </div> " +
" <div class='lx-row'> " +
" <div class='input-icon'> " +
" <i> $</i> " +
" <input name='Properties[" + idx + "].TaxAmount' class = 'form-control lx-font-color-lightblack lx-height-42 lx-margin-top-15' id = 'taxamount" + idx + "' type='text' value='' data-val-required='The TaxAmount field is required.' data-val='true' data-val-number='The field TaxAmount must be a number.' autocomplete='off' />" +
" </div> " +
" </div> " +
" </div> " +
" <div id = 'divinsurancerow" + idx + "' class='lx-width-500 lx-margin-top-15 lx-row'> " +
" <div class='lx-square-42 lx-float-left'> " +
" <input name='Properties[" + idx + "].IsInsuranceIncluded' class = 'form-control lx-font-color-lightblack' id = 'IsInsuranceIncluded" + idx + "' type= 'checkbox' value= 'false' data-val=''/>" +
" </div> " +
" <div class='lx-float-left lx-font-size-18 lx-margin-left-10 lx-margin-top-10'> " +
" Insurance included in payment ? " +
" </div> " +
" </div> " +
" <div id = 'divfloodinsurancerow" + idx + "' class='lx-width-500 lx-margin-top-15 lx-row hidden'> " +
" <div class='lx-row'> " +
" <div class='lx-word-wrap lx-font-size-18'> " +
" Homeowner/Flood Insurance Amount" +
" </div> " +
" </div> " +
" <div class='lx-row'> " +
" <div class='input-icon'> " +
" <i> $</i> " +
" <input name=Properties[" + idx + "].InsuranceAmount' class='form-control lx-font-color-lightblack lx-height-42' id ='InsuranceAmount" + idx + "' type='text' value='' data-val-number='The field InsuranceAmount must be a number.' autocomplete='off' />" +
" </div> " +
" </div> " +
" </div> " +
" <div id = 'hoafee" + idx + "' class='lx-width-500 lx-margin-top-15 lx-row'>" +
" <div class='lx-square-42 lx-float-left'> " +
" <input name='Properties[" + idx + "].IsHOA' class = 'form-control lx-font-color-lightblack', id = 'IsHOA" + idx + "' type= 'checkbox' value= 'false' data-val=''/>" +
" </div> " +
" <div class='lx-float-left lx-font-size-18 lx-margin-left-10 lx-margin-top-10 '> " +
" Do you have a Homeowners Association? " +
" </div> " +
" </div> " +
" <div id = 'divassociationfeerow" + idx + "' class='lx-width-550 lx-margin-top-15 lx-row hidden'> " +
" <div class='lx-row'> " +
" <div class='lx-font-size-18 lx-margin-bottom-6'> " +
" Homeowner Association/Condo Fees" +
" </div> " +
" </div> " +
" <div class='lx-row'> " +
" <div class='input-icon'> " +
" <i> $</i> " +
" <input name='Properties[" + idx + "].CondoFees' class = 'form-control lx-font-color-lightblack lx-height-42', id = 'CondoFees" + idx + "'autocomplete ='off' />" +
" </div> " +
" </div> " +
" </div> " +
" <div class='lx-width-500 lx-margin-top-15 lx-row'> " +
" <div class='lx-square-42 lx-float-left'> " +
" <input name='Properties[" + idx + "].ClaimPropertyOnTaxReturn' class = 'form-control lx-font-color-lightblack', id = 'ClaimProperty" + idx + "' type= 'checkbox' value= 'false' data-val=''/>" +
" </div> " +
" <div class='lx-float-left lx-font-size-18 lx-margin-left-10 lx-margin-top-10'> " +
" Do you claim this property on tax return?" +
" </div> " +
" </div> " +
" <div id = 'divacquiredyearrow" + idx + "' class='lx-width-550 lx-margin-top-15 '> " +
" <div class='lx-row'> " +
" <div class='lx-font-size-18 lx-margin-top-1'> " +
" What year did you acquire this property? " +
" </div> " +
" </div> " +
" <div class='lx-row'> " +
" <div class='lx-width-550 lx-margin-top-8'> " +
" <input name='Properties[" + idx + "].AquiredYear' class = 'form-control lx-font-color-lightblack lx-height-42', id = 'AquiredYear" + idx + "', autocomplete = 'off' />" +
" </div> " +
" </div> " +
" </div> " +
" <div id = 'divassociationfeerow" + idx + "' class='lx-width-500 lx-margin-top-15'> " +
" <div class='lx-square-42 lx-float-left '> " +
" <input name='Properties[" + idx + "].FiledExtension' class = 'form-control lx-font-color-lightblack', id = 'FiledExtension" + idx + "' type= 'checkbox' value= 'false' data-val=''/>" +
" </div> " +
" <div class='lx-float-left lx-font-size-18 lx-margin-left-10 lx-margin-top-10'> " +
" Have you filed an extension for your tax returns? " +
" </div> " +
" </div> " +
"</div> ";
return retval;
}
あなたの5つのフォームは何ですか？ – CCH
...あなたの全体的なHTMLは何ですか？ –
がhtmlを表示するように更新された質問で非常にシンプルになるかもしれません。この関数はフォームに埋め込まれた.netコントロールを持っているので、htmlを文字列として返します。 – webdev8183