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?

Community · Accepted Answer · 2017-05-23 11:58:28Z

2

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.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Feb 6, 2014 at 7:42

Altaf Hussain

5,2124 gold badges33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

handicop Over a year ago

thanks for the answer, but what I am trying to achieve here is to get var value in html form input to js function. For the get_site_url() is form wordpress function, product_id=? <- this is where the variation_id should be. I will clarify the question.

Altaf Hussain Over a year ago

Check updated answer. I was in a little bit hurry, so missed up a little bit your questions :P. Sorry for that.

handicop Over a year ago

then can I do "BUY_BUTTON_LINK_URL:\"www.website.com/?p=42&product_id=\"+variation_id" <- like this? it's sort of appending string here, but seems like it's not working. Thanks a lot in advance.

user2806061 · Accepted Answer · 2014-02-06 08:06:03Z

1

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

answered Feb 6, 2014 at 8:06

user2806061

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related