Send form without close modal

Asked

Viewed 958 times

1

I have a page with job opportunities, when I click on a buttonimg1 it calls a modal and displays a formimg2 where when sending the information I need it to not reload the page and display a confirmation msg.

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

I’m trying to use Ajax, but I’m not succeeding!

$("#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
  • 1

    This form is already sending the registration with Ajax or is reloading the page?

  • It sends the registration and reloads.. If I use Event.preventDefault() it won’t let me post anymore. My button uses type Submit.. if there is no influence.

  • Oh yes, have in question saying that recharges, I did not see right. Well, then in case you convert to Ajax.

  • I think it would be interesting to post the HTML code of your page, we need to know how your modal works and which libraries you are using.

  • Thales, I’m working with a cms, it creates everything kind of automatic. I can only manipulate javascript... this is being my difficulty.

  • Sam, when the form is filled and sent, I need it to give me the msg of sent then.. but it closes the modal without displaying. If I go to the button on the first page (apply for a position), it opens the modal with msg

  • You have disabled the event.preventDefault();... it will prevent page reloading.

  • If I activate it, I cannot send. The button does not send.

  • this is my form <form name="Form1" method="post" enctype="Multipart/form-data" action="/opportunities.aspx" id="Form1">

  • No, preventDefault will only cancel Submit, but the Ajax that comes after will be processed normally.

  • I put an alert, when I am with preventDefault , it shows nothing. Without it shows me the alert.

  • Check the console for any errors. The page to which data is being sent may not be ready to receive data via Ajax, may have redirects etc...

  • Since you said you can’t change pages, only the JS, then I guess there’s nothing to do in your case. To send data via Ajax, the landing page must contain only the codes that will process the data, it cannot be a common page.

  • event.preventDefault() prevents the normal behavior of the form that is submit.

Show 9 more comments

4 answers

0

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

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

However after this you will not be able to catch the Ubmit event, but could map by clicking 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');
    });
});

0

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
}

0

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

To avoid 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 particularly use the Return false.

If still the modal 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, the reload should not occur.

-4

Use the ajaxForm. Ex: $('#form'). ajaxForm(Function(){ //message after sending.. });

Browser other questions tagged javascript jquery ajax

You are not signed in. Login or sign up in order to post.