Jquery load() makes page refresh

Question

I've got a very simple script, by pressing on a button an other PHP script needs to be loaded(not redirected but loaded in a div in that page). Now everything is working just fine, but one little problem remains.

The page is refreshing out of itself, I don't know if it's because of the function load or because the button is in a form?

My HTML code:

<div class="widget">
    <!-- Widget title -->
    <div class="widget-head">
        <div class="pull-left">Poll</div>
        <div class="widget-icons pull-right">
            <a href="#" class="wminimize"><i class="fa fa-chevron-up"></i></a>
            <a href="#" class="wsettings"><i class="fa fa-wrench"></i></a>
            <a href="#" class="wclose"><i class="fa fa-times"></i></a>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="widget-content">
        <!-- Widget content -->
        <div class="padd">
            <p>U kunt hier de <strong>polls beheren</strong> die onder andere worden weergeven op de homepagina van
                <?php echo $site[ 'name']; ?>
            </p>
            <hr />
            <form method="post" class="form-horizontal" role="form" action="poll">
                <div class="form-group">
                    <label class="control-label col-sm-1" for="name">Poll naam:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-name" id="poll-name" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="question">Poll vraag:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-question" id="poll-question" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="option1">Optie 1:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-option1" id="poll-option1" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="option2">Optie 2:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-option2" id="poll-option2" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="option1">Optie 3:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-option3" id="poll-option3" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1" for="option1">Optie 4:</label>
                    <div class="col-sm-11">
                        <input type="text" name="poll-option4" id="poll-option4" class="form-control" value="" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2">
                        <button type="submit" name="poll-submit" id="poll-submit" class="btn btn-danger"><i class=""></i> Poll toevoegen</button>
                    </div>
                    <div class="col-sm-12">
                        <div class="pull-right">
                            <button type="submit" name="poll-list" id="poll-list" class="btn btn-primary"><i class=""></i> Poll lijst</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<div class="widget" style="display: none;" id="widget2">
    <!-- Widget title -->
    <div class="widget-head">
        <div class="pull-left">Poll-lijst</div>
        <div class="widget-icons pull-right">
            <a href="#" class="wminimize"><i class="fa fa-chevron-up"></i></a>
            <a href="#" class="wsettings"><i class="fa fa-wrench"></i></a>
            <a href="#" class="wclose"><i class="fa fa-times"></i></a>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="widget-content">
        <!-- Widget content -->
        <div class="padd" id="padd2">
        </div>
    </div>
</div>   

My JS code:

/* Dit is een aparte JS bestand, dit heeft geen PHP handler. Dit include wel een PHP bestand om te poll lijst op te halen. */
$('#poll-list').click(function() {

    $('#widget2').show('fast');

    // Pagina inladen.
    $('#padd2').load('poll-list.php', function() {

        noty({
            text: 'De poll lijst is succesvol ingeladen'
        });
    });

});

So I know everything is working fine because the div is showing itself on the page(http://prntscr.com/72yu6q) But after 2 seconds the page is refreshing, and the button hasn't been clicked so the div is not showing.

Thank you in advance, also my apologies for any bad grammar or spelling mistakes!

Answer 1

Using <button type="submit"> creates a button that submits the form when clicked, causing the browser to load the form's action page (here, 'poll'). You can prevent this with jQuery as in erkaner's answer, or you can not make it a submit button in the first place. <button type="button"> won't do anything unexpected.

Answer 2

Can you add event.preventDefault():

 $('#poll-list').click(function(event){
     event.preventDefault();
 })

Answer 3

Wrap everything in $(document).ready() function

$( document ).ready(function() {
    console.log( "ready!" );
});