HTML：在表单提交上隐藏输入单选按钮

Question

我有一个 HTML 表单，有两种可能的类型（“id”或“个人资料”），

<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

（或 type=profile，取决于用户选择的内容）

我想要的是我的 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

您可以尝试这样的操作：

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

将无线电输入放在表单之外，让文本输入由 id 标识，以便您可以使用 getElementById 函数（仍需要检查浏览器是否支持） ）。如果您在此页面上不需要 jQuery，这可以避免加载它。

结果就是你所期望的。

但是..我会使用表单的服务器端处理。

Answer 2

至于你的第一个问题，我会像这样编写我的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 的使用，这将为您节省一些宝贵的带宽。