I need to submit this form for it to work. Here is my code, but it doesn't want to work. The request must be sent using this link, for example, https://www.eymedic.form.php. How do I get it to work fine?
<form method="POST" id="form" action="#" 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="number" 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="email" 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>
</div>
</div>
<script>
$( "submit" ).click(function() {
if(form.val()) {
var msg = $("#form").serialize();
$.ajax({
type: 'POST',
url: 'https://www.harleymedic.co.uk/qrcodes/form.php',
data: msg,
success: function(data) {
console.log(data);
if (data.status === 'OK') {window.location.href='second_page.html'}
else {alert(data.message)};
}
});
};
});
</script>
You don't have submit element, use form element instead and submit action should be prevented.
$( "form" ).click(function(e) {
e.preventDefault()
var msg = $("#form").serialize();
$.ajax({
type: 'POST',
url: 'https://www.harleymedic.co.uk/qrcodes/form.php',
data: msg,
success: function(data) {
console.log(data);
if (data.status === 'OK') {window.location.href='second_page.html'}
else {alert(data.message)};
}
});
});