Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Agregar input radio a un formulario y que funcione envío

Estas en el tema de Agregar input radio a un formulario y que funcione envío en el foro de Frameworks JS en Foros del Web. Hola a todos como andan? Estaba armando el sitio para una empresa, y en la sección contacto estaba implementando un formulario que encontré en la ...
  #1 (permalink)  
Antiguo 09/02/2010, 18:03
 
Fecha de Ingreso: febrero-2009
Mensajes: 193
Antigüedad: 15 años, 9 meses
Puntos: 3
Agregar input radio a un formulario y que funcione envío

Hola a todos como andan?

Estaba armando el sitio para una empresa, y en la sección contacto estaba implementando un formulario que encontré en la web que utiliza jquery.

Esta es la página del formulario:

http://net.tutsplus.com/javascript-a...-using-jquery/

Y este es el demo:

http://net.tutsplus.com/demos/contactform/demo.zip

Lo único que me gustaría agregarle al formulario, son dos input para elegir el destinatario del formulario, es decir, que si al seleccionar el input radio 1 se envie al email 1 y si selecciono el input radio 2 lo envie a la direccion 2 (esto es por que la empresa tiene 2 divisiones diferentes).

Se puede hacer esto? Alguien me podría dar una mano por favor, ya intenté de mil maneras diferentes y no lo logré hacer, mis conocimientos de php son muy básicos..

Muchas gracias!
Saludos,
Margancia
  #2 (permalink)  
Antiguo 09/02/2010, 18:20
Avatar de luis010182  
Fecha de Ingreso: julio-2009
Ubicación: Argentina - Capital Federal
Mensajes: 382
Antigüedad: 15 años, 4 meses
Puntos: 27
Respuesta: Agregar input radio a un formulario y que funcione envío

Proba con editar el archivo js/tutorial.js deberias sacar la validacion del email pero no la asignacion de variable.
Y en el form le podrias poner un select con las opciones de las secciones de la empresa y el value los email.

ANTES
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
DEPUES
var email = $("#email").val();

HTML
<select name="email" id="email" >
<option value="[email protected]">Seccion A</option>
<option value="[email protected]">Seccion B</option>
</select>

-----------

espero que te sirva.
  #3 (permalink)  
Antiguo 09/02/2010, 20:11
 
Fecha de Ingreso: febrero-2009
Mensajes: 193
Antigüedad: 15 años, 9 meses
Puntos: 3
Respuesta: Agregar input radio a un formulario y que funcione envío

Hola luis010182, lo probé y no funciona, de todas maneras muchas gracias por tu ayuda...
  #4 (permalink)  
Antiguo 09/02/2010, 20:46
Avatar de jpinedo
Colaborador
 
Fecha de Ingreso: septiembre-2003
Ubicación: Lima, Perú
Mensajes: 3.120
Antigüedad: 21 años, 1 mes
Puntos: 41
Respuesta: Agregar input radio a un formulario y que funcione envío

Tema movido desde PHP a Javascript>Frameworks.
  #5 (permalink)  
Antiguo 09/02/2010, 21:14
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Agregar input radio a un formulario y que funcione envío

Si, se puede. Agrega el html. Luego agregas una comprobación desde jquery para saber si está chequeado o no. Pero... a mi parecer lo mejor es manejar esto del lado servidor.

En fin, no lo pienses desde el lado cliente. Es mas simple resolverlo directamente desde el lado servidor.
  #6 (permalink)  
Antiguo 10/02/2010, 05:06
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: Agregar input radio a un formulario y que funcione envío

Cita:
Iniciado por margancia Ver Mensaje
Hola luis010182, lo probé y no funciona, de todas maneras muchas gracias por tu ayuda...
No funciona qué? eso esta bien y es la idea, es difícil solucionar algo solo si dicen "no funciona"

igual si querés 2 botones de opción agregas las opciones al form

en vez del input
Código HTML:
<input type="text" name="email" id="email" size="30" value="" class="text-input" /> 
agregas

Código HTML:
 <input type="radio" name="email" value="[email protected]" />
    <input type="radio" name="email" value="[email protected]" /> 
y en el archivo tutorial.js reemplazá la linea

Código HTML:
var email = $("input#email").val();
por

Código HTML:
var email = $('input[name=email]:checked').val();
y borrá
Código HTML:
 $("input#email").focus();
  #7 (permalink)  
Antiguo 10/02/2010, 07:39
 
Fecha de Ingreso: febrero-2009
Mensajes: 193
Antigüedad: 15 años, 9 meses
Puntos: 3
Respuesta: Agregar input radio a un formulario y que funcione envío

Muchas gracias por tu respuesta Dany_s, probé lo que me dijiste y logré hacerlo andar, pero un par de veces no llegó el email, hice bien el código o tuve algún error?

También si no se hace click en ninguno de los dos input radio se envia igual y no hay ningun tipo de validacion...

