Jump to content

Using If Statement In Form To Display 2 Extra Input Tags Help


oalvarado

Recommended Posts

Hi all,

I'm trying to display 2 extra input tags if the user selects two options from a six option drop down in a form, so it would look like so:

If option A,B selected = true,

then echo 2 extra inputs,

else

if options C,D,E,F selected = false

then do not display inputs.

By the way I'm a beginner php programmer (need experience) so I coded my form with the php in the spots where need, DW does no display syntax error so I'm guessing is correct but when I preview in browser inputs show when they are not supposed to. Can someone please advice and if possible explain my problem,my code for the form is below:

 

Thanks in acvance

 

<form method="post" action="">
<label for="titulo">Titulo de Listado: </label>
<input type="text" placeholder="Ave. Jalisco #560" name="titulo">
<br />
<label for="Direccion">Direccion: </label>
<input type="text" placeholder="Ave. Jalisco #560 Colonia Cacho Tijuana Baja California Mexico 22407" name="direccion">
<br />
<label for="email">Correo Electronico: </label>
<input type="email" placeholder="[email protected]" name="email">
<br />
<label for="accion">Accion Deseada: </label>
<select>
<option value="Vender">Vender</option>
<option value="Rentar">Rentar: </option>
</select>
<br />

<label for="Descripcion">Descripcion del Inmueble</label>
<br />
<textarea placeholder="Descripcion completa del inmueble" name="descripcion" rows=8 cols=30 style="max-width:400px; width:400px; height:150px; font-family:'sansation_light'; max-height:150px; overflow:auto; margin-top:10px;"></textarea>
<br />
<?php
$do = 'Casa';
$do1 = 'Depto';
?>
<label for="inmueble">Tipo de Inmueble: </label>
<select>
<option>Seleccionar</option>
<option value="Casa">Casa</option>
<option value="Depto">Departamento</option>
<option value="Oficina">Oficina</option>
<option value="Terreno">Terreno</option>
<option value="Nave">Nave Indust.</option>
</select>
<br />
<?php
if ($do = true);
echo '<label for="cuartos"># de Recamaras: </label>
<input type="text" placeholder="3" name="cuartos">';
?><br />
<?php
if ($do1 = true);
echo '<label for="baños">Cantidad de Baños: </label>
<input type="text" placeholder="1.5" name="baños">';
?><br />
<label for="Superficie">Superficie<sup>2</sup> de Inmueble: </label>
<input type="text" placeholder="150" name="superficie">
     
<select>
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="construccion">Superficie<sup>2</sup> de Construccion: </label>
<input type="text" placeholder="150" name="superficie">
     
<select>
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="precio">Precio: </label>
<input type="text" placeholder="$1500" name="precio">
    
<select>
<option value="MXN">MXN</option>
<option value="USD">USD</option>
</select>
<br />
</form>

Your code makes little sense. At one place you set $do to the string 'Casa', you later then attempt to check to see if $do is true (the comparison operator is == in php, not =).

 

Anyway, what your trying to do would be best done client side using Javascript, not server side using PHP.

<form method="post" action="">
<label for="titulo">Titulo de Listado: </label>
<input type="text" placeholder="Ave. Jalisco #560" name="titulo">
<br />
<label for="Direccion">Direccion: </label>
<input type="text" placeholder="Ave. Jalisco #560 Colonia Cacho Tijuana Baja California Mexico 22407" name="direccion">
<br />
<label for="email">Correo Electronico: </label>
<input type="email" placeholder="[email protected]" name="email">
<br />
<label for="accion">Accion Deseada: </label>
<select>
<option value="Vender">Vender</option>
<option value="Rentar">Rentar: </option>
</select>
<br />


<label for="Descripcion">Descripcion del Inmueble</label>
<br />
<textarea placeholder="Descripcion completa del inmueble" name="descripcion" rows=8 cols=30 style="max-width:400px; width:400px; height:150px; font-family:'sansation_light'; max-height:150px; overflow:auto; margin-top:10px;"></textarea>
<br />
<?php
$do = 'Casa'; //THIS IS MAKING IT TRUE AREADY YOU NEED TO TELL IT WHEN IT IS TRUE OF FALSE
$do1 = 'Depto';//THIS IS MAKING IT TRUE AREADY YOU NEED TO TELL IT WHEN IT IS TRUE OF FALSE
?>
<label for="inmueble">Tipo de Inmueble: </label>
<select>
<option>Seleccionar</option>
<option value="Casa">Casa</option>
<option value="Depto">Departamento</option>
<option value="Oficina">Oficina</option>
<option value="Terreno">Terreno</option>
<option value="Nave">Nave Indust.</option>
</select>
<br />
<?php
if ($do =='Casa')
{
echo '<label for="cuartos"># de Recamaras: </label>
<input type="text" placeholder="3" name="cuartos">';
}
?><br />
<?php
if ($do1 =='Depto')
{
echo '<label for="baños">Cantidad de Baños: </label>
<input type="text" placeholder="1.5" name="baños">';
}
?><br />
<label for="Superficie">Superficie<sup>2</sup> de Inmueble: </label>
<input type="text" placeholder="150" name="superficie">
     
