it-swarm.com.de

Wie kann ich die Antwort von form.submit erfassen?

Ich habe folgenden Code:

<script type="text/javascript">
        function SubmitForm()
        {

            form1.submit();
        }

        function ShowResponse()
        {

        }
</script>
.
.
.
<div>
    <a href="#" onclick="SubmitForm();">Click</a>
</div>

Ich möchte die HTML-Antwort von form1.submit erfassen. Wie mache ich das? Kann ich eine Callback-Funktion bei der Methode form1.submit registrieren?

98
Ngm

Mit normalem Javascript können Sie dies nicht ohne weiteres tun. Wenn Sie ein Formular bereitstellen, werden die Formulareingaben an den Server gesendet und Ihre Seite wird aktualisiert. Die Daten werden auf der Serverseite verarbeitet. Das heißt, die Funktion submit() gibt eigentlich nichts zurück, sondern sendet nur die Formulardaten an den Server.

Wenn Sie wirklich die Antwort in Javascript erhalten wollten (ohne Aktualisierung der Seite), müssen Sie AJAX verwenden. Wenn Sie anfangen, über AJAX zu sprechen, benötigen Sie , um eine Bibliothek zu verwenden. jQuery ist bei weitem das beliebteste und mein persönlicher Favorit. Es gibt ein großartiges Plugin für jQuery mit dem Namen Form , das genau das tut, was es will, wie Sie es wollen.

So verwenden Sie jQuery und das Plugin:

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;
93
nickf

Eine Ajax-Alternative besteht darin, einen unsichtbaren <iframe> als Ziel Ihres Formulars festzulegen und den Inhalt dieses <iframe> in seinem onload-Handler zu lesen. Aber wieso sich die Mühe machen, wenn es Ajax gibt?

Hinweis: Ich wollte nur diese Alternative erwähnen, da einige Antworten behaupten, dass es unmöglich ist , dies ohne Ajax zu erreichen.

52
Ates Goral

Ich mache es so und es funktioniert.

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});
26
rajesh_kw

Der Nicht-jQuery-Weg, der aus dem Kommentar von 12me21 extrahiert wurde:

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);

Bei POST ist der Standardinhaltstyp "application/x-www-form-urlencoded", der mit dem übereinstimmt, was wir in dem obigen Snippet senden. Wenn Sie "anderes Zeug" oder "Tweak" senden möchten, sehen Sie hier für ein paar kleine Details.

16
rogerdpack

Ich bin nicht sicher, ob Sie verstehen, was Submit () macht ...

Wenn Sie form1.submit(); tun, werden die Formularinformationen an den Webserver gesendet.

Der Webserver tut, was immer er tun soll, und sendet eine brandneue Webseite an den Client zurück (normalerweise dieselbe Seite, bei der etwas geändert wurde).

Es gibt also keine Möglichkeit, die Rückgabe einer form.submit () - Aktion zu "fangen".

9
Sergio

Es gibt keinen Rückruf. Es ist wie ein Link zu folgen.

Wenn Sie die Serverantwort erfassen möchten, verwenden Sie AJAX oder veröffentlichen Sie sie in einem Iframe und greifen Sie auf, was dort nach dem Ereignis onload() des iframe angezeigt wird.

Zukünftige Internet-Suchende:

Für neue Browser (ab 2018: Chrome, Firefox, Safari, Opera, Edge und die meisten mobilen Browser, jedoch nicht IE) ist fetch eine Standard-API, die asynchrone Netzwerkaufrufe vereinfacht (für die wir XMLHttpRequest benötigt haben) oder jQuery's $.ajax).

Hier ist eine traditionelle Form:

<form id="myFormId" action="/api/process/form" method="post">
    <!-- form fields here -->
    <button type="submit">SubmitAction</button>
</form>

