Wordpress, PHP, Javascript, how to get variable within a js function?

Question

Purpose : passing html hidden input variable into javascript function.

Working on a wordpress plugin and got stuck with javascript.

Here's hidden input I am trying to get, which is variable_product_id. This gets set when an user selects an dropdown options dynamically.

<form class="hello">
    <input type="hidden" name="variation_id" value="">
</form>

Outside of form class hello, there's plugin function in below, and I am trying to get and set "variation_id" right after product_id within "wp.CheckoutButton.apply".

if( !is_user_logged_in() )
{                       
    echo "<script type=\"text/javascript\" >    

            var temp = document.getElementsByName('variation_id');

        //<![CDATA[ 
        wp.CheckoutButton.apply({
            BUY_BUTTON_LINK_URL:\"www.website.com/?p=42&product_id=\"+temp,
        \"\":\"\" });
        //]]>
        </script>";
}

"wp.CheckoutButton.apply" prints button on the screen which will pass product_id that I am passing. It's been working with no variable product options within woocommerce, for variable product, I have to get the selected hidden variation_id when an users changes values(dropdown input).

Can I use document.getElementsByName('variation_id'); ? If so, how can I pass 'variation_id' within "wp.CheckoutButton.apply" function?

Is "+temp" within apply function legal?

Answer 1

A possible duplicate of this :

php variable into javascript

Sometimes, some data is needed in js files / js code like the base url of the site. In this case, it is best practice to create a JS variable within the header html tag. In your header tags, create a variable like below :

<script>
     var baseUrl = <?php echo get_site_url(); //if get_site_url echos the result itself, then no need to use echo ?>
</script>

Now, in all of your JS files and inline js code you will have this variable and you can use it. Simply it is a global js variable (i just made it up, dont know if js has :P )

Now you can use that variable every where in your js files and js codes.

Notge : Please create baseUrl variable at top most of the header tag or some where, so that no js file is included before it.

**Edit : **

Now to get variation_id from your form element, add id to your element as below:

<input type="text" name="variation_id" id="variation_id" value="" />

In js using jquery :

var variation_id = $("#variation_id").val();

and in wp.CheckoutButton.apply , instead of temp, use variation_id. It is correct i think, but try it.

Hope this will help.

Answer 2

For that you need to create a localize script that can help to call a site url in js file or js function.
http://codex.wordpress.org/Function_Reference/wp_localize_script