Wie erfassen ich Antwort von form.submit

Question

Ich habe den 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 jede Callback-Funktion registrieren Methode form1.submit?

Answer 1

Sie werden nicht in der Lage sein, dies leicht mit einfachen Javascript zu tun. Wenn Sie ein Formular erstellen, werden die Formulareingaben an den Server gesendet und Ihre Seite wird aktualisiert - die Daten auf der Server-Seite behandelt wird. Das heißt, die submit() Funktion nicht wirklich etwas zurückgeben, es ist nur die Formulardaten an den Server sendet.

Wenn Sie wirklich die Antwort in Javascript (ohne die Seite zu aktualisieren) bekommen wollte, dann werden Sie AJAX verwenden müssen, und wenn Sie anfangen zu sprechen über AJAX, werden Sie Notwendigkeit verwenden, um eine Bibliothek. jQuery ist mit Abstand die populärste, und mein persönlicher Favorit. Es gibt eine große Plugin für jQuery genannt, die genau das tun, was es klingt wie Sie wollen.

Hier ist, wie Sie verwenden würden jQuery und das Plugin:

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

Answer 2

Eine Ajax Alternative ist ein unsichtbares <iframe> als Form des Ziel zu setzen und den Inhalt dieses <iframe> in seinen onload Handler zu lesen. Aber warum die Mühe, wenn es Ajax ist?

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

Answer 3

ich es auf diese Weise, und seine Arbeits tue.

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

Answer 4

Die nicht-jQuery Art und Weise, von 12me21 Kommentar extrahiert:

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

Für POST des Standard-Inhaltstyp „application / x-www-form-urlencoded“, die dem entspricht, was wir in der obigen Schnipsel sind zu senden. Wenn Sie wollen, „andere Sachen“ senden oder zwicken irgendwie sehen hier für einige nitty gritty Details.

Answer 5

Ich bin nicht sicher, dass Sie verstehen, was submit () tut ...

Wenn Sie das Formular Informationen tun form1.submit(); wird an den Webserver gesendet.

Die WebServer werden tun, was sein angenommenes eine brandneue Webseite an den Client (in der Regel der gleiche Seite mit etwas geändert) zu tun und zurück.

So gibt es keine Möglichkeit, Sie können "fangen" die Rückkehr eines form.submit () -Aktion.

Answer 6

Future Internet Suchende:

Für neuen Browser (ab 2018: Chrome, Firefox, Safari, Opera, Edge und die meisten mobilen Browser, aber nicht IE), fetch ist ein Standard-API, die asynchronen Netzanrufe vereinfacht (für die wir verwenden XMLHttpRequest oder jQuery $.ajax müssen).

Hier ist eine traditionelle Form:

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

Wenn ein Formular wie das oben an Dich übergeben wird (oder es erstellt wird, weil es semantisches HTML ist), dann können Sie den fetch Code in ein Ereignis-Listener wickeln wie folgt:

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

(Oder, wenn wie das ursprüngliche Plakat wollen, dass es ohne eine Veranstaltung einreichen manuell aufrufen, einfach den Code fetch dort und einen Verweis auf das form Element passieren, anstatt event.target zu verwenden.)

Docs:

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

Sonstiges: https://developer.mozilla.org/en-US/docs Lernen / / HTML / Formulare / Sending_forms_through_JavaScript Die Seite im Jahr 2018 erwähnt nicht holen (noch) nicht. Aber es wird erwähnt, dass das target = „myIFrame“ Trick ist veraltet. Und es hat auch ein Beispiel für form.addEventListener für das ‚Senden‘ Ereignis.

Answer 7

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

Wenn Sie die Server-Antwort zu erfassen, verwenden AJAX oder per Post an einem Iframe und greifen, was dort erscheint nach dem onload() Veranstaltung iframe.

Answer 8

Sie können in dem Klick-Handler für Ihren Submit-Button event.preventDefault() um sicherzustellen, dass das HTML-Formular Standard submit Ereignis nicht abfeuert (das ist, was auf die Seite erfrischend führt).

Eine weitere Alternative wäre hackier Form Markup zu verwenden: Es ist die Verwendung von <form> und type="submit", die hier in der Art und Weise des gewünschten Verhaltens wird immer; da diese führen schließlich Ereignisse Auffrischen der Seite zu klicken.

