Submit a form without reloading a page with FormIt

67 Posts

fredela Reply #1, 9 years, 11 months ago

My form is placed in a sliding-in div.
I need the div to stay visible after clicking submit button.
Validations and success message should be displayed without reloading the page.

Here is my snippet call:

[[FormIt?
    hooks=`email`
    &emailTpl=`emailTpl`
    &emailFrom=`[[+email]]`
    &emailTo=`[[++email_contact]]`
    &emailSubject=`New Contact`
    &emailUseFieldForSubject=`1`
    &store=`1`
    &validate=`name:required,
               email:email:required`
]]

I read this
https://forums.modx.com/thread/72468/ajax-submit-form-without-refresh-in-modx---is-it-possible

and this
https://forums.modx.com/thread/83358/formit-and-ajax-submit-message-and-no-page-reload

but still can not figure out a solution.

Does anyone can help with a kind of tutorial?
It should be really appreciated.
Thanks.

67 Posts

fredela Reply #2, 9 years, 11 months ago

To make it more clear.

I am following this thread (for MODX):
https://forums.modx.com/thread/72468/ajax-submit-form-without-refresh-in-modx---is-it-possible

And this tutorial (for jQuery/AJAX):
http://tecadmin.net/submit-form-without-page-refresh-php-jquery

So i created the snippet formSubmitNoReload:

<?php
  echo $_POST['name'] ."<br />";
  echo $_POST['email'] ."<br />";
  echo "==============================<br />";
  echo "All Data Submitted Successfully!";

And a resource (empty template) with just the snippet call:

[[!formSubmitNoReload]]

Here is my form:

<form role="form" id="form-contact" method="post">
        <input type="text" id="name" name="name">
        <input type="email" id="email" name="email">
        <button type="submit" id="submitFormData" onclick="SubmitFormData();" value="Submit">Send</button>
</form>

And this is my jQuery Code:

function SubmitFormData() {
    var name = $("#name").val();
    var email = $("#email").val();
    $.post("http://www.mywebsite.com/index.php?id=5", { name: name, email: email },
    function(data) {
   $('#results').html(data);
   $('#form-contact')[0].reset();
    });
}

It does not work.
Can anyone please tell where am i wrong?

67 Posts

fredela Reply #3, 9 years, 11 months ago

Any suggestion?
All related threads to date are almost useless.
It could help a lot of people out there.

24,544 Posts

BobRay Reply #4, 9 years, 11 months ago

Try doing something like this:

var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
        };
$.post("http://www.mywebsite.com/index.php?id=5", function(formData) {
        
        // place success code here

    })
        .fail(function(data) {
            // place error code here
        });

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

67 Posts

fredela Reply #5, 9 years, 11 months ago

Thank you Bruno.

Tried with:

function SubmitFormData() {
	
	var formData = {
		'name'	: $('input[name=name]').val(),
		'email'	: $('input[name=email]').val(),
	};
	
	$.post("http://www.mywebsite.com/index.php?id=5", function(formData) {
		$( "#results" ).text( "SUCCESS" );
		// place success code here
	})
	
	.fail(function(data) {
		$( "#results" ).text( "FAILURE" );
		// place error code here
	});

};

But still not working.

Also, i am wondering about what must be done to make this work together with FormIt.

[[FormIt?
    hooks=`email`
    &emailTpl=`emailTpl`
    &emailFrom=`[[+email]]`
    &emailTo=`[[++email_contact]]`
    &emailSubject=`New Subscription`
    &validationErrorMessage=`Please correct the following errors:<br />[[+errors]]<br /><br />`
    &validate=`name:required,
               email:email:required`
]]

Not sure this is the right way.
Unfortunately FormIt has not hooks dedicated to this "do not reload" issue.

67 Posts

fredela Reply #6, 9 years, 11 months ago

Actually, FormIt works pretty well.
The only limit here is that i need the page not to be reloaded after submitting the form.
I am wondering if there is a way to obtain this without renouncing to some good functionalities offered by FormIt (email hook and validation in particular).

