The AJAX form does not want to work, it throws an error. I need it to work when a button is clicked and all data is refreshed.

<form name="form" id="form" class="form">
     
      <div class="field">
        <label for="input-kitId" class="label is-size-7 has-text-weight-light has-text-left">Order ID</label>
        <div class="field">
          <div class="control is-expanded">
          <input type="text" id="input-kitId" class="home-form__input input is-danger" name="number" value="" placeholder="Order ID"/>
          </div>
        </div>
      </div>
      
      <div class="field">
        <label for="input-firstName" class="label is-size-7 has-text-weight-light has-text-left">Email</label>
        <div class="field"><div class="control is-expanded">
          <input type="text" id="input-firstName" class="home-form__input input" name="email" value="" placeholder="Email"/>
          </div>
        </div>
      </div>
      <button type="submit" class="button is-midnightBlue">Generate Booking Reference</button>
    </form>        
   
<script type="text/javascript">
  $("#form").submit(function(e) {
    e.preventDefault();
    var form = $(this);
    var url = form.attr('action');
    
    $.ajax({
      crossDomain: true,
           type: "POST",
           url: 'https://www.harleymedic.co.uk/qrcodes/form.php',
           data: form.serialize(),
           success: function(data)
           {
               alert(data);
           }
         });
  
    
});

</script>