Build URL from form fields with JavaScript or jQuery

Question

I'm trying to create a URL builder form with JavaScript or jQuery.

Basically, it will take the value of the two form fields, add them to a preset URL and show it on a third field on submit.

The resulting URL might be http://example.com/index.php?variable1=12&variable2=56

Now, this isn't the "action" of the form and the application can't read a URL (to grab the variables), so it has to be done on the page.

The resulting URL will be shown in the field named "url".

Here's a sample of the form:

<form id="form1" name="form1" method="post" action="">
  <p>
    <label>Variable 1
      <input type="text" name="variable1" id="variable1" />
    </label>
  </p>
  <p>
    <label>Variable 2
      <input type="text" name="variable2" id="variable2" />
    </label>
  </p>
  <p>
    <label>URL
      <input type="text" name="url" id="url" />
    </label>
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit" />
  </p>
</form>

Where does the preset url come from?

Nick Craver
– Nick Craver

2010-10-24 03:05:54 +00:00
Commented Oct 24, 2010 at 3:05 — Nick Craver
– Nick Craver, Commented Oct 24, 2010 at 3:05
Also see: stackoverflow.com/questions/75980/…

Christophe Roussy
– Christophe Roussy

2016-06-13 08:27:23 +00:00
Commented Jun 13, 2016 at 8:27 — Christophe Roussy
– Christophe Roussy, Commented Jun 13, 2016 at 8:27

Peter Mortensen · Accepted Answer · 2020-08-23 21:33:54Z

28

jQuery has serialize which builds the query string values.

So if you want to do the entire form:

alert($("#form1").serialize());

If you want to do only a few fields, then just make the selector select those fields.

alert($("#variable1, #variable2").serialize());

edited Aug 23, 2020 at 21:33

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 24, 2010 at 12:15

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Mortensen · Accepted Answer · 2020-08-23 21:34:49Z

8

Use something like...

var inputs = $('#form1').find('input[type=text]').not('#url');
var str = "http://www.base.url/path/file.ext?"
inputs.each(function (i, item) {
    str += encodeURIComponent(item.name) + "=" + encodeURIComponent(item.value) + "&";
});
$('#url').val(str);

This will select all <input>s on in form1 with type='text', and concatenate them into a query string. See encodeURIComponent().

Orrrr.....you could just use .serialize(). Thank you, prodigitalson.

edited Aug 23, 2020 at 21:34

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 24, 2010 at 3:22

clarkf

3,04223 silver badges14 bronze badges

2 Comments

prodigitalson Over a year ago

Since youre already using jQ, why do all that when you can just use $(inputSelector).serialize();?

netadictos Over a year ago

You shoud include this: if(i<$(this).length){str +="&";} in the last line of each loop, because last time you have a trimming "&".

Peter Mortensen · Accepted Answer · 2020-08-23 21:40:23Z

0

Something like the following should work:

var partFields = '#variable1,#variable2';

$(partFields).change(function(){
  var url = 'static/URL/to/file.php?';
  $('#url').val(url + $(partFields).serialize());
});

However, unless you want people to be able to override the URL, you might want to use a hidden field and a regular element for display and submission of the URL value in which case you'd have something like the following:

var partFields = '#variable1,#variable2';

$(partFields).change(function(){
  var url = 'static/URL/to/file.php?';
  var urlValue = url + $(partFields).serialize();
  $('#url-display').text(urlValue); // Set the displaying element
  $('#url').val(urlValue); // Set the hidden input value
});

edited Aug 23, 2020 at 21:40

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 24, 2010 at 3:23

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

1 Comment

netadictos Over a year ago

I would use @clarkf line: var partFields = $('#form1').find('input[type=text]').not('#url'); Here you have the working demo: jsfiddle.net/dactivo/4Nmcx

Collectives™ on Stack Overflow

Build URL from form fields with JavaScript or jQuery

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related