setting hidden form field values with jquery

Question

I'm using js.cookie.js to set cookie values after reading URL parameters. Next I want to populate a number of hidden fields with the cookie values. Reading the URL values and setting the cookie is working, but setting the values in the hidden fields is not working.

Here's the script:

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="http://example.com/scripts/js.cookie.js" type="text/javascript"></script> <script> // Parse the URL function getParameterByName(name) { name = name.replace(/[\\[]/, "\\\\[").replace(/[\\]]/, "\\\\]"); var regex = new RegExp("[\\\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\\+/g, " ")); } // Give the URL parameters variable names var visitor_id = getParameterByName('utm_visitor_id'); var medium = getParameterByName('utm_medium'); var source = getParameterByName('utm_source'); var campaign = getParameterByName('utm_campaign'); var content = getParameterByName('utm_content'); var term = getParameterByName('utm_term'); var count_of_sessions = getParameterByName('utm_count_of_sessions'); var count_of_page_views = getParameterByName('utm_count_of_page_views'); // Set the cookies Cookies.set('utm_visitor_id', visitor_id, { expires: 90 }); Cookies.set('utm_medium', medium, { expires: 90 }); Cookies.set('utm_source', source, { expires: 90 }); Cookies.set('utm_campaign', campaign, { expires: 90 }); Cookies.set('utm_content', content, { expires: 90 }); Cookies.set('utm_term', term, { expires: 90 }); Cookies.set('utm_count_of_sessions', count_of_sessions, { expires: 90 }); Cookies.set('utm_count_of_page_views', count_of_page_views, { expires: 90 }); // Grab the cookie value and set the form field values $(document).ready(function(){ $('input[name=00N4100000NglQ2').val(utm_visitor_id); $('input[name=00N4100000NgleO').val(utm_medium); $('input[name=00N4100000NglpC').val(utm_source); $('input[name=00N4100000NglyY').val(utm_campaign); $('input[name=00N4100000NgmBh').val(utm_content); $('input[name=00N4100000NgmIs').val(utm_term); $('input[name=00N4100000NgmQw').val(utm_count_of_sessions); $('input[name=00N4100000NgmZ5').val(utm_count_of_page_views); }); </script> 

And here is are the hidden fields within the form with the id="contact-form"

 <!-- Visitor ID: --> <input id="00N4100000NglQ2" maxlength="255" name="00N4100000NglQ2" size="20" type="hidden" value="" /> <!-- Medium: --> <input id="00N4100000NgleO" maxlength="255" name="00N4100000NgleO" size="20" type="hidden" value="" /> <!-- Source: --> <input id="00N4100000NglpC" maxlength="255" name="00N4100000NglpC" size="20" type="hidden" value="" /> <!-- Campaign: --> <input id="00N4100000NglyY" maxlength="255" name="00N4100000NglyY" size="20" type="hidden" value="" /> <!-- Content: --> <input id="00N4100000NgmBh" maxlength="255" name="00N4100000NgmBh" size="20" type="hidden" value="" /> <!-- Term: --> <input id="00N4100000NgmIs" maxlength="255" name="00N4100000NgmIs" size="20" type="hidden" value="" /> <!-- Count of Sessions: --> <input id="00N4100000NgmQw" maxlength="255" name="00N4100000NgmQw" size="20" type="hidden" value="" /> <!-- Count of Pageviews: --> <input id="00N4100000NgmZ5" maxlength="255" name="00N4100000NgmZ5" size="20" type="hidden" value="" /> 

I'm wondering if it's a problem with the hidden field names,"00N4100000NgmZ5" for example, which are custom field names from salesforce.com

Thanks for your help.

Answer 1

It appears you're missing the closing bracket in each of your selectors. I'd say that's the reason it's unable to insert the value into the input field.

Also, make sure that those values are collected and stored before you're inserting them into the input field.

Answer 2

Try to declare all your variables above your function getParameterByName(), and load the variables with their values inside your function, set your cookies right after and add the jQuery function right after you finish loading the variables as a simple $(function(){}).

I guess the problem is that when your $(document).ready() function executes WHEN the page is loaded and there are no values to load YET.

 <script> var visitor_id; var medium; var source; var campaign; var content; var term; var count_of_sessions; var count_of_page_views; // Parse the URL function getParameterByName(name) { name = name.replace(/[\\[]/, "\\\\[").replace(/[\\]]/, "\\\\]"); var regex = new RegExp("[\\\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\\+/g, " ")); // Give the URL parameters variable names visitor_id = getParameterByName('utm_visitor_id'); medium = getParameterByName('utm_medium'); source = getParameterByName('utm_source'); campaign = getParameterByName('utm_campaign'); content = getParameterByName('utm_content'); term = getParameterByName('utm_term'); count_of_sessions = getParameterByName('utm_count_of_sessions'); count_of_page_views = getParameterByName('utm_count_of_page_views'); // Set the cookies Cookies.set('utm_visitor_id', visitor_id, { expires: 90 }); Cookies.set('utm_medium', medium, { expires: 90 }); Cookies.set('utm_source', source, { expires: 90 }); Cookies.set('utm_campaign', campaign, { expires: 90 }); Cookies.set('utm_content', content, { expires: 90 }); Cookies.set('utm_term', term, { expires: 90 }); Cookies.set('utm_count_of_sessions', count_of_sessions, { expires: 90 }); Cookies.set('utm_count_of_page_views', count_of_page_views, { expires: 90 }); // Grab the cookie value and set the form field values $(function(){ $('input[name=00N4100000NglQ2').val(utm_visitor_id); $('input[name=00N4100000NgleO').val(utm_medium); $('input[name=00N4100000NglpC').val(utm_source); $('input[name=00N4100000NglyY').val(utm_campaign); $('input[name=00N4100000NgmBh').val(utm_content); $('input[name=00N4100000NgmIs').val(utm_term); $('input[name=00N4100000NgmQw').val(utm_count_of_sessions); $('input[name=00N4100000NgmZ5').val(utm_count_of_page_views); }); } </script>