How to Convert Disable submit button from jQuery to alpinejs?

Question

I want to know How I can Convert Disable submit button from jQuery to alpine js?

The Code :

<form>
  <input type="text" class="input-field" placeholder="Enter you name *" value="" />
  <button type="submit" class="submit-btn">Submit</button>
</form>

$(document).ready(function(){
    $('.submit-btn').attr('disabled',true);
    $('.input-field').keyup(function(){
        if($(this).val().length !=0)
            $('.submit-btn').attr('disabled', false);            
        else
            $('.submit-btn').attr('disabled',true);
    })
});

score 9 · Answer 1 · answered Dec 17 '20 at 13:10

9

Using x-bind, or its shorter syntax, :

<script src="//cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>

<form x-data="{ name: ''}">
  <input type="text" x-model="name" placeholder="Enter you name *" />
  <button type="submit" :disabled="!name.length">Submit</button>
</form>

answered Dec 17 '20 at 13:10

blex

24,941
5
39
72

in my case instead of x-bind , i use : . if i use x-bind the first view only the button is not disabled whatever the first initialize value true or false. – Yogi Arif Widodo Nov 03 '21 at 03:07

score 2 · Accepted Answer · answered Dec 17 '20 at 13:28

2

is this accurate for what you want ?

<div x-data="{disableSubmit: true, inputText: null}">
   <input x-model="inputText" x-on:input="[(inputText.length != 0) ? disableSubmit = false : disableSubmit = true]">
   <button x-bind:disabled="disableSubmit">submit</button>
</div>

try this on jsfiddle

answered Dec 17 '20 at 13:28

Yoga Altariz

32
1
3

You can always use the short hand like so: `` – VeRJiL Mar 10 '22 at 14:55

How to Convert Disable submit button from jQuery to alpinejs?

2 Answers2