I am a Kirby newbie and don’t have much experience in neither PHP nor JS. However, I am building a onepage site using the cookbook recipe and it’s all fine so far. The page does have a contact form and I can validate the user input fine with PHP using the example from Github.
Since this is a onepager I want to give immediate feedback without leaving the form section so I am trying to enhance this using ajax. There is a nice recipe (that I vaguely understand) but I am running into problems to adapt it for my page.
I will try to explain my problem (please excuse me if it is a little clumsy, as mentioned I not very firm with PHP/JS). The server side validation works fine but I can’t get the ajax submission to work. The script from the recipe picks up the form url and the related JSON template (which is supposed to echo the user input) via
var url = form.attr(‘action’) + ‘.json’;
to use this in the ajax call. In my case this doesn’t yield anything useful, just “rootdirctory.json” and thus a 404 in the ajax call. So I tried to hardcode the URL of a JSON file which works for the call but returns “TypeError: response is null”. So I guess that the JSON template does not return anything because it is not in the place where it is supposed to be?
I hope some of you coding wizards out there can help me to sort this out.
$('#contactform').on('submit', function(e) {
e.preventDefault();
// clear alerts
$('.alert').text('');
// define some variables
var form = $(this);
console.log(form);
var url = form.attr('action') + '.json';
//var url = 'index.json.php';
//var url = $('#contactform').prop('action') + '.json';
console.log(url);
var data = form.serialize();
$.ajax({
type: 'POST',
dataType: 'json',
url: url,
data: data,
// if the ajax call is successful ...
success: function(response) {
// in case form validation has errors
if(response.errors) { //<--- that's where it fails
console.log("response errors");
// loop through errors array
$.each(response.errors, function(key, message) {
// find the alert box for each input field
var element = form.find('#' + key).next();
// add the error message to the field
element.text(message);
});
}
// if registration was successful
if(response.success) {
element = $('.message');
// show success message and hide form
element.text(response.success);
form.hide();
}
// if registration failed
if(response.error) {
element = $('.message');
// show error message
element.text(response.error);
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
And the controller and the validateForm() function are also all in place? If you can’t get it to work, you can send me a link to a zipped version of your project and I can look into it tonight.
The controller is there (home.php in controllers), and the validateForm.php also (in Plugins). I changed the controller code to the original from the recipe and now I get 200 ok and:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
So it seems it is something wrong with the JSON that comes back. What structure is it supposed to have? Sorry, I don’t fully understand the way the these bits work together.
If I can’t get it to work I will send you the code.
