Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » AJAX » Formularios

AJAX - Formularios

Volver
Nuevo Tema
<<>>
 
Vista:

Formularios

Publicado por Aritz (32 intervenciones) el 07/12/2006 10:35:38
Quiero tener anidados 2 formularios, es decir hacer algo como lo siguiente:

<input type="radio" name="nombre1" value="valor1">
<form id="opciones">
<input name="opcion1">
<input name="opcion2">
</form>
<input type="radio" name="nombre1" value="valor1">
........Se repetiría el código.....

Entonces al hacer SUBMIT, con el evento onClick quiero que me pase el valor del nombre seleccionado en el test radiobutton y los valores del las dos opciones.

Gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro

Anidación de formularios y recolección de datos

Publicado por Alejandro (17 intervenciones) el 27/02/2024 17:32:24
Aritz, para implementar la anidación de formularios y recopilar los datos seleccionados al hacer clic en un botón, puedes utilizar JavaScript junto con AJAX. Aquí tienes un ejemplo básico:

1. HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX - Anidación de Formularios</title>
</head>
<body>
 
  <form id="form1">
    <input type="radio" name="nombre" value="valor1">
    <label>Opción 1</label>
    <form id="opciones">
      <input name="opcion1" placeholder="Opción 1">
      <input name="opcion2" placeholder="Opción 2">
    </form>
 
    <input type="radio" name="nombre" value="valor2">
    <label>Opción 2</label>
    <!-- Repite el código para más opciones -->
 
    <button type="button" onclick="enviarDatos()">Enviar</button>
  </form>
 
  <script src="tu_archivo_js.js"></script>
</body>
</html>

2. JavaScript (tu_archivo_js.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function enviarDatos() {
  // Recopilar datos del formulario
  var formData = new FormData(document.getElementById('form1'));
 
  // Realizar una solicitud AJAX
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'tu_servidor.php', true);
 
  // Configurar el evento de carga
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 400) {
      // Éxito en la solicitud
      console.log(xhr.responseText);
    } else {
      // Error en la solicitud
      console.error("Error en la solicitud AJAX");
    }
  };
 
  // Manejar errores de red
  xhr.onerror = function() {
    console.error("Error de red al realizar la solicitud AJAX");
  };
 
  // Enviar la solicitud con los datos del formulario
  xhr.send(formData);
}

3. PHP (tu_servidor.php):

En el archivo PHP en tu servidor, puedes procesar los datos recibidos:

1
2
3
4
5
6
7
8
9
10
11
<?php
// Obtener datos del formulario
$nombre = $_POST['nombre'];
$opcion1 = $_POST['opcion1'];
$opcion2 = $_POST['opcion2'];
 
// Puedes realizar acciones adicionales con los datos recibidos
 
// Enviar una respuesta (puede ser un mensaje de éxito, error, etc.)
echo "Datos recibidos: Nombre=$nombre, Opción 1=$opcion1, Opción 2=$opcion2";
?>

Este es un ejemplo básico y puede necesitar ajustes según tus necesidades específicas. Asegúrate de adaptar el código según la lógica de tu aplicación y las acciones que deseas realizar con los datos recopilados.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar