ejemplos - Formulario HTML hacer alguna "acción" cuando pulsa el botón enviar
form submit jquery (2)
Me gustaría aprender sobre los formularios HTML. Por ejemplo, tengo 2 campos de texto de entrada para el nombre y apellido y un botón de envío. Cuando se hace clic en el botón Enviar, me gustaría que la página web muestre algo como: Su nombre es "Nombre" "Apellido".
<!DOCTYPE html>
<html>
<body>
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
¿Qué necesito tener aquí para tener alguna "acción" cuando hago clic en ese botón?
Edición: Ok, ahora me doy cuenta de que necesito PHP o JavaScript aquí. ¿Alguien puede sugerir o proporcionar un código de muestra de PHP o Js como referencia para mí?
Ok, voy a tomar una puñalada en esto. Si desea trabajar con PHP, deberá instalar y configurar tanto PHP como un servidor web en su máquina. Este artículo puede ayudarlo a comenzar: Manual de PHP: Instalación en sistemas Windows
Una vez que haya configurado el entorno, puede comenzar a trabajar con formularios web. Directamente desde el artículo: Procesando datos de formulario con PHP :
Para este ejemplo necesitarás crear dos páginas. En la primera página crearemos un formulario HTML simple para recopilar algunos datos. Aquí hay un ejemplo:
<html> <head> <title>Test Page</title> </head> <body> <h2>Data Collection</h2><p> <form action="process.php" method="post"> <table> <tr> <td>Name:</td> <td><input type="text" name="Name"/></td> </tr> <tr> <td>Age:</td> <td><input type="text" name="Age"/></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit"/> </td> </tr> </table> </form> </body> </html>Esta página enviará los datos de Nombre y Edad a la página process.php. Ahora creamos process.php para usar los datos del formulario HTML que hicimos:
<?php
print "Your name is ". $Name;
print "<br />";
print "You are ". $Age . " years old";
print "<br />"; $old = 25 + $Age;
print "In 25 years you will be " . $old . " years old";
?>
Como debe saber, si omite el método = "publicar" parte del formulario, la URL muestra los datos. Por ejemplo, si su nombre es Bill Jones y tiene 35 años, nuestra página process.php se mostrará como http://yoursite.com/process.php?Name=Bill+Jones&Age=35 Si lo desea, puede cambiar manualmente La URL de esta manera y la salida cambiarán en consecuencia.
Ejemplo de JavaScript adicional
Este ejemplo de archivo único toma el html de su pregunta y vincula el evento onSubmit del formulario a una función de JavaScript que extrae los valores de los 2 cuadros de texto y los muestra en un cuadro de alerta.
Nota : document.getElementById("fname").value obtiene el objeto con la etiqueta de ID que es igual a fname y luego extrae su value , que en este caso es el texto del cuadro de texto First Name.
<html>
<head>
<script type="text/javascript">
function ExampleJS(){
var jFirst = document.getElementById("fname").value;
var jLast = document.getElementById("lname").value;
alert("Your name is: " + jFirst + " " + jLast);
}
</script>
</head>
<body>
<FORM NAME="myform" onSubmit="JavaScript:ExampleJS()">
First name: <input type="text" id="fname" name="firstname" /><br />
Last name: <input type="text" id="lname" name="lastname" /><br />
<input name="Submit" type="submit" value="Update" />
</FORM>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<body>
<form action="submit.php" method="POST">
First name: <input type="text" name="firstname" /><br /><br />
Last name: <input type="text" name="lastname" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Después de ese archivo más, la página que desea mostrar después de presionar el botón enviar
submit.php
<html>
<body>
Your First Name is - <?php echo $_POST["firstname"]; ?><br>
Your Last Name is - <?php echo $_POST["lastname"]; ?>
</body>
</html>