Como capturar a resposta do form.submit

130

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?

nmdr
fonte

Respostas:

110

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);
        }
    })
;
nickf
fonte
5
+1 para o plugin jQuery Form. É incrível, mas você errou no atributo 'target'. Não é como o atributo 'action' do formulário; ou seja, não é o destino de envio. Dos documentos : target - identifica o (s) elemento (s) na página a ser atualizada com a resposta do servidor.
JCotton
39
para ser justo, você NÃO PRECISA usar uma biblioteca para o AJAX. bibliotecas são escritas usando javascript, portanto, existe uma solução que não é de biblioteca. Dito isto, sou 100% a favor do uso de uma biblioteca para abstrair todo o ridículo e complexidade envolvidos em fazer uma chamada AJAX.
Jason
3
Estou postando este comentário mais como um FYI de que a solução acima funciona, exceto quando se trata de Uploads de arquivos via AJAX no IE 9 e abaixo. Eu tive problemas ao enviar arquivos via ajax em navegadores não HTML5 IE (IE 9 e abaixo), por isso devo usar um truque de iframe. Mas o uso do iframe hack requer o formulário.submit (), mas você não pode esperar por uma resposta para dizer se foi bem-sucedida ou não. Isso me deixou em um dilema.
Javaauthority
17
Usar uma biblioteca realmente não vale a pena aqui. Em JS puro o código não é muito mais complicado:var xhr = new XMLHttpRequest() xhr.open("POST", "myscript.php"); xhr.onload=function(event){ alert("The server says: " + event.target.response); }; var formData = new FormData(document.getElementById("myForm")); xhr.send(formData);
12Me21
59

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.

Ates Goral
fonte
4
Diga se você deseja postar em um URL para download por meio de um clique no botão? Agora você não pode usar o Ajax para sua solicitação. Deseja limpar ou atualizar a interface quando o download estiver concluído? Agora é hora de desejar um retorno de chamada de um POST que não seja Ajax. (Necropost, eu sei.)
AlbertEngelB
2
@ Dropped.on.Caprica Sim, esse ainda é um caso de uso legítimo para <iframe>POSTs (com retorno de chamada para parent). Para downloads e uploads tanto ...
Ates Goral
1
Também, tanto quanto sei para qualquer pessoa que precise de compatibilidade com versões mais antigas do IE (7+), tenho certeza de que o método iframe é o único caminho a percorrer. Corrija-me se estiver errado, porque neste momento estou tendo esse problema.
CoffeeIsProgramming
1
Para detectar o sucesso de um download, um truque interessante que aprendi recentemente é definir um cookie na resposta do download e pesquisar a existência desse cookie no navegador.
Ates Goral
3
Observe que isso só funcionará se a ação de envio do formulário estiver no mesmo site que o iframe. Caso contrário, a política de mesma origem o bloqueará.
TechnoSam
37

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.

rogerdpack
fonte
8
Na verdade, esta é a resposta correta! Porque todas as outras respostas fazem exatamente o mesmo, mas ofuscadas por mais uma camada de bibliotecas.
johnfound
Parece exatamente o que eu preciso, pois já tenho um arquivo PHP que está lidando com muitos XMLHttpRequest () s diretos na minha página. Mas, no caso de um formulário simples, com as tags <form action = "/mysite/mycode.php"> e <submit>, não tenho certeza de como modificar. Substituiria minhas chamadas javascript updprequest (com um retorno de chamada) como em: <form action = "myhttpreq (" url, etc ...)? ou talvez <form action = "#" onsubmit = "return myhttpfunction ()? Algo assim? Se é assim tão fácil, essa definitivamente deve ser a resposta. Mas estou um pouco confuso sobre como configurá-lo.
Randy
1
@Randy No meu caso eu tinha um botão no interior da forma como este <input type='button' onclick="submitForm(); return false;">ou você pode adicionar um ouvinte de eventos para o evento 'enviar' como resposta Marcus': stackoverflow.com/a/51730069/32453
rogerdpack
31

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;
});
rajesh_kw
fonte
4
Você pode querer event.preventDefault();( event= primeiro argumento da função de envio) em vez de return false. Retornar false não apenas impedirá o navegador de enviar o formulário, mas também impedirá que outros efeitos colaterais possam ser importantes. Não são lotes de perguntas relacionadas a este.
Nate
1
bem, sim, retorne false ou preventDefault ou stopPropogation com base nas necessidades.
rajesh_kw
1
Pode ser necessário usar FormData($("myform")[0])se você estiver tentando um tipo de entrada = upload de arquivo.
Aaron Hoffman
1
Para ser um pouco mais genérico, você pode usar event.target.actione em $(event.target).serialize()vez de $('#form').attr('action')e $('#form').serialize().
Lie Ryan
16

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

Marcus
fonte
10

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 ().

Sergio
fonte
Criei outra página html e retornei isso como resposta.
Khushboo
6

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 .

Diodeus - James MacFarlane
fonte
2

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)

Benny
fonte
2

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>
xchangcheng
fonte
1

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!
Panagiotis Spiliotis
fonte
1
    $.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
        }
    });
Kamal Kishor
fonte
1

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.

Nate
fonte
0

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

esplêndido
fonte
0

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.

kgiannakakis
fonte
0

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>

user5435345
fonte
0
 $(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}

YogeshBagdawat
fonte
0

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
}

});
Euforia
fonte
0

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


    });


//

}
gajera bhavin
fonte
0

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;
    }
}
Vlado
fonte
-5

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.

annih
fonte