2017-08-28 1 views
0

J'utilise google place api pour remplir les données d'adresse, j'ai peut-être jusqu'à 11 adresses qui pourraient être saisies, le problème est pour chaque adresse, il est de remplir automatiquement les données pour tous les 5 formulaires.Je veux seulement que remplir dans l'adresse du slideid c'est allumé. Je veux faire cela sans faire x quantité de copies de ma fonction, mais je suis coincé sur la façon de s'y prendre. Voici un code pour montrer ce que je fais. D'abord, j'appelle le code init pour la saisie semi-automatique. whichSlide est initialisé dans globale égale à zéro que l'on compte de 0comment est-ce que je garde ma fonction de remplir l'adresse plusieurs fois?

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

}

Comme il a été demandé est la forme ici de base qui est recréée par la fonction ci-dessous.

 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

Quelles sont vos «cinq formes»? – CCH

+0

... et quel est votre code html? Il peut être très très simple avec cette question mise à jour –

+0

pour afficher html, cette fonction renvoie le code HTML comme une chaîne que nous avons des contrôles .net intégrés dans les formulaires. – webdev8183

Répondre

0

duh Je peux simplement conclure les déclarations dans un cas (alors) qui gardera de tirer chacun à la fois par exemple si (whichSlide === 0) { action1 ... else if (whichSlide === 1) { action2 ..

presque, mais je l'ai un autre problème maintenant, le gestionnaire d'événements tire à plusieurs reprises depuis que j'utilisé le même nom et la fonction gestionnaire pour toutes les formes Je ne sais pas comment résoudre cela comme il est venu des exemples de googles.