Serializing form data with jquery

Question

I have a form shown below that I'm trying to submit the data via jquery. It's not working. The alert is blank. Note, I'm using bulma css framework.

HTML form

<form method="post" action="">
    <div class="field">
        <label class="label">Name</label>
        <div class="control">
            <input class="input" type="text" id="yrname" name="yrname" placeholder="Text input">
        </div>
    </div>

    <div class="field">
        <label class="label">Username</label>
        <div class="control has-icons-left has-icons-right">
            <input class="input is-success" type="text" id="usrname" name="usrname" placeholder="Text input" value="bulma">
        </div>
    </div>

    <div class="control">
        <input class="button is-link" type="submit" value="Submit">
    </div>
</form>

JavaScript/jQuery

$('.button').on('click', function(e){
    var data1 = $('form').serialize();
    alert('data1');
});

Answer 1

Replace

alert('data1');

With

alert(data1);

data1 is a variable of js not a string!!