Enable submit button only if inputs have data

Question

I've looked through numerous topics regarding this, but none of the solutions are fitting my need. I need to enable the submit button only if there is data going to be submitted, and disable it again if there is no data.

                    $("input").each(function() {
                        $(this).keyup(function() {
                            console.log("keyup event fired");
                            $("input").each(function() {
                                if ( $(this).val() !== "" ) {
                                    empty = false;
                                } else {
                                    empty = true;
                                }
                            });
                            if ( empty ) {
                                $("#download-project").addClass("isDisabled");
                                $("#download-project").click(function(e) {
                                    e.preventDefault();
                                });
                            } else {
                                $("#download-project").removeClass("isDisabled");
                                $("#download-project").click(function(e) {
                                    e.preventDefault();
                                    $(".editor-form").submit();
                                });
                            }
                        });
                    });

My current code only enables the button, and than the if the user deletes the data, it doesn't disable the button. Looking at the console it also seems keyup is only firing once.

JSFiddle

you're never setting empty to true anywhere. Set it as true before your input each loop, if it stays true your if statement should handle the rest. — Gavin, May 08 '20 at 21:34
Does this answer your question? [Detect backspace and del on "input" event?](https://stackoverflow.com/questions/9906885/detect-backspace-and-del-on-input-event) — devlin carnate, May 08 '20 at 21:39
You're right that there should be a true declaration. I actually removed that trying to figure out why it wouldn't enable, and forgot to re-add it. But if it is added, the button will not enable. — WASasquatch, May 08 '20 at 21:39
@devlincarnate to be clear, that is the only way to detect if a value is than empty, even when supposedly cycling the values on each keypress? — WASasquatch, May 08 '20 at 21:42
"only way" is rarely true in coding. There is almost always more than one way to achieve a goal. — devlin carnate, May 08 '20 at 21:45
@MisterJojo what is "cmd + enter"? My form doesn't submit with enter, ctrl + enter, alt + enter, fn + enter, so I'm unsure what you're even referring too. — WASasquatch, May 08 '20 at 21:57
@MisterJojo Huh, it doesn't work on my form in firefox/chrome. I don't have a submit button, it's an `a` link with javascript submission of the form. — WASasquatch, May 08 '20 at 22:14

score 1 · Accepted Answer · answered May 08 '20 at 21:48

1

You can add an input event listener to each of the input tags, which will fire when the value has been changed, and check if any of the input tags has a value that is only spaces.

const inputs = $('input'), downloadBtn = $('#download-project');
inputs.on('input', function(e){
  var invalid = inputs.is(function(index, element){
      return !$(element).val().trim();
  });
  if(invalid){
      downloadBtn.addClass("isDisabled").prop("disabled", true);
  } else {
      downloadBtn.removeClass("isDisabled").prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
First Name: <input type="text"/><br/>
Last Name: <input type="text"/><br/>
Age: <input type="number"/><br/>
<button id="download-project" type="submit" disabled>
Submit
</button>
</form>

answered May 08 '20 at 21:48

Unmitigated

76,500
11
62
80

Thanks a bunch, I think this may be the solution. Though I'm having trouble copying the code. every time I select it, the whole fiddle frame is reloading.... I'll just write it out. – WASasquatch May 08 '20 at 21:54
1

@WASasquatch No problem! I also put the code into a JSFiddle: https://jsfiddle.net/gy1dc9nx/ – Unmitigated May 08 '20 at 21:56
thanks for the code. I tried to implement it, but it seems to only return false when I edit any inputs. I'm not sure why as you code is a little beyond my logic understanding. – WASasquatch May 08 '20 at 22:28
@WASasquatch Could you provide an example where it does not work? – Unmitigated May 08 '20 at 22:32
Yes, take a look here (I added commenting to console): https://jsfiddle.net/s3b91c6j/ – WASasquatch May 08 '20 at 22:51
1

@WASasquatch One of your `input`s appears to be hidden somehow. – Unmitigated May 08 '20 at 23:07
Hmm, I see. And using a class selector doesn't seem to work. Same result when excluding hidden fields with a select on active ones. – WASasquatch May 08 '20 at 23:18
@WASasquatch I would recommend asking a new question, as it is an entirely different issue. – Unmitigated May 09 '20 at 01:07

score 0 · Answer 2 · answered May 08 '20 at 21:47

Try to put change event listener instead of keyup.

$("input#submit").prop("disabled", true);
let isOk = true;
$("input").change(function (){
    $("input").each(()=>{
        console.log(this); 
        if($(this).val() === "") {
           isOk = false;
        } 
    });
    if(isOk) $("input#submit").prop("disabled", false);
})

Test: https://codepen.io/Opalecky/pen/xxwWmyJ

Enable submit button only if inputs have data

2 Answers2