...

View Full Version : Hiding Echo'd Tags



thoford75
10-15-2009, 12:28 PM
Hey. I'm creating a form for an online basket, and I want the user to to be able to initially select one of two options. However as I am using echo tags, within div tags, I am unsure how to hide or unhide the areas when not in use. At the moment, the user can click through one of the options in the form but when the other options is selected, the begining menu still appears.

Im sure its just a case of not putting things in the right place or maybe ive missed closing a tag somewhere?

Here is my code

echo '<div id="unknown_size"';
if (isset($erun)) { echo ' style="display:none;"'; }
echo '>';
echo '<h1>What Are You Looking To Carpet?</h1>';

echo '<div id="us_whole">';
echo '<a onclick="document.getElementById(\'basket_title_amendment2\').style.display=\'\'; document.getElementById(\'basket_form_amendment2\').style.display=\'\'; document.getElementById(\'basket_submit_amendment2\').style.display=\'\'; document.getElementById(\'unknown_size2\').style.display=\'none\';">WHOLEHOUSEIMAGE</a>';
echo '<div class="us_text">Whole House</div>';
echo '<br style="clear: both; line-height: 1px;" />';
echo '</div>';

echo '<div id="us_rooms">';
echo '<a onclick="document.getElementById(\'basket_title_amendment\').style.display=\'\'; document.getElementById(\'basket_form_amendment\').style.display=\'\'; document.getElementById(\'basket_submit_amendment\').style.display=\'\'; document.getElementById(\'unknown_size\').style.display=\'none\';">ONEROOMIMAGE</a>';
echo '<div class="us_text">One or more rooms</div>';
echo '<br style="clear: both; line-height: 1px;" />';
echo '</div>';

echo '</div>';




echo '<span id="basket_title_amendment2"';
if (!isset($erun)) { echo ' style="display:none;"'; }
echo '><img src="/images/add.png"><p class="input-title">Give your room a name...<br />';
echo '<input type="text" name="carpet_room" size="40" maxlength="50" class="textbox" value="';
if (isset($_POST['carpet_room'])) { echo stripslashes($_POST['carpet_room']); } else { echo 'e.g. Small front bedroom'; }
echo '" onclick="this.value=\'\';" />';
echo '</p><br /></span>';


echo '<span id="basket_title_amendment"';
if (!isset($erun)) { echo ' style="display:none;"'; }
echo '>';
echo '<p class="input-title">Give your room a name...<br />';
echo '<input type="text" name="carpet_room" size="40" maxlength="50" class="textbox" value="';
if (isset($_POST['carpet_room'])) { echo stripslashes($_POST['carpet_room']); } else { echo 'e.g. Small front bedroom'; }
echo '" onclick="this.value=\'\';" />';
echo '</p><br /></span>';
}
else {
echo '<p class="input-title">Select your room from the list or create a new one...<br />';
echo '<select name="carpet_room_select" size="1" onchange="';
$i = 1;
while ($row = mysql_fetch_assoc($result)) {
echo "if (this.selectedIndex==" . $i . "){document.getElementById('basket_form').style.display='none'; this.form['carpet_room'].value='" . addslashes($row['basket_name']) . "'; ";
if ($row['basket_fitted'] == 'Yes') {
echo "document.getElementById('carpet_fitted_no').checked=false; ";
echo "document.getElementById('carpet_fitted_yes').checked=true; ";
}
else {
echo "document.getElementById('carpet_fitted_yes').checked=false; ";
echo "document.getElementById('carpet_fitted_no').checked=true; ";
}
echo "this.form['carpet_width'].value='" . $row['basket_width'] . "'; this.form['carpet_length'].value='" . $row['basket_length'] . "'; ";
if ($row['basket_underlay'] == 'Yes') {
echo "document.getElementById('carpet_underlay_no').checked=false; ";
echo "document.getElementById('carpet_underlay_yes').checked=true; ";
}
else {
echo "document.getElementById('carpet_underlay_yes').checked=false; ";
echo "document.getElementById('carpet_underlay_no').checked=true; ";
}
echo "}";
echo "if (this.selectedIndex==" . ($i+1) . "){document.getElementById('basket_form').style.display=''; this.form['carpet_room'].value=''; this.form['carpet_fitted'].value=''; this.form['carpet_width'].value=''; this.form['carpet_length'].value=''; this.form['carpet_underlay'].value='';}";
$i++;
}
echo '">';
echo '<option value=""></option>';
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {
echo '<option value="">' . $row['basket_name'] . '</option>';
}
echo '<option value="">I want to create a new room</option>';
echo '</select>';
echo '</p><br />';
}
echo '</div>';










