Jak przechwycić odpowiedź formularza form.submit

Mam następujący kod:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

Chcę uchwycić odpowiedź HTML form1.submit? Jak mam to zrobic? Czy mogę zarejestrować jakąkolwiek funkcję zwrotną do metody form1.submit?

Nie będziesz w stanie tego łatwo zrobić za pomocą zwykłego javascript. Kiedy wysyłasz formularz, dane wejściowe formularza są wysyłane na serwer, a Twoja strona jest odświeżana - dane są obsługiwane po stronie serwera. Oznacza to, że submit()funkcja w rzeczywistości nic nie zwraca, po prostu wysyła dane formularza na serwer.

Jeśli naprawdę chciałeś uzyskać odpowiedź w JavaScript (bez odświeżania strony), musisz użyć AJAX, a kiedy zaczniesz mówić o używaniu AJAX, będziesz musiał użyć biblioteki. jQuery jest zdecydowanie najpopularniejszym i moim ulubionym. Jest świetna wtyczka do jQuery o nazwie Form, która zrobi dokładnie to, co chcesz.

Oto jak używałbyś jQuery i tej wtyczki:

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

Alternatywą Ajax jest ustawienie niewidocznego <iframe>jako elementu docelowego formularza i odczytanie jego zawartości <iframe>w jego onloadmodule obsługi. Ale po co zawracać sobie głowę Ajaxem?

Uwaga: chciałem tylko wspomnieć o tej alternatywie, ponieważ niektóre odpowiedzi twierdzą, że nie da się tego osiągnąć bez Ajax.

Waniliowy sposób Javascript inny niż jQuery, wyodrębniony z komentarza 12me21:

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

W POSTprzypadku domyślnym typem zawartości jest „application / x-www-form-urlencoded”, co odpowiada temu, co wysyłamy w powyższym fragmencie. Jeśli chcesz wysłać „inne rzeczy” lub w jakiś sposób je ulepszyć, zajrzyj tutaj, aby uzyskać szczegółowe informacje.

Robię to w ten sposób i to działa.

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

Przyszli poszukiwacze internetu:

W przypadku nowych przeglądarek (od 2018: Chrome, Firefox, Safari, Opera, Edge i większość przeglądarek mobilnych, ale nie IE) fetchjest to standardowy interfejs API, który upraszcza asynchroniczne wywołania sieciowe (do których potrzebowaliśmy XMLHttpRequestlub jQuery $.ajax).

Oto tradycyjna forma:

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

Jeśli otrzymałeś formularz taki jak powyższy (lub utworzyłeś go, ponieważ jest to semantyczny html), możesz opakować fetchkod w detektor zdarzeń, jak poniżej:

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

(Lub, jeśli tak jak oryginalny plakat chcesz wywołać go ręcznie bez zdarzenia przesyłania, po prostu umieść fetchtam kod i przekaż odwołanie do formelementu zamiast używać event.target).

Dokumenty:

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

Inne: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Ta strona w 2018 roku nie wspomina o pobieraniu (jeszcze). Ale wspomina, że ​​sztuczka target = "myIFrame" jest przestarzała. Zawiera również przykład form.addEventListener dla zdarzenia „submit”.

Nie jestem pewien, czy rozumiesz, co robi funkcja submit () ...

Kiedy to zrobisz, form1.submit();informacje z formularza są wysyłane do serwera WWW.

WebServer zrobi wszystko, co powinien i zwróci klientowi zupełnie nową stronę internetową (zwykle ta sama strona, na której coś się zmieniło).

Nie ma więc możliwości "złapania" powrotu akcji form.submit ().

Nie ma oddzwaniania. To jak podążanie za linkiem.

Jeśli chcesz przechwycić odpowiedź serwera, użyj AJAX lub opublikuj ją w ramce iframe i pobierz to, co pojawia się tam po onload()zdarzeniu iframe .

Możesz event.preventDefault()w module obsługi kliknięć przycisku przesyłania, aby upewnić się, że submitzdarzenie domyślne formularza HTML nie zostanie uruchomione (co prowadzi do odświeżenia strony).

Inną alternatywą byłoby użycie bardziej skomplikowanych znaczników formularza: jest to użycie <form>i type="submit"to przeszkadza tutaj w pożądanym zachowaniu; ponieważ ostatecznie prowadzą one do odświeżania strony przez zdarzenia kliknięcia.

