web-dev-qa-db-fra.com

Comment soumettre un formulaire html sans redirection?

Si j'ai forme comme ça:

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>

comment le soumettre sans rediriger vers une autre vue par JavaScript/Jquery? J'ai lu beaucoup de réponses de StackOverflow, mais toutes me redirigent vers la vue renvoyée par la fonction POST.

javascriptjqueryhtmlforms
63
Duke Nuke

pour obtenir ce que vous voulez, vous devez utiliser jquery ajax comme ci-dessous:

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'/Car/Edit/17/',
        type:'post',
        data:$('#myForm').serialize(),
        success:function(){
            //whatever you wanna do after the form is successfully submitted
        }
    });
});

UPDATED: (basé sur les commentaires ci-dessous)

essaye celui-là:

function SubForm(e){
    e.preventDefault();
    var url=$(this).closest('form').attr('action'),
    data=$(this).closest('form').serialize();
    $.ajax({
        url:url,
        type:'post',
        data:data,
        success:function(){
           //whatever you wanna do after the form is successfully submitted
       }
   });
}

UPDATE 2 (le PO a ajouté cette partie car c'était sa solution finale)

Cela a fonctionné parfaitement. J'appelle cette fonction de Html.ActionLink(...)

function SubForm (){
    $.ajax({
        url:'/Person/Edit/@Model.Id/',
        type:'post',
        data:$('#myForm').serialize(),
        success:function(){
            alert("worked");
        }
    });
}
50
Amin Jafari

Vous pouvez y parvenir en redirigeant la variable action du formulaire vers un <iframe>. Il ne nécessite aucun JavaScript ni aucun autre type de script.

<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>

<form action="submitscript.php" target="dummyframe">
    <!-- form body here -->
</form>

si vous êtes vraiment malin, vous pouvez bricoler position=absolute et z-index valeur en CSS pour vous assurer que le cadre ne soit pas rendu. Si cela compte autant, vous feriez mieux d'utiliser de toute façon AJAX.

75
Issa Chanzi

Placez une iFrame cachée au bas de votre page et target dans votre formulaire:

<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>

Rapide et facile. N'oubliez pas que, même si l'attribut target est toujours largement pris en charge (et pris en charge en HTML5), il était obsolète en HTML 4.01 . Vous devez donc utiliser ajax pour une utilisation future.

18
Steven Black

D'accord, je ne vais pas vous dire de façon magique de le faire car il n'y a pas de . Si un attribut d'action est défini pour un élément de formulaire, il sera redirigé.

Si vous ne souhaitez pas qu'il soit redirigé, ne définissez aucune action, ni onsubmit="someFunction();"

Dans votre someFunction(), vous faites ce que vous voulez (avec AJAX ou non) et à la fin, vous ajoutez return false; pour indiquer au navigateur de ne pas envoyer le formulaire ...

5
Anshu Dwibhashi

Vous avez besoin d'ajax pour y arriver. Quelque chose comme ça 

$(document).ready(function(){
    $("#myform").on('submit', function(){
        var name = $("#name").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var contact = $("#contact").val();

        var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
        if(name==''||email==''||password==''||contact=='')
        {
            alert("Please Fill All Fields");
        }
        else
        {
            // AJAX Code To Submit Form.
            $.ajax({
                type: "POST",
                url: "ajaxsubmit.php",
                data: dataString,
                cache: false,
                success: function(result){
                    alert(result);
                }
           });
        }
        return false;
    });
});
3
Bojan Petkovski

Puisque toutes les réponses actuelles utilisent jQuery ou des astuces avec iframe, il est clair qu'il n'y a aucun mal à ajouter une méthode avec du simple JavaScript:

function formSubmit(event) {
  var url = "/post/url/here";
  var request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.onload = function() { // request successful
  // we can use server response to our request now
    console.log(request.responseText);
  };

  request.onerror = function() {
    // request failed
  };

  request.send(new FormData(event.target)); // create FormData from form that triggered event
  event.preventDefault();
}

// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
  document.getElementById(formId).addEventListener("submit", formSubmit);
}
3
Ethuil UI

Voir la fonction post de jQuery.

Je voudrais créer un bouton, définir une onClickListener ($('#button').on('click', function(){});) et envoyer les données dans la fonction.

Voir aussi la fonction preventDefault de jQuery!

2
Nagy Vilmos

En utilisant cet extrait de code, vous pouvez soumettre le formulaire et éviter la redirection. Au lieu de cela, vous pouvez passer la fonction success comme argument et faire ce que vous voulez.

function submitForm(form, successFn){

if (form.getAttribute("id")!='' || form.getAttribute("id")!=null){
var id = form.getAttribute("id");
} else { console.log("Form id attribute was not set; the form cannot be serialized")}

$.ajax({
    type: form.method,
    url: form.action,
    data: $(id).serializeArray(),
    dataType: "json",
    success: successFn,
    //error: errorFn(data)
});

}

Et puis juste faire:

var formElement = document.getElementById("yourForm");
   submitForm(formElement, function() {
   console.log("Form submitted");
});
0
cepix

L'effet souhaité peut également être obtenu en déplaçant le bouton d'envoi en dehors du formulaire, comme décrit ici:

Empêcher le rechargement de page et la redirection sur le formulaire d'envoi ajax/jquery

Comme ça:

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>
<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
0
John