0

Mi situación es que necesito generar un textbox según la selección de un radiobutton, y que dependiendo de la selección de el RedioButton las propiedades del textbox puede variar o tener el mismo nombre, etc. El código que tengo es este, de antemano gracias por la ayuda:

    $(function(){
    	$(".op").click(function(){
    	if($(this).val()=='1')
    	{
    
        var monto_inp = document.createElement("input");
        monto_inp.id = "idInput";
        monto_inp.name = "monto";
        monto_inp.placeholder = "cedula";
        monto_inp.type = "text";
        monto_inp.classList.add('detalle_pago');
        monto_inp.classList.add('monto');
        document.body.appendChild(monto_inp);
        monto_inp.onkeyup = function() {console.log("onkeyup en input");}
    		
    	}
    	else if($(this).val()=='2')
    	{
   
        var monto_inp = document.createElement("input");
        monto_inp.id = "idInput";
        monto_inp.name = "monto";
        monto_inp.placeholder = "Passport";
        monto_inp.type = "text";
        monto_inp.classList.add('detalle_pago');
        monto_inp.classList.add('monto');
        document.body.appendChild(monto_inp);
        monto_inp.onkeyup = function() {console.log("onkeyup en input");}
    		
    	}
    
    	})})
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Documento</label>
    
     <div class="radio-inline">
    
     <label class="checkbox-inline"><input type="radio" class="op" name="documento" value="1" > Cédula</label>
     <label class="checkbox-inline"><input type="radio" class="op" name="documento" value="2" > Pasaporte</label> <br>
     
    </div>   <br>
    
     <label >Documento de Identidad</label>

En el siguiente codigo se muestra como aplico lo anterior( despues de aplicar el correctivo indicado), la situacion es que no inserta debido a que aparentemente ve como duplicado el nombre del textbox de cedula que es el que genero dinamicamente, la misma la estoy desarrollando en el CMS Wordpress utilizando PHP y MySql.

    <?php 
