I'm new with JavaScript. Can someone give me an example how to delete an empty form element upon submit?

<form action='...' method='post' id='mySubmitForm'>
     <input type='text' name='name'>
     <input type='text' name='email'>
     <input type='text' name='phoneNumber'>
     <input type='submit' value='Save'>
</form>

Is there a easy way to check with JavaScript if the form is empty and delete it before submission if so?

I'm new with JavaScript. Can someone give me an example how to delete an empty form element upon submit?

<form action='...' method='post' id='mySubmitForm'>
     <input type='text' name='name'>
     <input type='text' name='email'>
     <input type='text' name='phoneNumber'>
     <input type='submit' value='Save'>
</form>

Is there a easy way to check with JavaScript if the form is empty and delete it before submission if so?

• javascript

• what do you want specifically? do you want to disable the fields that are empty before the form submits? in most cases it makes more sense to figure out if a field is empty AFTER the form submission. with php/asp or what ever server side lang you are using to deal with the input. – Achshar Commented Jun 23, 2011 at 18:29

5 Answers 5

There is a submit event that the browser throws before form submission that you can use.

reference: http://www.quirksmode/js/forms.html

Return false if you don't want the form to be submitted, true if you want it to happen. In the event, delete / add the extra inputs that you want accordingly.

function validate(formName)
{
    var form = document.forms[formName];

    //validate, and do stuff

    //remove items that you want with a call like this
    form.removeChild(document.getElementById(id));

    form.submit();
}

If this is for validation, you should really be doing validation server side, not client side.

You would call this function like so:

<input type=BUTTON onClick="validate('myForm')"/>

You can use jQuery, which is probably the easiest way.

$(document).ready(function() {
  $('#.mySubmitForm').submit(function(event) {
    event.preventDefault();

    $('input[type=text]').each(function() {
      var inputElement = $(this);

      inputElement.val() == "" ? inputElement.remove() : null;
    });

    $(this).trigger('submit');
  });
});

I didn't test that code, but it should delete the empty form values before submit, then remove them.

function onsubmit() {
    [].forEach.call(document.querySelectorAll('#mySubmitForm input[type=text]'), function(col) {
        if(col.value=='') col.disabled = 'disabled';
    });
}

and onsubmit="onsubmit()" in your <form> tag

Checking through javaScript is easy, but I'd advise you to have-and-assign an id attribute to your form elements

You can check in the following way,

var email = document.getElementById('email').value;

and you can remove email from your form as shown below

form.removeChild(document.getElementById('email'));
form.submit();

you can have a look at Adding and Removing HTML elements dynamically with Javascript for more details.