Solved

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

Posted on 2016-08-19
11
64 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 57

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 57

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 57

Expert Comment

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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

710 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