Filter Form Parameters Before Submitting

Question

Is there a way to check the parameter if its empty or not before submitting?

<form method="GET">
    <input name="param1" value="test"/>
    <input name="param2" value=""/>
    <input type="submit" name="" id="search-submit" class="button" value="Submit">
</form>

If i have a form something like this. the param2 is empty so when I press submit, it look like this

link.com?param1=test&param2=

so is it possible to attain something like this that when a param is empty. it should not be included. like

link.com?param1=test

since the param2 is empty

Answer 1

Filter before submitting:

<form name="FOOO">
    <input type="text" name="firsttt"   value="blabla">
    <tEXtarea> aaa</tEXtarea>
    <input type="text" name="Secondssssss"   value="blabla2">
    <input type="submit" onclick="return MyValidator('FOOO');">
</form>

<script type="text/javascript">
function MyValidator(FORMNAMEE){
    var inputs = document.forms[FORMNAMEE].getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++)    {
        alert(inputs[i].value);
    }
    var textareas = document.forms[FORMNAMEE].getElementsByTagName("textarea");
    for(var i = 0; i < textareas.length; i++)    {
        alert(textareas[i].value);
    }
}
</script>

Answer 2

you have to check if the param is set with isset() function in php
so :

if ( isset($_GET['param2']) ) { //do some thing }...

and mostly the page will give you an error because the $_GET is not set on the first view;

so change the code to::

if ( isset( $_GET['SUBMIT BUTTON'] ) ) {
    if ( isset ( $_GET['param2']) ) {
    //do some thing
  }
}

Answer 3

Using pure javascript, it would be something like - (untested)

var form = document.forms[0];
form.onsubmit=function(){
    var inputs, index;
    inputs = document.getElementsByTagName('input');
    for (index = 0; index < inputs.length; ++index) {
         if(inputs[index].value == ''){
            form.removeChild(inputs[index]);
         }
    }
}

Using jQuery, it would be something like - (untested)

$('form').submit(function() {
     $('input').each(function(){
        if($(this).val() == ''){
           $(this).remove();
        }
     });
});

Answer 4

Pure javascript method

form.onsubmit=function(){
  var arr=this.elements,i=0,l=arr.length;
  for(;i<l;i++){
    if(arr[i].value===''){
      arr[i].disabled=true;
    }
  }
}

To answer OP's further question

function checkForm(){
  var arr=this.elements,i=0,l=arr.length;
  for(;i<l;i++){
    if(arr[i].value===''){
      arr[i].disabled=true;
    }
  }
}
var arr=document.getElementsByTagName('form'),i=0,l=arr.length;
for(;i<l;i++){
  arr[i].onsubmit=checkForm;
}

Answer 5

Always is Better validate Data in the Server Side, the user can disable the javascript and still submit the form. look at this code and try it:

// THE FULL CODE

// myFile.php

<?php
if(isset($_GET['get'])){        
        //validating:
        if($_POST['param1']==""||$_POST['param2']==""){
            echo 'come on boy, insert a text';
        }else{
            echo 'ok i got it <hr />'
            .$_POST['param1'].'<br />'
            .$_POST['param2'].'<br />';
        }
}else{

?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
     $('#idForm').ajaxForm({
        beforeSend: function() { 
           $('#response').html('Processing...').show();
        },
        error: function(xhr, ajaxOptions, thrownError) {
            $('#response').html('Error:<br />'+thrownError);
        }, 
        success: function(response) { 
            $('#response').html(response);
        }
    });
});

</script>
<form method="POST" id="idForm" action="myFile.php?get=0">
    <input name="param1" id="idParam1" value="test"/><br />
    <input name="param2" id="idParam2" value=""/><br />
    <input type="submit" name="" id="search-submit" class="button" value="Submit"><br /><br />
</form>

<div id="response"></div>

<?php   
}   
?>