Wenn Sie noch wollen <form> verwenden, und Sie wollen nicht, benutzerdefinierte Klick-Handler schreiben, können Sie jQuery ajax Methode verwenden, die das gesamte Problem abstrahiert für Sie weg von Versprechen Methoden für success aussetzt, error usw.

---

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

• Verhindern Standardverhalten in der Handhabung Funktion von event.preventDefault() mit

• Elemente verwenden, das Standardverhalten nicht (z <form>) haben

• mit jQuery ajax

---

(Ich habe gerade bemerkt, diese Frage aus dem Jahr 2008 ist, nicht sicher, warum es in meinem Feed auftauchte, jedenfalls, hoffentlich ist dies eine klare Antwort)

Answer 9

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

Answer 10

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>

Answer 11

Falls Sie die Ausgabe einer AJAX-Anforderung erfassen mit Chrome Sie diesen einfachen Schritten folgen können:

1. die Programmierer Toolbox Aufmachen
2. Gehen Sie auf die Konsole und rechts überall im Inneren
3. Im Menü auf "Enable XMXHTTPRequest Logging"
erscheint
4. Nach dass jedes Mal tun Sie eine AJAX-Anforderung eine Meldung machen mit „XHR fertig geladen: http: // ......“ beginnen. In der Konsole erscheint
5. auf den Link klicken, die, bringen die „Registerkarte Ressourcen“, wo Ihr sehen die Header und den Inhalt der Antwort scheint!

Answer 12

Auf der Grundlage der Antwort von @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), ich behandle Form Post Fehler und Erfolg:

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

I Verwendung von this machen, so dass meine Logik wiederverwendbar ist, ich HTML erwarte auf einem Erfolg zurückgeführt werden, damit ich es machen und die aktuelle Seite ersetzen, und in meinem Fall erwarte ich eine Umleitung auf die Login-Seite, wenn die Sitzung Zeitüberschreitung, so dass ich abfangen, die den Status der Seite zu erhalten.

, um umleiten

Jetzt können Benutzer über einen anderen Tab anmelden und versuchen Sie es erneut ihre einreichen.

Answer 13

Sie müssen zu AJAX. das Formular abgesendet haben in der Regel ergibt sich der Browser eine neue Seite geladen wird.

Answer 14

Sie können tun, dass Javascript und AJAX-Technologie. Werfen Sie einen Blick auf jquery und an diesem Form Plug in rel="nofollow. Sie müssen nur zwei js Dateien enthalten einen Rückruf für die form.submit zu registrieren.

Answer 15

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

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

Answer 16

 $(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 alle Gebrauch $ (document) .ready (function ()) in diesem Einsatz ( 'formid'). Einreichen (function (event)) und dann Standard-Aktion aftyer diesen Anruf Ajax Formularübermittlung verhindern $ Schnipsel ({,,}); es wird Parameter nehmen u Ihre Anforderung nach wählen rufen dann AFunction Erfolg: function (data) { // tun, was Sie mein Beispiel will Antwort html auf div setzen}

Answer 17

Zunächst einmal werden wir brauchen 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;
};

Sie dann eine Basis Post machen und bekommen Antwort

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

});

Answer 18

Ich habe folgenden Code perfactly mit mehrteiligen Formulardaten mit Ajax ausführen

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


    });


//

}

Answer 19

Sie können mit jQuery.post () und zurück gut strukturierten JSON Antworten vom Server . Es erlaubt Ihnen auch / zu validieren Ihre Daten direkt auf dem Server sanieren, die eine gute Praxis ist, weil es sicherer ist (und noch einfacher) als dies zu tun auf dem Client.

Zum Beispiel, wenn Sie benötigen HTML-Formular an dem Server (auf saveprofilechanges.php) mit Benutzerdaten für einfache Registrierung schreiben:

ich. Client-Teile:

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. Script Teil:

$(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. Server-Teil (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;
    }
}

Answer 20

Sie können das tun, ohne Ajax.

schreiben Sie wie unten.

.. .. ..

und dann in "action.php"

dann nach frmLogin.submit ();

Variable $ submit_return erfahren ..

$ submit_return enthält Rückgabewert.

viel Glück.