Ẩn nút sau khi nhấp (với mẫu hiện có trên trang)

Tôi đang cố gắng ẩn nút (không phải bên trong thẻ biểu mẫu) sau khi đã được nhấp. Dưới đây là mã hiện có. Tất cả các giải pháp tôi đã thử hoặc là phá vỡ chức năng hoặc can thiệp vào biểu mẫu trên trang.Ẩn nút sau khi nhấp (với mẫu hiện có trên trang)

Nội dung giữa thẻ DIV ẩn-dev bị ẩn cho đến khi nút gần cuối mã được nhấp. Khi nút đó được nhấp, tất cả nội dung còn lại sẽ được hiển thị cho người dùng.

Khi nội dung được hiển thị, không sử dụng nút "Kiểm tra tính khả dụng" vì vậy tôi muốn ẩn nó (đặc biệt là vì nút gửi xuất hiện cho biểu mẫu lõi và khó hiểu khi thấy cả hai ở dưới cùng . của trang chiều dài đầy đủ

Dưới đây là các mã hiện có mà làm mọi thứ đúng cách (trừ giấu nút sau khi nhấp chuột) ...

<html> 
    <head> 
    <style> 
    .hidden-div { 
     display:none 
    } 
    </style> 
    </head> 
    <body> 
    <div class="reform"> 
     <form id="reform" action="action.php" method="post" enctype="multipart/form-data"> 
     <input type="hidden" name="type" value="" /> 
      <fieldset> 
       content here... 
      </fieldset> 

       <div class="hidden-div" id="hidden-div"> 

      <fieldset> 
       more content here that is hidden until the button below is clicked... 
      </fieldset> 
     </form> 
       </div> 
<span style="display:block; padding-left:640px; margin-top:10px;"> 
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button> 
</span> 
    </div> 
    </body> 
    </html>

Nguồn

2013-06-03 user2449026

Thay đổi nút để:

<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>

FIDDLE

Hoặc thậm chí tốt hơn, sử dụng một trình xử lý sự kiện thích hợp bằng cách xác định các nút:

<button id="show_button">Check Availability</button>

và một kịch bản

<script type="text/javascript"> 
    var button = document.getElementById('show_button') 
    button.addEventListener('click',hideshow,false); 

    function hideshow() { 
     document.getElementById('hidden-div').style.display = 'block'; 
     this.style.display = 'none' 
    } 
</script>

FIDDLE

Nguồn

2013-06-03 18:45:29 adeneo

cảm ơn bạn, đã làm việc một cách hoàn hảo – user2449026

Dưới đây là một giải pháp khác sử dụng Jquery tôi tìm thấy nó một chút dễ dàng hơn và neater hơn nội tuyến JS đôi khi.

<html> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script> 

     /* if you prefer to functionize and use onclick= rather then the .on bind 
     function hide_show(){ 
      $(this).hide(); 
      $("#hidden-div").show(); 
     } 
     */ 

     $(function(){ 
      $("#chkbtn").on('click',function() { 
       $(this).hide(); 
       $("#hidden-div").show(); 
      }); 
     }); 
    </script> 
    <style> 
    .hidden-div { 
     display:none 
    } 
    </style> 
    </head> 
    <body> 
    <div class="reform"> 
     <form id="reform" action="action.php" method="post" enctype="multipart/form-data"> 
     <input type="hidden" name="type" value="" /> 
      <fieldset> 
       content here... 
      </fieldset> 

       <div class="hidden-div" id="hidden-div"> 

      <fieldset> 
       more content here that is hidden until the button below is clicked... 
      </fieldset> 
     </form> 
       </div> 
       <span style="display:block; padding-left:640px; margin-top:10px;"><button id="chkbtn">Check Availability</button></span> 
    </div> 
    </body> 
    </html>

Nguồn

2013-06-03 18:58:00 TheSnooker

mã CSS:

.hide{ 
display:none; 
} 

.show{ 
display:block; 
}

mã HTML:

<button onclick="block_none()">Check Availability</button>

Javascript Code:

function block_none(){ 
document.getElementById('hidden-div').classList.add('show'); 
document.getElementById('button-id').classList.add('hide'); 
}

Nguồn

2013-06-03 19:20:34

Đây là giải pháp của tôi. Tôi Ẩn rồi xác nhận kiểm tra

onclick = "return ConfirmSubmit (this);" />

function ConfirmSubmit(sender) 
    { 
     sender.disabled = true; 
     var displayValue = sender.style. 
     sender.style.display = 'none' 

     if (confirm('Seguro que desea entregar los paquetes?')) { 
      sender.disabled = false 
      return true; 
     } 

     sender.disabled = false; 
     sender.style.display = displayValue; 
     return false; 
    }

Nguồn

2016-06-13 05:18:55 EduLopez

Ẩn nút sau khi nhấp (với mẫu hiện có trên trang)

Trả lời

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