0

I would like to use a javascript variable (an email address) that is obtained by clicking on a map point (mapbox). I would like to insert this variable in a html/php form as the mailto address. But I'm have spent hours trying to get the variable out of the onclick function, with no avail. This is my last try:

var agencyemail; 

map.on('click', 'unclustered-point', function (e) {
agencyemail = e.features[0].properties.email; 
// the variable functions correctly within the onclick function... and then more
}

This is not working apparently. From here I would like to insert the captured variable into the php form

 $et_email_to = 
'<script>
document.write(agencyemail);
</script>' ;    

I have also tried to use sessionStorage, localStorage or let but I still haven't figured it out. Thanks for your help.

EDIT: I used the solutions proposed here. I simply inserted the variable in a form hidden field value.

    map.on('click', 'unclustered-point', function (e) {
    agencyemail = e.features[0].properties.email;
    document.getElementById("agencyemail").value = agencyemail;

... and in html

    <input type="hidden" value="" id="agencyemail" name="agencyemail"/> 

Thanks for the help.

Rich
  • 107
  • 1
  • 13
  • The php environment and the JavaScript environment are separated by the Internet. – Pointy Sep 21 '20 at 13:20
  • Do you mean you want to insert it into a text box on the same page? – Matt Sep 21 '20 at 13:21
  • The form is on the same page so I could insert it in a hidden text box if necessary – Rich Sep 21 '20 at 13:23
  • That might be your best bet in this case. You can't get info directly from JS to PHP without submitting it as part of the form (or various other methods such as cookies or an AJAX call) – Matt Sep 21 '20 at 13:25
  • Do you have an idea about the first problem, getting the variable outside the onclick function? – Rich Sep 21 '20 at 13:29
  • Why would you need to “get it outside”, when you use a hidden form field now? Set the value of the hidden form field from _within_ your click handler, and done. – 04FS Sep 21 '20 at 13:38
  • 2
    And in general, you should go and have a thorough read of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/) - your attempt as shown indicates, that you still lack some absolutely essential basic knowledge in those regards. – 04FS Sep 21 '20 at 13:39

1 Answers1

1
map.on('click', 'unclustered-point', function (e) {
   var agencyemail = e.features[0].properties.email; 
   // the variable functions correctly within the onclick function... and then more
   // HERE is where you would use that variable to change something in a form, for example with jquery:
   $('a.mailto').prop('href','mailto:' + agencyemail);
}

If you create your html document with an <a class="mailto"> element, you can see it work

This is assuming that var agencyemail = e.features[0].properties.email; would actually give you the information you want, I have no way of verifying that.

Tiny codesnippet to show you how the jquery code works: https://jsfiddle.net/jhc0ky1f/

TKoL
  • 13,158
  • 3
  • 39
  • 73
  • My form is generated through wordpress, though I have access to the php file that I've already modified, but it is not within the on click function. It's not really mailto (my mistake) but a submit button value. Could I use this jQuery code somewhat differently: document.getElementById("myButton").value = agencyemail; If so, will this work outside of the javascript function – Rich Sep 21 '20 at 13:38
  • 1
    You can use the `var agencyemail` variable to put a value into pretty much any html element you want. If it's an input element, you can change the value; if it's a p, you can change the inner text of the element; if it's an a, you can change the href. You just have to be very specific about what it is you actually want to happen, because I cannot guess. – TKoL Sep 21 '20 at 13:44
  • I'm not sure what `work outside of the javascript function` means. You'll need SOME sort of function to change the properties of HTML elements with a variable. – TKoL Sep 21 '20 at 13:45