Disable submit button when input fields is null or empty?

i want to add disabled class in submit button if input fields is null or empty?

<form wire:submit.prevent="submitForm">
   @csrf
   <div class="input-group">
      <input type="email" wire:model="email" class="form-control" placeholder="email address">
      <button type="submit" class="btn btn-primary" id="newsletter-submit-btn">Submit</button>
   </div>
   @error('email') <div class="text-danger">{{ $message }}</div> @enderror
</form>

darioosh10

5 years ago

Level 1

I don't know about the right method, but the simplest method using java script would be

input onchange = 'myFunction(this)'

function myFunction(e){ myelement = document . getElementById('newsletter-submit-btn'); if (e . value == null || e . value == "") { myelement . classList . add('disabled');

} else {

myelement . classList . remove('disabled');

}

devhoussam123

5 years ago

Level 2

I want to do this with livewire

chaudigv

5 years ago

Level 16

You can use condition and add the disabled attribute

<button type="submit" class="btn btn-primary" id="newsletter-submit-btn" {{ (isset($email) && !empty($email)) ? '' : 'disabled' }}>Submit

mohamedJamal

5 years ago

Level 1

You can use Jquery validation

Tray2

5 years ago

Level 73

I'm guessing you want to prevent the sending of the form if not all required fields are filled in. The easiest way to do that is adding the required property to the element.

<imput type="text" name="field" required>

Then you don't need to disable the button

If you still want to I suggest to do it the other way around.

Start with having the button disabled the add an event listener to all form fields where you check if the values are set and when they meet your requirements enable the button.

Please or to participate in this conversation.