HTML anchor để gửi dữ liệu bài đăng khi nhấp vào

Question

Có thể tạo thẻ neo hoạt động như một .submit (với các đặc điểm bài đăng nhất định không?) Lý do tại sao tôi có thẻ neo vì tôi không thích nút gửi và muốn có CSS nút.

Đây là những gì tôi đang làm ngay bây giờ (và nó không làm việc)

html tập tin

<div class="footer"><a href="#" id = "test_btn" class="button"><strong>Sign Up</strong></a></div> 

<div class="footer"><a href="#" id = "test2_btn" class="button"><strong>Sign Up</strong></a></div> 

file .js

<script type="text/javascript"> 

$("#test_btn").live("click",function(){ 
    var post_data = {'account_type':"Free"} 
    return $.post("www.someplacehere.com/user_sign_up/1/", post_data); 
}); 

$("#test2_btn").live("click",function(){ 
    var post_data = {'account_type':"Premium"} 
    return $.post("www.someplacehere.com/user_sign_up/1/", post_data); 
}); 
</script> 

tôi nhận được một câu trả lời thích hợp, nhưng nó không gửi tôi đến trang dữ liệu POST chỉ chuyển hướng trở lại đầu trang (do neo). Bất kỳ ý tưởng làm thế nào để làm cho nó hướng tôi đến đúng nơi (trang html) với dữ liệu POST được điền sẵn trên trang html đó? Như bạn thấy, nó không đơn giản là .submit(). Ngay bây giờ có thể sẽ đi với một lĩnh vực ẩn và sau đó làm một .submit(), nhưng tự hỏi nếu có một cách dễ dàng hơn để có được trang kể từ khi POST có thể được thực hiện đúng cách.

Cảm ơn!

Answer 1

Mọi người dừng lại nút phát minh lại. Chúng đã tồn tại và chúng cũng có thể được tạo kiểu.

button[type=submit] { 
    background-color: transparent; 
    border: none; 
    border-bottom: solid blue 1px; 
    color: blue; 
    font-weight: bold; 
    padding: 0px; 
    cursor: pointer; 
} 

demo'd đây: http://jsfiddle.net/MZbLW/

---

Tôi cũng nên chỉ ra rằng tất cả mọi người trên thế giới sẽ được tìm kiếm các nút truyền thống ở phần cuối của biểu mẫu, và làm cho nó trông hoàn toàn khác nhau có thể không phải là ý tưởng lớn nhất từ ​​quan điểm khả năng sử dụng.

Answer 2

Trong trình xử lý nhấp chuột cho liên kết, trả về false để dừng hành động mặc định.

Tôi cũng chỉ sử dụng hàm click(), không hoạt động.

Answer 3

Sự kiện nhấp của bạn cần trả về false hoặc ngăn mặc định.

Sử dụng AJAX là Không đồng bộ để bạn không trả lại giá trị, bạn sẽ phải tìm giá trị trong gọi lại đầy đủ.

http://api.jquery.com/jQuery.post/

Answer 4

Something như thế này có lẽ đến gần:

$(a.submitLink).click(function() { 
    $.post({data: values}); 

    $.post({data2: values2}); 

    return false; 
}); 

Mấu chốt ở đây là trả về false ngăn chặn hành vi mặc định cho liên kết. Nếu bạn cần thực hiện xử lý bổ sung dựa trên kết quả của bài đăng, bạn sẽ thực hiện điều đó bên trong chức năng gọi lại. Không có lý do gì bạn không thể phát ra một số cuộc gọi AJAX bên trong chức năng liên kết với các neo của bạn, nhưng bạn cần đảm bảo liên kết không hoạt động như một liên kết.

Answer 5

Một suy nghĩ nhanh chóng tại sao bạn không thử sử dụng

< nút type = "submit" class = "footer" > đăng ký </nút >
thay vì
< input type = nộp >

Điều này mang lại cho bạn tính linh hoạt trong việc tạo kiểu cho nút của bạn theo bất kỳ cách nào bạn muốn và có văn bản trong đó. Bên cạnh đó bạn không phải làm tất cả các công việc khó khăn của việc tạo ra nút tùy chỉnh và đăng nó trở lại.

Chỉ cần suy nghĩ.