current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite
1

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?

share|improve this question

2 Answers 2

up vote 2 down vote

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.

share|improve this answer
    
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. –  handicop Feb 6 '14 at 7:48
1  
Check updated answer. I was in a little bit hurry, so missed up a little bit your questions :P. Sorry for that. –  altafhussain Feb 6 '14 at 7:52
    
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. –  handicop Feb 6 '14 at 8:04
up vote 1 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.