Hi guys and girls! Please end my suffering!!!
I am trying to make a channel form submit using AJAX (i.e. I want it to submit the form without anything “loading”, the page will remain unchanged) but if the ‘json=”yes”’ parameter is included, it returns a json report and if removed it loads the return destination.
Json report: ‘{"success":1,"errors":[],"field_errors":[],"entry_id":665,"url_title":"swivl","channel_id":20}’
I am trying to use the Channel Form Examples in the documents pages (https://docs.expressionengine.com/latest/channels/channel-form/examples.html#ajax-driven-entry-form) and have adapted it as embedded below. It is updating the channel entry, so the form is working, but it should not be loading either the json report or the return page. I have spent days trying everything I can think of and I cannot get it to work. What am I doing wrong?
”’ <html> <head> {exp:jquery:script_tag}
<!--using the jQuery Form plugin http://jquery.malsup.com/form/-->
[removed][removed] [removed] $(document).ready(function(){ // prepare all forms for ajax submission $(‘form’).ajaxForm({ target: ‘#myResultsDiv’; }); // bind submit handler to form $(‘form’).on(‘submit’, function(e) { e.preventDefault(); // prevent native submit $(this).ajaxSubmit({ target: ‘#myResultsDiv’; }) }); }); [removed] </head> <body>
{exp:channel:form channel="clientlog" return="test-area/ajax-form-template" entry_id="665" json="yes" id="form"}
<label for="title">Title</label>
<input type="text" name="title" id="title" value="{title}" size="50" maxlength="100" >
<label for="url_title">URL Title</label>
<input type="text" name="url_title" id="url_title" value="{url_title}" maxlength="75" size="50">
<label for="entry_date">Date</label>
<input type="text" name="entry_date" id="entry_date" value="{entry_date}" maxlength="23" size="25">
<input type="submit" name="submit" value="Submit">
{/exp:channel:form}
<div id="myResultsDiv">myResultsDiv</div>
</body> </html> ”’
I know that this is only and example, but it would be really helpful to have some instructions on how make Channel Forms work with AJAX form submission.
Regards Gabe
Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.