<div>
From here <a href="https://www.w3schools.com/js/js_cookies.asp" rel="ugc">https://www.w3schools.com/js/js_cookies.asp</a> 

<pre><code class="code-10 nolinks" id="code-20-42794018-1">function getCookie(cname) {
 var name = cname + &quot;=&quot;;
 var decodedCookie = decodeURIComponent(document.cookie);
 var ca = decodedCookie.split(';');
 for(var i = 0; i &lt;ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) == 0) {
 return c.substring(name.length, c.length);
 }
 }
 return &quot;&quot;;
}
</code></pre>
 
Writing to the order comments box - do you want to overwrite or append to? 
Is this a form control or normal element 
Normal element 
 
Overwrite 

<pre><code class="code-1 nolinks" id="code-20-42794018-2">$('#order_comments').text(value_you_want_to_write);
</code></pre>
Append 

<pre><code class="code-1 nolinks" id="code-20-42794018-3">var val = $('#order_comments').text() + value_you_want_to_write;
$('#order_comments').text(val);
</code></pre>
 
Form control 
Overwrite 

<pre><code class="code-1 nolinks" id="code-20-42794018-4">$('#order_comments').val(value_you_want_to_write);
</code></pre>
Append 

<pre><code class="code-1 nolinks" id="code-20-42794018-5">var val = $('#order_comments').val() + value_you_want_to_write;
$('#order_comments').val(val);
</code></pre>
</div>

<div>
Using your code above and some others I get getCookie isn't defined. &nbsp; 
 

<pre><code class="code-10 nolinks" id="code-20-42794795-1">&lt;script type=&quot;text/javascript&quot;&gt;

jQuery(function() {
		jQuery('#cook').click(function(e) {
		e.preventDefault();
		document.cookie = &quot;wantmembership=1; path=/&quot;;
 jQuery(this).css('background-color','green');
 jQuery(this).text(&quot;I Now Have A Membership!&quot;);
			});
	
		
	});

jQuery(function getCookie(cname) {
 var name = cname + &quot;=&quot;;
 var ca = document.cookie.split(';');
 for(var i = 0; i &lt; ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) == 0) {
 return c.substring(name.length, c.length);
 }
 }
 return &quot;&quot;;
});

jQuery(function checkCookie() {
 var username = getCookie(&quot;wantmembership&quot;);
 if (username!= &quot;&quot;) {
 alert(&quot;Welcome again &quot; + username);
 } else {
 username = prompt(&quot;Please enter your name:&quot;, &quot;&quot;);
 if (username != &quot;&quot; &amp;&amp; username != null) {
 setCookie(&quot;username&quot;, username, 365);
 }
 }
});
&lt;/script&gt;
</code></pre>
 
I am just trying to keep this simple, initially. &nbsp;Meaning, I just want the alert's to show up. &nbsp;However, they aren't. &nbsp;Do you have any suggestions?
</div>

<div>
I don't understand what you are doing here 

<pre><code class="code-10 nolinks" id="code-20-42794949-1">jQuery(function checkCookie() {
 var username = getCookie(&quot;wantmembership&quot;);
 if (username!= &quot;&quot;) {
 alert(&quot;Welcome again &quot; + username);
 } else {
 username = prompt(&quot;Please enter your name:&quot;, &quot;&quot;);
 if (username != &quot;&quot; &amp;&amp; username != null) {
 setCookie(&quot;username&quot;, username, 365);
 }
 }
</code></pre>
This will run at document load - so it is going to fetch the cookie before you have set it - I don't understand your intention here?
</div>

<div>
Apparently, I didn't either. &nbsp;I now think that I have to call the 2 functions after the onclick event. &nbsp;However, I am not clear how to do that. &nbsp;Here is what I have put together but WordPress won't permit me to save the code because it says error. &nbsp;Nothing else just the word error. &nbsp;Xampp isn't showing anything in the logs either. 
 

<pre><code class="code-10 nolinks" id="code-20-42795771-1">jQuery(function() {
		jQuery('#cook').click(function(e) {
		e.preventDefault();
		document.cookie = &quot;wantmembership=1; path=/&quot;;
 jQuery(this).css('background-color','green');
 jQuery(this).text(&quot;I Now Have A Membership!&quot;);
			getCookie(cname);
			checkCookie();
			});
});
	
		jQuery(function getCookie(cname) {
 var name = cname + &quot;=&quot;;
 var ca = document.cookie.split(';');
 for(var i = 0; i &lt; ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) == 0) {
 return c.substring(name.length, c.length);
 }
 }
 return &quot;&quot;;
});

