jQuery nonaktifkan / aktifkan tombol kirim

Saya punya HTML ini:

<input type="text" name="textField" />
<input type="submit" value="send" />

Bagaimana saya bisa melakukan sesuatu seperti ini:

• Ketika bidang teks kosong, pengiriman harus dinonaktifkan (dinonaktifkan = "dinonaktifkan").
• Ketika sesuatu diketik dalam bidang teks untuk menghapus atribut yang dinonaktifkan.
• Jika bidang teks menjadi kosong lagi (teks dihapus) tombol kirim harus dinonaktifkan lagi.

Saya mencoba sesuatu seperti ini:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

... tapi itu tidak berhasil. Ada ide?

Masalahnya adalah bahwa perubahan acara hanya terjadi ketika fokus dipindahkan dari input (misalnya seseorang mengklik input atau tab keluar dari itu). Coba gunakan keyup sebagai gantinya:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

Pertanyaan ini berumur 2 tahun tetapi masih merupakan pertanyaan yang bagus dan ini adalah hasil Google pertama ... tetapi semua jawaban yang ada merekomendasikan pengaturan dan menghapus atribut HTML (removeAttr ("dinonaktifkan")) "dinonaktifkan", yang bukan pendekatan yang tepat. Ada banyak kebingungan mengenai atribut vs properti.

HTML

"Dinonaktifkan" di <input type="button" disabled>dalam markup disebut atribut boolean oleh W3C .

HTML vs. DOM

Mengutip:

Properti berada di DOM; atribut dalam HTML yang diuraikan ke dalam DOM.

https://stackoverflow.com/a/7572855/664132

JQuery

Terkait:

Namun demikian, konsep yang paling penting untuk diingat tentang atribut yang diperiksa adalah bahwa itu tidak sesuai dengan properti yang diperiksa. The atribut benar-benar sesuai dengan properti defaultChecked dan harus digunakan hanya untuk menetapkan nilai awal dari kotak centang. Nilai atribut yang dicentang tidak berubah dengan keadaan kotak centang, sedangkan properti yang dicentang tidak. Oleh karena itu, cara yang kompatibel lintas-browser untuk menentukan apakah kotak centang dicentang adalah dengan menggunakan properti ...

Relevan:

Properti umumnya memengaruhi keadaan dinamis elemen DOM tanpa mengubah atribut HTML serial. Contohnya termasuk properti nilai elemen input, properti input dan tombol yang dinonaktifkan , atau properti yang dicentang dari kotak centang. Metode .prop () harus digunakan untuk mengatur dinonaktifkan dan diperiksa, bukan metode .attr ().

$( "input" ).prop( "disabled", false );

Ringkasan

Untuk [...] mengubah properti DOM seperti status elemen formulir [...] yang dinonaktifkan, gunakan metode .prop () .

( http://api.jquery.com/attr/ )

Sedangkan untuk menonaktifkan pada bagian perubahan pertanyaan: Ada acara yang disebut "input", tetapi dukungan browser terbatas dan itu bukan acara jQuery, jadi jQuery tidak akan membuatnya berfungsi. Acara perubahan bekerja dengan andal, tetapi dipecat saat elemen kehilangan fokus. Jadi orang mungkin menggabungkan keduanya (beberapa orang juga mendengarkan keyup dan paste).

Berikut adalah bagian kode yang belum diuji untuk menunjukkan apa yang saya maksud:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

Untuk menghapus penggunaan atribut yang dinonaktifkan,

 $("#elementID").removeAttr('disabled');

dan untuk menambahkan penggunaan atribut yang dinonaktifkan,

$("#elementID").prop("disabled", true);

Nikmati :)

atau bagi kami yang tidak suka menggunakan jQ untuk setiap hal kecil:

document.getElementById("submitButtonId").disabled = true;

eric, kode Anda sepertinya tidak berfungsi untuk saya ketika pengguna memasukkan teks lalu menghapus semua teks. saya membuat versi lain jika ada yang mengalami masalah yang sama. di sini ya pergi orang:

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

Ini akan bekerja seperti ini:

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

Pastikan ada atribut 'dinonaktifkan' di HTML Anda

Inilah solusi untuk bidang input file .

Untuk menonaktifkan tombol kirim untuk bidang file ketika file tidak dipilih, maka aktifkan setelah pengguna memilih file untuk diunggah:

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

Html:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

Anda juga dapat menggunakan sesuatu seperti ini:

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

di sini adalah contoh langsung

Untuk login form:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

Javascript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

Jika tombol itu sendiri adalah tombol gaya jQuery (dengan .button ()) Anda perlu menyegarkan keadaan tombol sehingga kelas yang benar ditambahkan / dihapus setelah Anda menghapus / menambahkan atribut yang dinonaktifkan.

$( ".selector" ).button( "refresh" );

