表单提交空值.我该如何预防呢?

Form submits empty values. How do I prevent this?

本文关键字：何预防 空值 表单提交      更新时间：2023-09-26

我的这个网站的一个形式一直有问题。表单应该更新我的网站的一些变量，所以他们改变为新的输入，而不是只是添加更多的数据库。

问题是，我希望表单能够传递，即使一些输入区域是空的，但我不希望将空值放在前面的值的位置。

例如，我有一个按钮名称"附录"。我只想编辑那一个，所以我只在相应的输入区域输入，因此我只更新那一个。但是，一旦我点击提交，所有的输入区域都被提交，空白区域将取代它们之前的变量。我不想这样。我只想更新value = "或null的表单。

这是我的代码:

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

重要:我不希望任何输入区域是强制性的。谢谢您的宝贵时间。

(另外，我还不太懂jQuery，所以如果可以的话，最好在javaScript中留下任何响应。)谢谢。)

下面是MY CGI的输出:

家Test1

apendix Test2

尤其Test3-next_is_blank

contato

提交

Carregar

这是一个打印，如果它使事情更清楚。可以看到，空值正在被发布。我不想这样，仅此而已。做什么?此外，由于某些原因，提交后屏幕提示"未定义"。

更新2

发生的是，我的网站选择从我的MySQL数据库。数据库中的值根据表单中获取的$_POST值相应地更新。为了解决这个问题，我相信，所有需要的是$_POST不被更新，如果表单中的输入值为空，但我不知道如何做到这一点。

    $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'";

这就是我的(简化的)数据库查询。我怎么能防止$_POST被更新，如果留空?

您是否使用过Fiddler (web调试代理)之类的工具来查看实际张贴的值?请参阅https://jsfiddle.net/mmwn1L5g/如何仅将所选值张贴?您确定服务器端代码是正确的并且没有清除其他值吗?

尝试POST到下面的操作来查看您的POST值并为我们发布。

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

//对不起。//也许这对你有好处

<!DOCTYPE html>
<html>
<body>
<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 == ""){
        //Disable tag null or ""
        input.disabled = true;
    }
}
} </script>
<form name="yourForm" id="configForm" action="" onsubmit="validate()"     method="post">
<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>
</body>
</html>

这并不难。你可以在HTML5中添加'required'属性

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

好运。

相关文章：