2017-08-28 3 views
0

Ich benutze google places api, um Adressdaten, ich habe möglicherweise bis zu 11 Adressen, die möglicherweise eingegeben werden, das Problem ist für jede Adresse, die es füllt die Daten automatisch für alle 5 Formen.Ich möchte nur, dass es zu füllen in der Adresse für den Slide ist es an. Ich möchte dies tun, ohne x Kopien von meiner Funktion zu machen, aber ich bleibe dabei, wie ich vorgehen soll. hier ist ein Code, um zu zeigen, was ich mache. Zuerst rufe ich den Init-Code für die automatische Vervollständigung auf. whichSlide ist global sein gleich Null initialisiert, wie wir von 0Wie behalte ich meine Funktion vom Ausfüllen der Adresse mehrere Male?

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++; 

count}

Da es hier gefragt wurde, ist die Grundform, die unten über die Funktion neu erstellt wird.

 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; 
} 
+1

Was sind Ihre "fünf Formen"? – CCH

+0

... und was ist Ihr gesamtes HTML? Es könnte sehr sehr einfach mit dieser –

+0

aktualisierten Frage, um HTML anzuzeigen, diese Funktion gibt den HTML-Code als String zurück, da wir .net-Steuerelemente in die Formulare eingebettet haben. – webdev8183

Antwort

0

duh ich nur die Aussagen in einer if (dann) wickeln kann, welche aus dem Brennen jedes alle auf einmal Beispiel halten if (whichSlide === 0) { action1 ... else if (whichSlide === 1) { action2 ..

fast, aber ich ein anderes Problem jetzt haben, wird der Event-Handler-Brennen wiederholt, da ich den gleichen Handler Name und Funktion für alle Formen verwendet ich bin nicht sicher, wie sie zu beheben Das kam von Google-Beispielen.

Verwandte Themen