Cómo puedo hacer esto?

carlosuc99 · #1 (**permalink**) 24/12/2012, 07:03

Buenas,

Tengo dos archivos:

new_aircraft.php

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="STYLESHEET" type="text/css" href="./style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert Aircraft</title>
</head>
<body>
<script>
//Ajax Script
function require(){
    try{
    req = new XMLHttpRequest();
    }catch(err1){
        try{
        req = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(err2){
            try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(err3){
            req = false;
            }
        }
    }
return req;
}
 
 
var request = require();
 
function callAjax(){
var ramdom = parseInt(Math.random()*999999999);
valor = document.getElementById("numberclasses").value;
var url="classes.php?Value="+valor+"&r="+ramdom;
request.open("GET",url,true);
request.onreadystatechange = answerAjax;
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.send(null);
}
 
 
function answerAjax(){
 
    if(request.readyState==4){
        if(request.status==200){
        //alert(request.responseText);
        document.getElementById("classes").innerHTML=request.responseText;
        }else{
        alert("ha ocurrido un error"+request.statusText);
        }
    }
}
 
</script>
<?
 
$boton = $_POST['enviar'];
$nombre = $_POST['nombre'];
$precio = $_POST['precio'];
$pax = $_POST['pax'];
$ICAO = $_POST['ICAO'];
 
if($boton == 'Insertar')
{
    include('./db.inc.php');
    
    $ICAO = strtoupper($ICAO);      
    mysql_query("INSERT INTO flota(ICAO, nombre, precio, capacidad) VALUES('$ICAO', '$nombre', '$precio', '$pax')") or die('<h4 style="color: red;">Ha habido un problema con la insercion.</h4>');
    
    mysql_close();
    
    echo '<h3 style="color: green;">Aeronave adquirida correctamente.<h3/>';
}
else
{
    ?>
    <form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>
    <tr><td class=Forms>ICAO: </td><td><input type="text" value="" name="ICAO" /></td></tr>
    <tr><td class=Forms>Name: </td><td><input type="text" value="Airbus A320" name="nombre" /></td></tr>
    <tr><td class=Forms>Price: </td><td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td></tr>
 
    <tr><td class=Forms>Number Classes: </td></td><td><select name="numberclasses" id="numberclasses" onchange="callAjax()">
        <option>Select Number of Classes</option>
        <?php
        echo'<option value="1">One</option>';
        echo'<option value="2">Two</option>';
        echo'<option value="3">Three</option>';
 
        ?>
    </select></td></tr>
 
 
    <tr><td class=Forms>First Class</td><td id="classes"><input disabled="disabled" type="text" name="classes" /></td></tr>
    <tr><td class=Forms>Bussines Class</td><td id="classess"><input disabled="disabled" type="text" name="classses" /></td></tr>
    <tr><td class=Forms>Economy Class</td><td id="classess"><input disabled="disabled" type="text" name="classses" /></td></tr>
 
    <tr><td class=Forms>Capacidad: </td><td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td></tr>
    </table><br />
    <input type="submit" name="enviar" value="Insertar"/>
    </form>
    <?
}
?>
</body>
</html>

y el classes.php

Código Javascript:

Ver original<?php
$value = $_GET['Value'];
 
if($value == 1){
 
 
    ?>
   <input id="classes" maxlength="3" value="" type="text" name="classes" />
 
    
<?php
}
else {
    ?>
    <input disabled="disabled" type="text" name="classes" />
<?php
}
?>

En estos archivos podemos comprobar que si seleccionamos en "Select Number of Classes" como 1, se activa el campo de texto de First Classes. Cómo puedo hacer para que si en vez de 1 en "Select Number of Classes" pongo 2 se activen First Class y Bussines Class. Y si pulso 3 se activen, First Class, Bussines Class y Economy Class?

#2 (**permalink**) 24/12/2012, 07:51

con un switch

http://es.php.net/manual/es/control-...res.switch.php

carlosuc99 · #3 (**permalink**) 24/12/2012, 08:04

Cita:

Iniciado por webankenovi

con un switch

[url]http://es.php.net/manual/es/control-structures.switch.php[/url]

Cómo puedo emplear el switch? La página tiene que actualizar los formularios sin recargarla. Y el problema es que hay dos <td> uno con el título del apartado y otro con el campo del texto y el que se tiene que modificar es el segundo. Cómo lo puedo hacer?

#4 (**permalink**) 24/12/2012, 08:10

aaa sin recargarla pues con ajax con php no hay manera .

javiertroya · #5 (**permalink**) 24/12/2012, 08:17

Hola, segun lo que veo y lo que solicitas esto es puro Javascript y es algo ya hecho. Como siempre digo ¿Para que reinvetar la rueda? Y además, no encuentro ciencia en el segundo archivo.

Con jquery podrias ahorrar bastante en codigo:

Código Javascript:

Ver original$(function(){
 $("#numberclasses").change(function(){
  numberclasses = $(this).val();
  switch(numberclasses)
  {
    case 1:
     $("#classes").attr("disabled" false);
    break;
    
    // Y así sucesivamente dependiendo de cuantos casos tengas
  }
 });
});

Esta es la solución simple a lo que pides, pero debes hacer varias correcciones:

1.- Un id es único, es decir solo puede haber una etiqueta con id="classes" ya que si tienes varias tendras errores en el DOM. Puedes colocar class="classes", en cambio para aplicar estilos.

2.- Utiliza scripts que esten certificados que funcionan, para evitar lentitud en el desarrollo.

3.- Los input text de igual forma que los id's deben tener nombres únicos si van a ser pos procesados en otro script y además colocales id's únicos tambien para la manipulación con DOM.

Espero haber sido de ayuda.

Saludos :D

fishdesign · #6 (**permalink**) 24/12/2012, 08:31

Si lo vas a hacer con Javascript, es mucho más fácil que todo eso y evidentemente no tendrás que usar switch (que por cierto, aquí no viene al cuento).

Tienes un div contenedor, y dentro los distintos elementos. Basta con hacer un bucle for con un número de ciclos igual a la opción deseada para que en cada vuelta añada el atributo requerido.

Por ejemplo si seleccionas 2, se añadirá los atributos a los dos primeros. Así sucesivamente dependiendo de la opción elegida y el número de elementos que uses.

Si usas jQuery, puedes servirte con next(), comprobar si el atributo ya ha sido añadido o sencillamente usar eq()

carlosuc99 · #7 (**permalink**) 24/12/2012, 12:33

Cita:

Iniciado por fishdesign

Si lo vas a hacer con Javascript, es mucho más fácil que todo eso y evidentemente no tendrás que usar switch (que por cierto, aquí no viene al cuento).

Tienes un div contenedor, y dentro los distintos elementos. Basta con hacer un bucle for con un número de ciclos igual a la opción deseada para que en cada vuelta añada el atributo requerido.

Por ejemplo si seleccionas 2, se añadirá los atributos a los dos primeros. Así sucesivamente dependiendo de la opción elegida y el número de elementos que uses.

Si usas jQuery, puedes servirte con [URL="http://api.jquery.com/next/"]next()[/URL], comprobar si el atributo ya ha sido añadido o sencillamente usar [URL="http://api.jquery.com/eq/"]eq()[/URL]

Me puedes dejar un ejemplo de como debería quedar el código? Por un ejemplo: un código con opciones 1, 2,3 y casilleros A,B y C. Si seleccionas el 1, activa A, si seleccionas el 2 se activan A y B y si seleccionas 3 se activan A, B, y C.

fishdesign · #8 (**permalink**) 24/12/2012, 15:23

Sería algo asi:

Código HTML:

Ver original<div class="container">
    <input disabled="disabled" type="text" name="classes" />
    <input disabled="disabled" type="text" name="classes" />
    <input disabled="disabled" type="text" name="classes" />
</div>

Código Javascript:

Ver originalvar selection = 2; // Esto puede ser 1, 2 o 3
 
    for (var i = 0; i < selection; i++) {
        $('.container input').eq(i).removeAttr('disabled');
    }

carlosuc99 · #9 (**permalink**) 24/12/2012, 18:15

Cita:

Iniciado por fishdesign

Sería algo asi:

Código HTML:

Ver original<div class="container">
    <input disabled="disabled" type="text" name="classes" />
    <input disabled="disabled" type="text" name="classes" />
    <input disabled="disabled" type="text" name="classes" />
</div>

Código Javascript:

Ver originalvar selection = 2; // Esto puede ser 1, 2 o 3
 
    for (var i = 0; i < selection; i++) {
        $('.container input').eq(i).removeAttr('disabled');
    }

He dejado el archivo así:

new_aircraft.php

Código Javascript:

Ver originalvar selection = 2;
 
    for (var i = 0; i < selection; i++) {
        $('.container input').eq(i).removeAttr('disabled');
    }
 
 
    <form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>
 
 
        <tr><td class=Forms>ICAO:</td><td><input type="text" value="" name="ICAO" size="30"/></td></tr>
 
    <tr><td class=Forms>Name:</td><td><input type="text" value="Airbus A320" name="nombre" size="30"/></td></tr>
    <tr><td class=Forms>Price:</td><td><input maxlength="9" value="1000000" type="text" name="precio" size="30"/> €<br/></tr>
 
    <tr><td class=Forms>Number Classes:</td><td><select name="numberclasses" id="numberclasses" onchange="callAjax()">
        <option>Select Number of Classes</option>
        <?php
        echo'<option value="1">One</option>';
        echo'<option value="2">Two</option>';
        echo'<option value="3">Three</option>';
 
        ?>
    </select></td></tr>
 
 
 
    <tr><td class=Forms>First Class:</td><td><input disabled="disabled" type="text" name="classes" size="30"/></td></tr>
    <tr><td class=Forms>Bussines Class:</td><td><input disabled="disabled" type="text" name="classes" size="30"/></td></tr>
    <tr><td class=Forms>Economy Class:</td><td><input disabled="disabled" type="text" name="classses" size="30"/></td></tr>
 
    <tr><td class=Forms>Capacidad:</td><td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td></tr>
 
        <tr><td></td><td><input type="submit" name="enviar" value="Insertar"/></td></tr>
         </table>
    </form>

Pero no funciona, creo que coloco mal las cosas!

fishdesign · #10 (**permalink**) 25/12/2012, 07:33

Lo que te puse era un ejemplo del funcionamiento y de la lógica a seguir, si haces copy&paste directamente no te va a funcionar. Tan solo tienes que ver que tu no usas ninguna clase "container" y que la variable selection es una variable que recoge tu opción (ya sea 1, 2 o 3), no puedes dejarla estática de esa manera, sino que debe cambiarse según tus opciones.

Eso que te puse usa jQuery (igualmente es fácil "traducirlo" a Javascript puro). Estás cargando la librería de jQuery?

Código Javascript:

Ver original<script src="http://code.jquery.com/jquery.min.js"></script>

También debes incluir el código dentro de una función que espere a que se cargue todo el DOM para ser ejecutada

Código Javascript:

Ver original$(function() {
    // código aquí
});

El ejemplo que te he dado creo que hace exactamente lo que quieres y funciona, sin necesidad de switch ni códigos rebuscados. Ahora es tu turno y aprender como funciona para poder usarlo en tu proyecto, pero no se trata de copiar sin más, porque así vas a tener siempre un problema u otro.

Quizás antes de embarcarte en el proyecto, deberías leer un poco más sobre Javascript, PHP, HTML (ya no se usan tablas para el maquetado), etc.

Un saludo

carlosuc99 · #11 (**permalink**) 25/12/2012, 09:21

Bueno, pues vamos a darle al tema:

Código Javascript:

Ver original<script src="http://code.jquery.com/jquery.min.js"></script>
 
var selection = 2;
 
    for (var i = 0; i < selection; i++) {
        $('.container input').eq(i).removeAttr('disabled');
    }
 
 
    <form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>
 
 
        <tr><td class=Forms>ICAO:</td><td><input type="text" value="" name="ICAO" size="30"/></td></tr>
 
    <tr><td class=Forms>Name:</td><td><input type="text" value="Airbus A320" name="nombre" size="30"/></td></tr>
    <tr><td class=Forms>Price:</td><td><input maxlength="9" value="1000000" type="text" name="precio" size="30"/> &#8364;<br/></tr>
 
    <tr><td class=Forms>Number Classes:</td><td><select name="numberclasses" id="numberclasses" onchange="callAjax()">
        <option>Select Number of Classes</option>
        <?php
        echo'<option value="1">One</option>';
        echo'<option value="2">Two</option>';
        echo'<option value="3">Three</option>';
 
        ?>
    </select></td></tr>
 
 
 
    <tr><td class=Forms>First Class:</td><td><input disabled="disabled" type="text" name="classes" size="30"/></td></tr>
    <tr><td class=Forms>Bussines Class:</td><td><input disabled="disabled" type="text" name="classes" size="30"/></td></tr>
    <tr><td class=Forms>Economy Class:</td><td><input disabled="disabled" type="text" name="classses" size="30"/></td></tr>

Ahí ya está cargado el JQuery. Tu me dices que tengo que poner el código dentro de una función, a que código te refieres? A este? Dónde debo cargar la función, dices que tiene que esperar por el DOM, la pongo en el onchange del select?

Código Javascript:

Ver original<tr><td class=Forms>First Class:</td><td><input type="text" name="classes" size="30"/></td></tr>
    <tr><td class=Forms>Bussines Class:</td><td><input type="text" name="classes" size="30"/></td></tr>
    <tr><td class=Forms>Economy Class:</td><td><input type="text" name="classses" size="30"/></td></tr>

Ahí, sin los disabled porque así es como se debe mostrar una vez seleccionado.

Me dices que no tengo que utilizar un container input. Qué tengo que poner?

Para que sirve la variable selection? Tengo que poner una con el valor 1 y un for con lo que debe mostrar, otra con el valor 2 con lo que debe mostrar, etc. Dices que se tiene que cambiar automaticamente, o eso entiendo. Cómo hago para que recoja el valor del select?

Saludos y muchas gracias por tu ayuda fishdesign,

carlosuc99 · #12 (**permalink**) 25/12/2012, 18:00

Código Javascript:

Ver original<script src="http://code.jquery.com/jquery.min.js"></script>
 
$(function callAjax(){
 $("#numberclasses").change(function(){
  numberclasses = $(this).val();
  switch(numberclasses)
  {
    case 1:
     $("#classes").attr("disabled" false);
    break;
    
     case 2:
     $("#classes").attr("disabled" false);
 
     $("#classes2").attr("disabled" false);
    break;
 
    case 3:
     $("#classes").attr("disabled" false);
 
    $("#classes2").attr("disabled" false);
 
    $("#classes3").attr("disabled" false);
    break;
    // Y así sucesivamente dependiendo de cuantos casos tengas
  }
 });
});
 
 
 
    <form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>
 
 
        <tr><td class=Forms>ICAO:</td><td><input type="text" value="" name="ICAO" size="30"/></td></tr>
 
    <tr><td class=Forms>Name:</td><td><input type="text" value="Airbus A320" name="nombre" size="30"/></td></tr>
    <tr><td class=Forms>Price:</td><td><input maxlength="9" value="1000000" type="text" name="precio" size="30"/> &#8364;<br/></tr>
 
    <tr><td class=Forms>Number Classes:</td><td><select name="numberclasses" id="numberclasses" onchange="callAjax()">
        <option>Select Number of Classes</option>
        <?php
        echo'<option value="1">One</option>';
        echo'<option value="2">Two</option>';
        echo'<option value="3">Three</option>';
 
        ?>
    </select></td></tr>
 
 
 
    <tr><td class=Forms>First Class:</td><td><input disabled="disabled" type="text" name="classes" size="30"/></td></tr>
    <tr><td class=Forms>Bussines Class:</td><td><input disabled="disabled" type="text" name="classes2" size="30"/></td></tr>
    <tr><td class=Forms>Economy Class:</td><td><input disabled="disabled" type="text" name="classes3" size="30"/></td></tr>

Voy a intentar hacerlo con switches. El código que os he dejado, en qué falla?

carlosuc99 · #13 (**permalink**) 26/12/2012, 05:32

Creo que el switch está correcto. El problema creo que está en que el código que tiene para activar no funciona:

Código Javascript:

Ver original$("#classes").attr("disabled" false);

Este código tiene que activar a esto:

Código Javascript:

Ver original<tr><td class=Forms>First Class:</td><td><input disabled="disabled" type="text" name="classes" size="30"/></td></tr>

Probándolo un poco, también falla la obtención del resultado del select.

Alguien me puede ayudar?

carlosuc99 · #14 (**permalink**) 26/12/2012, 13:03

El script final para hacer esto, por si a alguien le interesa es este:

Código Javascript:

Ver original<script type="text/javascript">
 
$("select").change(function() {
valor = $(this).val();
 
$("div").text(valor);
 
str = parseInt(valor);
 
switch(str)
  {
    case 1:
    $(document).ready(function() {
        $("#classes").removeAttr('disabled');
        $("#classes2").attr("disabled","disabled");
        $("#classes3").attr("disabled","disabled");
});
    break;
    
     case 2:
    $(document).ready(function() {
        $("#classes").removeAttr('disabled');
        $("#classes2").removeAttr('disabled');
        $("#classes3").attr("disabled","disabled");
});
    break;
 
    case 3:
    $(document).ready(function() {
        $("#classes").removeAttr('disabled');
        $("#classes2").removeAttr('disabled');
        $("#classes3").removeAttr('disabled');
});
    break;
 
  }
});
 
</script>

Gracias a todos los que me han ayudado a lograrlo, en este o en otro post!

#15 (**permalink**) 27/12/2012, 16:51

Cita:

Iniciado por fishdesign

evidentemente no tendrás que usar switch (que por cierto, aquí no viene al cuento).

Saludos FELIZ AÑO A TODOS.