Cách tạo nút Hủy HTML chuyển hướng đến URL

Question

Tôi đang phát với Buttons in the w3schools Tryit editor và tôi đang cố gắng tìm hiểu cách làm cho trình duyệt của tôi chuyển hướng đến URL khi tôi nhấp vào nút "Hủy".

Dưới đây là những gì tôi đã cố gắng:

<form action="demo_form.asp" method="get"> 
 
    First name: <input type="text" name="fname"><br> 
 
    Last name: <input type="text" name="lname"><br> 
 
    <button type="submit" value="Submit">Submit</button> 
 
    <button type="reset" value="Reset">Reset</button> 
 
    <button type="cancel" onclick="javascript:window.location='http://stackoverflow.com';">Cancel</button> 
 
</form>

Nhưng nó không hoạt động. Bất kỳ ý tưởng?

Answer 1

cancel không phải là giá trị hợp lệ cho thuộc tính loại, vì vậy, nút này có thể là mặc định là submit và tiếp tục gửi biểu mẫu. Bạn có thể có nghĩa là type="button".

(The javascript: cần được loại bỏ, mặc dù trong khi nó không làm hại, nó là một hoàn toàn vô dụng label)

Bạn không có bất kỳ nút giống như chức năng mặc dù, như vậy sẽ được tốt hơn off với :

<a href="http://stackoverflow.com"> Cancel </a> 

... có thể với một số CSS để làm cho nó trông giống như một nút.

Answer 2

Có một vài vấn đề ở đây.

Trước hết, không có điều nào như <button type="cancel">, do đó, nó được coi là chỉ <button>. Điều này có nghĩa là biểu mẫu của bạn sẽ được gửi, thay vì nút đưa bạn đến nơi khác.

Thứ hai, javascript: chỉ cần thiết trong các thuộc tính href hoặc action, trong đó URL được mong đợi, để chỉ định mã JavaScript. Bên trong onclick, nơi JavaScript đã được mong đợi, nó chỉ hoạt động như một nhãn hiệu và không phục vụ mục đích thực sự nào.

Cuối cùng, thiết kế thường chỉ có thiết kế tốt hơn là hủy liên kết thay vì nút hủy. Vì vậy, bạn chỉ có thể làm điều này:

<a href="http://stackoverflow.com/">Cancel</a> 

Với CSS bạn thậm chí có thể làm cho nó trông giống như một nút, nhưng với HTML này hoàn toàn không có nhầm lẫn về những gì nó được cho là phải làm.

Answer 3

<input class="button" type="button" onclick="window.location.replace('your_url')" value="Cancel" /> 

Answer 4

nó mặc định để gửi một hình thức, cách dễ nhất là thêm "return false"

<button type="cancel" onclick="window.location='http://stackoverflow.com';return false;">Cancel</button> 

Answer 5

Không có button type="cancel" trong html. Bạn có thể thử như thế này

<a href="http://www.url.com/yourpage.php">Cancel</a> 

Bạn có thể làm cho nó trông giống như một nút bằng cách sử dụng thuộc tính kiểu CSS.

Answer 6

<button onclick=\"window.location='{$_SERVER['PHP_SELF']}';return false;\">Reset</button> 

Không đủ đại diện để bỏ phiếu cho Kostyan. Đây là giải pháp cuối cùng của tôi (cần một nút reset).

Cảm ơn một lần nữa để Kostyan trả lời câu hỏi như được hỏi mà không đề xuất phương pháp "giải pháp" (tốn thời gian) để "tạo nút" với kiểu.

Đây là nút (mà người xem muốn xem) và nó hoạt động chính xác như được yêu cầu. Và nó trộn lẫn với các nút khác trên trang. Không phức tạp.

Tôi đã xóa "type = cancel" dường như vô ích. Vì vậy, thậm chí ít mã hơn. :)

Answer 7

Với Jquery:

$(".cancel-button").click(function (e) { 
    e.preventDefault(); 
}); 

Answer 8

Ở đây, tôi đang sử dụng liên kết theo dạng nút cho CANCEL hoạt động.

<button><a href="main.html">cancel</a></button> 

Answer 9

type = "button" Chỉ cần đặt

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

Bởi vì nút bấm của bạn là bên trong một hình thức nó được dùng giá trị mặc định là nộp và type = "hủy" không tồn tại.

Answer 10

Đó là những gì tôi đang sử dụng thử.

<a href="index.php"><button style ="position:absolute;top:450px;left:1100px;height:30px;width:200px;"> Cancel </button></a>