Bisakah saya membuat <button> tidak mengirimkan formulir?


516

Saya punya formulir, dengan 2 tombol

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

Saya menggunakan tombol jQuery UI pada mereka juga, cukup seperti ini

$('button').button();

Namun, tombol pertama juga mengirimkan formulir. Saya akan berpikir bahwa jika tidak ada type="submit", itu tidak akan.

Jelas saya bisa melakukan ini

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

Tetapi apakah ada cara saya bisa menghentikan tombol kembali dari mengirimkan formulir tanpa intervensi JavaScript?

Sejujurnya, saya menggunakan tombol hanya supaya saya bisa menatanya dengan jQuery UI. Saya mencoba memanggil button()tautan dan itu tidak berfungsi seperti yang diharapkan (tampak sangat jelek!).



2
gunakan <button type="button">untuk yang tidak mengirimkan formulir dan <input type="submit">untuk yang lain. Kemudian tangkap dengan jquery$('#formID').submit(function(e){});
Airwavezx

Jawaban:


1131

Nilai default untuk typeatribut buttonelemen adalah "kirim". Atur type="button"untuk menghasilkan tombol yang tidak mengirimkan formulir.

<button type="button">Submit</button>

Dalam kata-kata Standar HTML : "Tidak melakukan apa-apa."


14
Menurut w3schools, itu tidak benar untuk IE .
R0MANARMY

53
Itu hanya pilihan desain yang sangat buruk.
octern


Wow, Anda dan alex benar-benar berdebat di revisi. Saya tidak mengerti mengapa salah satu dari Anda peduli dengan kutipan atau tidak pada atribut.
ADJenks

228

The buttonelemen memiliki tipe default submit.

Anda dapat membuatnya tidak melakukan apa pun dengan mengatur jenis button:

<button type="button">Cancel changes</button>

1
@ B.ClayShannon Tidak juga. Anda bisa menggunakan kode sisi server untuk mengembalikan halaman yang sama ketika tombol diklik, tetapi masih akan memuat ulang halaman. Pada akhirnya tombol adalah bagian dari dokumen dan jadi satu-satunya cara untuk memberi tahu browser bagaimana Anda ingin bertindak adalah HTML dan JavaScript.
s4y

17

Cukup gunakan HTML lama yang baik:

<input type="button" value="Submit" />

Bungkus sebagai subjek tautan, jika diinginkan:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

Atau jika Anda memutuskan Anda ingin javascript menyediakan beberapa fungsi lain:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

7
Menggunakan kontrol tombol standar dengan atribut tipe yang tepat adalah "html lama yang baik," dan menciptakan markup yang lebih sederhana.
R0MANARMY

Ini jelas tidak mudah jika di beberapa browser memiliki jenis pengiriman standar dan pada yang lain memiliki jenis tombol standar. Heck, bahkan hanya memiliki jenis pengiriman standar mempersulit hal-hal lebih dari yang diperlukan IMO. Seharusnya ada markup yang dengan mudah menyediakan tombol yang tidak melakukan apa-apa. Dan ada:<input type="button" />
Jeffrey Blake

+1 Saya telah menggunakan teknik tepat ini berkali-kali, dan selalu berhasil dengan baik untuk saya. Salah satu varian adalah jika Anda perlu membatalkan acara postback untuk tombol sisi-server berdasarkan pada beberapa perhitungan sisi-klien, Anda dapat menyertakan window.event.returnValue = false; dalam kode Anda yang dijalankan pada acara onclick sisi klien untuk tombol Anda ... yaitu, jika menggunakan kontrol validator khusus tidak memotong mustard untuk Anda :)
Adam McKee

1
@ JGB146: Hanya karena tidak semua browser default ke nilai yang sama tidak berarti mereka tidak akan menghormati jenis yang benar jika diatur secara manual (seperti yang disarankan oleh jleedev. Belum lagi pertanyaan yang secara spesifik meminta cara untuk melakukannya tanpa JavaScript sementara jawaban Anda tidak memperhitungkannya
R0MANARMY

11
@ JGB146: Buttonadalah sebuah wadah dalam HTML. Itu memungkinkan Anda untuk menempatkan hal-hal seperti gambar atau tabel (tidak yakin mengapa Anda melakukan ini, tetapi Anda bisa) dll sementara inputtidak mendukung itu. Ada perbedaan antara keduanya, dan masing-masing memiliki kasus penggunaan yang sesuai.
R0MANARMY


5

Jujur, saya suka jawaban yang lain. Mudah dan tidak perlu masuk ke JS. Tapi saya perhatikan bahwa Anda bertanya tentang jQuery. Jadi demi kelengkapan, di jQuery jika Anda mengembalikan false dengan penangan .click (), itu akan meniadakan aksi default widget.

Lihat di sini untuk contoh (dan lebih banyak barang juga). Ini dokumentasinya juga .

Singkatnya, dengan kode sampel Anda, lakukan ini:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

Sebagai manfaat tambahan, dengan ini, Anda dapat menyingkirkan tag jangkar dan cukup gunakan tombol.


Anehnya, menambahkan e.preventDefault()tidak melakukan apa pun untuk menghentikan pengiriman (di mana dimulai dengan function(e)).
Sablefoste

1

Tanpa mengatur typeatribut, Anda juga bisa kembali falsedari OnClickhandler Anda , dan mendeklarasikan onclickatribut tersebut sebagai onclick="return onBtnClick(event)".


0

Ya, Anda dapat membuat tombol tidak mengirimkan formulir dengan menambahkan atribut tipe tombol nilai: <button type="button"><button>


-2
  <form class="form-horizontal" method="post">
        <div class="control-group">

            <input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
        </div>
        <div class="control-group">
            <input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
        </div>
        <div class="control-group">
            <input type="text" class="span1" name="unit" id="inputPassword" required>
        </div>
            <div class="control-group">
            <label class="control-label" for="inputPassword">Semester</label>
            <div class="controls">
                <select name="semester">
                    <option></option>
                    <option>1st</option>
                    <option>2nd</option>
                </select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="inputPassword">Deskripsi</label>
            <div class="controls">
                    <textarea name="description" id="ckeditor_full"></textarea>
 <script>CKEDITOR.replace('ckeditor_full');</script>
            </div>
        </div>



        <div class="control-group">
        <div class="controls">

        <button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
        </div>
        </div>
        </form>

        <?php
        if (isset($_POST['save'])){
        $subject_code = $_POST['subject_code'];
        $title = $_POST['title'];
        $unit = $_POST['unit'];
        $description = $_POST['description'];
        $semester = $_POST['semester'];


        $query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
        $count = mysql_num_rows($query);

        if ($count > 0){ ?>
        <script>
        alert('Data Sudah Ada');
        </script>
        <?php
        }else{
        mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());


        mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());


        ?>
        <script>
        window.location = "subjects.php";
        </script>
        <?php
        }
        }

        ?>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.