AJAX html form needs 2 button clicks to be submitted to be sent to php file

Question

Here is my code for my form:

<form method = "get">
    <div class="row">
        <div class="input-field col s12 ">
            <input id="notes" name = "notes" type="text" class="validate">
            <label for="notes">Notes</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s12">
            <i class="material-icons prefix">credit_card</i>
            <input id="card_details" type="text" inputmode="numeric" pattern="[0-9]+" onkeypress='return event.charCode >= 48 && event.charCode <= 57' autocomplete="cc-number" maxlength="16" data-length="16" placeholder="xxxx xxxx xxxx xxxx">
            <label for="card_details">Card details</label>
            </div>
    </div>
    <div class="row">
        <div class="input-field col s6">
            <i class="material-icons prefix">web_asset</i>
            <input id="expiration_date" type="tel" pattern="[0-9]*" inputmode="numeric">
            <label for="expiration_date">Expiration (mm/yy)</label> 
        </div>
        <div class="input-field col s6">
            <input id="card_ccv" type="text" inputmode="numeric" pattern="[0-9\s]{3,4}"  onkeypress='return event.charCode >= 48 && event.charCode <= 57' autocomplete="cc-number" maxlength="3" data-length="3" placeholder="xxx">
            <label for="card_ccv">Security Code</label>
        </div>
    </div>
    <div class="row center">
        <button class="btn waves-effect waves-light cyan" type="submit" onclick= order_placed()>Pay
            <i class="material-icons right">arrow_right</i>
        </button>
    </div>
</form>

What I am trying to achieve is to be able to send the "notes" input into this AJAX call to be handled.

<script type="text/javascript"> 

    <?php $notes = $_GET['notes']?>
    function order_placed() {
        $.ajax({
            url: 'payment.php?notes=<?php $notes?>',
            type: 'GET',
            success: function(result){
                alert(result)
                window.location.assign("home.html")
            }
        })
    }
</script> 

The code does work, however, it takes two clicks at the submit button for the form to be handled. On the first click, the form empties itself with the URL of the page becoming "/checkout.php?notes=whatevernotesis". On the second click, the original notes form is sent to be handled.

Any help will be appriciated.