jquery .show() hides immediately

Question

This might be a simple problem with a simple solution but I've been stuck on it for awhile now. I have a button that will use Jquery to load a pdf once a textbox has been filled. However, in my testing, the modal appears and disappears whenever the button is clicked. I've shaved it down to make a div appear first and the same thing happens. Could it be something with my code or is it how much scripts are being called?

HTML

<form>
    <p>Key number : <input type="text" name="keynumber" /></p>
    <p><button id="submit" class="retrievedoc" type="submit" >Submit</button></p>
</form>
<div id="pdf-dialog">
    <p>TEST</p>
</div>

CSS

.pdf-dialog{display:none;}

JQuery

$('.retrievedoc').on('click', function() {
    $("#pdf-dialog").show();
    /**$(".pdf-dialog").dialog({
            title: 'Document',
            width: 500,
            height: 800,
            draggable: false,
            modal: true,
            dialogClass: "readpdf-dialog",
            buttons: [{
                text: 'Close',
                click: function() {
                    $(this).dialog('close');
                }
            }] 
        });
    **/
});

This is how I'm arranging my scripts at the bottom of the page

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="<?php echo base_url(); ?>assets/js/functions.js"></script> 
     <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>

Could the arrangement be the issue? Please help

Answer 1

Change <button id="submit" class="retrievedoc" type="submit" >Submit</button> to <button id="submit" class="retrievedoc" type="button" >Submit</button>

If the type is submit the form will automatically submit and will cancel out the dialog.

Answer 2

Use: e.preventDefault(); :

$('.retrievedoc').on('click', function(e) {
    e.preventDefault();
    $("#pdf-dialog").show();
    .....
});