How to cacth symphonys form success response via ajax?
This is an open discussion with 5 replies, filed under General.
Search
-
-
- nickdunn
- 01 May 11, 8:12 am
- Comment #2
To what event URL are you posting? Is the event attached to the relevant page? Your AJAX request is expecting an XML response, so is the page's type set to XML?
-
-
- Lewis
- 01 May 11, 10:31 am
- Comment #3
Your ids don't seem to match either, or I'm missing something.
-
-
- duhpc
- 19 May 11, 6:35 am
- Comment #4
I´m still having a problem with this, so far i think the problem is that the form does not have a action atribute set, so the jquery plugin does not work, here is how i´m doing it:
Form:
<h2 class="h2_dark">Entre em contato</h2> <p class="p_dark">Tire suas dúvidas, elogie ou critique, não tem problema, o importante é nos dizer o que pensa.</p> <div id="form_conteiner"> <form method="post" action="" enctype="multipart/form-data" id="form_contact"> <input name="MAX_FILE_SIZE" type="hidden" value="5242880" /> <div class="form_input"> <label>Nome *:</label> <input name="fields[nome]" type="text" class="input" /> </div> <div class="form_input"> <label>Email</label> <input name="fields[email]" type="text" class="input" /> </div> <div class="form_input"> <label>Empresa</label> <input name="fields[empresa]" type="text" class="input" /> </div> <div class="form_input"> <label>Telefone</label> <input name="fields[telefone]" type="text" class="input" /> </div> <div class="form_input"> <label>Menssagem</label> <textarea name="fields[menssagem]" rows="15" cols="50" class="textarea" ></textarea> </div> <div class="error_div"><ol></ol></div> <br clear="all"/> <div class="form_input"> <input name="action[form-contato]" type="submit" value="" class="button" /> </div> <input name="redirect" type="hidden" value="http://layoutz.com.br/pagina/sucesso/" /> </form> </div> <div id="form_waiting"></div> <div id="form_response"></div>
Javascript:
$('#form_contact').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#form_response',
resetForm: true, // override for form's 'action' attribute
beforeSerialize: function() {
$('#form_conteiner').html('<div id="form_wait"><span>Enviando seu email, por favor aguarde um momento!!!</span><br/><br/><img class="loading_gif" src="imagens/loading.gif" width="200"/></div>');
} ,
success: function() {
$('#form_conteiner').hide('fast');
$('#form_response').show('slow');
setTimeout(function(){
window.location.reload(true);
}, 6000);
}
});
The jquery plugin i´m using is this:
http://jquery.malsup.com/form/
What seems to happen is that when i submit the form, the page still reloads vary fast for just a split second, and nothing is returned end no emails are sent, i must mation that i´m using "Email Template Manager" with my forms.
Can anybody help?
-
-
- Fazal
- 19 May 11, 8:36 am
- Comment #5
see what happens if you remove enctype="multipart/form-data"
-
-
- scottkf
- 19 May 11, 8:43 pm
- Comment #6
What seems to happen is that when i submit the form, the page still reloads vary fast for just a split second, and nothing is returned end no emails are sent, i must mation that i´m using "Email Template Manager" with my forms.
This happens when there's an error in your javascript OR you're not returning false for the submit function. Since you're using a plugin, and many people use it, it's probably not the plugin.
I can't see any obvious errors in your javascript, but you should use the Inspect option in the browser. Sometimes errors don't show up until you click submit (at which point the error is probably caused by an invalid json response).
To get around this, do this:
$('#form_contact').submit(function() {
return false;
}
This should still let your ajax request execute without actually POST'ing to the current page. If no action is specified on a form, it will POST to the current page, return false should take care of it.
Create an account or sign in to comment.
In my website i use ajax to fech pages, and to control de contact form submit, i´m using a jquery plugin for the form submition, but can´t get the success respose to work.
the plugin is this: http://jquery.malsup.com/form/
And my code looks like this:
// prepare the form when the DOM is ready // bind form using ajaxForm $('#form1').ajaxForm({ dataType: 'xml', // target identifies the element(s) to update with the server response target: '#form_response', resetForm: true, beforeSerialize: function() { $('#contact_form').html('<div id="form_wait"><span>Enviando seu email, por favor aguarde um momento!!!</span><br/><br/><img class="loading_gif" src="imagens/ajax-loader.gif" width="200"/></div>'); } , // success identifies the function to invoke when the server response // has been received; here we apply a fade-in effect to the new content success: processXml success: function() { $('#contact_form').hide('fast'); $('#form_response').show('slow'); setTimeout(function(){ window.location.reload(true); }, 6000); } });and my form code:
<form id="form1" method="post" action="" enctype="multipart/form-data"> <div class="form_div"> <label>Nome</label> <input class="input" name="fields[nome]" type="text" rel="validate(required)"/> </div> <div class="form_div"> <label>Email</label> <input class="input" name="fields[email]" type="text" rel="validate(email)" /> </div> <div class="form_div"> <label>Telefone</label> <input class="input" name="fields[telefone]" type="text" rel="validate(required)" /> </div> <div class="form_div"> <label>Mensagem</label> <textarea class="textarea" name="fields[mensagem]" rows="15" cols="50" rel="validate(minlength(50))"> </textarea> </div> <div class="error_div"><ol></ol></div> <input name="send-email[sender-email]" value="fields[email]" type="hidden" /> <input name="send-email[sender-name]" value="fields[nome]" type="hidden" /> <input name="etm[contato-confirm][reply-to-email]" value="fields[email]" type="hidden" /> <input name="etm[][reply-to-name]" value="fields[nome]" type="hidden" /> <input name="send-email[subject]" value="Novo contato" type="hidden" /> <input name="send-email[body]" value="fields[nome,email,telefone,mensagem]" type="hidden" /> <input name="etm[contato][recipient]" value="admin" type="hidden" /> <div class="form_div"> <input class="button" name="action[contato]" type="submit" value="" /> </div> </form>Does anybody have a idea about this?