Javascript - 在表单提交之前删除隐藏字段或设置为空答案

【问题标题】：Javascript - Remove hidden fields or set to empty before form submissionJavascript - 在表单提交之前删除隐藏字段或设置为空
【发布时间】：2012-02-21 15:23:03
【问题描述】：

在使用复选框上的 onclick 事件执行 POST 操作之前，我想在表单中删除 2 个隐藏字段或将它们设置为 null。

这就是我所拥有的 -

<input type="hidden" id="ci" name="ci" value="2"/>
<input type="hidden" id="pg" name="pg" value="prev"/>

<form:checkboxes path="choices" items="${lookups}" itemValue="id" itemLabel="label" element="li" **onclick="this.form.submit();"**/>

如何修改我的 onclick 事件 JS 以支持此功能？

谢谢！

【问题讨论】：

你为什么要这样做？

标签： javascript html forms dom

【解决方案1】：

$("input[type='hidden']").each(function(){

  $(this).reset();

});

.................................................. ........要么......................................... ......

以下代码由 javascript 组成。这可能有效

oForm = getElementById('form_id');

var frm_elements = oForm.elements;

for (i = 0; i < frm_elements.length; i++)

{

field_type = frm_elements[i].type.toLowerCase();
switch (field_type)
{
case "text":
case "password":
case "textarea":
case "hidden":
    frm_elements[i].value = "";
    break;
case "radio":
case "checkbox":
case "select-one":
case "select-multi":
default:
}

}

【讨论】：

那是 JQuery。我认为他想要普通的 JS。
当隐藏字段是唯一感兴趣的字段时，您不需要 switch 语句，但如果要使用，则需要一个 break 语句 before 隐藏字段或者它也会清除上面列出的所有类型。关于您的 jquery，您确定它有重置方法吗？（如果可以，请提供文档的链接？）
@nnnnnn link 这是 jquery doc -> forms -> reset 方法的链接。
该链接用于 ":reset" 选择器。我不相信有重置方法。

【解决方案2】：

只需将onclick 更改为：

onclick="document.getElementById('ci').value = ''; document.getElementById('pg').value = ''; this.form.submit();"

您只需使用元素的 ID，然后将它们的值分配给空字符串 - 这仍然会发送值。要禁用任何值，请禁用这些元素：

onclick="document.getElementById('ci').disabled = true; document.getElementById('pg').disabled = true; this.form.submit();"

【讨论】：

【解决方案3】：

如下更改您的 onclick 部分。

onclick="javascript:Clicked();"

然后在客户端 javascript 中的 head 标签下定义你的 onclick 函数。

<Head>
<script language=javascript>
function Clicked()
{
 //1. Write code to hide fields
 document.forms[0].submit(); 
}
</script>
</Head>

【讨论】：

这并没有告诉他如何实际隐藏或取消作为问题一部分的字段。生成脚本标签时也不需要 language=javascript。
@tkone 我只是在解释他开始的基本结构。虽然不需要放置 javascript 标签，但它是一个要遵循的标准，因为您可以放置多种类型的内联脚本。关于使字段无效，上面已经提供了答案。

【解决方案4】：

让 onclick 调用一个调用提交的函数。使用 jQuery 很容易做到这一点

function doform(){
    $.each($('input[type=hidden]'), function(input){
        $(input).val('');
    });
 }

修改你的 onclick 来调用它。您也可以通过使用 getElementsByTagName 和过滤类型的普通 DOM 访问，甚至直接调用 getElementById 来实现这一点

function doform(){
  var i1 = document.getElementById('pg');
  i1.value = '';
  var i2 = document.getElementById('ci');
  i2.value = '';
 }

【讨论】：

$('input[type="hidden"]').val(''); - 你不需要 .each()
更简单。我不知道 jquery 会隐式地将函数应用于一组匹配的节点。