Question

如果HTML表单的所有字段都至少填充了一个字符，我试图显示div。

<input name="name" id="name" value="" required placeholder="Name"></input>
<input name="surname" id="surname" value="" required placeholder="Surname"></input>
<input name="email" id="email" value="" required placeholder="Email"></input>
<textarea name="comments" value="" required placeholder="Comments"></textarea>
<div id="test" style="display:none;">test</div>

我已经有了这个脚本

<script type="text/javascript">
    if(document.getElementById('name').value!='' && 
       document.getElementById('surname').value!='' && 
       document.getElementById('email').value!='' && 
       document.getElementById('message').value!=''){
           document.getElementById('test').style.display = 'block';
    }
</script>

但它不起作用。为什么？我试图将脚本从文件的顶部移动到底部但是div＆＃39; test＆＃39;永远是隐藏的。我的sciript出了什么问题？

Answer 1

每次更改字段时都需要调用该脚本。

例如：

<input name="name" id="name" value="" required placeholder="Name" onchange="myFunction()"></input>
etc.

<script type="text/javascript">
    function myFunction() {
        if(document.getElementById('name').value!='' &&
           document.getElementById('surname').value!='' &&
           document.getElementById('email').value!='' &&
           document.getElementById('message').value!=''){
               document.getElementById('test').style.display = 'block';
        }
    }
</script>

Answer 2

我看到你链接了jquery。如果你有它，为什么不使用它呢？

$('input').on('change', function(){
    if($('#name').val() != '' && $('#surname').val() != '' && $('#email').val() != '' && $('#comments').val() != ''){
        $('#test').show();
    }else{
        //This part is optional
        $('#test').hide();
    }
});

您还应该在textarea中添加id="comments"

Answer 3

您有两个错误，首先您没有为您在脚本中使用的textarea分配任何ID。其次，每次用户进行任何更改时都必须调用该函数，因此您需要绑定onchange事件。

所以，它应该是：

HTML：

<input name="name" id="name" value="" required placeholder="Name" onchange="myUpdateFunction()"></input>
<input name="surname" id="surname" value="" required placeholder="Surname" onchange="myUpdateFunction()"></input>
<input name="email" id="email" value="" required placeholder="Email" onchange="myUpdateFunction()"></input>
<textarea name="comments" id="message" value="" required placeholder="Comments" onchange="myUpdateFunction()"></textarea>
<div id="test" style="display:none;">test</div>

JavaScript的：

<script type="text/javascript">
function myUpdateFunction() {
    if(document.getElementById('name').value!='' &&
       document.getElementById('surname').value!='' &&
       document.getElementById('email').value!='' &&
       document.getElementById('message').value!='') {
           document.getElementById('test').style.display = 'block';
    }
}
</script>

Answer 4

第一个问题是脚本运行时。如编码，它将在页面呈现脚本时立即运行，而不会再次运行。

您可能希望将其连接到每个文本框的on change事件，以便您知道何时显示隐藏字段。

其次，＆＃34;消息＆＃34;元件？那应该是评论吗？如果是，则评论缺少Id（具有名称但没有Id）

Answer 5

http://jsfiddle.net/7hafkwhj/1/

首先，将元素包装在html标记表单中是个好主意：

<form id="form">
    <input name="name" type="text" placeholder="Name" required></input>
    <input name="surname" type="text" placeholder="Surname" required></input>
    <input name="email" type="email" placeholder="Email" required></input>
    <textarea name="comment" placeholder="Comments" required></textarea>
</form>
<div id="message">Ok, roger</div>

另外，我不明白为什么你应该使用jQuery来做这种事情。您可以使用本机Javascript进行相同的操作：

(function() {
    var form = document.getElementById('form'),
    message = document.getElementById('message');

    function makeCheck() 
    {
        i = 0;
        while(i < form.elements.length) {
            if(form.elements[i].value === '')
            {
                return false;
            }
            i++;
        }
        return true;
    }

    function displayMessage() 
    {
        if(makeCheck()) 
        {
            message.style.display = 'block';
        }
        else 
        {
            message.style.display = 'hide';
        }
    }

    for(i = 0; i < form.elements.length; i++)
    {
        form.elements[i].onkeyup = function () {
            displayMessage();
        };
    }
})();

表单验证成功时显示隐藏元素

5 个答案: