<div id="sign-up-bottom-border">
    <br>
    <form action="" id="sign-up-form">
        <label class="sign-up-label">Username<br>
            <input class="sign-up-textbox" name="username" type="text" placeholder="Username...">
        </label>
        <br>
        <br>
        <label class="sign-up-label">Password<br>
            <input class="sign-up-textbox" name="password" type="password" placeholder="Password...">
        </label>
        <br>
            <input id="sign-up-button" onclick="submitmyform();" type="submit" value="SIGN UP" name="signup">
        <br>
    </form>
</div>

<?php
//Connect to database
$connection = new MongoClient();

//Select a database
$db = $connection->ecommerce;

//Select a collection
$collection = $db->customers;

//Extract the data that was sent to the server
$username = filter_input(INPUT_POST, 'username', FILTER_SANITIZE_STRING);
$password = filter_input(INPUT_POST, 'password', FILTER_SANITIZE_STRING);

//Convert to PHP array
$customerData = [
    "username" => $username,
    "password" => $password
];

//Add the customer to the database
$returnVal = $collection->insert($customerData);

//Close the connection
$connection->close();
?>

function submitmyform(){
    data=$('#sign-up-form').serialize();
        $.ajax({
        url: "sign_up.php",
        type: 'POST',
        data: data,
        async: false,
        dataType: 'html',
    });
}