CODEWITHSUNDEEP
javascriptcoldfusion
jlig
jlig

Reputation: 241

How to pass two javascript variables in my URL?

I have the following code that updates the latbox/lngbox "form field" values on my page when the marker is dragged:

<!---Code the Address & Lat/Long into the Info window --->
function codeAddress() {
    var address = document.getElementById('address').value;
    var account = document.getElementById('account').value;

    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            if (marker) {
                marker.setMap(null);

                if (infowindow) infowindow.close();
            }

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                position: results[0].geometry.location
            });

            google.maps.event.addListener(marker, 'dragend', function() {
                // updateMarkerStatus('Drag ended');
                geocodePosition(marker.getPosition());
            });

            google.maps.event.addListener(marker, 'dragend', function (event) {
                document.getElementById("latbox").value = this.getPosition().lat();
                document.getElementById("lngbox").value = this.getPosition().lng();
            });

Question: How do I "pass those two values" to my URL below?

<!---Create the page to display the Account Name, Address, Geocode button to update page & Save button to save Lat/Long back into Salesforce --->
<div>
    <div align="center">
        <form action="" method="get">
            <input name="account" type="hidden" id="account" value="<cfoutput>#URL.id1#</cfoutput>">
            <input name="address" type="hidden" id="address" value="<cfoutput>#URL.id2#</cfoutput>">
            <input type="button" value="Plot this customer using Physical Address" Title="Click to Map the Physical Address of Salesforce Account (if avl)"onclick="codeAddress()">

            New Latitude: <input size="20" type="text" id="latbox" name="lat" >
            New Longitude: <input size="20" type="text" id="lngbox" name="lng" >

            <input type="button" name="updateAccountLatLng" id="updateAccountLatLng" value="Update Account?" onclick="window.location.href='https://www.mysalesforce.com/001U000000W2Xgx/e?<cfoutput>#URL.id1#</cfoutput>&00NU0000003BKlJ=javascript.latbox&00NU0000003BKlO=javascript.lngbox'">
        </form>
    </div>

I can get the JavaScript values to display dynamically in my form field/page, but I can't get the JavaScript values to pass into the URL string?

Upvotes: 0

Views: 147

Answers (2)

jlig
jlig

Reputation: 241

Got this working by doing the following:

I ended up changing the form POST to GET (since get automatically forwarded the two form values for me in the URL) The key was to add the unique Salesforce field names (name="00NU0000003BKlJ" & name="00NU0000003BKlO") to my form field properties so the GET would post the values. Here is the updated form code:

<!---Create the page to display the Account Name, Address, Geocode button to      update page & Save button to save Lat/Long back into Salesforce --->
        <div>
        <div align="center">
        <!---When user clicks the submit button, use GET to open the record in    Salesforce and pass the new Lat/Lng values to the page --->
        <form method="get"  action="https://my.salesforcedomain.com/<cfoutput>#URL.id#  </cfoutput>/e?">
        <input name="account" type="hidden" id="account" value="<cfoutput>#URL.id1#</cfoutput>">
        <input name="address" type="hidden" id="address" value="<cfoutput>#URL.id2#</cfoutput>">
        <input type="button" value="Plot this customer using Physical Address" Title="Click to Map the Physical Address of Salesforce Account (if avl)"onclick="codeAddress()">


      <!---Checkbox to toggle Fiber layer on/off --->
        <input type="button" id="layer0" onClick="toggleLayer(0)" value="View Fiber" title="Click twice to overlay Fiber Map KML overlay(Click again to toggle on/off)">
        <input type="button" id="layer1" onClick="toggleLayer(1)" value="Buildings" title="Click twice to overlay Buildings Map KML overlay(Click again to toggle on/off)">
        <input type="button" id="layer2" onClick="toggleLayer(2)" value="Vaults" title="Click twice to overlay Vaults Map KML overlay(Click again to toggle on/off)">
        <input type="button" id="layer3" onClick="toggleLayer(3)" value="Proposed" title="Click twice to overlay Proposed Map KML overlay(Click again to toggle on/off)">
    </h2>New Latitude: <input size="20" type="text" id="latbox" name="00NU0000003BKlJ" >New Longitude: <input size="20" type="text" id="lngbox" name="00NU0000003BKlO" >
        <input type="submit" name="updateAccountLatLng" id="updateAccountLatLng" value="Update Salesforce Account?" title="Click here to update the new lat/lon values to your Salesforce account.">
        </form>

Upvotes: 0

Jon
Jon

Reputation: 6265

Looks like in your codeAddress function you want a line at the end of the function that changes queryParams based on the lat/lon

something like ...

window.history.pushState('', 'title', window.location + `?lat=${lat}&lon=${lon}`)

Upvotes: 1

Related Questions