Jeśli chcesz nadal korzystać <form>, a nie chcesz pisać zwyczaj kliknij teleskopowe, można użyć jQuery w ajaxsposób, który Abstracts całą problemu z dala dla ciebie wystawiając metod obietnica success, erroritp

Podsumowując, możesz rozwiązać swój problem:

• zapobieganie domyślnemu zachowaniu funkcji obsługi poprzez użycie event.preventDefault()

• używanie elementów, które nie mają domyślnego zachowania (np. <form>)

• przy użyciu jQuery ajax

(Właśnie zauważyłem, że to pytanie pochodzi z 2008 roku, nie wiem, dlaczego pojawiło się w moim kanale; w każdym razie mam nadzieję, że jest to jasna odpowiedź)

Oto mój kod do tego problemu:

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

Jeśli chcesz przechwycić dane wyjściowe żądania AJAX za pomocą przeglądarki Chrome, możesz wykonać następujące proste kroki:

1. Otwórz zestaw narzędzi programistów
2. Podejdź do konsoli i w dowolne miejsce w niej
3. W wyświetlonym menu kliknij „Włącz rejestrowanie żądań XMXHTTP”
4. Po wykonaniu tej czynności za każdym razem, gdy wysyłasz żądanie AJAX, w konsoli pojawi się komunikat zaczynający się od „XHR zakończono ładowanie: http: // ......”.
5. Kliknięcie w link, który się pojawi, spowoduje wyświetlenie zakładki „Zasoby”, gdzie możesz zobaczyć nagłówki i treść odpowiedzi!

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

Opierając się na odpowiedzi @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), zajmuję się błędami i sukcesami postów:

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

Używam this moja logika była wielokrotnego użytku, oczekuję, że HTML zostanie zwrócony po pomyślnym zakończeniu, więc renderuję go i zastępuję bieżącą stronę, aw moim przypadku oczekuję przekierowania na stronę logowania, jeśli sesja wygasła, więc Przechwytuję to przekierowanie, aby zachować stan strony.

Teraz użytkownicy mogą logować się za pośrednictwem innej karty i ponownie próbować przesłać.

Musisz używać AJAX. Wysłanie formularza zazwyczaj powoduje załadowanie nowej strony przez przeglądarkę.

Możesz to zrobić za pomocą technologii javascript i AJAX. Spójrz na jquery i dołącz do tego formularza . Wystarczy dołączyć dwa pliki js, aby zarejestrować wywołanie zwrotne dla formularza form.submit.

Możesz to osiągnąć za pomocą jQuery i ajax()metody:

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

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

Zablokować cytat

przede wszystkim użyj $ (document) .ready (function ()) wewnątrz tego use ('formid'). submit (function (event)), a następnie uniemożliwić domyślną akcję po wywołaniu formularza Ajax przesłanie $ .ajax ({,,, ,}); weźmie parametr, który możesz wybrać zgodnie z wymaganiami, a następnie wywołaj funkcję powodzenia: function (data) {// zrób, co chcesz, mój przykład umieści odpowiedź html na div}

Przede wszystkim będziemy potrzebować 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;
};

następnie piszesz podstawowy post i otrzymujesz odpowiedź

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

});

Mam następujący kod perfactly uruchomiony przy użyciu Ajax z wieloczęściowymi danymi formularza

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


    });


//

}

Możesz użyć jQuery.post () i zwrócić ładnie ustrukturyzowane odpowiedzi JSON z serwera. Umożliwia również weryfikację / oczyszczanie danych bezpośrednio na serwerze, co jest dobrą praktyką, ponieważ jest bezpieczniejsze (a nawet łatwiejsze) niż robienie tego na kliencie.

Na przykład, jeśli chcesz wysłać formularz html na serwer (do saveprofilechanges.php) z danymi użytkownika w celu prostej rejestracji:

I. Części klienta:

Część Ia HTML:

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

Część Ib Script:

$(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. Część serwerowa (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;
    }
}

możesz to zrobić bez Ajax.

napisz swoje polubienie poniżej.

.. .. ..

a następnie w „action.php”

następnie po frmLogin.submit ();

przeczytaj zmienną $ submit_return ..

$ submit_return zawiera zwracaną wartość.

powodzenia.