2011-08-23 39 views
6

Xin chào, tôi đang gặp một số sự cố khi làm việc này, khá đơn giản tất cả những gì tôi muốn làm là hiển thị div khi biểu mẫu html của tôi được gửi.Ẩn/Hiện Div sau khi gửi biểu mẫu?

<head> 

<script type="text/javascript"> 
function showHide() { 
    var div = document.getElementById(hidden_div); 
    if (div.style.display == 'none') { 
    div.style.display = ''; 
    } 
    else { 
    div.style.display = 'none'; 
    } 
} 
</script> 

</head> 


<body> 

<form method="post" name="installer"> 

<label>Home Keyword</label> 
<br /> 
<input type="text" name="hello" value=""> 
<br /> 
<input type="submit" value="" name="submit" onsubmit="showHide()"> 

</form> 

<div id="hidden_div" style="display:none"> 
<p>Show me when form is submitted :) </p> 
</div> 

</body> 

Bất kỳ trợ giúp sẽ được nhiều đánh giá cao cảm ơn bạn :)

+0

Di chuyển thuộc tính onsubmit mẫu. Ngoài ra, không sử dụng "gửi" dưới dạng tên kiểm soát biểu mẫu vì nó làm phương thức gửi của biểu mẫu. Trong phần trên, * form.submit * sẽ tham chiếu đến điều khiển, không phải phương thức, do đó, gọi nó sẽ ném một lỗi. – RobG

Trả lời

16

Tôi nghĩ rằng bạn chỉ thiếu dấu ngoặc kép quanh "hidden_div" trong document.getElementById("hidden_div") cuộc gọi của bạn! Tuy nhiên, trên thực tế, trang của bạn có thể đăng lại, đặt lại trạng thái của trang và do đó để ẩn hidden_div dường như luôn ở trạng thái ẩn - bạn có dự định xử lý việc gửi biểu mẫu qua AJAX không? Không.

Nếu bạn muốn nhìn thấy hành vi dự định, bạn nên di chuyển showHide() cuộc gọi đến các yếu tố <form>, và trả về false sau nó:

<form method="post" name="installer" onsubmit="showHide(); return false;"> 

và rời khỏi nút gửi như:

<input type="submit" value="" name="submit" /> 

Cũng lưu ý rằng bạn chưa tự đóng thẻ nút <input /> hoặc đưa ra bất kỳ văn bản nào để hiển thị bên trong thẻ.

+0

Cảm ơn bạn Cory yes có vẻ như làm thủ thuật và haha ​​có tôi có dấu ngoặc kép trong mã ban đầu của tôi nhưng họ đã bị mất trong bản dịch, tôi nghĩ rằng cà phê của tôi cần đứng lên: P – Jessica

+0

Không cần phải "đóng" đầu vào , OP đã không chỉ ra rằng XHTML đang được sử dụng và rất hiếm khi sử dụng nó trên web. – RobG

+0

@RobG: Tôi chỉ suy ra từ thực tế là cô ấy đã làm như vậy với các thẻ '
', nhưng bạn có thể đúng. –

2

bạn cần phải đặt showhide chức năng vào mẫu onsubmit thay vì input

<form method="post" name="installer" onsubmit="showHide()"> 

bạn cũng bị thiếu dấu ngoặc kép như @Cory nêu

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