Comment soumettre un formulaire HTML sans redirection

Si j'ai un formulaire comme celui-ci,

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

comment puis-je le soumettre sans rediriger vers une autre vue par JavaScript / jQuery?

J'ai lu beaucoup de réponses de Stack Overflow, mais toutes me redirigent vers la vue renvoyée par la fonction POST.

Afin d'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 want to do after the form is successfully submitted
        }
    });
});

Essayez également celui-ci:

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 want to do after the form is successfully submitted
       }
   });
}

Solution finale

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

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

Vous pouvez y parvenir en redirigeant le formulaire actionvers un fichier invisible <iframe>. Il ne nécessite aucun JavaScript ni aucun autre type de script.

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>

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

Placez un caché iFrameen bas de votre page et targetle 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. Gardez à l'esprit que bien que l' targetattribut soit toujours largement pris en charge (et pris en charge dans HTML5), il était obsolète dans HTML 4.01.

Vous devriez donc vraiment utiliser Ajax à l'épreuve du temps.

Étant donné que toutes les réponses actuelles utilisent jQuery ou des astuces avec iframe, il n'y a aucun mal à ajouter une méthode avec juste du 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);
}

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

Si vous ne voulez pas qu'il redirige simplement, ne définissez aucune action et définissez onsubmit="someFunction();"

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

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 in 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;
    });
});

Voir la postfonction de jQuery .

Je créerais un bouton, définirais un onClickListener( $('#button').on('click', function(){});) et enverrais les données dans la fonction.

Voir également la preventDefaultfonction, de jQuery!

Solution One-Liner à partir de 2020, si vos données ne sont pas destinées à être envoyées en tant que multipart/form-dataou application/x-www-form-urlencoded:

<form onsubmit='return false'>
    <!-- ... -->           
</form>

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 la page et la redirection lors de l'envoi du formulaire 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>

En utilisant cet extrait, vous pouvez soumettre le formulaire et éviter la redirection. Au lieu de cela, vous pouvez passer la fonction de succès 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 faites simplement:

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

Si vous contrôlez le back-end, utilisez quelque chose comme à la response.redirectplace de response.send.

Vous pouvez créer des pages HTML personnalisées pour cela ou simplement rediriger vers quelque chose que vous avez déjà.

Dans Express.js:

const handler = (req, res) => {
  const { body } = req
  handleResponse(body)
  .then(data => {
    console.log(data)
    res.redirect('https://yoursite.com/ok.html')
  })
  .catch(err => {
    console.log(err)
    res.redirect('https://yoursite.com/err.html')
  })
}
...
app.post('/endpoint', handler)