Solved

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

Posted on 2016-08-19
11
51 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 42

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 42

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 54

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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

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 42

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 54

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 54

Expert Comment

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

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

786 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