[SOLUCIONADO] Formulario con checkbox condicionado

edwinv · #1 (**permalink**) 07/05/2015, 23:13

Tengo un formulario que tiene dos campos parecidos nombre 1 y nombre 2, ahora agregue un checkbox para que cuando este seleccionado repita el valor que se pondra en el campo nombre1 y cuando no este seleccionado solicite un valor al campo2. ¿Alguien me podria ayudar al respecto?

<form action="<?php echo $editFormAction; ?>" method="post"></form>
<input name="nombre1" id="nombre1" type="text" onClick="popup()" class="validate[required]">
<input name="repite" type="checkbox" value="" checked="CHECKED" />
<input name="nombre2" id="nombre2" type="text" onClick="popup()" class="validate[required]">
</form>

jpint · #2 (**permalink**) 08/05/2015, 04:49

Lo primero es que tienes la etiqueta form cerrada antes de los inputs.

Si he entendido bien lo que quieres, te valdría con añadir el evento onclick al checkbox (onclick="check_repite(this);" por ejemplo) y con javascript comprobar si esta marcado o no:

Código PHP:

 
<form action="<?php echo $editFormAction; ?>" method="post"> 
    <input name="nombre1" id="nombre1" type="text" onClick="popup()" class="validate[required]"> 
    <input name="repite" type="checkbox" value="" checked="CHECKED" onclick="check_repite(this);"  /> 
    <input name="nombre2" id="nombre2" type="text" onClick="popup()" class="validate[required]"> 
</form> 
<script> 
function check_repite(input) 
{ 
    if (input.checked) 
    { 
        document.getElementById("nombre2").value = ""; 
    }else{ 
        document.getElementById("nombre2").value = document.getElementById("nombre1").value; 
    } 
} 
</script>

edwinv · #3 (**permalink**) 09/05/2015, 10:46

Gracias por responder jpint, pero como hago para llevar esa condicion de javascript que me diste a un INSERT de mysql

$insertSQL = sprintf("INSERT INTO nombres (id, nombre1, nombre2) VALUES (%s, %s, %s)",
GetSQLValueString($_POST['ip'], "text"),
GetSQLValueString($_POST['id'], "text"),
GetSQLValueString($_POST['nombre1'], "int"),
GetSQLValueString($_POST['nombre2'], "int"));

Gracias por tu ayuda

edwinv · #4 (**permalink**) 09/05/2015, 15:55

Estuve pensando en esta solución pero me da error en mysql [object HTMLInputElement]

Código PHP:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Checkbox condicionado</title>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <div class="container">
        <h1>Checkbox condicionado</h1>
        <div class="formulario">
            <form method="post" action="2.php">
                <label>Nombre1:</label><br/>
                <input type="text" name="nombre1" id="nombre1" size="30"><br/>
                <label>Repetir:</label><br/>
                <input name="checkbox" id="checkbox" type="checkbox" value="1" /><br/>
                <label>Nombre2:</label><br/>
                <input type="text" name="nombre2" id="nombre2" size="30"><br/>
                <input type="button" value="Ingresar datos" onclick="javascript:EnviarDatos();"><br/>
            </form>
            <div id="mensaje">Ingresar datos</div>
        </div>
        <script type="text/javascript">
            function EnviarDatos(){
                        
                        $("#checkbox_comprobar").click(function() {
                            
                            if($("#checkbox").is(':checked')) {
                                
                            var nombre1 = document.getElementById('nombre1').value;
                            var nombre2 = document.getElementById('nombre1').value;
                            
                            } else {
                            var nombre1 = document.getElementById('nombre1').value;
                            var nombre2 = document.getElementById('nombre2').value;
                            }
                        });
                    
 
                $.ajax({
                    type:'POST',
                    url:'2.php',
                    data:('nombre1='+nombre1+'&nombre2='+nombre2),
                    success:function(respuesta){
                        if (respuesta==1){
                            $('#mensaje').html('Tu mensaje se ha enviado correctamente');
                            document.getElementById('nombre1').value="";
                            document.getElementById('nombre2').value="";
                        }
                        else{
                            $('#mensaje').html('Los datos no han sido ingresados');
                        }
                    }
 
                })
            }
        </script>
    </div>
</body>
</html>

edwinv · #5 (**permalink**) 09/05/2015, 16:38

Creo que me complique y busque el camino mas dificil pero lo logre corrijo el codigo anterior

Código PHP:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Checkbox condicionado</title>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <div class="container">
        <h1>Checkbox condicionado</h1>
        <div class="formulario">
            <form method="post" action="2.php">
                <label>Nombre1:</label><br/>
                <input type="text" name="nombre1" id="nombre1" size="30"><br/>
                <label>Repetir:</label><br/>
                <input name="checkbox" id="checkbox" type="checkbox" value="1" /><br/>
                <label>Nombre2:</label><br/>
                <input type="text" name="nombre2" id="nombre2" size="30"><br/>
                <input type="button" value="Ingresar datos" onclick="javascript:EnviarDatos();"><br/>
            </form>
            <div id="mensaje">Ingresar datos</div>
        </div>
        <script type="text/javascript">
            function EnviarDatos(){
                    
                            
                            if($("#checkbox").is(':checked')) {
                                
                            var nombre1 = document.getElementById('nombre1').value;
                            var nombre2 = document.getElementById('nombre1').value;
                            
                            } else {
                            var nombre1 = document.getElementById('nombre1').value;
                            var nombre2 = document.getElementById('nombre2').value;
                            }
 
                $.ajax({
                    type:'POST',
                    url:'2.php',
                    data:('nombre1='+nombre1+'&nombre2='+nombre2),
                    success:function(respuesta){
                        if (respuesta==1){
                            $('#mensaje').html('Tu mensaje se ha enviado correctamente');
                        }
                        else{
                            $('#mensaje').html('Los datos no han sido ingresados');
                        }
                    }
 
                })
            }
        </script>
    </div>
</body>
</html>

jpint · #6 (**permalink**) 11/05/2015, 04:43

ok, si utilizas jquery puedes enviar los datos en un array json(lo cual me parece mas correcto) y ahorrarte algo de codigo si no utilizas document.getElementById:

Código PHP:

  function EnviarDatos(){

    if($("#checkbox").is(':checked')) {       
        var valor_nombre1 = $("#nombre1").val();
        var valor_nombre2 = $("#nombre1").val();                    
    } else {
        var valor_nombre1 = $("#nombre1").val();
        var valor_nombre2 = $("#nombre2").val();
    }

    var datos = {nombre1: valor_nombre1, nombre2: valor_nombre2};

    $.ajax({
        type:'POST',
        url:'2.php',
        data:(datos),
        success:function(respuesta){
            if (respuesta==1){
                $('#mensaje').html('Tu mensaje se ha enviado correctamente');
            }else{
                $('#mensaje').html('Los datos no han sido ingresados');
            }
        }

    });
}