Having Button not run Function With Empty Input Field

Question

So I have a button that whenever clicked appends whatever the user entered below the input field. I want to make it so when clicked with an empty field nothing appends (essentially the function does not run).

Here is my code:

var ingrCount = 0

$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
var ingredientSpace = $("<p>");
ingredientSpace.attr("id", "ingredient-" + ingrCount);
ingredientSpace.append(" " + ingredientInput);

var ingrClose = $("<button>");

ingrClose.attr("data-ingr", ingrCount);
ingrClose.addClass("deleteBox");
ingrClose.append("✖︎");

// Append the button to the to do item
ingredientSpace = ingredientSpace.prepend(ingrClose);

// Add the button and ingredient to the div
$("#listOfIngr").append(ingredientSpace);

// Clear the textbox when done
$("#ingredients").val("");

// Add to the ingredient list
ingrCount++;

if (ingredientInput === "") {

}
});

So I wanted to create an if statement saying when the input is blank then the function does not run. I think I may need to move that out of the on click function though. For the if statement I added a disabled attribute and then removed it when the input box contains something. But that turns the button another color and is not the functionality I want. Any ideas I can test out would help. If you need any more information please ask.

delinear · Accepted Answer · 2017-11-20 17:17:03Z

2

If you're testing if ingredientInput is empty, can you just return from within the click event?

$("#addIngrButton").on('click', function() {
  var ingredientInput = $("#ingredients").val().trim();
  if(ingredientInput === '') { return; }
  // rest of code

answered Nov 20, 2017 at 17:17

delinear

2,8251 gold badge12 silver badges22 bronze badges

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

1 Comment

D-Man Over a year ago

That worked! I just decided to wrap an if statement around the action of the function to only fire when there is an input

Vincent Decaux · Accepted Answer · 2017-11-20 17:16:30Z

0

Simply use :

$("#addIngrButton").on('click', function() {
    var ingredientInput = $("#ingredients").val().trim();
    if (ingredientInput.length == 0) {
        return false;
    }
    // ..... your code

answered Nov 20, 2017 at 17:16

Vincent Decaux

10.9k7 gold badges67 silver badges103 bronze badges

Collectives™ on Stack Overflow

Having Button not run Function With Empty Input Field

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related