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

Question

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

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have the following scenario:

I have a form that is used 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 on each row of the teachers table that calls the same form, but populated with the data of the corresponding teacher to do the PUT;
I have a JS file with AJAX requests, where I get the form from the id.

The problem is this: every time I click on the button of some line to change the teacher the form pops up properly but is submitted to the POST, this because of the form id. The submitting action 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?

javascript jquery assincronismo ajax

asked by anonymous 16.08.2017 / 02:53

2 answers

Catching guest user data with php Find duplicate values in an Oracle table

score 1 · 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");
            }
        });
    }
});

score 0 · Answer 2

If ajax is inside the .btn-info click because inside it has the submit? Have you removed sumit from within 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");
        }
    });
});