jQuery(function checkCookie() {
 var username = getCookie(&quot;wantmembership&quot;);
 if (username!= &quot;&quot;) {
 alert(&quot;Welcome again &quot; + username);
 } 
 });
</code></pre>
 
Please show me the correct syntax.
</div>

<div>
Hasn't really changed. 
 

<pre><code class="code-1 nolinks" id="code-20-42795893-1">jQuery(function getCookie(cname) {
</code></pre>
 
What is this doing? 
 
That is going to run getCookie on document load - because you are passing it to the jQuery() function. Same with checkCookie() 
 
Not sure why you want to do that. 
 
Why are you wrapping your functions in a call to jQuery - that is going to result in lines 7-8 erroring out because it can't find the functions. 
 
Just explain in words what you want this code to do.
</div>

<div>
I want the code to create the cookie by a button (which it does.) &nbsp;Then if the cookie is present I want it to write the message in the Order Comments box. 
 
When the order is submitted I want it to delete the cookie, which in turn will remove the message from the Order Comments box. 
 
I thought I had to tie the other 2 functions to the button click. &nbsp;That's why I put line 7 and 8 there. 
 
I was just trying to keep checkCookie very simple by using the alert. &nbsp;I know it won't write to the box like I need. 
 
To get what I want for this question, I just need to have the onclick fire those functions when the button is pressed.
</div>

<div>
<pre><code class="code-1 nolinks" id="code-20-42795905-1"> That's why I put line 7 and 8 there.
</code></pre>
Thtat's fine (sort of) but they are not going to work because you put your function declaration inside a jQuery() function call - which is really just passing a function to jQuery - which then runs the function on document load. 
 
I don't understand why it must fire both on the page? 
 
I thought the point of the cookie was to set a flag to say the user wants membership - and then on a DIFFERENT page check that flag to see if it is set and only then update the form.
</div>

<div>
your understanding is correct but I don't know how to do it on a different page.
</div>

<div>
I don't understand - what is the issue 

<pre><code class="code-1 nolinks" id="code-20-42795981-1">// first page
$(function() {
 $('#wantmembership').click(function() {
 // setcookie here
 });
});
</code></pre>
 

<pre><code class="code-1 nolinks" id="code-20-42795981-2">// second page
$(function() {
 // getCookie();
 // Update content
});
</code></pre>
</div>

<div>
The issue is when I put the code in the actual page it becomes surrounded by &lt;p&gt; tags. &nbsp;So, I found this script 
 

<pre><code class="code-10 nolinks" id="code-20-42796748-1">/* Enqueue scripts (and related stylesheets) */
 add_action( 'after_setup_theme', 'my_nifty_scripts' );
	//add_action('wp_enqueue_scripts', 'my_nifty_scripts');
/**
 * Registers scripts for the theme and enqueue those used site wide.
 *
 * @since 0.1.0.
 */

function my_nifty_scripts() {
 wp_register_script('myown', get_stylesheet_directory_uri() . 'js/myown.js', false, null, true);
if (is_checkout()){
 wp_enqueue_script('myown'); 
}
}
</code></pre>
 
I put my code in the js folder and it is &nbsp;set up in this fashion 
 

<pre><code class="code-1 nolinks" id="code-20-42796748-2">https://gyazo.com/d7eca1387ad05223b90b7a863ecfe2e4
</code></pre>
 
but when I access the page the code isn't there. 
 
Lastly, I am not clear how to put the code on the checkout page it is created by a shortcode. 
 

<pre><code class="code-1 nolinks" id="code-20-42796748-3">https://gyazo.com/9142ba3d4e7675f9dfd137c5e46811df
</code></pre>
 
Because this is on an XAMPP install this isn't a valid url.
</div>

<div>
For now just enqueue the script for all pages remove lines 12 and 14. 
 
Can you post your final script here.
</div>

<div>
Here is my script to read the cookie and write the message. 

<pre><code class="code-10 nolinks" id="code-20-42797847-1">	
jQuery(function getCookie(cname) {
			
 var name = cname + &quot;=&quot;;
 var ca = document.cookie.split(';');
 for(var i = 0; i &lt; ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) === 0) {
 return c.substring(name.length, c.length);
 }
 }
 return &quot;&quot;;
});