Wenn Ihnen ein Formular wie das obige übergeben wird (oder Sie es erstellt haben, weil es semantischer HTML-Code ist), können Sie den fetch-Code in einen Ereignis-Listener wie folgt einschließen:

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((resp) => {
        return resp.json(); // or resp.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});

(Wenn Sie es wie das Originalposter auch manuell ohne ein Übermittlungsereignis aufrufen möchten, fügen Sie einfach den fetch-Code hinzu und übergeben Sie einen Verweis an das form-Element, anstatt event.target zu verwenden.)

Dokumente:

Holen Sie: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Andere: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Diese Seite in 2018 erwähnt (noch) nicht Abrufen . Es wird jedoch erwähnt, dass der Trick target = "myIFrame" nicht mehr empfohlen wird . Außerdem enthält es ein Beispiel für form.addEventListener für das Ereignis "submit".

5
Marcus

Sie können event.preventDefault() im Click-Handler für Ihre Submit-Schaltfläche angeben, um sicherzustellen, dass das Ereignis submit des HTML-Formulars nicht ausgelöst wird (was zu einer Aktualisierung der Seite führt). 

Eine andere Alternative wäre die Verwendung eines Hackier-Formular-Markups: Es ist die Verwendung von <form> und type="submit", die hier dem gewünschten Verhalten im Weg stehen; Dies führt letztlich zu Klickereignissen, die die Seite aktualisieren.

Wenn Sie weiterhin <form> verwenden möchten und keine benutzerdefinierten Klick-Handler schreiben möchten, können Sie die ajax-Methode von jQuery verwenden. Diese Methode entfernt das gesamte Problem für Sie, indem Sie Versprechungsmethoden für success, error usw. verfügbar machen. 


Zur Wiederholung können Sie Ihr Problem lösen, indem Sie entweder: 

• Verhindern des Standardverhaltens in der Handhabungsfunktion durch Verwendung von event.preventDefault()

• Verwenden von Elementen ohne Standardverhalten (z. B. <form>

• mit jQuery ajax 


(Mir ist gerade aufgefallen, dass diese Frage aus dem Jahr 2008 stammt und nicht sicher ist, warum sie in meinem Feed angezeigt wurde; hoffentlich ist dies eine klare Antwort). 

2
Benny
    $.ajax({
        url: "/users/login/",    //give your url here
        type: 'POST',
        dataType: "json",
        data: logindata,
        success: function ( data ){
        //  alert(data);    do your stuff
        },
        error: function ( data ){
        //  alert(data);    do your stuff
        }
    });
2
Kamal Kishor

Dies ist mein Code für dieses Problem:

<form id="formoid" action="./demoText.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $( this ), url = $form.attr( 'action' );

  /* Send the data using post with element id name and name2*/
  var posting = $.post( url, { name: $('#name').val()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>
2
xchangcheng

Aufbauend auf der Antwort von @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ) gehe ich mit Post-Post-Fehlern und Erfolg um:

    $('#formName').on('submit', function(event) {
        event.preventDefault(); // or return false, your choice
        $.ajax({
            url: $(this).attr('action'),
            type: 'post',
            data: $(this).serialize(),
            success: function(data, textStatus, jqXHR) {
                // if success, HTML response is expected, so replace current
                if(textStatus === 'success') {
                    // https://stackoverflow.com/a/1236378/4946681
                    var newDoc = document.open('text/html', 'replace');
                    newDoc.write(data);
                    newDoc.close();
                }
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 0 || jqXHR == 302) {
                alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
            } else {
                alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
            }
        });
    });

Ich verwende this, damit meine Logik wiederverwendbar ist. Ich erwarte, dass HTML bei einem Erfolg zurückgegeben wird. Ich rendere sie und ersetze die aktuelle Seite. In meinem Fall erwarte ich eine Umleitung zur Anmeldeseite, wenn die Sitzung abgelaufen ist. Daher fange ich diese Weiterleitung ab, um den Status der Seite zu erhalten.

Jetzt können sich Benutzer über eine andere Registerkarte anmelden und den Vorgang erneut versuchen.

1
Nate

Wenn Sie die Ausgabe einer AJAX - Anforderung mit Chrome erfassen möchten, führen Sie die folgenden einfachen Schritte aus:

  1. Öffnen Sie die Programmier-Toolbox
  2. Gehe zur Konsole und irgendwo drin
  3. Klicken Sie im angezeigten Menü auf "XMXHTTPRequest-Protokollierung aktivieren".
  4. Nachdem Sie dies getan haben, wird jedes Mal, wenn Sie eine AJAX - Anforderung anfordern, eine Meldung mit dem Beginn "XHR fertig geladen: http: // ......" in Ihrer Konsole angezeigt.
  5. Wenn Sie auf den angezeigten Link klicken, wird die Registerkarte "Ressourcen" angezeigt, auf der Sie die Kopfzeilen und den Inhalt der Antwort sehen können!

Sie können jQuery.post () verwenden und schön strukturierte JSON-Antworten vom Server zurückgeben. Außerdem können Sie Ihre Daten direkt auf dem Server validieren/bereinigen. Dies ist eine bewährte Methode, da sie sicherer (und noch einfacher) ist, als dies auf einem Client durchzuführen ist.

Zum Beispiel, wenn Sie ein HTML-Formular auf dem Server (zum Speichern von Profilechanges.php) mit Benutzerdaten zur einfachen Registrierung bereitstellen müssen:

I. Kundenbestandteile:

I.a. HTML-Teil:

<form id="user_profile_form">
  <label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
  <label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
  <label for="email"><input type="email" name="email" id="email" required />Email</label> 
  <input type="submit" value="Save changes" id="submit" />
</form>

I.b. Skriptteil:

$(function () {
    $("#user_profile_form").submit(function(event) {
      event.preventDefault();
      var postData = {
        first_name: $('#first_name').val(),
        family_name: $('#family_name').val(),
        email: $('#email').val()
      };
      $.post("/saveprofilechanges.php", postData,
        function(data) {
          var json = jQuery.parseJSON(data);
          if (json.ExceptionMessage != undefined) {
            alert(json.ExceptionMessage); // the exception from the server
            $('#' + json.Field).focus(); // focus the specific field to fill in
          }
          if (json.SuccessMessage != undefined) {
            alert(json.SuccessMessage); // the success message from server
          }
       });
    });
});

II. Serverteil (saveprofilechanges.php):

$data = $_POST;
if (!empty($data) && is_array($data)) {
    // Some data validation:
    if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'first_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'family_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
       echo json_encode(array(
         'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
         'Field' => 'email' // Form field to focus in client form
       ));
       return FALSE;
    }
    // more actions..
    // more actions..
    try {
       // Some save to database or other action..:
       $this->User->update($data, array('username=?' => $username));
       echo json_encode(array(
         'SuccessMessage' => "Data saved!"
       ));
       return TRUE;
    } catch (Exception $e) {
       echo json_encode(array(
         'ExceptionMessage' => $e->getMessage()
       ));
       return FALSE;
    }
}
0
Vlado

Sie müssen AJAX verwenden. Beim Senden des Formulars lädt der Browser normalerweise eine neue Seite.

0
sblundy

Sie können dies mit Javascript und AJAX Technologie tun. Werfen Sie einen Blick auf jquery und auf dieses form plug in . Sie müssen nur zwei js-Dateien einschließen, um einen Rückruf für das form.submit zu registrieren.

0
kgiannakakis

Ich habe folgenden Code unter Verwendung von ajax mit mehrteiligen Formulardaten einwandfrei ausgeführt 

function getUserDetail()
{
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var phoneNumber = document.getElementById("phoneNumber").value;
    var gender =$("#userForm input[type='radio']:checked").val();
    //var gender2 = document.getElementById("gender2").value;
    //alert("fn"+firstName+lastName+username+email);
    var roleIndex = document.getElementById("role");
    var role = roleIndex.options[roleIndex.selectedIndex].value;
    var jobTitleIndex = document.getElementById("jobTitle");
    var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var addressLine1 = document.getElementById("addressLine1").value;
    var addressLine2 = document.getElementById("addressLine2").value;
    var streetRoad = document.getElementById("streetRoad").value;

    var countryIndex = document.getElementById("country");
    var country = countryIndex.options[countryIndex.selectedIndex].value;

    var stateIndex = document.getElementById("state");
    var state = stateIndex.options[stateIndex.selectedIndex].value;

    var cityIndex = document.getElementById("city");
    var city = cityIndex.options[cityIndex.selectedIndex].value;



    var pincode = document.getElementById("pincode").value;

    var branchIndex = document.getElementById("branch");
    var branch = branchIndex.options[branchIndex.selectedIndex].value;

    var language = document.getElementById("language").value;
    var profilePicture = document.getElementById("profilePicture").value;
    //alert(profilePicture);
    var addDocument = document.getElementById("addDocument").value;


    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var data = new FormData();
    data.append('firstName', firstName);
    data.append('lastName', lastName);
    data.append('username', username);
    data.append('email', email);
    data.append('phoneNumber', phoneNumber);
    data.append('role', role);
    data.append('jobTitle', jobTitle);
    data.append('gender', gender);
    data.append('shiftId', shiftId);
    data.append('lastName', lastName);
    data.append('addressLine1', addressLine1);
    data.append('addressLine2', addressLine2);
    data.append('streetRoad', streetRoad);
    data.append('country', country);
    data.append('state', state);
    data.append('city', city);
    data.append('pincode', pincode);
    data.append('branch', branch);
    data.append('language', language);
    data.append('profilePicture', $('#profilePicture')[0].files[0]);
     for (var i = 0; i < $('#document')[0].files.length; i++) {
            data.append('document[]', $('#document')[0].files[i]);
        }



    $.ajax({
        //url : '${pageContext.request.contextPath}/user/save-user',
        type: "POST",
        Accept: "application/json",
        async: true,
        contentType:false,
        processData: false,
        data: data,
        cache: false,

        success : function(data) {      
            reset();
            $(".alert alert-success alert-div").text("New User Created Successfully!");
         },
       error :function(data, textStatus, xhr){
           $(".alert alert-danger alert-div").text("new User Not Create!");
        }


    });


//

}
0
gajera bhavin

Sie können dies mit jQuery und der ajax() -Methode erreichen:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform() {
      $.ajax({
        headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
        },
        type: "POST",
        url : "/hello.hello",
        dataType : "json",
        data : JSON.stringify({"hello_name": "hello"}),
        error: function () {
          alert('loading Ajax failure');
        },
    	onFailure: function () {
          alert('Ajax Failure');
    	},
    	statusCode: {
          404: function() {
          alert("missing info");
          }   
    	},
        success : function (response) {
          alert("The server says: " + JSON.stringify(response));
        }
      })
      .done(function( data ) {
        $("#result").text(data['hello']);
      });
};</script>

0
user5435345

Zuerst brauchen wir serializeObject ();

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].Push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

dann machst du einen grundlegenden Beitrag und bekommst eine Antwort

$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true 
}
else
{
//do false
}

});
0
Euphoria
 $(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
            type : "POST",
            data : $(this).serialize(),
            success : function(data) {
                var treeMenuFrame = parent.frames['wikiMenu'];
                if (treeMenuFrame) {
                    treeMenuFrame.location.href = treeMenuFrame.location.href;
                }
                var contentFrame = parent.frames['wikiContent'];
                contentFrame.document.open();
                contentFrame.document.write(data);
                contentFrame.document.close();
            }
        });
    });
});

Blockquote

firrst of all use $ (document) .ready (function ()) innerhalb dieser use ('formid'). submit (function (event)) und verhindert dann die Standardaktion, nachdem ajax-Formularübergabe. Ajax ({,}); es wird Parameter benötigen, die Sie entsprechend Ihrer Anforderung auswählen können Dann rufen Sie eine Funktion auf: function (data) { // tun, was immer Sie möchten, dass mein Beispiel Antwort-html auf div setzt}

0
YogeshBagdawat