CODEWITHSUNDEEP
javascriptjqueryhtml
Md. Abu Zaman
Md. Abu Zaman

Reputation: 257

How to hide the button when click at a time it will show the current time and date

I am trying to make a submit button that will show current date and time when clicked and then the button will be hidden I mean button will be replaced by time and date. I saw an example but it showing GMT and current location name. So how can I replace button and show the time?

Using this code is showing the date and time with GMT and location name but it's not remaining and the page is reloading and the just appear the button only. I don't need to show location name and GMT I just need to show current time and date. 

$(document).ready(function(){
    $("#hide").click(function(){
        $("#button-to-hide").hide();
        $("p1").show();
    });

});
$('#button-to-hide').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form method="post" action="{{route('signInUpdate','id')}}">
  {{ csrf_field()}}
  <input type="hidden" name="isSignIn" value="{{$internalVisitor->isSignIn}}"/>
  <input type="hidden" name="tableId" value="{{$internalVisitor->id}}"/>
  <button type="submit">
<a id="hide" onclick="document.getElementById('hide').innerHTML = Date()">Hide</a></button>
</form>

Upvotes: 1

Views: 400

Answers (2)

Mamun
Mamun

Reputation: 68933

You can use toLocaleDateString() to take the short date. Then you can take hours, minutes and seconds separately. Try the following way:

$(document).ready(function(){
    $("#hide").click(function(event){
      event.preventDefault();
      var d = new Date();
      var t = d.getHours() +':'+ d.getMinutes() +':'+ d.getSeconds();
      $("#p1").text(d.toLocaleDateString()  +'  '+ t);
      $(this).parent().hide();
      $("#p1").show();
    });
});
$('#button-to-hide').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
  <input type="hidden" name="isSignIn" value=""/>
  <input type="hidden" name="tableId" value=""/>
  <button type="submit">
  <a id="hide">Hide</a></button>
  <p id="p1"></p>
</form>

Upvotes: 1

brk
brk

Reputation: 50291

Since it is inside a form you need to prevent the default behavior of the button using e.preventDefault

$(document).ready(function() {
  $("#hide").click(function(e) {
    e.preventDefault();
    document.getElementById('hide').innerHTML = Date();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">

  <button type="submit">
    <a id="hide">Hide</a></button>
</form>

Upvotes: 2

Related Questions