Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2016-08-19
11
Medium Priority
?
81 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 44

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 44

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 59

Accepted Solution

by:
Julian Hansen earned 1000 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

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 44

Assisted Solution

by:zephyr_hex (Megan)
zephyr_hex (Megan) earned 1000 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 59

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 59

Expert Comment

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

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…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

688 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