¿Cómo capturo la respuesta de form.submit?
https://stackoverflow.com/questions/374644
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo el siguiente código:
<script type="text/javascript">
function SubmitForm()
{
form1.submit();
}
function ShowResponse()
{
}
</script>
.
.
.
<div>
<a href="#" onclick="SubmitForm();">Click</a>
</div>
Quiero capturar la respuesta html de form1.submit?¿Cómo hago esto?¿Puedo registrar cualquier función de devolución de llamada en el método form1.submit?
Solución
Usted no será capaz de hacer esto fácilmente con javascript sin formato. Al publicar un formulario, las entradas de formulario se envían al servidor y la página se actualiza - los datos se manejan en el lado del servidor. Es decir, la función submit() no vuelven en realidad nada, sólo envía los datos del formulario al servidor.
Si realmente quería obtener la respuesta en Javascript (sin la página refrescante), entonces usted tendrá que utilizar AJAX, y cuando se empieza a hablar sobre el uso de AJAX, podrás necesidad a utilizar una biblioteca. jQuery es, con mucho, el más popular, y mi favorito personal. Hay un gran plugin para jQuery llamado Formulario rel="noreferrer"> que hacer exactamente lo que suena desea.
Así es como tendría que utilizar jQuery y que plugin:
$('#myForm')
.ajaxForm({
url : 'myscript.php', // or whatever
dataType : 'json',
success : function (response) {
alert("The server says: " + response);
}
})
;
Otros consejos
Una alternativa Ajax es establecer un <iframe> invisible como objetivo de su forma y leer el contenido de ese <iframe> en su controlador onload. Pero ¿por qué molestarse cuando hay Ajax?
Nota:. Sólo quería mencionar esta alternativa ya que algunas de las respuestas afirman que es imposible para lograr esto sin Ajax
Lo estoy haciendo de esta manera y su trabajo.
$('#form').submit(function(){
$.ajax({
url: $('#form').attr('action'),
type: 'POST',
data : $('#form').serialize(),
success: function(){
console.log('form submitted.');
}
});
return false;
});
La forma que no es jQuery, extraída del comentario 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);
Para POSTEl tipo de contenido predeterminado es "application/x-www-form-urlencoded", que coincide con lo que enviamos en el fragmento anterior.Si desea enviar "otras cosas" o modificarlas de alguna manera, consulte aquí para algunos detalles esenciales.
No estoy seguro de que usted entiende lo submit () hace ...
Al hacer form1.submit(); la información del formulario se envía al servidor web.
El servidor web hará lo que su supone que debe hacer y devolver una nueva página web para el cliente (por lo general la misma página con algo cambiado).
Por lo tanto, no hay manera de que pueda "atrapar" el retorno de una acción form.submit ().
Los futuros buscadores de Internet:
Para los nuevos navegadores (a partir de 2018: Chrome, Firefox, Safari, Opera, Edge, y la mayoría de los navegadores móviles, pero no IE), fetch es una API estándar que simplifica las llamadas de red asíncronos (para y que usamos para necesitar XMLHttpRequest o $.ajax de jQuery).
Esta es una forma tradicional:
<form id="myFormId" action="/api/process/form" method="post">
<!-- form fields here -->
<button type="submit">SubmitAction</button>
</form>
Si un formulario como el de arriba es entregado a usted (o lo creó porque es semántica HTML), a continuación, se puede envolver el código fetch en un detector de eventos de la siguiente manera:
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
});
});
(O bien, si como el cartel original que desea llamar de forma manual y sin presentar un evento, sólo hay que poner el código fetch allí y pasar una referencia al elemento form en lugar de utilizar event.target.)
Docs:
Fetch: https://developer.mozilla.org/en-US/docs/Web / API / Fetch_API
Otros: https://developer.mozilla.org/en-US/docs / Aprender / HTML / Formas / Sending_forms_through_JavaScript Esa página en 2018 no menciona fetch (todavía). Pero menciona que el target = truco "myIFrame" está en desuso. Y también tiene un ejemplo de form.addEventListener para el evento 'enviar'.
No hay devolución de llamada. Es como seguir un enlace.
Si desea capturar la respuesta del servidor, utilizar AJAX o publicarla en un iframe y agarrar lo que aparece allí después del evento onload() del marco flotante.
Puede event.preventDefault() en el controlador de clic para el botón de enviar para asegurar que el evento predeterminado submit formulario HTML no se dispara (que es lo que lleva a la página refrescante).
Otra alternativa sería utilizar hackier forma de marcado: Es el uso de <form> y type="submit" que está recibiendo en el camino de la conducta deseada aquí; ya que en última instancia conducir a eventos click actualizar la página.
Si desea seguir utilizando <form>, y no desea escribir encargo clic manipuladores, puede utilizar el método ajax de jQuery, que abstrae todo el problema de distancia para usted, se exponen métodos prometedores para success, error, etc.
En resumen, puede resolver su problema de dos formas:
• prevenir el comportamiento por defecto en la función de manejo mediante el uso de event.preventDefault()
• utilizando elementos que no tienen comportamiento por defecto (por ejemplo <form>)
• usando jQuery ajax
(i di cuenta de esta pregunta es a partir de 2008, no sé por qué se presentó en mi alimentación, en todo caso, espero que esto es una respuesta clara)
$.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
}
});
Este es mi 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>
En caso de que quiera capturar el resultado de una petición AJAX usando Chrome puede seguir estos sencillos pasos:
- Abre la caja de herramientas de programadores
- Ir a la consola y el derecho en cualquier lugar dentro de él
- En el menú que aparece, haga clic en "Activar XMXHTTPRequest registro"
- Después de hacer que cada vez que realice una petición AJAX un mensaje que empieza con "XHR carga final: http: // ......". Aparecerán en la consola
- Al hacer clic en el enlace que aparece, traerá la pestaña "Recursos", donde su puede ver los encabezados y el contenido de la respuesta!
Sobre la base de la respuesta por @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), yo manejo forma de errores de correos y el éxito:
$('#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 : ''));
}
});
});
hago uso de this para que mi lógica es reutilizable, espero HTML para ser devuelto en un éxito por lo que la hacen y vuelva a colocar la página actual, y en mi caso espero una redirección a la página de inicio de sesión si la sesión es Tiempo de espera agotado, por lo que la intercepción que redirigir el fin de preservar el estado de la página.
Ahora los usuarios pueden acceder a través de otra ficha y probar su someter de nuevo.
Es necesario estar usando AJAX. Enviar el formulario por lo general resulta en el navegador cargar una nueva página.
Puede hacer que el uso de JavaScript y la tecnología AJAX. Echar un vistazo a jQuery y en este en . Sólo tiene que incluir dos archivos js para registrar una devolución de llamada para el form.submit.
Esto se puede hacer usando jQuery y la método ajax() :
<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();
}
});
});
});
cita en bloque
firrst del uso total de $ (document) ready (function ()) dentro de este uso ( 'formid'). Submit (function (event)) y luego impedir la acción por defecto aftyer esa forma llamada AJAX presentación $ .Ajax ({,,,,}); que tomará el parámetro u puede elegir de acuerdo a sus necesidades a continuación, llamar ACONFIG éxito: function (datos) { // hacer lo que quiera mi ejemplo para poner en html respuesta div}
En primer lugar necesitaremos 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;
};
luego haces una publicación básica y obtienes respuesta
$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true
}
else
{
//do false
}
});
He siguiente código perfactly ejecuta utilizando AJAX con los datos del formulario de varias 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!");
}
});
//
}
Puede utilizar jQuery.post () y devolver respuestas JSON muy bien estructurados desde el servidor . También le permite validar / desinfectar sus datos directamente en el servidor, lo que es una buena práctica porque es más seguro (y aún más fácil) que haciendo esto en el cliente.
Por ejemplo, si usted necesita para enviar formulario HTML al servidor (a saveprofilechanges.php) con datos de usuario para el registro simple:
I. partes de cliente:
I.A. HTML parte:
<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. Guión parte:
$(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 Server (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;
}
}
se puede hacer eso sin ajax.
escribir tu como a continuación.
.. .. ..
y luego en "action.php"
a continuación, después frmLogin.submit ();
leer $ submit_return variables ..
$ submit_return contiene el valor de retorno.
buena suerte.