For example, i do not need the success/failure message being handled by a javascript.
FormIt fires a snippet as a custom hook (Bruno, i followed another tip of yours i found in the forum).

Basically, i am just looking for something producing the same effect that <button onclick="return false;">Submit</button>, but through AJAX.

Does it make any sense?

☆ A M B ☆
721 Posts

rx2 Reply #7, 9 years, 11 months ago

Maybe try out AjaxForm: https://modx.com/extras/package/ajaxform

67 Posts

fredela Reply #8, 9 years, 11 months ago

Thanks.
Just installed, AJAX actually works.
Form sends emails without reloading.
But no validation nor success messages.
Documentation is very minimal.
Have you tried it?

Here is the snippet:

            [[!AjaxForm?
                &form=`contactFormAJAX`
                &snippet=`FormIt`
                &hooks=`email,contactFormSuccess`
                &emailTpl=`emailTpl`
                &emailFrom=`[[+email]]`
                &emailTo=`[[++email_contact]]`
                &emailSubject=`New Contact`
                &validationErrorMessage=`Please correct the following errors:<br />[[+errors]]<br /><br />`
                &vTextRequired=`Required`
                &validate=`name:required,
                           email:email:required`
            ]]

And the custom hook:

<?php
$modx->setPlaceholder('fi.custom.success','Hi, thank you.');
return true;

Any suggestion?

67 Posts

fredela Reply #9, 9 years, 10 months ago

Well AjaxForm partially works but with some issues.
It keeps returning a jquery.jgrowl.min.js error "jquery.jgrowl.min.js:1 Uncaught TypeError: e(...).size is not a function".
It is not related to script order on the html page, jGrowl comes after jQuery.

67 Posts

fredela Reply #10, 9 years, 10 months ago

No clue? Anyone?
If it works it's great!
So many MODX users are looking for an easy Form/AJAX solution.

A recap:

[[!AjaxForm?
    &snippet=`FormIt`
    &form=`tplAjaxForm`
    &hooks=`email`
    &emailSubject=`New Contact`
    &emailFrom=`[[+email]]`
    &emailTo=`[[++email_contact]]`
    &emailTpl=`emailTpl`
    &validate=`name:required,email:email:required`
    &validationErrorMessage=`Please correct the following errors:[[+errors]]`
    &successMessage=`Cool, thanks`
]]

And:

<form id="contact-form" action="" method="post" class="ajax_form af_example">
    
    <fieldset class="form-group"><!-- Name -->
        <label for="name" class="contact-label">
            [[%af_label_name]] [[!+fi.error.name]]
        </label>
        <input type="text" id="af_name" name="name" class="form-control" placeholder=""  value="[[!+fi.name]]" />
    </fieldset>

    <fieldset class="form-group"><!-- Email -->
        <label for="email" class="contact-label">
            [[%af_label_email]] [[!+fi.error.email]]
        </label>
        <input type="email" id="af_email" name="email" class="form-control" placeholder="" value="[[!+fi.email]]" />
    </fieldset>

    <div class="form-group"> 
        <div class="form-group-margin">
            <input type="submit" class="btn-submit" value="[[%af_submit]]" />
        </div>
    </div>

    [[+fi.success:is=`1`:then=`
    <div class="alert alert-success">[[+fi.successMessage]]</div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
    `]]
    
</form>

According to https://docs.modx.pro/components/ajaxform (it's in russian, googletranslate) it's very easy.
Keeps returning this error to the browser:

Uncaught TypeError: e(...).size is not a functione.jGrowl
@ jquery.jgrowl.min.js:1AjaxForm.Message.success
@ default.js:101$.ajaxSubmit.success
@ default.js:64t.success
@ jquery.form.min.js:7i
@ jquery.min.js:2j.fireWith
@ jquery.min.js:2A
@ jquery.min.js:4(anonymous function)
@ jquery.min.js:4