jQuery/AJAX: a single form that can be submitted to different urls (POST or PUT)

Question

I have the following scenario:

• I have a form that serves to register or change a teacher;
• To register I have a button at the top that calls the modal to do the POST;
• To change I have a button in each row of the teacher table that calls the same form, but populated with the corresponding teacher data to do the PUT;
• I have a JS file with AJAX requests, where I get the form by id.

The problem is this: every time I click on the button of some line to change the teacher the form opens populated correctly but is submitted to the POST, this because of the form id. The action of submitting for registration is always taking the form.

My AJAX are as follows:

$('#formSalvarProfessor').submit(function(event){
    alert('POST');
    event.preventDefault();
    $.ajax({
        url: "professores",
        type: "POST",
        data: $(this).serialize(),
        dataType: "json",
        success:function(data){
            swal("Sucesso!", data.msg, "success");
        }, error: function(data){
            swal("Erro!", data.msg, "error");
        }
    });
});

$('.btn-info').click(function(){
    $('#formSalvarProfessor').submit(function(event){
        alert('PUT');
        event.preventDefault();
        var dados = $(this).data("dados");
        var id = dados.ID_PROFESSOR_PRO;
        $.ajax({
            url: "professores/"+id,
            type: "PUT",
            data: $(this).serialize(),
            dataType: "json",
            success: function(data){
                swal("Sucesso!", data.msg, "success");
            }, error: function(data){
                swal("Erro!", data.msg, "error");
            }
        });
    });
});

How can I make each function capture the form properly?

Answer 1

Solution:

Check if a form id is coming and do the following:

$('#formSalvarProfessor').submit(function(event){
    event.preventDefault();
    var id = $("input[name=ID_PROFESSOR_PRO]").val();
    if(id){
        $.ajax({
            url: "professores/"+id,
            type: "PUT",
            data: $(this).serialize(),
            dataType: "json",
            success: function(data){
                swal("Sucesso!", data.msg, "success");
            }, error: function(data){
                swal("Erro!", data.msg, "error");
            }
        });
    }else{
        $.ajax({
            url: "professores",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success:function(data){
                swal("Sucesso!", data.msg, "success");
            }, error: function(data){
                swal("Erro!", data.msg, "error");
            }
        });
    }
});

Answer 2

If the ajax is inside the click of .btn-info why is Submit inside it? It has already removed Sumit from inside the click?

$('.btn-info').click(function(){
    alert('PUT');
    event.preventDefault();
    var dados = $(this).data("dados");
    var id = dados.ID_PROFESSOR_PRO;
    $.ajax({
        url: "professores/"+id,
        type: "PUT",
        data: $(this).serialize(),
        dataType: "json",
        success: function(data){
            swal("Sucesso!", data.msg, "success");
        }, error: function(data){
            swal("Erro!", data.msg, "error");
        }
    });
});