it-swarm.com.de

Wie kann ich ein HTML-Formular ohne Umleitung einreichen?

Wenn ich eine solche Form 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 umgeleitet zu werden? Ich habe viele Antworten von StackOverflow gelesen, aber alle leiten mich an die Ansicht weiter, die von der Funktion POST zurückgegeben wird.

63
Duke Nuke

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

AKTUALISIERT: (basierend auf den Kommentaren unten)

probier diese:

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 (das OP hat diesen Teil hinzugefügt, da dies seine endgültige Lösung war)

Das funktionierte einwandfrei. Ich rufe diese Funktion von Html.ActionLink(...) auf.

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

Sie können dies erreichen, indem Sie die action des Formulars in einen <iframe> umleiten. Es erfordert kein JavaScript oder eine andere Art von Skripten.

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

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

wenn Sie wirklich geschickt sind, können Sie mit position=absolute und z-index in CSS basteln, um sicherzustellen, dass der Frame nicht gerendert wird. Wenn es jedoch so wichtig ist, ist es vielleicht besser, wenn Sie AJAX verwenden.

75
Issa Chanzi

Platzieren Sie eine verborgene iFrame am unteren Rand Ihrer Seite und target 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. Denken Sie daran, dass das target-Attribut zwar noch weitgehend unterstützt wird (und in HTML5 unterstützt wird), in HTML 4.01 jedoch nicht mehr empfohlen wurde.

18
Steven Black

Okay, ich werde Ihnen keine magische Vorgehensweise erklären, da es nicht ... gibt. Wenn Sie ein Aktionsattribut für ein Formularelement gesetzt haben, wird es umleiten.

Wenn Sie keine Umleitung wünschen, setzen Sie einfach keine Aktion und stellen Sie onsubmit="someFunction();" ein.

In Ihrer someFunction() tun Sie, was Sie wollen (mit AJAX oder nicht) und in der Endung fügen Sie return false; hinzu, um den Browser anzuweisen, das Formular nicht abzusenden ...

5
Anshu Dwibhashi

Sie brauchen Ajax, um dies zu ermöglichen. 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 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

Da alle aktuellen Antworten jQuery oder Tricks mit iframe verwenden, kann das Hinzufügen von Methoden 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);
}
3
Ethuil UI

Siehe die post-Funktion von jQuery.

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

Siehe auch die preventDefault-Funktion von jQuery!

2
Nagy Vilmos

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

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 machen Sie einfach:

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

Den gewünschten Effekt können Sie auch erreichen, indem Sie die Senden-Schaltfläche außerhalb des Formulars verschieben, wie hier beschrieben:

Verhindern Sie das erneute Laden und Weiterleiten von Formularen. 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>
0
John