Ukryj przycisk po kliknięciu (przy istniejącym formularzu na stronie)

Próbuję ukryć przycisk (nie wewnątrz znaczników formularza) po jego kliknięciu. Poniżej znajduje się istniejący kod. Wszystkie rozwiązania, które próbowałem, albo łamią funkcjonalność, albo zakłócają formularz na stronie.Ukryj przycisk po kliknięciu (przy istniejącym formularzu na stronie)

Zawartość ukrytych tagów DIV ukryta jest do momentu kliknięcia przycisku znajdującego się w dolnej części kodu. Po kliknięciu tego przycisku, cała pozostała zawartość jest pokazywana użytkownikowi.

Po wyświetleniu zawartości przycisk "Sprawdź dostępność" nie jest potrzebny, więc chciałbym go ukryć (zwłaszcza, że przycisk Wyślij pojawia się w formularzu podstawowym, i mylące jest wyświetlanie obu na dole . pełnego stronie długość

Oto istniejący kod, który robi wszystko prawidłowo (z wyjątkiem ukryć przycisk po kliknięciu) ...

<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>

Źródło

2013-06-03 user2449026

zmienić przycisk ażeby:

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

FIDDLE

Albo jeszcze lepiej, użyj właściwej obsługi zdarzeń poprzez identyfikację przycisku:

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

i skrypt

<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

Źródło

2013-06-03 18:45:29 adeneo

dziękuję, działało idealnie – user2449026

Oto kolejny rozwiązanie przy użyciu jQuery jest to trochę łatwiejsze i bardziej uporządkowane niż czasami wbudowany JS.

<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>

Źródło

2013-06-03 18:58:00 TheSnooker

kod CSS:

.hide{ 
display:none; 
} 

.show{ 
display:block; 
}

kod HTML:

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

kod JavaScript:

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

Źródło

2013-06-03 19:20:34

To jest moje rozwiązanie. I Ukryj, a następnie potwierdź, że sprawdzono:

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; 
    }

Źródło

2016-06-13 05:18:55 EduLopez

Ukryj przycisk po kliknięciu (przy istniejącym formularzu na stronie)

Odpowiedz

Powiązane problemy