How to post a form using AJAX?

I need to submit the registration form using AJAX and retrieve the response using AJAX. I am looking through documentation and through comments in discussion and still can't understand. It seems that everybody somehow know how to do it and they only have minor questions. I looked for plugins that do similar things but the only one that I found is about elgg 1.7

Is there any tutorial or code example how to create forms views to be retrieved with AJAX, post them with AJAX and return a json response instead of forward(REFERER);

  • Thank you guys. You are great :D

  • Hello, I have similar question but it is not on register page. this is on Elgg 1.8

    I'm trying to have Announcements plugin (https://community.elgg.org/plugins/1579372) submit form via ajax. Just to note the form is displayed in fancybox in case that makes difference. I tried putting ajax code in plugin js file but it would not work so I moved the script code in the form itself.

    I have the form submitting via ajax using second suggestion by @ihayredinov but problem is that when submitted the list is not updated fully but only some data (missing title, etc.)

    Maybe it's because I should use "success: function(json) {" instead of "success: function(data) {" but not sure how to implement that. Tried adding some code to action file but did not work.

    Here is javascript code from the form:

    $(document).ready(function() {

    $('.elgg-form-announcements-save').live('submit', function(e) {

       //e.preventDefault();
    
       var $form = $(this);
    
       elgg.action($form.attr('action'), {
    
         data: $form.serialize(),
    
        success: function(data) {
    
          // check the status and do stuff
        //e.preventDefault();
          var river = $('ul.announcements_list');
              if (river.length < 1) {
              river.append(data.output);          } else {                
              $(data.output).find('li:first').hide().prependTo(river).slideDown(500);
          };
                      $.fancybox.close();
    
        }
    
       });
    
       return false; // prevent the form from submitting
     e.preventDefault();
    
    }); 
    });

    Here is the action file code I added:

    if ($announcement->save()) {
    elgg_clear_sticky_form('announcement');

    system_message(elgg_echo('announcement:save:success'));

    // added code

    if (elgg_is_xhr()) {
    $options = array( 'type' => 'object', 'subtype' => 'announcements', 'full_view' => false, 'pagination' => false, 'limit' => 1 );
    $newannouncement = elgg_list_entities($options); echo json_encode($newannouncement); }
    } else {

    Can someone suggest the best way to achieve this?

    Thank you so much.

  • Can someone suggest the best way to achieve this?

    Thank you so much.

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking