Trying to set form input value using js-cookies

Question

I have a landing page that sets a cookie on your machine when you arrive:

<script type="text/javascript">
    Cookies.set('Web_Lead_Specific_Source__c', 'PPC', { expires: 365 });
</script>

On a separate page I have a form with a hidden field:

<input name="Web_Lead_Specific_Source__c" value="">

I'm trying to load the value with "PPC" if the user has visited the landing page. The following code is not working:

Cookies.get('Web_Lead_Specific_Source__c');  => 'PPC'

I'm sure I'm missing something.

can you be more specific on "the following code is not working" Are you getting an error? — blackmind
– blackmind, Commented Jul 9, 2015 at 19:27
No I'm not getting an error. The desired value "PPC" is not populating in the input field. I'm attempting to get this working using github.com/js-cookie/js-cookie. I'm trying to follow the simple steps laid out on the git hub page, but can't get it to work. The cookie is being created fine, I just can't get it to populate in the input field. Thanks for the help on this! — Jeremy Brooks
– Jeremy Brooks, Commented Jul 10, 2015 at 15:10
@ZakariaAcharki, js-cookie is the same as jquery-cookie, why do you think the jquery-cookie API is better if js-cookie API is clearer? — Fagner Brack
– Fagner Brack, Commented Jul 11, 2015 at 18:08

Fagner Brack · Accepted Answer · 2015-07-11 18:21:33Z

1

Just getting the cookie is not enough, you need to set into the input field:

var leadType = Cookies.get('Web_Lead_Specific_Source__c');
var target = document.getElementsByName('Web_Lead_Specific_Source__c')[ 0 ];
target.value = leadType;

js-cookie is responsible only to set and get the value from the browser cookies, it doesn't have any knowledge of the elements in the page, that's something different.

Here is a working example with proper object oriented naming to prevent confusion: http://jsfiddle.net/f1fkydwh/

answered Jul 11, 2015 at 18:21

Fagner Brack

2,4234 gold badges38 silver badges70 bronze badges

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

5 Comments

Jeremy Brooks Over a year ago

Thanks for your help on this. This is working for me only if the input field is displayed. In my case the input field is hidden so it's not working for me. I notice that even when the input field is displayed and all is working correctly if I inspect the input element the "value=" property is still blank. See your jsfiddle example. I need for the input "value=" property to populate with the cookie data. Follow me? Thanks again for everyone's input on this!

Fagner Brack Over a year ago

Can you explain your use case please?

Jeremy Brooks Over a year ago

Sure, I have landing page that installs a cookie with the content of "PPC" on your computer whenever you visit the page. On a separate website I have a contact form with a hidden input field. I want to be able to fill in the "value=" of that hidden field with the "PPC" content of the cookie. I tested the input field without it being hidden and it works visually by populating the actual field, but it doesn't actually populate the "value=" in the source code when you look at the html. I need the value to be able populate in the source code so that when the form is submitted it'll read "PPC".

Fagner Brack Over a year ago

I understand, then instead of target.value, try using target.setAttribute( "value", leadType ) instead: developer.mozilla.org/pt-BR/docs/Web/API/element/setAttribute

Jeremy Brooks Over a year ago

This worked perfectly:

var leadType = Cookies.get('Web_Lead_Specific_Source__c'); var target = document.getElementsByName('Web_Lead_Specific_Source__c')[ 0 ]; target.setAttribute( "value", leadType )

Thanks for helping me with this!

Collectives™ on Stack Overflow

Trying to set form input value using js-cookies

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related