submit form with multiple buttons using ajax

Question

I have a form which has multiple buttons for various actions. I am having a weird problem,the jquery onClick does not fire on click of button. Hence the problem. It might be a simple solution, but sorry I am a novice in front end stuff, and none of the questions on stack overflow seemed to be of any help. Below is the html:

<form id="create" action="/service/create" method="POST" style="margin: 0 0 0 0;">
<div class="col-sm-7 ">
//Skipping to buttons directly

<button type=submit class="btn btn-default" id="save">Save</button>
<button type="submit" class="btn btn-default" id="preview">Preview</button>
<button type="submit" class="btn btn-default" id="delete">Delete</button>
</div>  
</form>

Below is the jquery code

$(document).ready(function(){
    'use strict';
    $("#create").on('click', '#save', function (e) {

        alert('Save Message');
        e.preventDefault();

            $.ajax({
                url: ADD_ENDPOINT,
                data: {'form': $("create").serialize()},
                type: 'POST'
            });
    });

    $(document).ajaxError(function( event, jqxhr, settings, thrownError) {
        alert("ERROR: "+thrownError);   
    });

    function isErrorOccurred(data){
        if(data.indexOf("ERROR")>=0){
            alert(data);
            return true;
        }
        else{
            return false;
        }
    }
});

Many of you pointed out, jquery is not being loaded on my page, here is the list of all css/js included in my html, does this look fine or am I missing something

<link rel="stylesheet" href="../css/global-style.css">
<link rel="stylesheet" href="../css/create.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../bootstrap/css/bootstrap-fileupload.css" />
<link rel="stylesheet" href="../bootstrap/css/datepicker.min.css" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.4.css" type="text/css">
<script src="../jquery/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap-fileupload.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui-1.11.4.js" type="text/javascript"></script>
<script src="../jquery/plugin/jquery.cookie.js" type="text/javascript"></script>
<script src="../js/util.js"></script>
<script src="../js/create.js" type="text/javascript"></script>

Is ADD_ENDPOINT defined? Also it should be `$("#create").serialize()`. — Cave Johnson, May 20 '16 at 19:18
I'm not sure if you know this but your delete and preview buttons do not have a onclick handler function so they will just submit the form as normal. — Cave Johnson, May 20 '16 at 19:20
ADD_ENDPOINT is defined, also now that you pointed it I realize the mistake of ('#create').serialize() as well. Although my major issue is on click not working, whenever I click save button even the alert does not show — RohitS, May 20 '16 at 19:23
I have not yet reached to the point of adding handler for delete or preview,I am just struggling at the first step itself — RohitS, May 20 '16 at 19:24
http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms - you should be able to find more about jQuery on click and preventing form submissions — Don Cheadle, May 20 '16 at 19:25
I copied your code and it worked for me after I fixed the `$("#create").serialize()` part. Is jquery being included in your page? It should be included above your javascript. — Cave Johnson, May 20 '16 at 19:26
If the alert isn't even showing, that is telling me jquery is probably not defined. — Cave Johnson, May 20 '16 at 19:28
Check inspector (right click on page and click Inspect) and reload and click buttons and see if there are any errors in the console. — Cave Johnson, May 20 '16 at 19:41
I did that already, there is no error in console, jquery or otherwise — RohitS, May 20 '16 at 19:41
This might sound dumb but did you by chance click "prevent this page from creating additional dialogs" at any point? This will cause alerts to not show up. Use the console, not alerts. Try console.log("ANYTHING YOU WANT"); and see if that comes through. If you look at the fiddles below your code works fine — Zach, May 20 '16 at 19:44

Zach · Answer 1 · 2016-05-20T19:38:48.330

0

The click is being fired but the form is just taking over its normal action and going to the page defined in its "action". Remove the "type=submit" from the buttons and then you can handle the submission via jquery click on the buttons using $("#create").serialize(); to get the data.

EDIT

Scratch that! Your code is fine, see this fiddle. Its likely a jquery error or ADD_ENDPOINT is not defined anywhere

https://jsfiddle.net/ay6494zv/

$(document).ready(function(){
    'use strict';
    $("#create").on('click', '#save', function (e) {

        alert('Save Message');
        e.preventDefault();

            $.ajax({
                url: ADD_ENDPOINT,
                data: {'form': $("create").serialize()},
                type: 'POST'
            });
});
$( document ).ajaxError(function( event, jqxhr, settings, thrownError ) {

        alert("ERROR: "+thrownError);   
    });

    function isErrorOccurred(data){
        if(data.indexOf("ERROR")>=0){
            alert(data);
            return true;
        }
        else{
            return false;
        }
    }

});

edited May 20 '16 at 19:38

answered May 20 '16 at 19:25

Zach

1,964
2
17
28

But the OP is using e.preventDefault() so it shouldn't submit the form. I think jquery is not being defined. – Cave Johnson May 20 '16 at 19:35
Yeah, I just was going to edit this. I agree, jQuery not defined. – Zach May 20 '16 at 19:36
or ADD_ENDPOINT is not defined anywhere – Zach May 20 '16 at 19:39
if jquery was not defined, I would see an error in browser console right? which I don't, I have included jquery in my html. Also, ADD_ENDPOINT is defined – RohitS May 20 '16 at 19:45
If you don't have any errors look at my recent comment on the original question and try to log to the console instead of an alert. – Zach May 20 '16 at 19:47

score 0 · Answer 2 · answered May 20 '16 at 19:26

0

type="button" instead of type="submit" may be all you need to fix this, with your existing jQuery "click" handler.

answered May 20 '16 at 19:26

Don Cheadle

5,224
5
39
54

Shaun · Answer 3 · 2016-05-20T19:38:11.657

0

EDIT: It looks like you had the closing tags after all - this JSFiddle has your exact code and it is working properly: https://jsfiddle.net/zezpeyxk/1/. I think you may just not be including jQuery onto your page. I would pull up the web developer console and check for any errors such as $ is not defined.

The only thing wrong is that you have a small omission error in your code - add in some closing tags to your .on('click') function and you should be good to go:

$("#create").on('click', '#save', function (e) {
    alert('Save Message');
    e.preventDefault();

    $.ajax({
        url: ADD_ENDPOINT,
        data: {'form': $("create").serialize()},
        type: 'POST'
    });
});

Check it out here: https://jsfiddle.net/zezpeyxk/

edited May 20 '16 at 19:38

answered May 20 '16 at 19:27

Shaun

1,220
10
24

It looks like it but this isn't true, it is just poorly formatted – Zach May 20 '16 at 19:32
@Zach - ah so you are correct. Must just have jQuery not defined then since his exact code seems to work in jsfiddle – Shaun May 20 '16 at 19:36

submit form with multiple buttons using ajax

3 Answers3