Send form without closing modal

Question

Send form without closing modal

Navigation

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

0

I have a page with job opportunities when I click on a button it calls a modal and displays a form where sending information requires that he does not reload the page and displays a confirmation message.

What has happened is that after it is sent, it closes the modal and if I click the button to register it loads the sent message.

I'mtryingtouseAjax,butI'mnothavingsuccess!

$("#form1").submit(function(event){    
      // event.preventDefault(); //prevent default action 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = $(this).serialize(); //En

    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data
    }).done(function(response){ 
       alert('acabou');
    });
});

javascript jquery ajax

asked by anonymous 04.09.2018 / 21:20

3 answers

Report View in Report View turns 2 pages into 6 with many blank How to make php send commands to an Elgin l42 in BPLA language?

score 0 · Answer 1

One reason why the modal is closed may be by submitting the form.

To avoid it there are two ways:

Using return false

$("#form1").submit(function(event){    
      // event.preventDefault(); //prevent default action 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = $(this).serialize(); //En

    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data
    }).done(function(response){ 
       alert('acabou');
    });

    return false; // evitando recarregamento do form
});

Or using preventDefault

$("#form1").submit(function(event){    
      // event.preventDefault(); //prevent default action 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = $(this).serialize(); //En

    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data
    }).done(function(response){ 
       alert('acabou');
    });

    event.preventDefault(); // evitando recarregamento do form
});

I usually use return false .

If the modal still keeps closing, the modal code needs to be checked.

This happens because by default the sending of the form is done in the window itself, as in this case it is done via ajax, reloading should not occur.

score 0 · Answer 2

Form

<form id="formUpload" method="post" enctype="multipart/form-data">

    <input type="text" name="nome" id="nome" />

    <input type="file" name="file" id="file" />

    <input type="tel" name="tel" id="tel" />
</form>

<button onclick="enviar();">enviar</button>

JavaScript

function enviar() {

    var data = new FormData($('#formUpload')[0]);

    $.ajax({
        url: "url",
        method: 'post',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            if (result.Success === true) {
                ShowMessageSuccess('envie seu corriculo', result.MsgReturn);
            } else {
                ShowMessageError('envie seu corriculo', result.MsgReturn);
            }
        },
    });
}

Controller

public JsonResult enviar(BaseHourViewModel form, HttpPostedFileBase file){
     //Código
}

score 0 · Answer 3

Try changing the type of the submit button to button. Example:

$('input').prop('type','button');

However, after that you will not be able to get the submit event, but you could map by grabbing the button.

$("#botao").click(function(event){    
    // event.preventDefault(); //prevent default action 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = $(this).serialize(); //En

    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data
    }).done(function(response){ 
       alert('acabou');
    });
});