使用 javascript 显示提交按钮答案

【问题标题】：Displaying the submit button using javascript使用 javascript 显示提交按钮
【发布时间】：2016-08-23 16:31:22
【问题描述】：

我正在运行此代码，我希望仅当所有字段都不为空但它不起作用时才显示提交按钮。

<form id="my_form">
    <input type="text" id="title" name="title" class="title" placeholder="TITLE" />
    <textarea name="comment" id="comment" class="textarea"></textarea>
    <input type="text" id="tags" name="tags" class="text" placeholder="TAGS" />
    <span id="advance"></span>
</form>
<script src="js/jscript.js"></script>
<script>
    $(document).ready(function() {
        if (($("#comment").val() !== "") && ($("#title").val() !== "") && ($("#tags").val() !== "")) {
            $('#advance').html("<input type='submit' name='submit' id='submit' class='upload' value='ADVANCE' />");
        }
    });
</script>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以将事件处理程序绑定到“change”（或“keyup”）JavaScript 事件。当改变输入时，它会触发函数。

$(document).on('change','#my_form', function() {
    if (($("#comment").val() !== "") && ($("#title").val() !== "") && ($("#tags").val() !== "")) {
        $('#advance').html("<input type='submit' name='submit' id='submit' class='upload' value='ADVANCE' />");
    }
});

并且可以更新check isfill的功能：

$(document).on('change','#my_form', function() {
  var allFilled = true;

  $(':input:not(:button)').each(function(index, element) {
    if (element.value === '')
      allFilled = false;
   });

  $('#advance').html("");
  if(allFilled)
    $('#advance').html("<input type='submit' name='submit' id='submit' class='upload' value='ADVANCE' />");     
});

【讨论】：

【解决方案2】：

$(document).ready 仅在页面完成渲染时触发一次。

您需要附加到表单字段上的onfocus、onblur 或onchange 事件以完成您要执行的操作。

【讨论】：

【解决方案3】：

原版 JS 替代方案：

var title = document.getElementById('title');
var comment = document.getElementById('comment');
var tags = document.getElementById('tags');
var advance = document.getElementById('advance');

document.getElementById('my_form').addEventListener('keyup', function(e) {
  if (e.target && e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA')   
    if (title.value && comment.value && tags.value)
      advance.innerHTML = "<input type='submit' name='submit' id='submit' class='upload' value='ADVANCE' />";
});

<form id="my_form">
  <input type="text" id="title" name="title" class="title" placeholder="TITLE" />
  <textarea name="comment" id="comment" class="textarea" placeholder="COMMENT"></textarea>
  <input type="text" id="tags" name="tags" class="text" placeholder="TAGS" />
  <span id="advance"></span>
</form>

【讨论】：

【解决方案4】：

我会使用另一种方法。不用js输出代码，你总是可以直接在html中随心所欲，而不是在js/css的帮助下隐藏或显示。

<form id="my_form">
  <input type="text" id="title" name="title" class="title" placeholder="TITLE" />
  <textarea name="comment" id="comment" class="textarea"></textarea>
  <input type="text" id="tags" name="tags" class="text" placeholder="TAGS" />
  <input type='submit' name='submit' id='submit' class='upload' value='ADVANCE' style="display: none" />
</form>

<script src="js/jscript.js"></script>
<script>
    $(document).ready(function() {
      $(document).on('change', '#my_form', function() {
        if (($("#comment").val() == "") || ($("#title").val() == "") || ($("#tags").val() == "")) {
          $('#submit').css("display", "none");
        } else {
          $('#submit').css("display", "");
        }
      })
    });
</script>

请记住，输入失去焦点后会触发更改事件，因此您可能需要使用另一个事件。

小提琴：https://jsfiddle.net/af5torcs/1/

【讨论】：

$('#submit').css("display", "block");优于 $('#submit').css("display", "");
如何将内联元素显示为块元素“更好”？ $('#submit').css("display", "");完全移除 display 属性。

【解决方案5】：

Delegate input 或 change 文档上的事件。

$(document).on('input', function(e) {
    // your original code
});

片段

$(document).ready(function() {
  $(document).on('input', function(e) {
    if (($("#title").val() !== "") && ($("textarea").val() !== "") && ($("#tags").val() !== "")) {
      $('#advance').html("<input type='submit' name='submit' id='submit' class='upload' value='ADVANCE' />");
    }
  });
});

/* Added a little style because the alignment was annoying */

bady {
  line-height: 1;
  position: relative;
}
input,
textarea {
  vertical-align: baseline;
  margin: 0 0 1em 0;
}
input {
  width: 12em;
}
textarea {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="form" name="form">
  <input type="text" id="title" name="title" class="title" placeholder="TITLE" />
  <textarea name="comment" id="comment" class="textarea"></textarea>
  <input type="text" id="tags" name="tags" class="text" placeholder="TAGS" />
  <div id="advance"></div>
</form>

【讨论】：