jQuery(function checkCookie() {
 var username = getCookie(&quot;wantmembership&quot;);
	echo 'username';
 if (username=== &quot;wantmembership&quot;) {
 jQuery('#order_comments').val(I Want Membership);
 } 
 });
</code></pre>
 
This is found in js/myown.js and it does show up in the source code. 
 
IAs you can see, I &nbsp;wrapped the other functions in a jQuery wrapper so they would load at document ready. &nbsp;Ideally they need to only be firing on the checkout page. 
 
I put the cookie create code in the page where the button is supposed to be in this manner. 
 

<pre><code class="code-10 nolinks" id="code-20-42797847-2">&lt;script type=&quot;text/javascript&quot;&gt;
jQuery(function() {
		jQuery('#cook').click(function(e) {
		e.preventDefault();
		document.cookie = &quot;wantmembership=1; path=/&quot;;
 jQuery(this).css('background-color','green');
 jQuery(this).text(&quot;I Now Have A Membership!&quot;);
			});
});
&lt;/script&gt;
</code></pre>
 
This does create the cookie and change the button after it is pushed. 
 
As it is no text is written and I have tried text and val both. &nbsp;Also, my echo never shows any output.
</div>

<div>
We are going in circles. 
 
Why are you doing this 

<pre><code class="code-1 nolinks" id="code-20-42797926-1">jQuery(function getCookie(cname) {
</code></pre>
What is it you think this code doing? 
What is it you are wanting to do?
</div>

<div>
I thought the function checkCookie was using the getCookie function to see if the cookie exists and the getCookie function was being supplied the cname since it was calling the getCookie function with the name of the cookie. 
 
I am wanting it to find the cookie &quot;wantmembership&quot; and when it does write the message in the order comments box. &nbsp;I put the echo statement in there to test if I was close and it seems I am not. &nbsp;Additionally, it should load this only on the checkout page. 
 
I wrapped it in jQuery so it would execute once the document loaded.
</div>

<div>
<blockquote>
I thought the function checkCookie was using the getCookie function to see if the cookie exists and the getCookie function was being supplied the cname since it was calling the getCookie function with the name of the cookie.
</blockquote>
Yes - but why are you invoking getCookie inside a jQuery function - it does nothing. getCookie must be called by some other code with a cookie name as a parameter. By putting it inside a jQuery function you are making it anonymous - it won't exist anywhere by the name getCookie so when you invoke it in checkCookie - it won't exist. In this case when it does run (on document load) the name parameter will be the jQuery object. 
 
You need to understand two things 
1. lambda functions = functions that are passed as parameters. In this case the getCookie. 
Usually when we pass a function we don't name it we just declare it like this 

<pre><code class="code-1 nolinks" id="code-20-42799806-1">someOtherFunction(function() {
 alert('boo');
});
</code></pre>
So in your case what you are doing is invoking a function on document load that runs and then dies which is not what you want. You want to declare the function so that you can call it from checkCookie. 
 
2. Scoping 

<pre><code class="code-1 nolinks" id="code-20-42799806-2">$(function() {
 function getCookie(name) {
 alert(name);
 }
});
$(function() {
 // getCookie is not defined in this scope
 getCookie('test');
});
</code></pre>
By placing your function in different jQuery calls (setting aside that the getCookie() was not a declaration but an anonymous function that was executed on document load - assuming you had declared it correctly) you isolated their scope from each other - so even if you declared your getCookie() function correctly (instead of invoking it) your code would not work because the function is not visible to your checkCookie function 
Here is an example of how you should be doing it. 

<pre><code class="code-10 nolinks" id="code-20-42799806-3">jQuery(function($) {
 // Invoke checkCookie on document load
 checkCookie();

 // Function definition
 function getCookie(name) {
 // ...
 }
 function checkCookie() {
 var cookie = getCookie('wantmembership');
 }
})
</code></pre>
 
While you are learning about scope you can also learn about <a href="https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-what-is-hoisting-in-javascript-a63c1b2267a1" rel="ugc">hoisting</a> - the process by scope globals are &quot;hoisted&quot; to the top of their scope so they can be used before they are declared.
</div>

<div>
That helped a lot to understand what is going on. &nbsp;I decided to remove the jQuery tags now to do some troubleshooting. 
 
I can get the first two document writes to display but there seems to be a problem with testing for the cookie. 
 

<pre><code class="code-10 nolinks" id="code-20-42800000-1">[woocommerce_checkout]

	&lt;script type=&quot;text/JavaScript&quot;&gt;
&lt;!--
function getCookie(cname) {
			
 var name = cname + &quot;=&quot;;
 var ca = document.cookie.split(';');
 for(var i = 0; i &lt; ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) === 0) {
 return c.substring(name.length, c.length);
 }
 }
 return &quot;&quot;;
}