<select>
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="construccion">Superficie<sup>2</sup> de Construccion: </label>
<input type="text" placeholder="150" name="superficie">
     
<select>
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="precio">Precio: </label>
<input type="text" placeholder="$1500" name="precio">
    
<select>
<option value="MXN">MXN</option>
<option value="USD">USD</option>
</select>
<br />
</form>

 

 

I would user div tags for this.. give them som ID and then java it.. Here is a simple code! on minute

my bad. just quick talk.

 

<style type="text/css">
span.About {
background:url(images/ABOUT.png) top center no-repeat;

display:block;
height:26px;
border:none;



}
span.AboutMore {
background:url(images/ABOUT.png) top center no-repeat;

display:block;
height:26px;
border:none;



}
</style>



THIS IS MY DROP DOWN MENU TO DISPLAY.<br />


<select>
<option>Seleccionar</option>
<option value="Casa" onclick="javascript:Function_Name();"><a href="#">Casa</a></option>
<option value="Casa" onclick="javascript:Function_Name_2();"><a href="#">Departamento</a></option>
</select><br />



THIS IS MY BUTTON TO DISPLAY MY FUNCTION BLOCK!<br />
<!--THIS IS USING THE CSS CLASS FOR YOUR BUTTON UP AT THE TOP AND THE JAVA SCRIPT onclick AT THE BOTTOM-->
<span class="About" onclick="javascript:Function_Name();"><a href="#"></a></span><br />


<!--THIS IS USING THE CSS CLASS FOR YOUR BUTTON UP AT THE TOP AND THE JAVA SCRIPT onclick AT THE BOTTOM-->
<span class="AboutMore" onclick="javascript:Function_Name_2();"><a href="#"></a></span><br />

<!--THIS IS THE DIV TAG WITH A ID THAT THE JAVA SCRIPT IS LOOKING FOR-->
<div id="myfuction" style="display: none;padding: 5px;">
THIS IS MY FUCTION TEST BLOCK I WANT TO DISPLAY!
</div>

<!--THIS IS THE DIV TAG WITH A ID THAT THE JAVA SCRIPT IS LOOKING FOR-->
<div id="myfuction_2" style="display: none;padding: 5px;">
THIS IS MY FUCTION TEST BOCK 2 I WANT TO DISPLAY!
</div>
<script type="text/javascript">
function Function_Name()
{
if(document.getElementById('myfuction').style.display=='none')
{
//THIS IS SHOWING THE DIV TAG
div = document.getElementById('myfuction');
div.style.display = "block";

//THIS IS HIDING THE OTHER DIV TAG AND ONLY SHOWING YOU THE ONE
div = document.getElementById('myfuction_2');
div.style.display = "none";


}
else
{
//THIS IS HIDING THE DIV TAG IF YOU CLICK IT TWICE IT OPENS IT SHUTS
div = document.getElementById('myfuction');
div.style.display = "none";
}

}
function Function_Name_2()
{
if(document.getElementById('myfuction_2').style.display=='none')
{
//THIS IS SHOWING THE DIV TAG
div = document.getElementById('myfuction_2');
div.style.display = "block";
//THIS IS HIDING THE OTHER DIV TAG AND ONLY SHOWING YOU THE ONE
div = document.getElementById('myfuction');
div.style.display = "none";


}
else
{
//THIS IS HIDING THE DIV TAG IF YOU CLICK IT TWICE IT OPENS IT SHUTS
div = document.getElementById('myfuction_2');
div.style.display = "none";
}

}
</script>

Thanks guys for the help, I used javascript for this and it works like a charm, I know this is the php section but I think it will helpful for other ppl. so here is what I used:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
}
// ]]>
</script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
</script>
<body>


