Tôi có thể tạo <button> không gửi biểu mẫu không?

Tôi đã có một hình thức, với 2 nút

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

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

Tôi cũng sử dụng nút jQuery UI, chỉ đơn giản như thế này

$('button').button();

Tuy nhiên, nút đầu tiên cũng gửi biểu mẫu. Tôi đã nghĩ rằng nếu nó không có type="submit", thì nó sẽ không.

Rõ ràng tôi có thể làm điều này

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

Nhưng có cách nào để tôi có thể ngăn nút quay lại đó gửi biểu mẫu mà không cần sự can thiệp của JavaScript không?

Thành thật mà nói, tôi chỉ sử dụng một nút để tôi có thể tạo kiểu cho nó với jQuery UI. Tôi đã thử gọi button()vào liên kết và nó không hoạt động như mong đợi (trông khá xấu xí!).

Giá trị mặc định cho typethuộc tính của buttoncác thành phần là "trình". Đặt type="button"nút này để tạo nút không gửi biểu mẫu.

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

Theo lời của Tiêu chuẩn HTML : "Không làm gì cả."

Phần buttontử có một loại mặc định submit.

Bạn có thể làm cho nó không làm gì bằng cách đặt một loại button:

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

Chỉ cần sử dụng HTML cũ tốt:

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

Gói nó làm chủ đề của một liên kết, nếu bạn mong muốn:

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

Hoặc nếu bạn quyết định bạn muốn javascript cung cấp một số chức năng khác:

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

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

Thành thật mà nói, tôi thích những câu trả lời khác. Dễ dàng và không cần phải vào JS. Nhưng tôi nhận thấy rằng bạn đã hỏi về jQuery. Vì vậy, để hoàn thiện, trong jQuery nếu bạn trả về false bằng trình xử lý .click (), nó sẽ phủ nhận hành động mặc định của widget.

Xem ở đây để biết một ví dụ (và nhiều goodies nữa). Đây cũng là tài liệu .

Tóm lại, với mã mẫu của bạn, hãy làm điều này:

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

Là một lợi ích bổ sung, với điều này, bạn có thể thoát khỏi thẻ neo và chỉ cần sử dụng nút.

Nếu không đặt typethuộc tính, bạn cũng có thể quay lại falsetừ OnClicktrình xử lý của mình và khai báo onclickthuộc tính là onclick="return onBtnClick(event)".

Có, bạn có thể tạo nút không gửi biểu mẫu bằng cách thêm thuộc tính loại nút giá trị: <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
        }
        }

        ?>