2010-11-26 45 views
98

Tôi muốn gửi biểu mẫu. Nhưng tôi sẽ không đi theo cách cơ bản của việc sử dụng nút đầu vào có loại gửi nhưng một liên kết a.Sử dụng liên kết bình thường để gửi biểu mẫu

Hình ảnh dưới đây cho thấy lý do. Tôi đang sử dụng liên kết hình ảnh để lưu/gửi biểu mẫu. Bởi vì tôi có đánh dấu css standart cho các liên kết hình ảnh, tôi không muốn sử dụng các nút gửi đầu vào.

Tôi đã cố gắng áp dụng onClick = "document.formName.submit()" vào phần tử nhưng tôi thích phương thức html hơn.

alt text

Bất kỳ ý tưởng nào?

+3

nút sử dụng và css nó để hiển thị hình ảnh hoặc sử dụng javascript, không có cách nào thực sự để làm cho đơn giản href để gửi biểu mẫu không có javascript. –

+0

i thứ hai, thật không may những điều này không phải là một cách dễ dàng w/o javascript – benhowdle89

+3

Lý do của bạn để làm điều này nghe có vẻ giống như một nền kinh tế sai. Tốt hơn là chỉ cần đưa ra một tiêu chuẩn css cho các nút gửi và sử dụng các hình thức theo cách chúng được thiết kế để được sử dụng. Có một đống kỹ thuật css nút mô tả ở đây: http://www.tripwiremagazine.com/2009/06/24-essential-submit-button-enhancements.html – dnagirl

Trả lời

141

Hai cách. Hoặc tạo một nút và tạo kiểu cho nó giống như một liên kết với css hoặc tạo liên kết và sử dụng onclick="form.submit();".

+43

Aaaaaaaand đây là tham chiếu về cách tạo kiểu cho một nút làm liên kết : http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link – flipchart

+3

lưu ý rằng 'form.submit()' sẽ không hoạt động nếu không có JavaScript – baptx

+2

@baptx thậm chí cả điện thoại thông minh cũ đã bật javascript –

9

Bạn đang sử dụng hình ảnh để nộp .. vì vậy bạn chỉ có thể sử dụng một "nút" type="image" đầu vào:

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" /> 
+1

... hoặc phần tử'

+0

Đây là liên kết MDN trong trường hợp bất kỳ ai khác muốn có nguồn: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image – Sam

76

Bạn có thể không thực sự làm được điều này nếu không có mẫu kịch bản để theo sự hiểu biết của tôi.

<form id="my_form"> 
<!-- Your Form -->  
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a> 
</form> 

Ví dụ từ Here.

+4

cảm ơn vì câu trả lời tuyệt vời này !! – soField

+1

và khách truy cập thân yêu ... đừng quên đặt >>> id = "my_form" là id không phải tên: D –

3

sử dụng:

<input type="image" src=".."/> 

hay:

<button type="send"><img src=".."/> + any html code</button> 

cộng với một số CSS

23

Chỉ cần tạo kiểu tóc một <input type="submit" class="linkButton" /> như thế này làm việc cho tôi:

.linkButton { 
 
    background: none; 
 
    border: none; 
 
    color: #0066ff; 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
}
<input type="submit" class="linkButton" />

Tested trong Chrome, IE 7-9, Firefox

+0

chỉ dành cho bản ghi: bạn nên chọn phần tử 'input' thích hợp bằng cách sử dụng bộ chọn CSS mà không đính kèm lớp vào phần tử HTML. –

+0

Mặc dù nhận xét của bạn là cách được ưu tiên, nhưng điều này không phải lúc nào cũng có thể –

+0

Tại sao lại là cách ưa thích? – Mark

-1

Chắc chắn, không có giải pháp với HTML thuần túy phải gửi biểu mẫu với một liên kết (a) thẻ. HTML chuẩn chỉ chấp nhận các nút hoặc hình ảnh. Như một số cộng tác viên khác đã nói, người ta có thể mô phỏng sự xuất hiện của một liên kết bằng cách sử dụng một nút, nhưng tôi đoán đó không phải là mục đích của câu hỏi.

IMHO, tôi tin rằng giải pháp được đề xuất và chấp nhận không hoạt động.

Tôi đã thử nghiệm trên biểu mẫu và trình duyệt không tìm thấy tham chiếu đến biểu mẫu.

Vì vậy, có thể giải quyết nó bằng cách sử dụng một dòng mã JavaScript, sử dụng đối tượng this, tham chiếu phần tử được nhấp, là nút con của biểu mẫu, cần được gửi. Vì vậy, this.parentNode là nút biểu mẫu. Sau khi nó chỉ cần gọi phương thức submit() ở dạng đó. Nó không cần nghiên cứu từ toàn bộ tài liệu để tìm đúng hình thức.

<form action="http://www.greatsolutions.com.br/indexint.htm"     
    method="get"> 
    <h3> Enter your name</h3> 
    First Name <input type="text" name="fname" size="30"><br> 
    Last Name <input type="text" name="lname" size="30"><br> 
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a> 
</form> 

Giả sử rằng tôi nhập với tên của riêng tôi:

Filled form

Tôi đã sử dụng get trong thuộc tính phương pháp hình thức bởi vì nó có thể để xem các thông số ngay trong URL ở trang tải sau khi nộp .

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum 

Giải pháp này rõ ràng áp dụng cho bất kỳ thẻ nào chấp nhận sự kiện onclick hoặc một số sự kiện tương tự.

this là lựa chọn tuyệt vời để khôi phục ngữ cảnh cùng với event variable (có sẵn trong tất cả các trình duyệt chính và IE9 trở đi) có thể được sử dụng trực tiếp hoặc được chuyển làm đối số cho hàm.

Trong trường hợp này, thay thế dòng bằng a bằng dòng bên dưới, sử dụng thuộc tính target, cho biết yếu tố đã bắt đầu sự kiện.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a> 
+0

@Nathan, tôi không có nhiều thực hành viết trong 'Stackoverflow'. Tôi hy vọng rằng các chỉnh sửa của bạn sẽ giúp tôi cải thiện phong cách của mình. Tiếng Anh của tôi cũng không tốt. –

0

bạn có thể sử dụng OnClick = "document.getElementById ('formID_NOT_NAME'). SUBMIT()"

Các vấn đề liên quan