function checkCookie() {
document.write(&quot;Print this in the function&quot;);
 var username = getCookie(&quot;wantmembership&quot;);
document.write(&quot;Print this after the get&quot;);
	 if (username== &quot;wantmembership&quot;) {
document.write(&quot;Print this after the if test&quot;);
 jQuery('#order_comments').val('I Want Membership');
 } 
 }
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/JavaScript&quot;&gt;
&lt;!--
checkCookie();
//--&gt;
&lt;/script&gt;
</code></pre>
 
I have all of this on the checkout page inline. &nbsp;I know that is not ideal and once I can get this to work. &nbsp;I'll post another question on putting the scripts external because they don't work external on my localhost. 
 
Can you see any problem with my logic. &nbsp;Console isn't showing any errors?
</div>

sharingsunshine

<div>
thanks for the code but not using the comment tags it puts &lt;p&gt;'s around the script. 
 
<a href="https://gyazo.com/5a2334fc02a555fe0ab50fe96dd84667" rel="ugc">https://gyazo.com/5a2334fc02a555fe0ab50fe96dd84667</a> 
 
Putting the comments back doesn't work either.
</div>

<div>
Thanks for the help. &nbsp;It took me a while because the document.write statements locked up the system. &nbsp;Once I commented those out the page came back. &nbsp;Then I realized line 31 needs a semi-colon at the end. 
 
However, I only mention those items if someone looks at the code in the future. 
 
I certainly couldn't have completed the project without your help. 
 
Thank again,
</div>

<div>
<div class="content wysiwyg-content">
I am trying to have jquery write a cookie and test for its presence. &nbsp;If if is present write a message in the order_comments box of Woo Commerce. &nbsp;Here is an answer using jquery to write in the order_comments box. 
 

<pre><code class="code-1 nolinks" id="code-10-29135199-1">https://www.experts-exchange.com/questions/29114316/Need-Javascript-JQuery-Button-Update-Woo-Commerce-Order-Notes.html
</code></pre>
 
Here is my present jquery code 
 

<pre><code class="code-10 nolinks" id="code-10-29135199-2">&lt;script type=&quot;text/javascript&quot;&gt;

jQuery(function() {
		jQuery('#cook').click(function(e) {
		e.preventDefault();
		document.cookie = &quot;wantmembership=1; path=/&quot;;
 jQuery(this).css('background-color','green');
 jQuery(this).text(&quot;I Now Have A Membership!&quot;);
			});
	
		
	});

&lt;/script&gt;
</code></pre>
 
This creates the code. &nbsp;I just need help knowing how to read the presence of the cookie and then write the message in the order_comments box. 
 
Thanks,
</div>
</div>

I am trying to have jquery write a cookie and test for its presence.  If if is present write a message in the order_comments box of Woo Commerce.  Here is an answer using jquery to write in the order_comments box.

(CODE)

Here is my present jquery code

(CODE)

This creates the code.  I just need help knowing how to read the presence of the cookie and then write the message in the order_comments box.

Thanks,

In jQuery How Do You Do &quot;If Test&quot; On Cookie?

Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.

Web Development

woo commerce

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

In jQuery How Do You Do &quot;If Test&quot; On Cookie?

In jQuery How Do You Do "If Test" On Cookie?