Jquery hide and show css

Question

i have some problems with code . So i want to show Div (table) with jquery. And i can't do this.

Code HTML:

<div id="DT12345-1234-123">
 <table>
  (Some table details)
 </table>
</div>

Code CSS:

#DT12345-1234-123 {
    display: none;
}

Code Jquery:

$('document').ready(function(){
    $('#button').on('click', function(){
        var number;
        number = $('#write_something').val();

        if (number == 'DT12345-1234-123')
        {
            $("#DT12345-1234-123").css("display", "block");
        }

    });

});

Code HTML(button , input):

<form class="cs_booking_form">
 <div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
   <div class="form-group">
    <input id="write_something" type="text" class="form-control" 
    placeholder="Your Number">
   </div>
  </div>
  div class="cs_btndiv">
   <button id="button" class="cs_btn cs_white_btn">Do</button>
  </div>
 </div>
 <div id="DT12345-1234-123">
  <table>
  (some in table)
  </table>
 </div>
</form>

the table is displayed for only a millisecond and then restart cite . And the same table is not open

Answer 1

By default <button> is a type="submit".
To override that default behavior (form submission) use type="button"

<button type="button" id="button" class="cs_btn cs_white_btn">Do</button>

Also $('document').ready(function(){ Should be $(document).ready(function(){ or rather

jQuery(function( $ ){ // DOM ready and $ alias in scope

or if you prefer ES6 syntax: jQuery( $ => {

Additionally you can prevent browser defaults by using Event.preventDefault():

jQuery(function( $ ){
    $('#button').on('click', function(ev) {
        ev.preventDefault();

        var str = $('#write_something').val();

        if (str === 'DT12345-1234-123') {
            $("#"+ str ).css("display", "block");
        }

    });
});