仅从表单提交非空字段答案

【问题标题】：Submit only non empty fields from Form仅从表单提交非空字段
【发布时间】：2014-05-08 04:27:49
【问题描述】：

那是形式：

<form action="" method="GET">
<input type="text" name="para1">
<input type="text" name="para2">
<input type="submit" value="search">
</form>

现在，当我只填写第一个字段时，我得到 example.com/?para1=value&para2= 但我只希望它是 example.com/?para1=value 因为 para2 不包含值。我怎样才能做到这一点？应该可以用JS什么的吧？

【问题讨论】：

在提交时删除空元素
使用js，设置禁用属性（禁用的表单元素不回发）例如'$('##').prop(disabled, true); 但最好在你的控制器/动作方法中处理这个
我只知道 PHP 可以给我一个完整的代码吗？
@EddyUnruh 你没在下面看到我的回答吗？
我明白了，但还是有问题？最后通过提交空表单。当没有解决方案时，我会接受你的回答

标签： javascript forms

【解决方案1】：

试试这个，

包含jQuery并使用以下sn-p。

$(document).ready(function(){
    $("form").submit(function(){
        $("input").each(function(index, obj){
            if($(obj).val() == "") {
                $(obj).remove();
            }
        });
    });
});

【讨论】：

这很好，但我仍然总是得到？提交后：example.com？有没有办法避免这种情况？
我需要的是当用户在 example.com?para=value 上并尝试通过提交空字段来删除它时，他应该得到 example.com 但他得到了 example.com？
我个人会将 attr name 设置为空，因为当用户提交页面时它可能会闪烁等等。如果名称为空，它也不会出现在请求中。
@Wouter0100 好主意。赞赏

【解决方案2】：

这样的东西是普通的 javascript 版本：

<form id="theform" action="" method="GET" onsubmit="return removeEmpties()">
    <input type="text" name="para1"/>
    <input type="text" name="para2"/>
    <input type="submit" value="search"/>
</form>
<script>
  function removeEmpties() {
        var form = document.getElementById("theform");
        var inputs = form.children;
        var remove = [];
        for(var i = 0; i < inputs.length; i++) {
            if(inputs[i].value == "") {
                remove.push(inputs[i]);
            }
        }

        if(remove.length == inputs.length - 1)
          return false;

        for(var i = 0; i < remove.length; i++) 
          form.removeChild(remove[i]);
        return true;
    }
</script>

【讨论】：

这也可以，但是还剩下 ?当我提交空字段时，它无法避免？
我猜如果没有填写任何输入，你可以阻止表单提交——见上面的例子。

【解决方案3】：

将 onclick 放在提交按钮上调用 submitFunc() ，而不是使用表单操作：

<input type="button" onClick="submitFunc();" value="Pass Parameters"/>

js函数：

<script language="javascript" type="text/javascript">

function submitFunc()
{
   loopRemove("text",3);
   document.testform.action = "file:///C:/Users/mwafi/Desktop/test.html";
   document.testform.submit();
}

function loopRemove(startName,count)
{
  for(var i=1;i<=count;i++)
  {
    if(document.getElementById(startName+i).value=="")
    {
        var t = document.getElementById(startName+i);
        t.parentNode.removeChild(t);
    }
  }  
}

</script>

带有 HTML 表单的完整代码：

<html>

<title>Pass non-empty parameters</title>

<head>

<script language="javascript" type="text/javascript">

function submitFunc()
{
   loopRemove("text",3);
   document.testform.action = "http://www.google.com/";
   document.testform.submit();
}

function loopRemove(startName,count)
{
  for(var i=1;i<=count;i++)
  {
    if(document.getElementById(startName+i).value=="")
    {
        var t = document.getElementById(startName+i);
        t.parentNode.removeChild(t);
    }
  }  
}

</script>

</head>

<body onload="document.testform.reset();">

 <form name="testform">

  <h3>Pass Non-empty parameters</h3>

  Parameter 1 : <input type="text" name="text1" id="text1" /><br>
  Parameter 2 : <input type="text" name="text2" id="text2" /><br>
  Parameter 3 : <input type="text" name="text3" id="text3" /><br><br>
  <input type="button" onClick="submitFunc();" value="Pass Parameters"/>

 <form>

</body>

</html>

记住不要使用表单操作。

来源：http://www.scriptsplash.com/2009/07/passing-only-non-empty-fields-on-form.html

【讨论】：

不使用表单操作有什么好处？搜索引擎优化？ document.testform.action = "file:///C:/Users/mwafi/Desktop/test.html";无法使用重写的 php 文件