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 — user3559349
– user3559349, Commented May 8, 2014 at 4: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
– Eddy Unruh, Commented May 8, 2014 at 4:56

Rashmin Javiya · Accepted Answer · 2014-05-08 04:38:30Z

20

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 8, 2014 at 4:38

answered May 8, 2014 at 4:34

Rashmin Javiya

5,2223 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eddy Unruh Over a year ago

Thats nice but I still always get the ? after submiting so: example.com? is there a way to avoid that?

Eddy Unruh Over a year ago

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?

Wouter0100 Over a year ago

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.

Rashmin Javiya Over a year ago

@Wouter0100 Good idea. Appreciated

Darius Houle · Accepted Answer · 2014-05-08 05:04:57Z

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 8, 2014 at 5:04

answered May 8, 2014 at 4:42

Darius Houle

4653 silver badges8 bronze badges

2 Comments

Eddy Unruh Over a year ago

This works too but there is still left the ? when I submit empty fields, it can't be avoided?

Darius Houle Over a year ago

I guess you could prevent the form submitting if there was no input filled out -- see example above.

Ted · Accepted Answer · 2014-05-08 04:42:03Z

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

Collectives™ on Stack Overflow

Submit only non empty fields from Form

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related