C5-8.2.1: Ajax form
Permalink
Hello,
I took that code as a basis for my form:https://webdesign.tutsplus.com/tutorials/building-a-bootstrap-contac... , (my 3 files attached), but the form doesn't work even in such simple form. The "success" message doesn't show up.
Am I missing anything?
I took that code as a basis for my form:https://webdesign.tutsplus.com/tutorials/building-a-bootstrap-contac... , (my 3 files attached), but the form doesn't work even in such simple form. The "success" message doesn't show up.
Am I missing anything?
They're all in the same block's folder.
The thing is, if I use the blocks controller, it refreshes the page after submit, but otherwise it all works fine. I don't want the page to be refreshed. I want the form to be submitted in a lightbox and to keep it open to receive either success or error message in the same lightbox.
The developer console shows: "POSThttp://mysite.com/xcontroller.php... 404 (Not Found)"! Hmm, why? It's there in the same folder.
The thing is, if I use the blocks controller, it refreshes the page after submit, but otherwise it all works fine. I don't want the page to be refreshed. I want the form to be submitted in a lightbox and to keep it open to receive either success or error message in the same lightbox.
The developer console shows: "POSThttp://mysite.com/xcontroller.php... 404 (Not Found)"! Hmm, why? It's there in the same folder.
Ah! Just noticed the path to the controller "POSThttp://mysite.com/xcontroller.php... 404 (Not Found)" - it's taking it from the root, not from the block! I'll have to fix that somehow.
So how do I use PHP in a .js file to get my block's URL? Or I just write it directly, e.g.http://mysite.com/application/blocks/contact_form/xcontroller.php...
So how do I use PHP in a .js file to get my block's URL? Or I just write it directly, e.g.http://mysite.com/application/blocks/contact_form/xcontroller.php...
Check out this article on ajax in a block view template -https://documentation.concrete5.org/developers/working-with-blocks/c...
Thanks a lot for the link, looks promising.
Does it mean I have to use a link <a> with a JS onclick="form.submit();" instead of a 'submit' button? And the form couldn't be submitted without JS?
Or can I pass the $view->action() through the button?
Does it mean I have to use a link <a> with a JS onclick="form.submit();" instead of a 'submit' button? And the form couldn't be submitted without JS?
Or can I pass the $view->action() through the button?
No, that part should be fine. It's more showing you how to setup the controller and the form action.
It works somehow but something's not quite right. Please check the block attached.
What is does is if the Name is empty, it returns an 'error'. And then stops responding. If I refresh the page and the Name is > 2 characters long, it returns a 'success'. And then it stops again.
So, the logic in the controller works. But something is missing to make the form respond after every click on the link.
What else puzzles me is that alert($(this).attr('href')) shows 'Undefined'.
And if I replace the link for a button:
it doesn't work at all.
What is does is if the Name is empty, it returns an 'error'. And then stops responding. If I refresh the page and the Name is > 2 characters long, it returns a 'success'. And then it stops again.
So, the logic in the controller works. But something is missing to make the form respond after every click on the link.
What else puzzles me is that alert($(this).attr('href')) shows 'Undefined'.
And if I replace the link for a button:
<button type="submit" id="form-submit" class="btn" href="<?php echo $view->action('like', Core::make('token')->generate('contact_form'))?>" data-action="block-contact-form">Submit</button>
it doesn't work at all.
As another thought, does the JS have to be in the view.php or it can be in a view.js?
Ok, I got it to work better, but it still misbehaves a little.
Here's the controller bit:
Here's the view.js bit:
Now, the problems:
1. The form shows correct response values but goes to another page. For some reasons they don't display on the form itself.
2. If I use another language, the output is a long string of \u*** characters. I tried
but it doesn't make any difference.
Here's the controller bit:
public function action_like($token = false, $bID = false) { if ($this->bID != $bID) { return false; } if (Core::make('token')->validate('contact_form', $token)) { $txt = Core::make('helper/text'); $this->name = $txt->sanitize($_POST['name']); if ((mb_strlen($this->name, 'UTF-8') < 2) || (mb_strlen($this->name, 'UTF-8') > 60)) { $ret = "Name error"; } else { $ret = "success"; } }
Viewing 15 lines of 18 lines. View entire code block.
Here's the view.js bit:
$(document).ready(function(e) { $("#contact_form").submit(function(event){ event.preventDefault(); submitForm(); }); $('.button').on('click', function() { submitForm(); }); }); function submitForm(){ var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); $.ajax({ dataType: "json",
Viewing 15 lines of 32 lines. View entire code block.
Now, the problems:
1. The form shows correct response values but goes to another page. For some reasons they don't display on the form itself.
2. If I use another language, the output is a long string of \u*** characters. I tried
echo Core::make('helper/json')->encode($this->form_errors, JSON_UNESCAPED_UNICODE);
but it doesn't make any difference.
What do you see in your developer console network tab when you submit the form?