2010-08-23 43 views
11

Tôi có biểu mẫu có hai nút, mỗi nút có onclick = this.form.submit(). Tôi có một trường ẩn trong biểu mẫu và tôi muốn giá trị của trường khác nhau dựa trên nút nào được nhấp. cách nào tốt nhất để làm việc này?Vượt qua giá trị trường ẩn dựa trên nút nào được nhấp bằng JavaScript

Ngoài ra, trước khi bất kỳ ai nói câu trả lời, jQuery không phải là một tùy chọn trong trường hợp này.

+0

Nếu W3C sửa yếu tố đầu vào/nút gửi, bạn sẽ không cần JS hoặc trường ẩn. Như mọi thứ đứng, cách duy nhất để làm những gì bạn muốn mà không JS là chỉ cần sử dụng một hình ảnh gửi (chắc chắn rằng bạn bao gồm alt văn bản cho những người sử dụng trình duyệt văn bản chỉ hoặc trình đọc màn hình). –

Trả lời

12
Prototype

sử dụng :-)

Nhưng trong tất cả các mức độ:

  1. Thêm một id đến lĩnh vực ẩn
  2. Trước khi bạn gửi biểu mẫu trong mỗi handler:

    document.getElementById("hiddenId").value = "mySpecialValue";

    //or (depending on which onclick handler you are in)

    document.getElementById("hiddenId").value = "myOtherSpecialValue";

  3. Gửi biểu mẫu giống như hiện tại của bạn.

khuyến nghị ví dụ:

<input id="buttonA" type="button" value="do something" onclick="buttonA_clickHandler(event);"/>

...

function buttonA_clickHandler(event) { 
    document.getElementById('hiddenId').value = whatever; 
    document.getElementById('theForm').submit(); 
} 

lặp lại cho các nút khác.

+4

Chúng ta có thể làm cho meme 'sử dụng nguyên mẫu' như phổ biến trên SO như 'sử dụng jquery' không? ;) –

+0

chúng tôi chỉ có thể hy vọng. – geowa4

5

Giả sử bạn đã có ẩn thiết lập hiện trường một cái gì đó của bạn như vậy:

<input type="hidden" name="clicked_button" id="clicked_button" value=""/> 

Bạn có thể chỉ cần đặt giá trị của nó trong một handler onclick chung cho các nút của bạn:

function buttonClick(theButton){ 
    document.getElementById('clicked_button').value = theButton.name; 
    return true; 
} 

Và sau đó bạn nộp các nút sẽ là:

<input type="submit" name="save" value="Save" onclick="return buttonClick(this)"/> 
<input type="submit" name="delete" value="Delete" onclick="return buttonClick(this)"/> 
+0

Cảm ơn bạn đã giải pháp sạch. – Khateeb321

1

Bạn có thể chuyển giá trị mà bạn muốn đặt hidd en đầu vào cho một hàm bạn tạo:

function handleClick(val){ 
    document.getElementById('HiddenInputID').value = val; 
    return true; 
} 

và sau đó mã các nút sử dụng onclick để vượt qua bất cứ giá trị mà bạn muốn:

<input type="submit" name="Name1" value="Value 1" onclick="return handleClick('Value 1')"/> 
<input type="submit" name="Name2" value="Value 2" onclick="return handleClick('Value 2')"/> 
+0

Tôi thích giải pháp này vì việc gửi biểu mẫu cũng có thể với JavaScript bị vô hiệu hóa không phải là trường hợp với giải pháp @ geowa4 – mxmehl

3
  1. Hãy tha thứ cho tôi nếu câu trả lời cho này có vẻ hiển nhiên, nhưng tại sao lại sử dụng trường ẩn? <input type="submit" value="..." /> đã hoạt động; trình duyệt sẽ gửi value của nút gửi đã được nhấp, cùng với phần còn lại của biểu mẫu dữ liệu.

  2. Yếu tố <button type="submit" name="..." value="...">...</button> hoạt động hoàn hảo trong Chrome/Safari/Firefox, nhưng thất bại trong IE7 (như về tội khi quân hoàng đã chỉ ra trong bình luận của ông ở trên); nếu bạn không quan tâm đến IE, đó là cách để hoạt động.

  3. Bạn cũng có thể sử dụng một yếu tố <input type="image" /> , chỉ cần nhớ rằng trình duyệt nộp nó như là hai lĩnh vực: name.xname.y. Ngoài ra, bạn không thể đặt giá trị của nó, nhưng đó không phải là vấn đề nếu bạn chỉ quan tâm đến sự hiện diện của của trường.

+0

Thuộc tính giá trị cũng được sử dụng để hiển thị văn bản nút, vì vậy thường không phải là một ứng cử viên tốt để mang dữ liệu đến ứng dụng. –

+0

Đúng, nhưng tùy thuộc vào giá trị mà OP muốn gửi, nó vẫn có thể hoạt động. Ngoài ra, hai tùy chọn còn lại vẫn hợp lệ. – elo80ka

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