Solved

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

Posted on 2016-08-19
11
39 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
Comment Utility
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
Comment Utility
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 51

Accepted Solution

by:
Julian Hansen earned 250 total points
Comment Utility
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
 

Author Comment

by:John Hopkins
Comment Utility
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
zephyr_hex earned 250 total points
Comment Utility
You can check your browser's dev tool console by pressing F12, and then look at the console tab.
1
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:John Hopkins
Comment Utility
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
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks, both of you. I came in with one issue and uncovered some unexpected culprits.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now