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
– Gavin, Commented May 8, 2020 at 21:34
Does this answer your question? Detect backspace and del on "input" event? — devlin carnate
– devlin carnate, Commented May 8, 2020 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
– WASasquatch, Commented May 8, 2020 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
– WASasquatch, Commented May 8, 2020 at 21:42

Unmitigated · Accepted Answer · 2020-05-08 21:48:37Z

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 8, 2020 at 21:48

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

WASasquatch Over a year ago

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.

Unmitigated Over a year ago

@WASasquatch No problem! I also put the code into a JSFiddle: jsfiddle.net/gy1dc9nx

WASasquatch Over a year ago

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.

Unmitigated Over a year ago

@WASasquatch Could you provide an example where it does not work?

Unmitigated Over a year ago

@WASasquatch One of your inputs appears to be hidden somehow.

|

opalecky · Accepted Answer · 2020-05-08 21:47:12Z

0

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

answered May 8, 2020 at 21:47

opalecky

315 bronze badges

Collectives™ on Stack Overflow

Enable submit button only if inputs have data

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related