HTML：表单上输入隐藏无线电提交

我有一个有两个可能的类型（“ID”或“曲线”）HTML：表单上输入隐藏无线电提交

<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

HTML表单

（或类型=轮廓，这取决于用户挑选什么）

我想是我的网址看起来像

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

谢谢！

来源

2011-12-11 JDelonge

如果您使用PHP为什么不能用它来提交您的形式，而不是JavaScript，这意味着你的函数适用于带或不带JavaScript的所有用户。一个单选按钮的PHP表单的例子在这里http://www.homeandlearn.co.uk/php/php4p10.html –

@DominicGreen在process.php中，我可以轻松地检查两种类型的输入（id = input或idType = id＆value = input）用于NoScript的人。事实上，我已经这样做了。编辑：谢谢参考，虽然 - 好主意！ – JDelonge

为什么你想要你的网址看起来特定的方式？最终用户肯定不会在意或注意使用了什么确切的查询字符串。我认为将查询字符串单独放置并处理php文件中的所有内容会更好，因此下一个查看代码的人不会来找你。 –

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

来源

2011-12-11 22:16:38 JesseBuesking

你可以尝试这样的事：

<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，如果你不需要它在这个页面上。

结果是您所期望的结果。

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

来源

2011-12-11 22:19:14 kcsoft

HTML：表单上输入隐藏无线电提交

回答

相关问题