get_header(); 
if (!empty($_POST))
{
	global $wpdb;
    $tablename =  $wpdb->prefix . "interesado";
	$documentoidentidad = $_POST['cedula'];
	$nombre=$_POST['nombre'];
	$apellidopaterno=$_POST['apellidopaterno'];
	$cumpleanios=$_POST['cumpleanios'];
	$email=$_POST['email'];
	$telefono=$_POST['telefono'];
	$celular=$_POST['celular'];

$sql = $wpdb->prepare("INSERT INTO `$tablename`(`identificacion_interesado`,`nombre_interesado`,`apellidopater_interesado`,`fechanaci_interesado`,`email_interesado`,`telcasa_interesado`,`telcelular_interesado`) 
VALUES (%s,%s,%s,%s,%s,%s,%s)", $documentoidentidad,$nombre,$apellidopaterno,$cumpleanios,$email,$telefono,$celular);
$success=$wpdb->query($sql);

  if($success == true)
	{
  echo
  ' <div id="primary" class="wrap">
    <div id="content" role="main">
	<div id="center">
	<h2>Su Curriculum se guardo exitosamente: ' . $nombre . ' ' . $apellidopaterno . '</h2>
    </div></div></div>';
  }
  else {
		echo
		'<div id="primary" class="wrap"><div id="content" role="main"><div id="center">
         <h2>No se guardo su curriculum:' . $nombre . ' ' . $apellidopaterno . ' ' . $id. '</h2></h2>
         </div> </div></div> ';
}} 
else
    {
	?>

<script>

$(function(){
    	$(".op").click(function(){
    	if($(this).val()=='1')
    	{
        $('#cedula').html('');
        var cedula = document.createElement("input");
        cedula.id = "cedula";
        cedula.name = "cedula";
        cedula.placeholder = "Cedula";
        cedula.type = "text";
        cedula.classList.add('cedula');
        cedula.classList.add('cedula');
        $('#cedula').append(cedula);
        cedula.onkeyup = function() {validate(this.value)}
		
    		
    	}
    	else if($(this).val()=='2')
    	{
         $('#cedula').html('');
        var cedula = document.createElement("input");
        cedula.id = "cedula";
        cedula.name = "cedula";
        cedula.placeholder = "Passport";
        cedula.type = "text";
        cedula.classList.add('cedula');
        cedula.classList.add('cedula');
        $('#cedula').append(cedula);
            		
    	}
    
    	})})

</script>

<form method="post" enctype="multipart/form-data">
 <label>Documento</label>
<div class="radio-inline">
 <label class="checkbox-inline"><input type="radio" class="op" name="documento" value="1" > Cédula</label>
 <label class="checkbox-inline"><input type="radio" class="op" name="documento" value="2" > Pasaporte</label> <br>
 </div>

 <label >Documento de Identidad</label>
  
   <div id="cedula"> </div>
   
 <label>Nombre</label>
 <input type="text" name="nombre"  placeholder="Nombre" required>
 <label>Ingrese Apellidos</label>
 <input type="text" name="apellidopaterno"  placeholder="Apellidos" required>
          <label>Fecha De Nacimiento</label>
          <input type="date" name="cumpleanios" min="1925-01-01" value="<?php echo date("Y-m-d");?>">
          <label>Teléfonos</label>
          <input type="text" name="telefono" placeholder="Numero de Casa">
          <input type="text" name="celular" placeholder="Numero de Celular">
	     <label>E-Mail</label>
          <input type="email" name="email"   placeholder="E-Mail" required>
			<input class="btn btn-success" name="enviar" type="submit" value="Enviar" />
			</form>  

 
<?php }  ?>
<?php get_footer(); ?>

2
  • Cuál es el error? Que te acumula los inputs? Commented el 7 may. 2019 a las 17:18
  • @VickMuñoz si es que se acumualan y cuando se genera no aparece en el lugar que quiero. Commented el 7 may. 2019 a las 18:34

1 respuesta 1

0

Lo que puedes hacer es agregar un div y ahí agregar el input lo agregas con el método append() y cada que entre a la validación borrar lo que este en el div con esta línea $('#contenedor').html(''); espero sea lo que solicitas, cualquier duda hazla saber. :D

$(function(){
    	$(".op").click(function(){
    	if($(this).val()=='1')
    	{
        $('#contenedor').html('');
        var monto_inp = document.createElement("input");
        monto_inp.id = "idInput";
        monto_inp.name = "monto";
        monto_inp.placeholder = "cedula";
        monto_inp.type = "text";
        monto_inp.classList.add('detalle_pago');
        monto_inp.classList.add('monto');
        $('#contenedor').append(monto_inp);
        monto_inp.onkeyup = function() {console.log("onkeyup en input");}
    		
    	}
    	else if($(this).val()=='2')
    	{
         $('#contenedor').html('');
        var monto_inp = document.createElement("input");
        monto_inp.id = "idInput";
        monto_inp.name = "monto";
        monto_inp.placeholder = "Passport";
        monto_inp.type = "text";
        monto_inp.classList.add('detalle_pago');
        monto_inp.classList.add('monto');
        $('#contenedor').append(monto_inp);
        monto_inp.onkeyup = function() {console.log("onkeyup en input");}
    		
    	}
    
    	})})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Documento</label>
    
     <div class="radio-inline">
    
     <label class="checkbox-inline"><input type="radio" class="op" name="documento" value="1" > Cédula</label>
     <label class="checkbox-inline"><input type="radio" class="op" name="documento" value="2" > Pasaporte</label> <br>
     
    </div>   <br>
    
     <label >Documento de Identidad</label>
     
        <div id="contenedor"></div>

11
  • una pregunta adicinal y si quiero hacer un insert como lo hago, Commented el 7 may. 2019 a las 19:22
  • Insert a la BD con PHP? Commented el 7 may. 2019 a las 19:49
  • este es el codigo que uso: <?php get_header(); if (!empty($_POST)) {global $wpdb; $tablename = $wpdb->prefix . "interesado"; $documento = $_POST['cedula']; $nombre=$_POST['nombre']; $apellidopaterno=$_POST['apellidopaterno']; $cumpleanios=$_POST['cumpleanios']; $email=$_POST['email']; $telefono=$_POST['telefono']; $celular=$_POST['celular']; $sql = $wpdb->prepare("INSERT INTO $tablename(identificacion,nombre,apellidopater,fechanaci_interesado,email_interesado,telcasa_interesado,telcelular_interesado) Commented el 7 may. 2019 a las 21:01
  • VALUES (%s,%s,%s,%s,%s,%s,%s)", $documentoidentidad,$nombre,$apellidopaterno,$cumpleanios,$email,$telefono,$celular); $success=$wpdb->query($sql); if($success == true) {echo <div id="primary" class="wrap"> <div id="content" role="main"> <div id="center"> <h2>Su Curriculum se guardo exitosamente: ' . $nombre . ' ' . $apellidopaterno . '</h2> </div></div></div> ';} else { echo' <h2>No se guardo su curriculum:' . $nombre . ' ' . $apellidopaterno . ' ' . $id. '</h2> '; }} else { ?> Commented el 7 may. 2019 a las 21:03
  • <form method="post" enctype="multipart/form-data"> <label>Documento</label><div class="radio-inline"> <label class="checkbox-inline"><input type="radio" class="op" name="documento" value="1" > Cédula</label> <label class="checkbox-inline"><input type="radio" class="op" name="documento" value="2" > Pasaporte</label> <br> </div> <label >Documento de Identidad</label> <div id="cedula"> </div> <label>Nombre</label> <input type="text" name="nombre" placeholder="Nombre" required> <label>Apellidos</label> <input type="text" name="apellidopaterno" placeholder="Apellidos" required> Commented el 7 may. 2019 a las 21:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.