jQuery change form action based on button click

Question

I am trying to change the form action in my jade file based on the button click, "Save" and "Delete".

form(method='post', id='updateForm')
        label Course Number
        input(type='text', name='courseNum', value= courses[0].courseNum)
        br
        label Course Name
        input(type='text', name='courseName', value= courses[0].courseName
        br
        button#btnSave(type='button') SAVE
        button#btnDelete(type='button') DELETE

script.
    $('#btnDelete').click(function(){
        var action = $(this).val() == '/course/delete/'+courses[0].courseId;
        $('#updateForm').attr('action', action);
        $('#updateForm').submit();
    });
    $('#btnSave').click(function(){
        var action = $(this).val() == '/course/update/' + courses[0].courseId;
        $('#updateForm').attr('action', action);
        $('#updateForm').submit();
    });

The input value (courses item) is passed correctly so I assume that in the script it is also passed correctly. But, why the form is not submitting? There are no actions shown.

Does my script is not correct? What is the best way to change form action?

Thanks.

Answer 1

OK try the following:

var submitForm = function(method){
    //set form action based on the method passed in the click handler, update/delete
    var formAction = '/course/' + method + '/' + courses[0].courseId;
    //set form action
    $('#updateForm').attr('action', formAction);
    //submit form
    $('#updateForm').submit();
};

$(document)
.on('click', '#btnDelete', function(){
    //set your method - delete
    submitForm('delete');
})
.on('click', '#btnSave', function(){
    //set your method - update
    submitForm('update');
});

Answer 2

form(method='post', id='updateForm')
        label Course Number
        input(type='text', name='courseNum', value= courses[0].courseNum)
        br
        label Course Name
        input(type='text', name='courseName', value= courses[0].courseName
        br
        button#btnSave(type='button') SAVE
        button#btnDelete(type='button') DELETE

script.

 $('#btnDelete').click(function(){
        var action = $(this).val() == '/course/delete/'+courses[0].courseId;
        $('#updateForm').attr('action', action);
        $('#updateForm').submit();
    });
$('#btnSave').click(function(){
    var action = $(this).val() == '/course/update/' + courses[0].courseId;
    $('#updateForm').attr('action', action);
    $('#updateForm').submit();
});

Answer 3

Add button type to submit like

button#btnSave(type='submit') SAVE

Answer 4

I think your error is on this line:

var action = $(this).val() == '/course/delete/'+courses[0].courseId;

Here the first equals (=) will assign the part on the right to the variable action. All good there. The double equals (==) however is testing whether $(this).val() is equal to the string on the right ('/course/delete/'+courses[0].courseId;).

It seems you are assigning a boolean to action. If you want to concatenate the string you need something like this:

var action = $(this).val() + '/course/delete/' + courses[0].courseId;

If that's what you are trying to do. If not then post an error message and we can help more.