javascript not posting form with ajax

Question

I have a javascript to post a form using ajax but it keeps giving me an error. It is triggered from a bootstrap button but does not seem to do anything?

The button is :

<button id='btn-finish' name ='btn-finish'  type='button' class='btn btn-primary'>Finish</button>

and the js is :-

$(document).ready(function() {
   $('#btn-finish').on('click', function() {

        // Add text 'loading...' right after clicking on the submit button. 
        $('.output_message').text('Processing...'); 

        var form = $(this);
        $.ajax({
            url: form.attr('process-form3.php'),
            method: form.attr('method'),
            data: form.serialize(),
            success: function(result){
                if (result == 'success'){
                    $('.output_message').text('Message Sent!');  
                } else {
                    $('.output_message').text('Error Sending email!');
                    // $('#5box').hide();
                }
            }
        });

        // Prevents default submission of the form after clicking on the submit button. 
        return false;   
    });
});

`form` as in `$(this)` is a reference to the button `btn-finish` therefore has no method attribute and 'process-form3.php` isn't an attribute so form.attr('process-form3.php') won't do anything — Mark Walters, Mar 15 '17 at 08:46
`var form = $(this);` is button in your context not form. Also I am only guessing `url: form.attr('process-form3.php'),` should be `url: form.attr('action'),` — Peter, Mar 15 '17 at 08:46
Sorry dont get any error as such it just doesnt do anything? How can I fix it? — Jules, Mar 15 '17 at 08:47
Check this link http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — David Jaw Hpan, Mar 15 '17 at 08:49
You need to hook to the `submit` event of the `form`, not the `click` of the `button` - as I showed you in my answer on your previous question: http://stackoverflow.com/a/42782420/519413 — Rory McCrossan, Mar 15 '17 at 08:54
Forms get submitted, Buttons do not. Problem is you are misunderstanding what your code does and creating issues for you. — Rikin, Mar 15 '17 at 15:07
What you gave me worked Rory for old problem, is there any way I can just redirect after? — Jules, Mar 21 '17 at 10:52

score 0 · Answer 1 · answered Mar 15 '17 at 10:41

You must have to get Form id not a button Id, you have written code for getting button id instead of form object.

code should be like for example:

<form id='test_form' action='path' method='post'>
<button id='btn-finish' name ='btn-finish'  type='button' class='btn btn-primary'>Finish</button>
</form>

your jquery code :

$(document).ready(function() { $('#btn-finish').on('click', function() {

    // Add text 'loading...' right after clicking on the submit button. 
    $('.output_message').text('Processing...'); 

    var form = $('#test_form');
    $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: form.serialize(),
        success: function(result){
            if (result == 'success'){
                $('.output_message').text('Message Sent!');  
            } else {
                $('.output_message').text('Error Sending email!');
                // $('#5box').hide();
            }
        }
    });

    // Prevents default submission of the form after clicking on the submit button. 
    return false;   
});

});

javascript not posting form with ajax

1 Answers1