We use cookies to improve your experience. No personal information is gathered and we don't serve ads. Cookies Policy.

ExpressionEngine Logo ExpressionEngine
Features Pricing Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University
Log In or Sign Up
Log In Sign Up
ExpressionEngine Logo
Features Pro new Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University Blog
  • Home
  • Forums

AJAX Form Submit either loading json report or return destination

Development and Programming

GabbaTheHutt's avatar
GabbaTheHutt
73 posts
4 years ago
GabbaTheHutt's avatar GabbaTheHutt

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

       

Reply

Sign In To Reply

ExpressionEngine Home Features Pro Contact Version Support
Learn Docs University Forums
Resources Support Add-Ons Partners Blog
Privacy Terms Trademark Use License

Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.