Javascript HTML：在表单提交时隐藏输入无线电

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

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

我想要的是我的URL看起来像

/process.php?id=input

或

我有两个问题：

1） 下面的jQuery/JavaScript代码是“坏习惯”吗？如果我按以下方式做，我真的觉得我做得不对（即使它有效）：

函数formSubmit（）{
//如果选择了第一个收音机（id），则将值名称设置为“id”，否则设置为“profile”
$（“表单输入：文本”）[0]。名称=$（“表单输入：无线电”）[0]。选中？“id”：“配置文件”；
//禁用单选按钮（即不提交）
$（“表单输入：收音机”）[0]。已禁用=true；
$（“表单输入：收音机”）[1]。禁用=真；
}

2） 有没有一种不用htaccess规则或JavaScript就可以做到这一点的方法

---

谢谢

关于你的第一个问题，我会这样写我的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);
});

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

---

至于你的第二个问题，你可以把这个逻辑转移到服务器端。这取决于您希望预处理逻辑是由客户端还是由服务器完成。无论哪种方式，您都应该在服务器上拥有验证表单的逻辑。如果js出错，它可以发送原始表单数据。就我个人而言，我会将此逻辑放在服务器上，以避免检查以确保它在第一时间已预处理的开销。您还可以减少js的使用，这将为您节省一些宝贵的带宽。

您可以尝试以下方法：

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

<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，则可以避免加载它

结果就是你期望的结果

---

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

如果您使用php，为什么不使用它来提交表单而不是javascript？这意味着您的函数适用于所有使用或不使用javascript的用户。带有单选按钮的php表单的一个例子是process.php中的@DominicGreen，我可以很容易地为使用NoScript的人检查这两种类型的输入（id=input或idType=id&value=input）。事实上，我已经这样做了。编辑：谢谢你的参考-好主意！为什么你想让你的URL看起来像一个特定的方式？最终用户肯定不会在意或注意到使用了什么确切的查询字符串。我认为最好不要使用查询字符串，而是处理php文件中的所有内容，这样下一个查看代码的人就不会来找你了。@user886931允许用户在URL中轻松尝试不同的组合，而不必每次都加载页面。对于这个特定的页面，我希望能够轻松地更改id和配置文件。好吧，您比任何人都更清楚这个页面操作查询字符串的重要性。它看起来很粗糙，但如果不知道PHP文件中发生了什么，就很难说它比您的备选方案好还是坏。

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

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