Tengo una forma simple de agregar un elemento a la base de datos construida con PHP. Yo uso el atributo html Requerido así:

<input type="text" name="iditem" required/>

Para evitar que el botón enviar envíe un valor en blanco a la base de datos.

También tengo javascript "onClick" en el botón de envío como este:

<input type="submit" onClick="return confirm('Add this item?')" />

Lo que quiero preguntar es ... ¿Cómo hacer que el atributo requerido se pueda ejecutar primero antes del botón de enviar ?

Gracias chicos...

1
Sandi Miftah 10 sep. 2018 a las 05:30

3 respuestas

La mejor respuesta

Puede usar el parámetro "onsubmit" en <form> y evitar el "onclick" en el botón de enviar:

<form action="test2.php" onsubmit="return confirm('Add this item?')" >
  <input type="text" required />
  <input type="submit" />
</form>
0
CertainPerformance 10 sep. 2018 a las 02:40

Un enfoque simple aquí es usar el simple JavaScript para hacer todo el trabajo pesado. Echemos un vistazo rápido.

Primero establecemos el formulario HTML

<!DOCTYPE html>
<html>
<body>

<form action="/" method="post" onsubmit="return validateForm();">
  Username: <input id="username" type="text" name="username">
  <input type="submit">
</form>

</body>
</html>

Ahora, preste atención a la directiva form que menciona method, action y onsubmit. Repasemos todos esos detalles parte por parte.

Estoy seguro de que es completamente consciente de lo que hacen method y action, pero para la parte onsubmit, está vinculado a una función de JavaScript llamada validateForm() que se define a continuación :

function validateForm() {
  var username = document.getElementById( 'username' ).value;
  if( !username ) {
    return false;
  } 

  return true;
}

Esta función obtiene el valor del elemento username en el formulario y devuelve false si está vacío, y true de lo contrario. Lo que esto hace es que le dice al evento que se activa para enviar el formulario a action usando el verbo method si el valor resultante fue true; si fue false, sin embargo, simplemente detiene la ejecución. Al igual que usamos la palabra clave return para romper el control actual.

Entonces, en cierto modo, se activa antes de su controlador onClick. De una manera muy sutil en el sentido de que no permitirá que el formulario se publique si la validación falla.

Ahora, por supuesto, puede editarlo para satisfacer sus necesidades simplemente agregando un diálogo confirm, ya que devolverá true si OK o YES se presiona y {{ X4}} de lo contrario. Pero esto debería darle un buen ejemplo de lo que puede hacer con el atributo onsubmit en particular, y los atributos de evento en general.

¡Espero que esto responda tu pregunta! Puede encontrar un violín aquí.

0
weirdpanda 10 sep. 2018 a las 05:29
<!DOCTYPE html>
<html>
<body>

<form action="">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

</body>
</html>
0
Rishabh Kushwaha 10 sep. 2018 a las 04:31