Why is my AJAX call in jQuery not working? - php

Question

What am I trying to achieve:
After form is being filled-out and submit button being clicked, I want to be able to submit form and do an AJAX call - payment.php file (I did integration of PayPal, I am sending following values via mail firstname, surname, email, phone, number, date of birth, CV, photo, etc...) and I am also trying to store it into the database.
Where am I failing at?
This is multiple-step form, the problem is occuring when I get to the last step of filling-out form and by clicking "Submit" button nothing happens - my AJAX call is not working...
My jQuery code:
$(document).ready(function(){
var current_fs, next_fs, previous_fs; //fieldsets
var opacity;
var current = 1;
var steps = $("fieldset").length;
setProgressBar(current);
$(".next").click(function(){
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//Add Class Active
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({'opacity': opacity});
},
duration: 500
});
setProgressBar(++current);
});
$(".previous").click(function(){
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//Remove class active
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({'opacity': opacity});
},
duration: 500
});
setProgressBar(--current);
});
function setProgressBar(curStep){
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
}
$(".submit").click(function(){
var request;
//moj kod
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $("#msform");
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
// Fire off the request to /form.php
request = $.ajax({
url: "payment.php",
type: "post",
data: serializedData
});
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Request uspješno poslat!");
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.log(JSON.stringify(errorThrown));
console.error(
"Desio se sljedeci error: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
//moj kod ->end
return false;
})
});
This is jQuery code (obviously) - and here I am handling the form and its data (at least it's what I intended to do with it)
This is form inside of HTML:
<form class="paypal" action="payment.php" method="post" name="Form" id="msform">
<?php
$paket = $_GET['paket'];
if($paket == "standard")
{
?>
<input type="hidden" name="standard" value="standard">
<input type="hidden" name="item_number" value="1">
<?php
}
else if($paket == "bewerbungscheck")
{
?> <input type="hidden" name="bewerbungscheck" value="bewerbungscheck">
<input type="hidden" name="item_number" value="2">
<?php
}
else if($paket == "premium")
{
?> <input type="hidden" name="premium" value="premium">
<input type="hidden" name="item_number" value="3">
<?php
}
else if($paket == "lowbudget")
{
?>
<input type="hidden" name="lowbudget" value="lowbudget">
<input type="hidden" name="item_number" value="4">
<?php
}
else{
echo "There's no package with this name, please go back and choose again, wisely!";
?>
<button class="btn">
Go Back
</button>
<?php
exit();
}
?>
<!-- progressbar -->
<ul id="progressbar">
<li class="active" id="account"><strong>Personal Info</strong></li>
<li id="personal"><strong>Appointment</strong></li>
<li id="payment"><strong>Documents</strong></li>
<li id="confirm"><strong>Finish</strong></li>
</ul>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<!-- fieldsets -->
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-7">
<h2 class="fs-title">Personal Information:</h2>
</div>
<div class="col-5">
<h2 class="steps">Step 1 - 4</h2>
</div>
</div>
<!-- FOR PAYPAL -->
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="lc" value="DE" />
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHostedGuest" />
<input type="hidden" id="first_name" name="first_name" value="Customer's First Name" />
<input type="hidden" id="last_name" name="last_name" value="Customer's Last Name" />
<input type="hidden" id="payer_email" name="payer_email" value="customer#example.com" />
<!-- END OF SECTION FOR PAYPAL -->
<label class="fieldlabels">Email: *</label>
<input id="email" type="email" name="email" placeholder="example#meinegutebewerbung.de" />
<label class="fieldlabels">Name: *</label>
<input id="fn" type="text" name="uname" placeholder="Name" />
<label class="fieldlabels">Surname: *</label>
<input id="sur" type="text" name="usur" placeholder="Surname" />
<label class="fieldlabels">Expertised in: *</label>
<input type="text" name="expert" placeholder="ex.:Bachelor in Computer science" />
<label class="fieldlabels">Phone number: *</label>
<input type="tel" name="phone" placeholder="+000000000000000" />
<label class="fieldlabels">Birth Date: *</label>
<input type="date" name="date" placeholder="Date" />
</div>
<input type="button" name="next" onclick="populate()" class="next action-button"
value="Next" />
</fieldset>
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-7">
<h2 class="fs-title">Appointment details:</h2>
</div>
<div class="col-5">
<h2 class="steps">Step 2 - 4</h2>
</div>
</div>
<label class="fieldlabels">Select appointment date: *</label>
<input id="date_picker" type="date" name="date-res" />
<label class="fieldlabels">Which time span is the most fitting for you: *</label> <br>
<select name="suitabletime " id="suitable">
<option value="09-14">09:00 - 14:00</option>
<option value="14-20">14:00 - 20:00</option>
</select>
</div>
<input type="button" name="next" class="next action-button" value="Next" />
<input type="button" name="previous" class="previous action-button-previous"
value="Previous" />
</fieldset>
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-7">
<h2 class="fs-title">Upload documents:</h2>
</div>
<div class="col-5">
<h2 class="steps">Step 3 - 4</h2>
</div>
</div>
<label class="fieldlabels">Upload Your Photo:</label>
<input type="file" name="pic" accept="image/*">
<label class="fieldlabels">Upload CV (must be PDF):</label>
<input type="file" name="pic" accept=".pdf">
</div>
<input type="button" name="next" class="next action-button" value="Submit" />
<input type="button" name="previous" class="previous action-button-previous"
value="Previous" />
</fieldset>
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-7">
<h2 class="fs-title">Finish:</h2>
</div>
<div class="col-5">
<h2 class="steps">Step 4 - 4</h2>
</div>
</div>
<br><br>
<h2 class="purple-text text-center"><strong>SUCCESS !</strong></h2>
<br>
<div class="row justify-content-center">
<div class="col-3">
<img src="https://i.imgur.com/GwStPmg.png" class="fit-image">
</div>
</div>
<br><br>
<div class="row justify-content-center">
<div class="col-7 text-center">
<h5 class="purple-text text-center">You Have Successfully Signed Up</h5>
</div>
</div>
</div>
</fieldset>
</form>
How did I came to conclusion that this is not working?
I have actually inserted console.log() so I can get some output after the code is executed, but I am not getting anything. The second thing is that I also setted up PHP to do echo and again I am not getting anything.

Answer 1

As #kikon already stated inside of the comments, the problem was that I did not put the class="submit" as a attribute to the <button>, therefore element with the class of submit didn't exist, so the jQuery couldn't trigger the code inside of the function for AJAX.