Submit only non empty fields from Form

Question

That is the form:

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

Now when I fill out only the first field I get example.com/?para1=value&para2= But I just want it to be example.com/?para1=value because para2 don't contains value. How can I do this? Should be possible with JS or anything?

using js, set the disabled property (disabled form elements do not post back) e.g. `'$('##').prop(disabled, true);` but better to handle this in your controller/action method — , May 08 '14 at 04:32
I see but still have a problem with the ? at the end by submitting empty form. When there will be no solution then I will accept your answer — Eddy Unruh, May 08 '14 at 04:56
Does this answer your question? [How to prevent submitting the HTML form's input field value if it empty](https://stackoverflow.com/questions/8029532/how-to-prevent-submitting-the-html-forms-input-field-value-if-it-empty) — Francesco Frassinelli, Sep 23 '20 at 13:44

Rashmin Javiya · Accepted Answer · 2014-05-08T04:38:30.727

19

Try this,

Include jQuery and use following snippet.

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

edited May 08 '14 at 04:38

answered May 08 '14 at 04:34

Rashmin Javiya

5,173
3
27
49

Thats nice but I still always get the ? after submiting so: example.com? is there a way to avoid that? – Eddy Unruh May 08 '14 at 04:44
What I need is when a user is on example.com?para=value and he try to remove it by submiting empty field he should get example.com but he gets example.com? – Eddy Unruh May 08 '14 at 04:47
6

Personally I would set the attr `name` to empty, because when the user submits the page it may flicker and so on. With an empty name, it won't appear in the request either. – Wouter0100 Mar 31 '16 at 08:30
2

@Wouter0100 Good idea. Appreciated – Rashmin Javiya Mar 31 '16 at 10:10

Darius Houle · Answer 2 · 2014-05-08T05:04:57.100

3

Something like this would be the plain javascript version:

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

edited May 08 '14 at 05:04

answered May 08 '14 at 04:42

Darius Houle

465
3
8

This works too but there is still left the ? when I submit empty fields, it can't be avoided? – Eddy Unruh May 08 '14 at 04:52
I guess you could prevent the form submitting if there was no input filled out -- see example above. – Darius Houle May 08 '14 at 05:06

score 0 · Answer 3 · answered May 08 '14 at 04:42

put onclick on submit button to call submitFunc() , rather than use form action:

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

js functions:

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

full code with HTML form:

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

remember don't use form action.

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

What would be the benefit not to using form action? SEO? document.testform.action = "file:///C:/Users/mwafi/Desktop/test.html"; wouldn't work its an rewritten php file — Eddy Unruh, May 08 '14 at 04:55

Submit only non empty fields from Form

3 Answers3

Linked