clearing form fields after submitting via ajax not working

Question

I am trying to clear form fields after submitting via ajax but it does not work. Someone please help check my codes and give me some good suggestions. Below is my code:

jQuery(document).on('click', '.um-message-send:not(.disabled)',function(e){

    e.preventDefault();

    jQuery('.um-message-send:visible').addClass('disabled');

    var message_to = jQuery('.um-message-body:visible').attr('data-message_to');

    var content = jQuery('.um-message-textarea textarea:visible').val();



    jQuery.ajax({

        url: um_scripts.ajaxurl,

        type: 'post',

        dataType: 'json',

        data: { action: 'um_messaging_send', message_to: message_to, content: content },



        success: function(data){



            jQuery('.um-message-textarea textarea:visible').val('');

            jQuery('.um-message-body:visible').find('.um-message-ajax:visible').html( data.messages );



            if ( data.limit_hit ) {

                jQuery('.um-message-footer:visible').html( jQuery('.um-message-footer:visible').attr('data-limit_hit') );

            }



            jQuery('.um-popup-autogrow:visible').mCustomScrollbar('update').mCustomScrollbar("scrollTo", "bottom",{ scrollInertia:0});



        }

    });



    return false;

});

Html

<div class="um-message-textarea"> 

    <?php echo $this->emoji(); ?>

    <textarea name="um_message_text" id="um_message_text" data-maxchar="<?php echo $limit; ?>" placeholder="<?php _e('Type your message...','um-messaging'); ?>"></textarea>

</div>
<div class="um-message-buttons">

    <span class="um-message-limit"><?php echo $limit; ?></span>

    <a href="#" class="um-message-send disabled"><i class="um-faicon-envelope-o"></i><?php _e('Send message','um-messaging'); ?></a>

</div>

You're trying to clear the textarea correct? Just use: `$('#um_message_text').empty();` — KyleS, Jun 22 '17 at 14:37
I just tried adding it after the success function and it did not work. Its like nothing inside the success function works. What could be the issue — Landry, Jun 22 '17 at 14:42
I would suggest trying to figure out if your success function is actually working. Try using console.log('...'); or something similar to see if you are getting any output from that function. The code I gave you above will clear that textarea with the given ID. EDIT: Also make sure your ajax function is actually entering success. It could be failing everytime. — KyleS, Jun 22 '17 at 14:45
Am not good at javascript please where do i enter the cosole.log and what parameters do i put inside — Landry, Jun 22 '17 at 14:55
I would put it at the very beginning of the success call and you can put any text inside. It will print to your browser's console if it is executed. However, I would recommend you learn more about how ajax and javascript work before diving deep into questions such as this. If this is more complicated of an issue than just syntax and such, you will have a very difficult time solving this problem. — KyleS, Jun 22 '17 at 14:59
@Kyle can i contact you to fix this and i get you paid a few bugs please — Landry, Jun 22 '17 at 16:06
Interesting. Not sure why success wouldn't work here. I use it all the time for my ajax calls. Seems specific to your server's configuration. Also worth noting this previous question: https://stackoverflow.com/questions/5240876/difference-between-success-and-complete — KyleS, Jun 22 '17 at 17:08

score 0 · Accepted Answer · edited Jun 22 '17 at 17:08

0

The answer was simply to replace success with complete as such...

success: function(data) {
  // [...]

=>

complete: function(data) {
  // [...]

edited Jun 22 '17 at 17:08

scniro

16,844
8
62
106

answered Jun 22 '17 at 17:06

Landry

137
11

clearing form fields after submitting via ajax not working

1 Answers1