So senden Sie ein HTML-Formular ohne Umleitung

Wenn ich ein solches Formular habe,

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

Wie kann ich es einreichen, ohne von JavaScript / jQuery zu einer anderen Ansicht umzuleiten?

Ich habe viele Antworten von Stack Overflow gelesen, aber alle leiten mich zu der Ansicht weiter, die von der POST-Funktion zurückgegeben wird.

Um das zu erreichen, was Sie wollen, müssen Sie jQuery Ajax wie folgt verwenden:

$('#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
        }
    });
});

Versuchen Sie auch dieses:

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

Endgültige Lösung

Das hat einwandfrei funktioniert. Ich rufe diese Funktion von aufHtml.ActionLink(...)

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

Sie können dies erreichen, indem Sie die Formulare actionauf ein unsichtbares umleiten <iframe>. Es ist kein JavaScript oder eine andere Art von Skripten erforderlich.

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

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

Platzieren Sie ein verstecktes iFrameam Ende Ihrer Seite und targetes in Ihrem Formular:

<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>

Schnell und einfach. Beachten Sie, dass das targetAttribut zwar weitgehend unterstützt wird (und in HTML5 unterstützt wird), in HTML 4.01 jedoch veraltet ist.

Sie sollten Ajax also wirklich zukunftssicher verwenden.

Da alle aktuellen Antworten jQuery oder Tricks mit iframe verwenden, kann das Hinzufügen einer Methode mit einfachem JavaScript nicht schaden:

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

Okay, ich werde dir keine magische Art sagen, es zu tun, weil es keine gibt. Wenn Sie ein Aktionsattribut für ein Formularelement festgelegt haben, wird es umgeleitet.

Wenn Sie nicht möchten, dass es umgeleitet wird, legen Sie einfach keine Aktion fest und legen Sie fest onsubmit="someFunction();"

Wenn someFunction()Sie tun, was Sie wollen (mit oder ohne AJAX) und am Ende hinzufügen return false;, fügen Sie hinzu , um den Browser anzuweisen, das Formular nicht zu senden ...

Sie brauchen Ajax, um dies zu erreichen. Etwas wie das:

$(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;
    });
});

Einzeilige Lösung ab 2020, wenn Ihre Daten nicht als multipart/form-dataoder gesendet werden sollen application/x-www-form-urlencoded:

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

Siehe jQuerys postFunktion.

Ich würde eine Schaltfläche erstellen und ein onClickListener( $('#button').on('click', function(){});) setzen und die Daten in der Funktion senden.

Siehe auch die preventDefaultFunktion von jQuery!

Der gewünschte Effekt kann auch erzielt werden, indem Sie die Senden-Schaltfläche außerhalb des Formulars bewegen, wie hier beschrieben:

Verhindern Sie das erneute Laden und Umleiten von Seiten auf dem Formular. Senden Sie ajax / jquery

So was:

<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>

Mit diesem Snippet können Sie das Formular senden und eine Umleitung vermeiden. Stattdessen können Sie die Erfolgsfunktion als Argument übergeben und tun, was Sie wollen.

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

Und dann einfach:

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

Wenn Sie das Backend steuern, verwenden Sie etwas wie response.redirectanstelle von response.send.

Sie können hierfür benutzerdefinierte HTML-Seiten erstellen oder einfach zu etwas umleiten, das Sie bereits haben.

In 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)