Bisakah saya membuat <button> tidak mengirimkan formulir?

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!).

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."

The buttonelemen memiliki tipe default submit.

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

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

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();"/>

<form onsubmit="return false;">
   ...
</form>

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.

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

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

  <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
        }
        }

        ?>