The form submits empty values. How can I prevent this?

advertisements

I've been having problems with a form of this website of mine. The form is supposed to update some variables of my website, so they change into the new input, instead of just adding more to the database.

The thing is, I want the form to be able to pass even if some input areas are empty, but I DON'T WANT for the empty values to be put in the place of the previous values.

For instance, I have a button name "apendix". I only want to edit that one, so I only type on the corresponding input area, hence I only update that one. But once I hit submit, all input areas are submitted, and the blank ones take the place of their former variables. I don't want this. I want only the form with value != '' or null to be updated.

This is my code:

<script>
function validate(){
    var formId = document.getElementById("configForm");
    var allInputs = formId.getElementsByTagName("input");
    var input, i;

    for (i=0; input = allInputs[i]; i++){
        if (input.value == null || input.value == ""){
            input.setAttribute("name", "");
        }
    }
} </script>

<form method="post" action="" id="configForm" onsubmit="validate()">
<label for="home">Home:</label>
<br>
<input type="text"  id="home" name="home">
<br>
<label for="apendix">ApĂȘndice:</label>
<br>
<input type="text" name="apendix">
<br>
<label for="about">Sobre:</label>
<br>
<input type="text" name="sobre">
<br>
<label for="contato">Contato:</label>
<br>
<input type="text" name="contato">
<br><br>
<input type="submit" value="Carregar" name="submit"> </form>

Important: I don't want any of the input areas to be obligatory. Thank you for your time in advance.

(Also I don't quite get jQuery yet so it would be good to leave any response in javaScript, if that is the way to go, if possible. Thanks.)

UPDATE

Here is the output in MY CGI:

home Test1

apendix Test2

sobre Test3-next_is_blank

contato

submit

Carregar

Here is a print, if it makes things clearer. As it can be seen, empty values are being posted. I don't want this, is all. What do? Also, for some reason, the screen alerts "undefined" after submit.

UPDATE 2

What happens is that my website SELECTS from the my MySQL database. The values in the database are updated accordingly to the $_POST values acquired in the forms. To solve this, I believe, all that is need is to the $_POST not to be updated if the input values in the form be left empty, but I don't know how to do it.

    $home = $_POST["home"];
    $apendix = $_POST["apendix"];
    $sobre = $_POST["sobre"];
    $contato = $_POST ["contato"];

    $query = "UPDATE form SET
    home= '$home',
    apendix= '$apendix',
    sobre= '$sobre',
    contato= '$contato'
    WHERE id='1'";

such is my (simplified) database query. How can I prevent $_POST from being updated if left blank?


Have you used a tool like Fiddler (web debugging proxy) to see that the values are actually being POSTed? See https://jsfiddle.net/mmwn1L5g/ how only the values selected are POSTed? Are you sure your server side code is correct and not clearing the other values?

Try POSTing to the action below to see your POST values and post them for us.

<form method="post" action="http://www.htmlcodetutorial.com/cgi-bin/mycgi.pl" id="configForm" onsubmit="alert(typeof validate);validate()" target="_blank">