HTML: скрытие входных радио в форме отправки

Question

У меня есть HTML-форма, имеющая два возможных типа ("id" или "profile")

<form action="process.php">
<input type="radio" name="type" value="id">
<input type="radio" name="type" value="profile">
<input type="text" name="value" value="input">
</form>

По сути, мой итоговый URL-адрес

/process.php?type=id&value=input

(или тип = профиль, в зависимости от того, что выберет пользователь)

Я хочу, чтобы мои URL выглядели примерно так:

/process.php?id=input

или

/process.php?profile=input 

У меня два вопроса:

1) Является ли следующий код jQuery / JavaScript "плохой практикой"? Я действительно не чувствую, что делаю это правильно, если я делаю это следующим образом (даже если это работает):

<input type="submit" onclick="formSubmit()">
<script>
function formSubmit() {

    // if the first radio (id) is selected, set value name to "id", else "profile"
    $("form input:text")[0].name = $("form input:radio")[0].checked ? "id" : "profile"; 

    // disable radio buttons (i.e. do not submit)
    $("form input:radio")[0].disabled = true;
    $("form input:radio")[1].disabled = true;
}
</script>

2) Есть ли способ сделать это без использования правил htaccess или JavaScript?

Спасибо!

Answer 1

Что касается вашего первого вопроса , я бы написал свой jQuery следующим образом:

// store your form into a variable for reuse in the rest of the code
var form = $('form');

// bind a function to your form's submit.  this way you
// don't have to add an onclick attribute to your html
// in an attempt to separate your pre-submit logic from
// the content on the page
form.submit(function() {
        // text holds our text input
    var text = $('input:text', form),
        // radio holds all of our radio buttons
        radio = $('input:radio', form),
        // checked holds our radio button that is currently checked
        checked = $('input:radio:checked', form);

    // checking to see if checked exists (since the user can
    // skip checking radio buttons)
    if (checked) {
        // setting the name of our text input to our checked
        // radio button's value
        text.prop('name', checked.val());
    }

    // disabling our radio buttons (not sure why because the form
    // is about to submit which will take us to another page)
    radio.prop('disabled', true);
});

Что касается вашего второго вопроса , вы всегда можете переместить егологика на стороне сервера.Это зависит от того, хотите ли вы, чтобы логика предварительной обработки выполнялась клиентом или вашим сервером.В любом случае на сервере должна быть логика для проверки формы.Если ваши ошибки JS, он может отправить поверх необработанных данных формы.Лично я бы поставил эту логику на сервер, чтобы избежать накладных расходов на проверку, чтобы убедиться, что она была предварительно обработана в первую очередь.Вы также сможете сократить использование js, что сэкономит вам драгоценную пропускную способность.

Answer 2

Вы можете попробовать что-то вроде этого:

<input type="radio" name="type" value="id" onclick="getElementById('textValue').setAttribute('name','id');">
<input type="radio" name="type" value="profile" onclick="getElementById('textValue').setAttribute('name','profile');">

<form action="process.php">
<input type="text" id="textValue" name="value" value="input">
<input type="submit">
</form>

Поместите радиовходы вне формы, чтобы текстовый ввод идентифицировался по идентификатору, чтобы вы могли использовать функцию getElementById (все еще необходимо проверитьесли это поддерживается браузером).Это позволяет избежать загрузки jQuery, если он вам не нужен на этой странице.

Результат - ожидаемый вами.

Но .. Я бы использовал обработку формы на стороне сервера.