Build URL from Form Fields with Javascript or jquery

Question

Hello,

I have a quick question, I can't seem to find a suitable solution to anywhere else. I'm trying to create a URL builder form with Javascript or jquery. Bascially, 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://www.mydomain.com/index.php?variable1=12&variable2=56

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

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

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>

Thanks in advance! Troy

Answer 1

How about 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.

Answer 2

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 rgeular element for display and submission of the URL value in which cse youd 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
});

Answer 3

jQuery has serialize which builds the querystring values

So if you want to do the entire form:

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

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

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