Построить URL-адрес из полей формы с помощью Javascript или jquery

У меня есть быстрый вопрос, я не могу найти подходящее решение нигде. Я пытаюсь создать форму построителя URL с Javascript или jquery. Базиально, он примет значение двух полей формы, добавит их к предварительно установленному URL-адресу и покажет его на третьем поле в submit.

Результирующий URL-адрес может быть http://www.mydomain.com/index.php?variable1=12&variable2=56

Теперь это не "действие" формы, и приложение не может прочитать URL-адрес (чтобы захватить переменные), поэтому это нужно сделать на странице.

Полученный URL-адрес будет отображаться в поле имени "url".

Здесь образец формы:

<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>

Спасибо заранее! Трой

Ответ 1

jQuery имеет serialize, который строит значения querystring

Итак, если вы хотите сделать всю форму:

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

Если вы хотите сделать только несколько полей, чем просто выберите селектор, выберите эти поля.

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

Ответ 2

Как насчет чего-то вроде...

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

Это выберет все <input> on в form1 с помощью type='text' и объединит их в строку запроса. См. encodeURIComponent().

Orrrr..... вы могли бы просто использовать .serialize(). Спасибо, @prodigitalson.

Ответ 3

Что-то вроде следующего должно работать:

var partFields = '#variable1,#variable2';

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

Однако, если вы не хотите, чтобы люди могли переопределять URL-адрес, вы можете использовать скрытое поле и элемент rgeular для отображения и отправки значения URL-адреса, в котором cse у вас есть что-то вроде следующего:

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