Envío de la función del botón de formulario: volver al estado inicial después de un envío fallido

Mi formulario de pedido tiene los campos de nombre, correo electrónico y dirección para que los usuarios los completen. Cuando ingresan la información y envían el pedido, he animado la parte inferior de la imagen del botón, de modo que cuando lo presionan saben que está "procesando" el pedido, porque muchas veces sin él hacen clic en el botón dos veces.

Pero descubrí que si dejo los campos del formulario en blanco y hago clic en el botón de pedido, cambia la posición de la imagen del botón al estado "por favor espere", pero siempre permanece en ese estado.

¿Hay alguna manera de hacer que el botón vuelva a su posición original cuando el formulario no se completa correctamente?

Esta es la pagina

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylecss" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function submit_load() {
document.getElementById('submit').style.backgroundPosition = "0px -100px";
document.getElementById('submit').style.cursor = "default";
}
function submit_order() {
document.getElementById('submit').style.backgroundPosition = "0px 0px";
document.getElementById('submit').style.cursor = "pointer";
}
</script>
</head>
<body>
<div id="content2">
<form action="order.php" method="post" id="order" target="orderformx">
<p>Name: *</p>
                <p>
                  <label>
                  <input name="name" type="text" class="oi" id="name" />
                  </label>
                </p>

<p>Email: *</p>
                <p>
                  <label>
                  <input name="email" type="text" class="oi" id="email" />
                  </label>
                </p>

<p>Address: *</p>
                <p>
                  <label>
                  <input name="address" type="text" class="oi" id="address" />
                  </label>
                </p>
<p><input type="submit" value="" id="submit" onclick="submit_load()" name="submit" class="button" /></p>
</div>
</body>
</html>

preguntado el 27 de julio de 12 a las 16:07

1 Respuestas

en realidad está enviando su formulario al target="orderformx" especificado en la etiqueta de su formulario, por lo que su página nunca se actualizará al hacer clic en enviar, ya que la respuesta a su solicitud será para su objetivo. prueba esto,

en el atributo onclick para su botón de envío, pase el evento a la llamada de función.

<input type="submit" value="" id="submit" onclick="submit_load(event)" name="submit" class="button" />

en tu javascript:

function submit_load(e) {
  var event = e || window.event; // for IE
  // add javascript validation here
  if (valid) {
    document.getElementById('submit').style.backgroundPosition = "0px -100px";
    document.getElementById('submit').style.cursor = "default";
  } else {
    event.stopPropagation();
    event.preventDefault();
  }
}

Respondido 27 Jul 12, 16:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.