HTML:
Código HTML:
<div id="contact_form">
  <form name="contact" method="post" action="">
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">This field is required.</label>
      
      <label for="emaildestinatario" id="emaildestinatario_label">Return Email</label>
          <input type="radio" name="emaildestinatario" value="[email protected]" />
    <input type="radio" name="emaildestinatario" value="[email protected]" />
      <label class="error" for="emaildestinatario" id="emaildestinatario_error">This field is required.</label>
      
      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
      <label class="error" for="phone" id="phone_error">This field is required.</label>
      
    	<br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </fieldset>
  </form>
</div> 

TUTORIAL.JS:
Código:
$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {
		// validate and process form
		// first hide any error messages
    $('.error').hide();
		
	  var name = $("input#name").val();
		if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
var emaildestinatario = $('input[name=emaildestinatario]:checked').val();
		if (emaildestinatario == "") {
      $("label#emaildestinatario_error").show();
      return false;
    }
		var phone = $("input#phone").val();
		if (phone == "") {
      $("label#phone_error").show();
      $("input#phone").focus();
      return false;
    }
		
		var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&emaildestinatario=' + emaildestinatario;
		//alert (dataString);return false;
		
		$.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
	});
});
runOnLoad(function(){
  $("input#name").select().focus();
});

PROCESS.PHP
Código:
<?php
if ((isset($_POST['name'])) && (strlen(trim($_POST['name'])) > 0)) {
	$name = stripslashes(strip_tags($_POST['name']));
} else {$name = 'No name entered';}
if ((isset($_POST['emailemaildestinatario'])) && (strlen(trim($_POST['emailemaildestinatario'])) > 0)) {
	$emailemaildestinatario = stripslashes(strip_tags($_POST['emailemaildestinatario']));
} else {$emailemaildestinatario = 'No emaildestinatario entered';}
if ((isset($_POST['phone'])) && (strlen(trim($_POST['phone'])) > 0)) {
	$phone = stripslashes(strip_tags($_POST['phone']));
} else {$phone = 'No phone entered';}
ob_start();
?>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table width="550" border="1" cellspacing="2" cellpadding="2">
  <tr bgcolor="#eeffee">
    <td>Name</td>
    <td><?=$name;?></td>
  </tr>
  <tr bgcolor="#eeeeff">
    <td>Email</td>
    <td><?=$email;?></td>
  </tr>
  <tr bgcolor="#eeffee">
    <td>Phone</td>
    <td><?=$phone;?></td>
  </tr>
</table>
</body>
</html>
<?
$body = ob_get_contents();

$to = '$emaildestinatario';
$email = '$emaildestinatario';
$fromaddress = "[email protected]";
$fromname = "Online Contact";

require("phpmailer.php");

$mail = new PHPMailer();

$mail->From     = "[email protected]";
$mail->FromName = "Contact Form";
$mail->AddAddress("$emaildestinatario","Name 1");
$mail->AddAddress("$emaildestinatario","Name 2");

$mail->WordWrap = 50;
$mail->IsHTML(true);

$mail->Subject  =  "Demo Form:  Contact form submitted";
$mail->Body     =  $body;
$mail->AltBody  =  "This is the text-only body";

if(!$mail->Send()) {
	$recipient = '$emaildestinatario';
	$subject = 'Contact form failed';
	$content = $body;	
  mail($recipient, $subject, $content, "From: $emaildestinatario\r\nReply-To: $email\r\nX-Mailer: DT_formmail");
  exit;
}
?>

Muchas gracias por todo a todos!
Saludos,
Margancia
  #8 (permalink)  
Antiguo 10/02/2010, 07:59
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: Agregar input radio a un formulario y que funcione envío

