Hi there!
Having difficulties to run form with an AJAX.
I'm missing something...
I've Modular Page, called contact
In Frontmatter I've this code:
YAML
title: 'Contact Us'
body_classes: 'modular header-lite fullwidth'
menu: Contacts
onpage_menu: false
cache_enable: false
form:
name: my-nice-form
action: /contact
template: form-messages
refresh_prevention: true
fields:
-
name: name
id: name
label: Name
classes: 'form-control form-control-lg'
placeholder: 'Enter your name'
autocomplete: 'on'
type: text
validate:
required: true
-
name: email
id: email
classes: 'form-control form-control-lg'
label: Email
placeholder: 'Enter your email address'
type: email
validate:
rule: email
required: true
-
name: message
label: Message
classes: 'form-control form-control-lg'
size: long
placeholder: 'Enter your message'
type: textarea
validate:
required: true
buttons:
-
type: submit
value: Submit
classes: 'btn btn-primary btn-block'
process:
-
email:
from: '{{ config.plugins.email.from }}'
to:
- '{{ config.plugins.email.from }}'
- '{{ form.value.email }}'
subject: '[Feedback] {{ form.value.name|e }}'
body: '{% include ''forms/data.html.twig'' %}'
-
save:
fileprefix: feedback-
dateformat: Ymd-His-u
extension: txt
body: '{% include ''forms/data.txt.twig'' %}'
-
message: 'Thank you for your feedback!'
-
display: thankyou
content:
items: '@self.modular'
order:
by: default
dir: asc
And in the editor:
<div id="form-result"></div>
JS
<script>
$(document).ready(function(){
var form = $('#my-nice-form');
form.submit(function(e) {
// prevent form submission
e.preventDefault();
// submit the form via Ajax
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
dataType: 'html',
data: form.serialize(),
success: function(result) {
// Inject the result in the HTML
$('#form-result').html(result);
}
});
});
});
</script>
So, the whole modular.md have mentioned code from above.
Once I submit form without AJAX - the thank you message appears, but with AJAX - I see empty HTML markup with plain email link.
Thanks in advance!
