Putting URL variables into HTML form with JS or JQuery

Question

I am trying to pass variables in the URL like this to fill a HTML and Liquid form and submit it once it's populated:

http://www.example.com/login?customer_email=admin@website.com&customer_password=123456

The closest thing I've found to what I'm trying to achieve is this question. I'm losing my marbles because I don't understand how the variables are put into the form.

Can someone please break it down / explain?

Here is the form code:

    {% form 'customer_login' %}

      <h1>Login</h1>

      {% include 'form-errors-custom' %}

      <label for="customer_email" class="hidden-label">Email Address</label>
      <input type="email" value="" name="customer[email]" id="customer_email" placeholder="Email" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off" autofocus>

      {% if form.password_needed %}

        <label for="customer_password" class="hidden-label">Password</label>
        <input type="password" value="" name="customer[password]" id="customer_password" placeholder="Password" {% if form.errors contains "password" %} class="error"{% endif %}>

        <p>
          <a href="#" onclick="showRecoverPasswordForm();return false;">Forgot your password?</a>
        </p>

      {% endif %}

      <div class="text-center">
        <p>
          <input type="submit" class="btn" value="Sign In">
        </p>
        or <a href="{{ shop.url }}">Return to Store</a>
      </div>

    {% endform %}

i so no js or jquery here. you may have mis-tagged your question (also in your head) — mkoryak, Dec 02 '15 at 02:00
See the top answer to this question on how to read url query parameters: http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-url-parameter — mariocatch, Dec 02 '15 at 02:06

score 0 · Answer 1 · answered Dec 02 '15 at 02:01

The parameters that are passed in the url like in your case are like the get request and can be received in the same way as you would receive the parameters submitted by the form with method="get". And then you put the variable in the value attribute of the form fields in current page.

sideroxylon · Accepted Answer · 2015-12-02T02:55:06.367

0

If you are looking to get the parameters from the URL client side (using JS/Jquery, as per your tags), you can get the query string (using location.search) and extract the key/value pairs, then allocate them however you wish.

//var str = location.search

var str = 'customer_email=admin@website.com&customer_password=123456';
var pairs = str.split('&');
var email = pairs[0].split('=')[1];
var password = pairs[1].split('=')[1];
$('#customer_email').val(email);
$('#customer_password').val(password);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <input type="email" value="" name="customer[email]" id="customer_email" placeholder="Email" autocorrect="off" autocapitalize="off" autofocus>


<input type="password" value="" name="customer[password]" id="customer_password" placeholder="Password" class="error"{% endif %}>

edited Dec 02 '15 at 02:55

answered Dec 02 '15 at 02:16

sideroxylon

4,338
1
22
40

Thanks for your reply @sideroxylon. I'm a little confused about the div, could you explain? I can't seem to get it populating the form correctly in the email and password fields. – Trees Dec 02 '15 at 02:32
I've just output the two values so you can see them. To place them in the form, you'd do something like `$('#customer_email').val(email)` and `$('#customer_password').val(password)`. This puts the values in the named elements. I've updated the answer to use your inputs. – sideroxylon Dec 02 '15 at 02:51
Thank you so much for your efforts, you're fantastic! I've got it working now. :) – Trees Dec 02 '15 at 03:58

Putting URL variables into HTML form with JS or JQuery

2 Answers2