cambiá
Código HTML:
if (emaildestinatario == "") {
por
Código HTML:
if (emaildestinatario == undefined) {

te faltó eliminar la variable email en la concatenacion de dataString
tiene que quedar asi:
Código HTML:
var dataString = 'name='+ name + '&phone=' + phone + '&emaildestinatario=' + emaildestinatario;

y no sé lo que hace
Código HTML:
runOnLoad(function(){
  $("input#name").select().focus();
});
capaz te conviene ponerlo despues de ready
  #9 (permalink)  
Antiguo 10/02/2010, 08:07
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Agregar input radio a un formulario y que funcione envío

Cita:
pero un par de veces no llegó el email
No llego la variable o no llego el email? Si PHP no manda un email puede ser un problema de servidor.

En cuanto a :checked en jquery, leete esto:
http://api.jquery.com/checked-selector/

Podes hacer una comprobación:
Cita:
var n = $("input:checked").length;
if (n==0 or n==2) { // no hacemos nada
}
Si no hay ninguno marcado, o dos marcados, no enviamos nada.

nota: ahora entendí por qué querías validar del lado cliente :)
  #10 (permalink)  
Antiguo 10/02/2010, 08:21
 
Fecha de Ingreso: febrero-2009
Mensajes: 193
Antigüedad: 15 años, 9 meses
Puntos: 3
Respuesta: Agregar input radio a un formulario y que funcione envío

Muchas gracias Dany_s y mayid por sus respuestas.

Al final los emails llegaron pero un poco más tarde que los otros, pero no hay problema, llegaron todos.

Cita:
por
Código HTML:

if (emaildestinatario == undefined) {

Dany_s, ahora valida el input radio perfectamente, pero el email nunca llega..por que puede ser?

Gracias por todo!
  #11 (permalink)  
Antiguo 10/02/2010, 08:34
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Agregar input radio a un formulario y que funcione envío

Ojo: que pasaría si estuvieran los dos checkbox marcados? Fijense que estamos usando el mismo "name", y que entonces PHP recibiría solo el último marcado, sobreescribiendo el primero (creo).
Cita:
<input type="radio" name="email" value="[email protected]" />
<input type="radio" name="email" value="[email protected]" />
Insisto en algo así:
Cita:
var n = $("input:checked").length;
if (n==0 or n==2) {
// lo que fuere
}
Tema aparte, un aporte: el dataString puede manejarse con .serialize() . No?

Cita:
var dataString = 'name='+ name + '&phone=' + phone + '&emaildestinatario=' + emaildestinatario;
Cita:
$('#contact_form form').serialize();
http://api.jquery.com/serialize/
  #12 (permalink)  
Antiguo 10/02/2010, 08:38
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: Agregar input radio a un formulario y que funcione envío

Cita:
Iniciado por mayid Ver Mensaje
Ojo: que pasaría si estuvieran los dos checkbox marcados?
no son checkbox, son radio y no puede haber 2 marcados con el mismo name

Cita:
Tema aparte, un aporte: el dataString puede manejarse con .serialize() . No?
si, yo uso serialize, es mas cómodo
  #13 (permalink)  
Antiguo 10/02/2010, 08:42
 
Fecha de Ingreso: febrero-2009
Mensajes: 193
Antigüedad: 15 años, 9 meses
Puntos: 3
Respuesta: Agregar input radio a un formulario y que funcione envío

Cita:
Iniciado por Dany_s Ver Mensaje
y no sé lo que hace
Código HTML:
runOnLoad(function(){
  $("input#name").select().focus();
});
capaz te conviene ponerlo despues de ready
Lo único que hace eso es que cuando ingreses el input #name esté marcado con otro color..
  #14 (permalink)  
Antiguo 10/02/2010, 08:42
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Agregar input radio a un formulario y que funcione envío

Ah! Si seré despistado.
  #15 (permalink)  
Antiguo 10/02/2010, 08:43
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: Agregar input radio a un formulario y que funcione envío

Cita:
Iniciado por margancia Ver Mensaje

Dany_s, ahora valida el input radio perfectamente, pero el email nunca llega..por que puede ser?

si agregas un div con id message te va a aparecer el mensaje "Contact Form Submitted!" que está en success, en realidad eso no asegura que el mail fué enviado sino que el envio al de ajax fué correcto
  #16 (permalink)  
Antiguo 10/02/2010, 08:48
 
Fecha de Ingreso: febrero-2009
Mensajes: 193
Antigüedad: 15 años, 9 meses
Puntos: 3
Respuesta: Agregar input radio a un formulario y que funcione envío

Cita:
Iniciado por Dany_s Ver Mensaje
si agregas un div con id message te va a aparecer el mensaje "Contact Form Submitted!" que está en success, en realidad eso no asegura que el mail fué enviado sino que el envio al de ajax fué correcto
Claro, el tema es que si no agrego algo para que valide el input radio, el formulario se puede enviar sin seleccionarse ninguno de los dos emails destinatarios...

Y cuando agrego la modificación que me mandaste

if (emaildestinatario == undefined) {

valida en caso de no seleccionarse ningún radio, pero el email no llega..
  #17 (permalink)  
Antiguo 10/02/2010, 08:51
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: Agregar input radio a un formulario y que funcione envío

Cita:
Iniciado por margancia Ver Mensaje
Claro, el tema es que si no agrego algo para que valide el input radio, el formulario se puede enviar sin seleccionarse ninguno de los dos emails destinatarios...

Y cuando agrego la modificación que me mandaste

if (emaildestinatario == undefined) {

valida en caso de no seleccionarse ningún radio, pero el email no llega..

en el tema de jquery vos tenes que preocuparte de que si los valores llegan o no al archivo php, abajo de var dataString hace un alert(dataString) y fijate como se forma el querystring
  #18 (permalink)  
Antiguo 10/02/2010, 09:36
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Agregar input radio a un formulario y que funcione envío

Cita:
Y cuando agrego la modificación que me mandaste

if (emaildestinatario == undefined) {

valida en caso de no seleccionarse ningún radio, pero el email no llega..
Hace llamado a PHP? Eso quisiste decir?


Que tal esto?
Cita:
if ($('input:radio[name=email]:checked').val()) {
//
}
Creo que val() devolvería false si no estuviera marcado nada. Los radio devuelven true / false, no es así?

Aqui hay otra manera:
Cita:
seguir = false;
$('#contact_form form input:radio').each(function() {
if ( $(this).is(':checked') ) {
seguir = true;
}
});

Etiquetas: input, radio, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:17.