<form method="post" action="">
<label for="titulo" id="label">Titulo de Listado: </label>
<input type="text" class="input-left" placeholder="Ave. Jalisco #560" name="titulo">
<br />
<label for="Direccion" id="label">Direccion: </label>
<input type="text" class="input-left" placeholder="Ave. Jalisco #560 Colonia Cacho Tijuana Baja California Mexico 22407" name="direccion">
<br />
<label for="email" id="label">Correo Electronico: </label>
<input type="email" class="input-left" placeholder="[email protected]" name="email">
<br />
<label for="accion" id="label">Accion Deseada: </label>
<select class="input-left">
<option value="Vender">Vender</option>
<option value="Rentar">Rentar: </option>
</select>
<br />
<label for="Descripcion" id="label">Descripcion del Inmueble</label>
<br />
<textarea class="input-left" placeholder="Descripcion completa del inmueble" name="descripcion" rows=8 cols=30 style="max-width:400px; width:400px; height:150px; font-family:'sansation_light'; max-height:150px; overflow:auto; margin-top:10px; text-align: left;"></textarea>
<br />
<label for="inmueble" id="label" >Tipo de Inmueble: </label>
<select class="input-left" name="type" onchange="display(this,'Casa','Depto','Oficina','Nave','Terreno');">
<option>Sleccionar opcion:</option>
<option value="Casa">Casa</option>
<option value="Depto">Departamento</option>
<option value="Oficina">Oficina</option>
<option value="Nave">Nave Indust.</option>
<option value="Terreno">Terreno</option>
</select>
<br/>
<!-- option Casa -->
<div id="Casa" style="display:none;">
<label for="cuartos" id="label">Cantidad de Recamaras: </label>
<input type="text" class="input-left" placeholder="3" name="recamaras">
<br />
<label for="baños" id="label">Cantidad de Baños: </label>
<input type="text" class="input-left" placeholder="1.5" name="baños">
<br />
<label for="Superficie" id="label">Superficie<sup>2</sup> de Inmueble: </label>
<input type="text" class="input-left" placeholder="150" name="superficie" size="10">
     
<select class="input-left">
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="construccion" id="label">Superficie<sup>2</sup> de Construccion: </label>
<input type="text" class="input-left" placeholder="150" name="construcion" size="10">
     
<select class="input-left">
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="precio" id="label">Precio: </label>
<input type="text" class="input-left" placeholder="$1500" name="precio">
    
<select class="input-left">
<option value="MXN">MXN</option>
<option value="USD">USD</option>
</select>
<br /></div>
<!-- option Departamento -->
<div id="Depto" style="display:none;">
<label for="cuartos" id="label">Cantidad de Recamaras: </label>
<input type="text" class="input-left" placeholder="3" name="recamaras">
<br />
<label for="baños" id="label">Cantidad de Baños: </label>
<input type="text" class="input-left" placeholder="1.5" name="baños">
<br />
<label for="Superficie" id="label">Superficie<sup>2</sup> de Inmueble: </label>
<input type="text" class="input-left" placeholder="150" name="superficie" size="10">
     
<select class="input-left">
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="construccion" id="label">Superficie<sup>2</sup> de Construccion: </label>
<input type="text" class="input-left" placeholder="150" name="construcion" size="10">
     
<select class="input-left">
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="precio" id="label">Precio: </label>
<input type="text" class="input-left" placeholder="$1500" name="precio">
    
<select class="input-left">
<option value="MXN">MXN</option>
<option value="USD">USD</option>
</select>
<br /></div>
<!-- option Oficina -->
<div id="Oficina" style="display:none;">
<label for="Oficina" id="label">Cantidad de Cubiculos: </label>
<input type="text" class="input-left" placeholder="3" name="cubiculos">
<br />
<label for="baños" id="label">Cantidad de Baños: </label>
<input type="text" class="input-left" placeholder="1.5" name="baños">
<br />
<label for="Superficie" id="label">Superficie<sup>2</sup> de Inmueble: </label>
<input type="text" class="input-left" placeholder="150" name="superficie" size="10">
     
<select class="input-left">
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="precio" id="label">Precio: </label>
<input type="text" class="input-left" placeholder="$1500" name="precio">
    
<select class="input-left">
<option value="MXN">MXN</option>
<option value="USD">USD</option>
</select>
<br /></div>
<!-- option Nave Indust. -->
<div id="Nave" style="display:none;">
<label for="Oficinas" id="label">Cantidad de Cubiculos: </label>
<input type="text" class="input-left" placeholder="3" name="cubiculos">
<br />
<label for="baños" id="label">Cantidad de Baños: </label>
<input type="text" class="input-left" placeholder="1.5" name="baños">
<br />
<label for="Superficie" id="label">Superficie<sup>2</sup> de Inmueble: </label>
<input type="text" class="input-left" placeholder="150" name="superficie" size="10">
     
<select class="input-left">
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="construccion" id="label">Superficie<sup>2</sup> de Construccion: </label>
<input type="text" class="input-left" placeholder="150" name="construcion" size="10">
     
<select class="input-left">
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="precio" id="label">Precio: </label>
<input type="text" class="input-left" placeholder="$1500" name="precio">
    
<select class="input-left">
<option value="MXN">MXN</option>
<option value="USD">USD</option>
</select>
<br /></div>
<!-- option Terreno -->
<div id="Terreno" style="display:none;">
<label for="Superficie" id="label">Superficie<sup>2</sup> de Inmueble: </label>
<input type="text" class="input-left" placeholder="150" name="superficie" size="10">
     
<select class="input-left">
<option value="sqf">sqf</option>
<option value="mts">mts</option>
</select>
<br />
<label for="precio" id="label">Precio: </label>
<input type="text" class="input-left" placeholder="$1500" name="precio">
    
<select class="input-left">
<option value="MXN">MXN</option>
<option value="USD">USD</option>
</select>
<br /></div>
</form>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.