Jawaban di atas tidak membahas juga memeriksa untuk acara cut / paste berbasis menu. Di bawah ini adalah kode yang saya gunakan untuk melakukan keduanya. Perhatikan bahwa tindakan sebenarnya terjadi dengan batas waktu karena peristiwa cut dan masa lalu benar-benar terjadi sebelum perubahan terjadi, sehingga batas waktu memberikan sedikit waktu untuk itu terjadi.

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

Solusi Vanilla JS. Ini berfungsi untuk seluruh bentuk tidak hanya satu input.

Dalam pertanyaan, tag JavaScript yang dipilih.

Formulir HTML:

var form = document.querySelector('form')
    var inputs = form.querySelectorAll('input')
    var required_inputs = form.querySelectorAll('input[required]')
    var register = document.querySelector('input[type="submit"]')
    form.addEventListener('keyup', function(e) {
        var disabled = false
        inputs.forEach(function(input, index) {
            if (input.value === '' || !input.value.replace(/\s/g, '').length) {
                disabled = true
            }
        })
        if (disabled) {
            register.setAttribute('disabled', 'disabled')
        } else {
            register.removeAttribute('disabled')
        }
    })

<form action="/signup">
        <div>
            <label for="username">User Name</label>
            <input type="text" name="username" required/>
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div>
            <label for="r_password">Retype Password</label>
            <input type="password" name="r_password" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" name="email" />
        </div>
        <input type="submit" value="Signup" disabled="disabled" />
    </form>

Beberapa penjelasan:

Dalam kode ini kami menambahkan acara keyup pada formulir html dan pada setiap penekanan tombol periksa semua kolom input. Jika setidaknya satu bidang input yang kami miliki kosong atau hanya berisi karakter spasi, maka kami memberikan nilai sebenarnya ke variabel yang dinonaktifkan dan menonaktifkan tombol kirim.

Jika Anda perlu menonaktifkan tombol kirim hingga semua kolom input yang diperlukan diisi - ganti:

inputs.forEach(function(input, index) {

dengan:

required_inputs.forEach(function(input, index) {

di mana diperlukan_input sudah array yang dinyatakan hanya berisi bidang input yang diperlukan.

Kami dapat dengan mudah memiliki jika & jika. Jika input Anda kosong, kami dapat memilikinya

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

kalau tidak kita bisa mengubah false menjadi true

Nonaktifkan: $('input[type="submit"]').prop('disabled', true);

Memungkinkan: $('input[type="submit"]').removeAttr('disabled');

Kode aktifkan di atas lebih akurat daripada:

$('input[type="submit"]').removeAttr('disabled');

Anda dapat menggunakan kedua metode ini.

Saya harus bekerja sedikit agar ini sesuai dengan kasus penggunaan saya.

Saya memiliki formulir tempat semua bidang harus memiliki nilai sebelum mengirim.

Inilah yang saya lakukan:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

Terima kasih untuk semuanya atas jawaban mereka di sini.

Silakan lihat kode di bawah ini untuk mengaktifkan atau menonaktifkan tombol Kirim

Jika bidang Nama dan Kota memiliki nilai, maka hanya tombol Kirim yang akan diaktifkan.

<script>
  $(document).ready(function() {
    $(':input[type="submit"]').prop('disabled', true);

    $('#Name').keyup(function() {
      ToggleButton();
    });
    $('#City').keyup(function() {
      ToggleButton();
    });

  });

function ToggleButton() {
  if (($('#Name').val() != '') && ($('#City').val() != '')) {
    $(':input[type="submit"]').prop('disabled', false);
    return true;
  } else {
    $(':input[type="submit"]').prop('disabled', true);
    return false;
  }
} </script>

<form method="post">

  <div class="row">
    <div class="col-md-4">
      <h2>Getting started</h2>
      <fieldset>
        <label class="control-label text-danger">Name</label>
        <input type="text" id="Name" name="Name" class="form-control" />
        <label class="control-label">Address</label>
        <input type="text" id="Address" name="Address" class="form-control" />
        <label class="control-label text-danger">City</label>
        <input type="text" id="City" name="City" class="form-control" />
        <label class="control-label">Pin</label>
        <input type="text" id="Pin" name="Pin" class="form-control" />
        <input type="submit" value="send" class="btn btn-success" />
      </fieldset>
    </div>
  </div>
</form>

lihat cuplikan ini dari proyek saya

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

jadi matikan saja tombolnya setelah operasi Anda dijalankan

$(this).attr('disabled', 'disabled');

Semua jenis solusi disediakan. Jadi saya ingin mencoba solusi yang berbeda. Sederhananya akan lebih mudah jika Anda menambahkan idatribut di bidang input Anda.

<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>

Sekarang ini milikmu jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

Semoga kode di bawah ini akan membantu seseorang .. !!! :)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/