Как изменить действие формы, добавив выбранное значение переключателя

Question

У меня есть HTML-форма с такими переключателями, как эти:

<form action = "/somecomplicatedurl" method="post">  
   <ul id="category_list">
    <li>
      <label  for="Foo">
      <input type="radio" name="category" id="foo"  value="foo" onclick="this.form.submit()" />
      Foo</label>
    </li>
    <li>
      <label  for="Bar">
      <input type="radio" name="category" id="bar" value="bar"  onclick="this.form.submit()"/>
      Bar</label>
    </li>              
     <li>
      <label  for="Spam">
      <input type="radio" name="category" id="spam" value="spam"  onclick="this.form.submit()"/>
      Spam</label>
     </li>  
    </ul>
 </form>

В случае события onclick я хотел бы добавить строку запроса к действию /somecomplicatedurl добавления выбранной категории.

Например, нажатие на категорию spam должно вызвать публикацию HTTP с таким действием:

/somecomplicatedurl?category=spam

Javascript или jQuery действительны.

EDIT:
значение категории уже правильно передано на сервер;Мне просто нужно, чтобы после нажатия кнопки переключателя URL-адрес, отображаемый в адресной строке браузера, содержал выбранную категорию.^*

^{* Я хотел бы избежать добавления другого перенаправления, потому что в настоящее время я обрабатываю различные случаи на этом / somecomplicatedurl маршруте}

Answer 1

Смешивание переменных POST / GET считается плохой формой.Почему бы динамически не установить скрытое поле формы:

<input type="hidden" id="category" name="category" value="spam" />

вместо этого?

Ваш клик станет:

onClick="document.getElementById('category').value = this.value; this.form.submit();"

---

, если это просто проблема с отображением,тогда

onclick="this.form.action='/somecomplicatedurl?category=' + this.value; this.form.submit();"

Answer 2

Извините, сначала неправильно понял ваш вопрос.Вы можете изменить действие формы, добавив

document.this_form.action = "somecomplicatedurl?category=span";

к своему событию onClick перед отправкой.

Answer 3

Изменение метода формы на get, пожалуй, самое простое, но при малой вероятности, что это немного сложнее, вот несколько jQuery. Выньте эти встроенные скрипты и напишите что-то вроде этого:

$(function () {
    $('#category_list input').change(function () {
        var jQthis = $(this),
            jQform = $(this).parents('form'),
            currentAction = jQform.attr('action'),
            // This removes the current query, if you've added one.
            newAction = currentAction.split('?').shift();

        // Work out the new action and set it.
        newAction += jQthis.val();
        jQform.attr('action', newAction);

        // Submit the form, since your previous handlers were doing that.
        jQform.submit();

    });
});

Answer 4

Мне кажется, что использование метода "GET" в теге формы позволит вам выполнить то, что вы хотите, или я неправильно понимаю вопрос ...