我有一个具有两种可能类型(“ id”或“ profile”)的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

(或type = profile,取决于用户选择的内容)

我想要的是我的网址看起来像

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

谢谢!

===============>>#1 票数: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的使用,这将节省一些宝贵的带宽。

===============>>#2 票数:0

您可以尝试这样的事情:

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

结果是您期望的结果。

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

  ask by JDelonge translate from so

未解决问题?本站智能推荐:

1回复

单击表单提交时的jQuery单选输入

选择单选按钮时,我有一个要提交的表单。 我已经尝试了一些方法来使其工作,但是没有。 我的表单是这样的(仅用于广播的一个无线电选项,但原始无线电选项有20个选项): 如您所见,我尝试使用onchange事件提交此版本,但是我也尝试使用JQuery: 我究竟做错了什么?
5回复

选择单选按钮时隐藏特定的表单输入

我的第二个单选按钮按预期工作。 我试图让我的第一个单选按钮(公司名称)在被选中时隐藏第二个输入字段。 function formChoice(x) { if(x==0) $('#field1').css('display', 'block'); else $('#field1'
1回复

表单提交时无法选择单选按钮

提交表单时,我在获取单选按钮值时遇到问题。 我以为,提交表单后,它将获得用户做出的最终选择,但似乎无法识别选择了哪一个。 初始加载时:这在我的表单中 在我的提交处理程序中 在我的EJS中: 我测试了一下。 单击任何内容并单击提交按钮后,我得到values对象,即
2回复

向隐藏的输入标签添加值并提交到表单

我有一个显示我的POST数据的测试页。 我正在尝试查看我刚刚提交的帖子,但看不到我在表单中添加的payload 。 HTML: JS: 目前,我看不到为<input type="hidden" id="payload"> ,这使我相信它没有被发布。
1回复

检查隐藏的表单输入在表单提交中具有价值

我有一个带有隐藏输入的表单: 我有一个隐藏的警报(为此使用Bootstrap): <div id="alert_ajax_error" class="alert alert-danger text-center" role="alert" style="displa
1回复

单击文本时JavaScript不提交隐藏表单

我只是问了一个与此类似的问题,但有一个较小的例子。 但是,该代码的问题与我当前的代码不同。 (如果您对此感到好奇是我以前的问题: JavaScript文本未提交表单 ) 我正在开发我的第一个Web应用程序,并且尝试使用javascript通过单击文本来提交表单。 当我单击文本时,什么
3回复

提交时仅清除HTML表单中的特定字段

我有以下HTML表单代码: 由于这是ADD表单,因此我想关闭该表单并清除所有字段,除了顶部的隐藏字段外,这些标志是告诉我如何处理数据的标志。 当我执行代码时,它将清除表单中的所有数据,包括隐藏字段,因此第二次我无法添加新记录。 对我来说,最好的方法是完全关闭表单,这样我在再次尝试
2回复

提交HTML表单并获取无JavaScript或jquery的单选按钮值

我正在尝试通过电子邮件正文实施Net Promoter Score调查。 由于电子邮件客户端不允许使用Javascript。 我想将单选按钮值提交到“表单操作”属性中定义的url。 但是我的问题是如何知道选中了哪个单选按钮,以及如何将其提交到远程URL? 它将以哪种形式提交? 即名
2回复

提交HTML表单时如何强制不接收数据

我正在制作一个表单,该表单将在页面加载时自动提交。它将表单数据提交到另一个域,问题是当表单提交后,它将自动从另一个域接收php格式的JSON数据,该域由我的用户自动下载。 我希望我的表单应该提交数据,但不接收响应,或者如果接收到该信息,则应丢弃该不下载的数据。 index.html
1回复

修改输入格式后如何提交html表单?

我有一个简单的html表单,正在尝试将json格式的输入发布到端点。 如何获取要使用jsonInputs提交的表单? jQuery(document).ready(function($) { $('[contact-form]').on('submit', function