How to pass JavaScript variables as parameters to JSF action method?

Let JS set them as hidden input values in the same form.

<h:form id="formId">    <h:inputHidden id="x" value="#{bean.x}" />    <h:inputHidden id="y" value="#{bean.y}" />    <h:commandButton value="submit" onclick="getVars()" action="#{bean.submit}" /></h:form>

function getVars() {    // ...    var x = locationInfo.lng;     var y = locationInfo.lat;    document.getElementById("formId:x").value = x;    document.getElementById("formId:y").value = y;}

The command button action method could just access them as bean properties the usual way.

private int x;private int y;public void submit() {    System.out.println("x: " + x);    System.out.println("y: " + y);    // ...}// Getters+setters.

An alternative is to use OmniFaces <o:commandScript> or PrimeFaces <p:remoteCommand> instead of <h:commandButton>. See also a.o. How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?

If you use PrimeFaces, you can use a hidden input field linked to a managed bean, and you can initialize its value using javascript, for PrimeFaces, the PF function can be used to access a widget variable linked to the hidden input, in this way:

<script type="text/javascript">function getVars() {    // ...    var x = locationInfo.lng;     var y = locationInfo.lat;    PF('wvx').jq.val( lat1 );    PF('wvy').jq.val( lng1 );}</script><p:inputText type="hidden" widgetVar="wvx" value="#{bean.x}" /><p:inputText type="hidden" widgetVar="wvy" value="#{bean.y}" />

<h:form id="formId"><h:inputHidden id="x" value="#{bean.x}" /><h:inputHidden id="y" value="#{bean.y}" /><h:commandButton value="submit" onclick="getVars()" action="#{bean.submit}" />

 <script>        function getVars() {            var x;             var yt;            x=#{bean.x};            y=#{bean.y};        }    </script>