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>

Answer 1

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());