document.getElementById ("test"). Style.display = "hidden" không hoạt động

Question

Tôi muốn ẩn biểu mẫu của mình khi tôi nhấp vào nút gửi. Mã của tôi như sau:

<script type="text/javascript"> 
    function hide() { 
     document.getElementById("test").style.display = "hidden"; 
    } 
</script> 
<form method="post" id="test"> 
    <table width="60%" border="0" cellspacing="2" cellpadding="2"> 
     <tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" 
     align="center"> 
      <td>Ample Id</td> 
      <td>Find</td> 
     </tr> 
     <tr align="center" bgcolor="#E8F8FF" style="color:#006"> 
      <td> 
       <input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" 
       /> 
      </td> 
      <td> 
       <input type="image" src="../images/btnFind.png" id="find" name="find" 
       onclick="javascript:hide();" /> 
      </td> 
     </tr> 
    </table> 
</form> 

Nhưng khi tôi nhấp vào nút "Tìm", biểu mẫu cụ thể đó sẽ không bị ẩn.

Answer 1

Thay thế hidden bằng none. Xem MDN reference.

Answer 2

Đặt thuộc tính hiển thị CSS thành none.

document.getElementById("test").style.display = "none"; 

Ngoài ra, bạn không cầnjavascript: cho thuộc tính onclick.

<input type="image" src="../images/btnFind.png" id="find" name="find" 
    onclick="hide();" /> 

Cuối cùng, hãy chắc chắn rằng bạn không có nhiều yếu tố với cùng một ID.

Nếu biểu mẫu của bạn không đến đâu, Phil đề nghị bạn nên ngăn chặn gửi biểu mẫu. Chỉ cần return false trong trình xử lý onsubmit.

<form method="post" id="test" onsubmit="return false;"> 

Nếu bạn muốn hình thức để gửi, nhưng ẩn div trên tải trang tiếp theo, bạn sẽ phải sử dụng server-side code để ẩn các yếu tố:

<script type="text/javascript"> 
function hide() { 
    document.getElementById("test").style.display = "none"; 
} 
window.onload = function() { 
    // if form was submitted, PHP will print the below, 
    // which runs function hide() on page load 
    <?= ($_POST['ampid'] != '') ? 'hide();' : '' ?> 
} 
</script> 

Answer 3

nó một yếu tố ngăn chặn, và bạn cần phải sử dụng none

document.getElementById("test").style.display="none" 

hidden được sử dụng cho visibility

Answer 4

bạn cần phải sử dụng display = none

giá trị ẩn được kết nối với attributet gọi visibility

do đó, mã của bạn sẽ giống như thế này

<script type="text/javascript"> 
function hide(){ 
document.getElementById("test").style.display="none"; 
} 
</script> 

Answer 5

này nên nó thử nó.

document.getElementById("test").style.display="none"; 

Answer 6

bạn có thể sử dụng một cái gì đó như thế này ....div chứa

<script type="text/javascript"> 
function hide(){ 
document.getElementById("test").innerHTML.style.display="none"; 
} 
</script> 
<div id="test"> 
<form method="post" > 

<table width="60%" border="0" cellspacing="2" cellpadding="2" > 
    <tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" align="center"> 
    <td>Ample Id</td> 
    <td>Find</td> 
    </tr> 

    <tr align="center" bgcolor="#E8F8FF" style="color:#006" > 
    <td><input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" /></td> 
    <td><input type="image" src="../images/btnFind.png" id="find" name="find" onclick="javascript:hide();"/></td> 
    </tr> 

</table> 

</form> 
</div> 

Answer 7

Qua Javascript

document.getElementById("test").style.display="none"; 

Qua Jquery

$('#test').hide(); 

Answer 8

Nó phải là một trong hai

document.getElementById("test").style.display = "none"; 

hoặc

document.getElementById("test").style.visibility = "hidden"; 

tùy chọn thứ hai sẽ hiển thị một số khoảng trống nơi hình thức ban đầu hiện tại, nơi như tùy chọn đầu tiên không

Answer 9

Có hai cách để làm điều này.

Hầu hết các câu trả lời đều chỉ ra rằng style.display không có giá trị nào được gọi là "ẩn". Nó không phải là không.

Nếu bạn muốn sử dụng "ẩn", cú pháp phải như sau.

object.style.visibility="hidden" 

Sự khác biệt giữa hai thuộc tính hiển thị = "ẩn" sẽ chỉ ẩn nội dung của bạn nhưng giữ nguyên vị trí trên trang. Trong khi hiển thị = "none" sẽ ẩn phần tử hoàn chỉnh của bạn và phần còn lại của các phần tử trên trang sẽ lấp đầy khoảng trống được tạo bởi nó.

Kiểm tra này illustration

Answer 10

Sử dụng jQuery:

$('#test').hide(); 

Sử dụng Javascript:

document.getElementById("test").style.display="none"; 

Ném một lỗi "không thể đặt thuộc tính 'màn hình' không xác định"

S o, sửa chữa cho điều này sẽ là:

document.getElementById("test").style="display:none"; 

nơi mã html của bạn sẽ trông như thế này:

<div style="display:inline-block" id="test"></div> 

Answer 11

Có lẽ bạn có thể thêm một lớp học như 'ẩn'.

Làm theo ví dụ tại đây: https://developer.mozilla.org/fr/docs/Web/API/Element/classList.

document.getElementById ("test"). ClassList.add ("anotherclass");