?>



Would really greatly appreciate anyone who could take a quick look at this for me :)

Fumigator
10-15-2009, 05:48 PM
I have a couple of coding style suggestions for you.

First, indent. Yes, you use more than a single line. But it's readable and easy to see what's going on.



//blech
if (isset($_POST['carpet_room'])) { echo stripslashes($_POST['carpet_room']); } else { echo 'e.g. Small front bedroom'; }

//yay!
if (isset($_POST['carpet_room'])) {
echo stripslashes($_POST['carpet_room']);
} else {
echo 'e.g. Small front bedroom';
}

//another popular style
if (isset($_POST['carpet_room']))
{
echo stripslashes($_POST['carpet_room']);
}
else
{
echo 'e.g. Small front bedroom';
}

//and actually in this case you can use the ternary style:
echo (isset($_POST['carpet_room') ? stripslashes($_POST['carpet_room']) : 'e.g. Small front bedroom');


Vast improvement.

Next, you've repeated the same "if" statement several times, each time to accomplish the same thing-- to assign a style to an element. Why not do one "if" statement up top to determine which style to use? Make yourself a css class with "display:none" in it and assign a variable to that class name, then just use that variable name throughout your markup.

CSS:


hideBlock {
display: none;
}

showBlock {
display: block;
}


Your one "if" statement:


if (isset($erun)) {
$cssClass = "hideBlock";
} else {
$cssClass = "showBlock";
}


Use it in the html:


echo "<div id='unknown_size' class='$cssClass'>";


Lastly, when there's a lot of html to echo, most times it's more readable to break out of PHP coding and just code the html raw.

Example:


<?php
while ($row = mysql_fetch_assoc($result)) {
?>
if (this.selectedIndex==<?php echo $i; ?>) {
document.getElementById('basket_form').style.display='none';
this.form['carpet_room'].value='<?php echo addslashes($row['basket_name']); ?>';
}
<?php
//more php code

thoford75
10-15-2009, 06:45 PM
Thank you for your helpful response. I have tried implementing your ideas into my code with varying degrees of success. I feel i'm almost there now but not quite. Just so you can see whats happening here is the code for the entire section:


<?php

$query = "SELECT * FROM basket WHERE session_id='" . mysql_real_escape_string(session_id()) . "' GROUP BY basket_name ORDER BY basket_name ASC";

$result = mysql_query($query);

$basket_rows = mysql_num_rows($result);

if ($basket_rows == 0) {

echo '<div id="unknown_size"';
if (isset($erun)) {
$cssClass = "hideBlock";
} else {
$cssClass = "showBlock";
} echo '>';

echo '<h1>What Are You Looking To Carpet?</h1>';

echo '<div id="us_whole">';

echo '<a onclick="document.getElementById(\'basket_title_amendment2\').style.display=\'\'; document.getElementById(\'basket_form_amendment2\').style.display=\'\'; document.getElementById(\'basket_submit_amendment2\').style.display=\'\'; document.getElementById(\'unknown_size2\').style.display=\'none\';">WHOLEHOUSEIMAGE</a>';
echo '<div class="us_text">Whole House</div>';
echo '<br style="clear: both; line-height: 1px;" />';
echo "<div id='unknown_size' class='$cssClass'>";
echo '</div>';

echo '<div id="us_rooms">';
echo '<a onclick="document.getElementById(\'basket_title_amendment\').style.display=\'\'; document.getElementById(\'basket_form_amendment\').style.display=\'\'; document.getElementById(\'basket_submit_amendment\').style.display=\'\'; document.getElementById(\'unknown_size\').style.display=\'none\';">ONEROOMIMAGE</a>';
echo '<div class="us_text">One or more rooms</div>';
echo '<br style="clear: both; line-height: 1px;" />';
echo '</div>';

echo '</div>';




echo '<span id="basket_title_amendment2"';
if (!isset($erun)) { echo ' style="display:none;"'; }

echo '>';
echo '<p class="input-title">Give your whole house a name...<br />';
echo '<input type="text" name="carpet_room" size="40" maxlength="50" class="textbox" value="';
if (isset($_POST['carpet_room'])) {
echo stripslashes($_POST['carpet_room']);
} else {
echo 'e.g. whole house room';
}
echo '" onclick="this.value=\'\';" />';
echo '</p><br /></span>';
}
else {
echo '<p class="input-title">Select your room from the list or create a new one...<br />';
echo '<select name="carpet_room_select" size="1" onchange="';
$i = 1;
while ($row = mysql_fetch_assoc($result)) {
echo "if (this.selectedIndex==" . $i . "){document.getElementById('basket_form').style.display='none'; this.form['carpet_room'].value='" . addslashes($row['basket_name']) . "'; ";
if ($row['basket_fitted'] == 'Yes') {
echo "document.getElementById('carpet_fitted_no').checked=false; ";
echo "document.getElementById('carpet_fitted_yes').checked=true; ";
}
else {
echo "document.getElementById('carpet_fitted_yes').checked=false; ";
echo "document.getElementById('carpet_fitted_no').checked=true; ";
}
echo "this.form['carpet_width'].value='" . $row['basket_width'] . "'; this.form['carpet_length'].value='" . $row['basket_length'] . "'; ";
if ($row['basket_underlay'] == 'Yes') {
echo "document.getElementById('carpet_underlay_no').checked=false; ";
echo "document.getElementById('carpet_underlay_yes').checked=true; ";
}
else {
echo "document.getElementById('carpet_underlay_yes').checked=false; ";
echo "document.getElementById('carpet_underlay_no').checked=true; ";
}
echo "}";
echo "if (this.selectedIndex==" . ($i+1) . "){document.getElementById('basket_form').style.display=''; this.form['carpet_room'].value=''; this.form['carpet_fitted'].value=''; this.form['carpet_width'].value=''; this.form['carpet_length'].value=''; this.form['carpet_underlay'].value='';}";
$i++;
}
echo '">';
echo '<option value=""></option>';
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {
echo '<option value="">' . $row['basket_name'] . '</option>';
}
echo '<option value="">I want to create a new room</option>';
echo '</select>';
echo '</p><br />';
}
echo '</div>';






echo '<span id="basket_title_amendment"';
if (!isset($erun)) { echo ' style="display:none;"'; }

echo '>';
echo '<p class="input-title">Give your room a name...<br />';
echo '<input type="text" name="carpet_room" size="40" maxlength="50" class="textbox" value="';
if (isset($_POST['carpet_room'])) {
echo stripslashes($_POST['carpet_room']);
} else {
echo 'e.g. Small front bedroom';
}
echo '" onclick="this.value=\'\';" />';
echo '</p><br /></span>';
}
else {
echo '<p class="input-title">Select your room from the list or create a new one...<br />';
echo '<select name="carpet_room_select" size="1" onchange="';
$i = 1;
while ($row = mysql_fetch_assoc($result)) {
echo "if (this.selectedIndex==" . $i . "){document.getElementById('basket_form').style.display='none'; this.form['carpet_room'].value='" . addslashes($row['basket_name']) . "'; ";
if ($row['basket_fitted'] == 'Yes') {
echo "document.getElementById('carpet_fitted_no').checked=false; ";
echo "document.getElementById('carpet_fitted_yes').checked=true; ";
}
else {
echo "document.getElementById('carpet_fitted_yes').checked=false; ";
echo "document.getElementById('carpet_fitted_no').checked=true; ";
}
echo "this.form['carpet_width'].value='" . $row['basket_width'] . "'; this.form['carpet_length'].value='" . $row['basket_length'] . "'; ";
if ($row['basket_underlay'] == 'Yes') {
echo "document.getElementById('carpet_underlay_no').checked=false; ";
echo "document.getElementById('carpet_underlay_yes').checked=true; ";
}
else {
echo "document.getElementById('carpet_underlay_yes').checked=false; ";
echo "document.getElementById('carpet_underlay_no').checked=true; ";
}
echo "}";
echo "if (this.selectedIndex==" . ($i+1) . "){document.getElementById('basket_form').style.display=''; this.form['carpet_room'].value=''; this.form['carpet_fitted'].value=''; this.form['carpet_width'].value=''; this.form['carpet_length'].value=''; this.form['carpet_underlay'].value='';}";
$i++;
}
echo '">';
echo '<option value=""></option>';
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {
echo '<option value="">' . $row['basket_name'] . '</option>';
}
echo '<option value="">I want to create a new room</option>';
echo '</select>';
echo '</p><br />';
}
echo '</div>';










?>


<?php
if ($basket_rows != 0) {
echo '<div style="display: none;" id="basket_form">';
echo '<p class="input-title">Give your room a name...<br />';
echo '<input type="text" name="carpet_room" size="40" maxlength="50" class="textbox" value="';
if (isset($_POST['carpet_room'])) { echo stripslashes($_POST['carpet_room']); } else { echo 'e.g. Small front bedroom'; }
echo '" onclick="this.value=\'\';" />';
echo '</p><br />';
}
else {
echo '<div id="basket_form_amendment"';
if (!isset($erun)) { echo ' style="display:none;"'; }
echo '>';
}
?>
<p class="input-title">Would you like us to fit the flooring for you?
<span class="radio-container">
<input type="radio" name="carpet_fitted" id="carpet_fitted_yes" value="Yes" <?php if ($_POST['carpet_fitted'] == 'Yes') { echo 'checked="checked"'; } ?> />Yes
<input type="radio" name="carpet_fitted" id="carpet_fitted_no" value="No" <?php if ($_POST['carpet_fitted'] == 'No') { echo 'checked="checked"'; } ?> />No </span> </p>
<br />

<p class="input-title">Please enter the room size (in metres)<br />
<input type="text" name="carpet_width" size="5" maxlength="5" value="<?php if (isset($_POST['carpet_width'])) { echo stripslashes($_POST['carpet_width']); } else { echo 'Width'; } ?>" class="numbers_only textbox" onclick="this.value='';" /> X <input type="text" name="carpet_length" size="5" maxlength="5" value="<?php if (isset($_POST['carpet_length'])) { echo stripslashes($_POST['carpet_length']); } else { echo 'Length'; } ?>" class="numbers_only textbox" onclick="this.value='';" />
</p>
<br />

<p class="input-title">Do you require underlay for this room?
<span class="radio-container">
<input type="radio" name="carpet_underlay" id="carpet_underlay_yes" value="Yes" <?php if ($_POST['carpet_underlay'] == 'Yes') { echo 'checked="checked"'; } ?> />Yes
<input type="radio" name="carpet_underlay" id="carpet_underlay_no" value="No" <?php if ($_POST['carpet_underlay'] == 'No') { echo 'checked="checked"'; } ?> />No </span> </p>
<br />
</div>

<?php if ($basket_rows == 0) { echo '<div id="basket_submit_amendment"'; if (!isset($erun)) { echo ' style="display:none;"'; } echo '>'; } ?>
<input type="hidden" name="carpet_id" value="<?php echo $id; ?>" />
<input type="hidden" name="submitted" value="TRUE" />
<input type="image" src="/images/add-to-basket-button.gif" /><a class="jqmClose">Cancel &amp; return</a>
<?php if ($basket_rows == 0) { echo '</div>'; } ?>
</form>
</div>
</div>
<div id="dialog-bottom-cap"></div>
</div>

<!-- End Modaling -->



<script language="JavaScript" src="components/google.js" type="text/javascript"></script>
</body>
</html>


Basically the plan is to have two forms, looking identical (one room and whole house) with the exception of different images on each form.

Any thoughts?

thoford75
10-16-2009, 01:30 PM
I've updated my code and now have it allllmosttt working! This is my entire code for the section im struggling with.



<?php

$query = "SELECT * FROM basket WHERE session_id='" . mysql_real_escape_string(session_id()) . "' GROUP BY basket_name ORDER BY basket_name ASC";

$result = mysql_query($query);

$basket_rows = mysql_num_rows($result);

if ($basket_rows == 0) {

echo '<div id="unknown_size"';
if (isset($erun)) {
$cssClass = "hideBlock";
} else {
$cssClass = "showBlock";
} echo '>';

echo '<h1>What Are You Looking To Carpet?</h1>';

echo '<div id="us_whole">';

echo '<a onclick="document.getElementById(\'basket_title_amendment\').style.display=\'\'; document.getElementById(\'basket_form_amendment\').style.display=\'\'; document.getElementById(\'basket_submit_amendment\').style.display=\'\'; document.getElementById(\'unknown_size\').style.display=\'none\';">WHOLEHOUSEIMAGE</a>';
echo '<div class="us_text">Whole House</div>';
echo '<br style="clear: both; line-height: 1px;" />';

echo '</div>';

echo '<div id="us_rooms">';
echo '<a onclick="document.getElementById(\'basket_title_amendment\').style.display=\'\'; document.getElementById(\'basket_form_amendment\').style.display=\'\'; document.getElementById(\'basket_submit_amendment\').style.display=\'\'; document.getElementById(\'unknown_size\').style.display=\'none\'; document.getElementById(\'basket_banner\').style.display=\'\';">ONEROOMIMAGE</a>';
echo '<div class="us_text">One or more rooms</div>';
echo '<br style="clear: both; line-height: 1px;" />';

echo '</div>';

echo '</div>';







echo '<span id="basket_title_amendment"';
if (!isset($erun)) { echo ' style="display:none;"'; }

echo '>';
echo '<p class="input-title">Give your room a name...<br />';
echo '<input type="text" name="carpet_room" size="40" maxlength="50" class="textbox" value="';
if (isset($_POST['carpet_room'])) { echo stripslashes($_POST['carpet_room']); } else { echo 'e.g. Small front bedroom'; }
echo '" onclick="this.value=\'\';" />';

}
else {
echo '<p class="input-title">Select your room from the list or create a new one...<br />';
echo '<select name="carpet_room_select" size="1" onchange="';
$i = 1;
while ($row = mysql_fetch_assoc($result)) {
echo "if (this.selectedIndex==" . $i . "){document.getElementById('basket_form').style.display='none'; this.form['carpet_room'].value='" . addslashes($row['basket_name']) . "'; ";
if ($row['basket_fitted'] == 'Yes') {
echo "document.getElementById('carpet_fitted_no').checked=false; ";
echo "document.getElementById('carpet_fitted_yes').checked=true; ";
}
else {
echo "document.getElementById('carpet_fitted_yes').checked=false; ";
echo "document.getElementById('carpet_fitted_no').checked=true; ";
}
echo "this.form['carpet_width'].value='" . $row['basket_width'] . "'; this.form['carpet_length'].value='" . $row['basket_length'] . "'; ";
if ($row['basket_underlay'] == 'Yes') {
echo "document.getElementById('carpet_underlay_no').checked=false; ";
echo "document.getElementById('carpet_underlay_yes').checked=true; ";
}
else {
echo "document.getElementById('carpet_underlay_yes').checked=false; ";
echo "document.getElementById('carpet_underlay_no').checked=true; ";
}
echo "}";
echo "if (this.selectedIndex==" . ($i+1) . "){document.getElementById('basket_form').style.display=''; this.form['carpet_room'].value=''; this.form['carpet_fitted'].value=''; this.form['carpet_width'].value=''; this.form['carpet_length'].value=''; this.form['carpet_underlay'].value='';}";
$i++;
}
echo '">';
echo '<option value=""></option>';
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {
echo '<option value="">' . $row['basket_name'] . '</option>';
}
echo '<option value="">I want to create a new room</option>';
echo '</select>';
echo '</p><br />';
}
echo '</div>';



?>


<?php
if ($basket_rows != 0) {
echo '<div style="display: none;" id="basket_form">';
echo '<p class="input-title">Give your room a name...<br />';
echo '<input type="text" name="carpet_room" size="40" maxlength="50" class="textbox" value="';
if (isset($_POST['carpet_room'])) { echo stripslashes($_POST['carpet_room']); } else { echo 'e.g. Small front bedroom'; }
echo '" onclick="this.value=\'\';" />';
echo '</p><br />';
}
else {
echo '<div id="basket_form_amendment"';
if (!isset($erun)) { echo ' style="display:none;"'; }
echo '>';
}
?>
<p class="input-title">Would you like us to fit the flooring for you?
<span class="radio-container">
<input type="radio" name="carpet_fitted" id="carpet_fitted_yes" value="Yes" <?php if ($_POST['carpet_fitted'] == 'Yes') { echo 'checked="checked"'; } ?> />Yes
<input type="radio" name="carpet_fitted" id="carpet_fitted_no" value="No" <?php if ($_POST['carpet_fitted'] == 'No') { echo 'checked="checked"'; } ?> />No </span> </p>
<br />

<p class="input-title">Please enter the room size (in metres)<br />
<input type="text" name="carpet_width" size="5" maxlength="5" value="<?php if (isset($_POST['carpet_width'])) { echo stripslashes($_POST['carpet_width']); } else { echo 'Width'; } ?>" class="numbers_only textbox" onclick="this.value='';" /> X <input type="text" name="carpet_length" size="5" maxlength="5" value="<?php if (isset($_POST['carpet_length'])) { echo stripslashes($_POST['carpet_length']); } else { echo 'Length'; } ?>" class="numbers_only textbox" onclick="this.value='';" />
</p>
<br />

<p class="input-title">Do you require underlay for this room?
<span class="radio-container">
<input type="radio" name="carpet_underlay" id="carpet_underlay_yes" value="Yes" <?php if ($_POST['carpet_underlay'] == 'Yes') { echo 'checked="checked"'; } ?> />Yes
<input type="radio" name="carpet_underlay" id="carpet_underlay_no" value="No" <?php if ($_POST['carpet_underlay'] == 'No') { echo 'checked="checked"'; } ?> />No </span> </p>
<br />
</div>

<?php if ($basket_rows == 0) { echo '<div id="basket_submit_amendment"'; if (!isset($erun)) { echo ' style="display:none;"'; } echo '>'; } ?>
<input type="hidden" name="carpet_id" value="<?php echo $id; ?>" />
<input type="hidden" name="submitted" value="TRUE" />
<input type="image" src="/images/add-to-basket-button.gif" /><a class="jqmClose">Cancel &amp; return</a>
<?php if ($basket_rows == 0) { echo '</div>'; } ?>
</form>
</div>
</div>
<div id="dialog-bottom-cap"></div>
</div>


Pretty sure i havent closed a div or span tag somewhere causing the styling to not look great. :/

All I need to happen now is when the user clicks on one link (i.e. whole house) I want an image (banner.jpg) to display at the top of the form and if the user clicks the other link, i dont want the image to be shown.

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum