Displaying the submit button using javascript

Question

I am running this code which I want the submit button to display only when all the fields are not empty but it's not working.

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

WeiYuan · Accepted Answer · 2016-04-28T18:45:44.873

You would bind an event handler to the "change"(or "keyup") JavaScript event. When changing on the input, it will trigger the function.

$(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' />");
    }
});

And it can update the funciton for 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' />");     
});

score 0 · Answer 2 · answered Apr 28 '16 at 18:31

0

$(document).ready only fires once when the page is finished rendering.

You need to attach to the onfocus, onblur, or onchange event on the form fields to accomplish what you are trying to do.

answered Apr 28 '16 at 18:31

Justin Pearce

4,994
2
24
37

score 0 · Answer 3 · edited May 23 '17 at 11:52

Delegate an input or change event on document.

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

SNIPPET

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

score 0 · Answer 4 · answered Apr 28 '16 at 18:38

Vanilla JS alternative:

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>

score 0 · Answer 5 · answered Apr 28 '16 at 18:55

I would use another approach. Instead of outputting code with js, you can always have the as you like directly in the html, and instead hiding or showing it with the help of 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>

Keep in mind that the change event fires after the input lose focus, so you might want to use another event.

Fiddle: https://jsfiddle.net/af5torcs/1/

$('#submit').css("display", "block"); better than $('#submit').css("display", ""); — Hatem Ahmed, Apr 29 '16 at 00:04
How is displaying an inline element as a block element "better"? $('#submit').css("display", ""); Removes the display attribute altogether. — naslund, Apr 29 '16 at 12:25

Displaying the submit button using javascript

5 Answers5

SNIPPET