Solved

I need to pass a couple query string variables to form fields

Posted on 2016-08-19
11
53 Views
Last Modified: 2016-08-19
I'm using WooCommerce. On the checkout page, I need to autofill the name and email address form fields from variables in the query string.

Here is a functional URL that would match what we have incoming to that page: https://shop.wayofgray.com/checkout/?inf_field_FirstName=John-test44&inf_field_Email=johnhopkins%2Btest44%40gmail.com

I have this working elsewhere, but I seem to be missing a part of the puzzle.
I'm using the following elements and it isn't working.

Here is what I have thus far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://shop.wayofgray.com/js/GET3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name=billing_first_name]').val((getQueryVariable("inf_field_FirstName")));
$('input[name=billing_email]').val((getQueryVariable("inf_field_Email")));
});
</script>

Open in new window


Here are the two form fields:
<input type="text" class="input-text form-control " name="billing_first_name" id="billing_first_name" placeholder=""  autocomplete="given-name" value=""  />

Open in new window

<input type="email" class="input-text form-control " name="billing_email" id="billing_email" placeholder=""  autocomplete="email" value=""  />

Open in new window


What am I overlooking? And for the record, I'm a bit outside of my comfort zone here as far as my meager coding skills go.
0
Comment
Question by:John Hopkins
  • 5
  • 3
  • 3
11 Comments
 
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41763141
You should console.log(getQueryVariable("inf_field_FirstName")) before you attempt to assign it to the input.  Verify your getQueryVariable function is working.
0
 
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41763142
Assuming that function is working, you can assign the values to the inputs like so:
$(document).ready(function() {
    var firstName = 'Foo';
    var email = 'bar@foo.com';

    $('#billing_first_name').val(firstName);
    $('#billing_email').val(email);
});

Open in new window


Here is a Fiddle Demo
0
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41763157
That code works for me - just cut and paste and it pulls the values correctly

Sample http://www.marcorpsa.com/ee/t1497.html?inf_field_FirstName=John-test44&inf_field_Email=johnhopkins%2Btest44%40gmail.com
1
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:John Hopkins
ID: 41763168
zephyr_hex, thanks for the reply. You give my abilities in this regard too much credit.

Julian Hansen,
Hmmm. I wonder what, with WooCommerce, is breaking it then.

Here is a link that will add an item to your cart: https://shop.wayofgray.com/cart/?fill_cart=208

Then click "proceed to checkout" and add in the query string: ?inf_field_FirstName=John-test44&inf_field_Email=johnhopkins%2Btest44%40gmail.com

That should get you to the page that I'm working with.
It should work and I'm about to pull out my hair.

Thoughts?
0
 
LVL 43

Assisted Solution

by:zephyr_hex (Megan)
zephyr_hex (Megan) earned 250 total points
ID: 41763178
You can check your browser's dev tool console by pressing F12, and then look at the console tab.
1
 

Author Comment

by:John Hopkins
ID: 41763182
Thanks, zephyr_hex.
There is obviously an issue there: http://screencast.com/t/nZGl1ExobaFr

Any clues there as to the cause of the blocks?
0
 

Author Comment

by:John Hopkins
ID: 41763187
I just changed out the http links to https and we are getting somewhere.
It now works in Chrome, but not in Firefox.
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41763213
The link you posted is *working* - the problem is that this style on line 4144 of styles.css
.form-control {
  border-radius: 0;
  padding: 22px 12px;
}

Open in new window

The padding is too much - it is hiding the text.

If you click on the Name input and Ctrl A you can select and copy the contents.

It is working - just fix your formatting.
1
 

Author Comment

by:John Hopkins
ID: 41763216
Holy cow. I should have thought of that. I'd seen the issue with the Order Notes field but hadn't tried to manually enter data in Firefox yet. Thanks guys.
0
 

Author Closing Comment

by:John Hopkins
ID: 41763219
Thanks, both of you. I came in with one issue and uncovered some unexpected culprits.
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41763226
You are welcome.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
alert(innerHTML); 8 32
jQuery Scroll To Top 5 38
Responsive Font Size 6 26
How to control cache of some js files ? 7 38
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question