CODEWITHSUNDEEP
javascriptformsinput
Paul Davis
Paul Davis

Reputation: 525

Listen for blank inputs and add a "disabled" attribute to a button until an input is noticed

I have a user input field that, if blank, I would like the submit button to be disabled until a key press in the input box is noticed. But, if they blank out the input box, then the button is disabled again.

So, I'd like to add the "disabled" attribute to this input button:

<input type="submit" id="mapOneSubmit" value="Submit" [add attribute "disabled" here]>

The input is from this HTML here:

<input type="text" id="mapOneUserInput" onkeypress="return isNumberKey(event)" oninput="validate(this)">

Note: I have onkeypress and oninput validation to prevent non-number inputs and allow only 2 decimal places.

I assume my JS would look like this to add the disabled attribute:

document.getElementById("mapOneSubmit").setAttribute("disabled");

My problem is, I can't find what event listener listens for "blank" inputs? Can you help me with that?

Thanks kindly!

Upvotes: 1

Views: 796

Answers (6)

tdphut
tdphut

Reputation: 94

My problem is, I can't find what event listener listens for "blank" inputs?

You can disable the submit button at render, after that you can use the input event to determine whether the input value is empty or not. From there, you can set state of the submit button.

document.addEventListener('DOMContentLoaded', () => {
  const textInput = document.getElementById('mapOneUserInput');
  textInput.addEventListener('input', handleTextInput, false);
  textInput.addEventListener('keydown', validateInput, false);
});

function handleTextInput(event) {
  const { value } = event.target;
  if (value) {
    enableSubmitButton(true);
  } else {
    enableSubmitButton(false);
  }
}

// Refer to https://stackoverflow.com/a/46203928/7583537
function validateInput(event) {
  const regex = /^\d*(\.\d{0,2})?$/g;
  const prevVal = event.target.value;
  const input = this;
  
  setTimeout(function() {
    var nextVal = event.target.value;
    if (!regex.test(nextVal)) {
      input.value = prevVal; 
    }
  }, 0);
}

function enableSubmitButton(isEnable) {
  const button = document.getElementById('mapOneSubmit');
  if (isEnable) {
    button.removeAttribute('disabled');
  } else {
    button.setAttribute('disabled', '');
  }
}
<input type="number" value="" id="mapOneUserInput">

<!-- Note that the input blank at render so we disable submit button -->
<input type="submit" id="mapOneSubmit" value="Submit" disabled>

Upvotes: 0

sandeep joshi
sandeep joshi

Reputation: 2151

Check this one as well.

function checkvalid(el)
{
//e.g i am preventing user here to input only upto 5 characters
//you can put your own validation logic here
if(el.value.length===0 || el.value.length>5)
document.getElementById("mapOneSubmit").setAttribute("disabled","disabled"); 
else
document.getElementById("mapOneSubmit").removeAttribute('disabled'); 

}
<input type='text' id ='inp' onkeyup='checkvalid(this)'>
<button id='mapOneSubmit' disabled>
Submit
</button>

Upvotes: 1

Nhut Dinh Ba
Nhut Dinh Ba

Reputation: 354

On your validate function just check if value of input field is blank then enable/disable the button

function validate(input){
  input.disabled = input.value === "" ;
}

Upvotes: 0

Nikko Laurenciana
Nikko Laurenciana

Reputation: 178

You can you set the enable/disable inside validate function.

function validate(elem) {
  //validation here

  //code to disable/enable the button 
  document.getElementById("mapOneSubmit").disabled = elem.value.length === 0;
}

Set the button disable on load by adding disabled property

<input type="submit" id="mapOneSubmit" value="Submit" disabled>

Upvotes: 0

Sunil Choudhary
Sunil Choudhary

Reputation: 329

You can find the below code to find the blank inputs

function isNumberKey(event) {
  console.log(event.which)
}
var value;
function validate(target) {
  console.log(target);

  
}
<form>
  <input type="text" id="mapOneUserInput" onkeypress="return isNumberKey(event)" oninput="validate(this)">
  <input type="submit" id="mapOneSubmit" value="Submit" [add attribute "disabled" here]>
</form>

Upvotes: 0

Athanasios Kataras
Athanasios Kataras

Reputation: 26450

Yet using the input event:

<input type="text" id="mapOneUserInput" onkeypress="return isNumberKey(event)" oninput="validate(this);updateSubmit(this.value)">

Then in js

function updateSubmit(val) {
    if (val.trim() == '') {
         document.getElementById('mapOneSubmit').disabled = true;
    }
    else {
         document.getElementById('mapOneSubmit').disabled = false;
    }
}

Upvotes: 0

Related Questions