Como capturar a resposta do form.submit

Eu tenho o seguinte código:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

Quero capturar a resposta html de form1.submit? Como eu faço isso? Posso registrar qualquer função de retorno de chamada no método form1.submit?

Você não poderá fazer isso facilmente com javascript comum. Quando você publica um formulário, as entradas do formulário são enviadas ao servidor e sua página é atualizada - os dados são tratados no lado do servidor. Ou seja, a submit()função realmente não retorna nada, apenas envia os dados do formulário para o servidor.

Se você realmente deseja obter a resposta em Javascript (sem a atualização da página), precisará usar o AJAX e, quando começar a falar sobre o uso do AJAX, precisará usar uma biblioteca. O jQuery é de longe o mais popular e o meu favorito. Existe um ótimo plugin para jQuery chamado Form, que fará exatamente o que parece desejado.

Aqui está como você usaria o jQuery e esse plugin:

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

Uma alternativa do Ajax é definir um invisível <iframe>como o destino do seu formulário e ler o conteúdo dele <iframe>em seu onloadmanipulador. Mas por que se preocupar quando há Ajax?

Nota: Eu só queria mencionar essa alternativa, já que algumas das respostas afirmam que é impossível conseguir isso sem o Ajax.

A maneira Javascript não-jQuery de baunilha, extraída do comentário de 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);

For POSTé o tipo de conteúdo padrão "application / x-www-form-urlencoded", que corresponde ao que estamos enviando no snippet acima. Se você deseja enviar "outras coisas" ou ajustá-lo de alguma forma, veja aqui alguns detalhes detalhados.

Estou fazendo assim e está funcionando.

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

Futuros pesquisadores da Internet:

Para novos navegadores (a partir de 2018: Chrome, Firefox, Safari, Opera, Edge e a maioria dos navegadores móveis, mas não o IE), fetché uma API padrão que simplifica as chamadas de rede assíncronas (para as quais costumávamos precisar XMLHttpRequestou jQuery $.ajax).

Aqui está uma forma tradicional:

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

Se um formulário como o acima foi entregue a você (ou você o criou por ser um html semântico), você pode agrupar o fetchcódigo em um ouvinte de evento, como abaixo:

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

(Ou, como no pôster original que você deseja chamá-lo manualmente sem um evento de envio, basta colocar o fetchcódigo lá e passar uma referência ao formelemento em vez de usá-lo event.target.)

Documentos:

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

Outro: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Essa página em 2018 não menciona a busca (ainda). Mas menciona que o truque target = "myIFrame" está obsoleto. E também tem um exemplo de form.addEventListener para o evento 'submit'.

Não tenho certeza de que você entende o que submit () faz ...

Quando você faz form1.submit();o formulário, as informações são enviadas ao servidor da web.

O servidor da Web fará o que é suposto e devolverá uma nova página da Web ao cliente (geralmente a mesma página com algo alterado).

Portanto, não há como "capturar" o retorno de uma ação form.submit ().

Não há retorno de chamada. É como seguir um link.

Se você deseja capturar a resposta do servidor, use AJAX ou publique-a em um Iframe e pegue o que aparece após o onload()evento do iframe .

Você pode event.preventDefault()no manipulador de cliques do botão enviar para garantir que o submitevento padrão do formulário HTML não seja acionado (que é o que leva à atualização da página).

Outra alternativa seria usar a marcação de forma mais hackeada: é o uso de <form>e type="submit"isso está atrapalhando o comportamento desejado aqui; pois, em última análise, isso leva a eventos de clique que atualizam a página.

Se você quiser ainda usar <form>, e você não quer escrever costume clique manipuladores, você pode usar jQuery ajaxmétodo, que abstrai todo o problema afastado para você, expondo métodos promessa para success, error, etc.

Para recapitular, você pode resolver seu problema:

• impedir o comportamento padrão na função de manipulação usando event.preventDefault()

• usar elementos que não têm comportamento padrão (por exemplo <form>)

• usando jQuery ajax

(Acabei de perceber que esta pergunta é de 2008, não sei por que ela apareceu no meu feed; de qualquer forma, espero que seja uma resposta clara)

Este é o meu código para este problema:

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

Caso você queira capturar a saída de uma solicitação AJAX usando o Chrome, siga estas etapas simples:

1. Abra a caixa de ferramentas Programadores
2. Vá para o console e em qualquer lugar dentro dele
3. No menu exibido, clique em "Ativar log XMXHTTPRequest"
4. Depois de fazer isso sempre que você fizer uma solicitação AJAX, uma mensagem começando com "XHR terminou de carregar: http: // ......" será exibida no seu console.
5. Ao clicar no link exibido, será exibida a "guia Recursos", onde você poderá ver os cabeçalhos e o conteúdo da resposta!

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

Com base na resposta de @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), eu manejo erros e êxito de publicação de formulário:

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

Faço uso de thismodo que minha lógica seja reutilizável, espero que o HTML seja retornado com êxito, por isso renderizo e substituo a página atual e, no meu caso, espero um redirecionamento para a página de login se a sessão expirar, portanto Intercepto esse redirecionamento para preservar o estado da página.

Agora, os usuários podem fazer login através de outra guia e tentar enviar novamente.

Você precisa estar usando AJAX. O envio do formulário geralmente resulta no carregamento de uma nova página pelo navegador.

Você pode fazer isso usando javascript e tecnologia AJAX. Dê uma olhada no jquery e, neste formulário, conecte-o . Você só precisa incluir dois arquivos js para registrar um retorno de chamada para o formulário.submit.

Você pode fazer isso usando jQuery e o ajax()método:

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

Bloco de citação

Antes de tudo, use $ (document) .ready (function ()) dentro deste use ('formid'). submit (function (event)) e evite a ação padrão depois que chama o envio de formulário ajax $ .ajax ({,, ,}); será necessário o parâmetro que você pode escolher de acordo com sua exigência e chamar a função de sucesso: function (data) {// faça o que você quiser que meu exemplo coloque a resposta em div}

Primeiro de tudo, precisaremos 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;
};

então você faz uma postagem básica e obtém resposta

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

});

Eu tenho o seguinte código executado perfeitamente usando ajax com dados de formulário de várias partes

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


    });


//

}

Você pode usar jQuery.post () e retornar respostas JSON bem estruturadas do servidor. Também permite validar / higienizar seus dados diretamente no servidor, o que é uma boa prática porque é mais seguro (e até mais fácil) do que fazer isso no cliente.

Por exemplo, se você precisar postar um formulário html no servidor (para saveprofilechanges.php) com dados do usuário para um registro simples:

I. Peças do cliente:

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

Parte do script Ib:

$(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 Parte do servidor (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;
    }
}

você pode fazer isso sem ajax.

escreva seu like abaixo.

.. .. ..

e depois em "action.php"

depois de frmLogin.submit ();

leia a variável $ submit_return ..

$ submit_return contém valor de retorno.

boa sorte.