I have a bit of a problem with some java script.
Here is my test page:
https://www.thegiftstoreandmore.com/...e/dropdown.php
I am testing the second dropdown on that page.
When I select Other it will show the 3 text boxes but when I select the drop down to Select One there is a space left between the drop down and the Export Button.
I don't understand why it is doing this.
PHP / HTML Code
PHP Code:
<?php
include("admin/includes/header.inc.php");
?>
<br /><br /><br /><br />
<table width="50%" border="1" cellpadding="4" cellspacing="0" class="mainTable">
<tr>
<td class="tdDBCompare" colspan="1" align="center">
<select name="selFeed" id="feeds" onchange="feedType(this)">
<option value="">Select One</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr id="otherTitle1" style="display:none;">
<td class="copyText" width="100%" align="center">
<input type="text" value="Other Title 1">
</td>
</tr>
<tr id="otherTitle2" style="display:none;">
<td class="copyText" width="100%" align="center">
<input type="text" value="Other Title 2">
</td>
</tr>
<tr id="otherTitle3" style="display:none;">
<td class="copyText" width="100%" align="center">
<input type="text" value="Other Title 3">
</td>
</tr>
<tr>
<td class="copyText" colspan="2" align="center"><input type="submit" class="submit" name="export" value="<?php echo $lang['admin']['misc']['products_export_cat']?>" />
</td>
</tr>
</table>
<?php include("admin/includes/footer.inc.php");
?>
javaScript
PHP Code:
function feedType(obj)
{
// if (!document.layers)
// {
var txt1 = document.getElementById("otherTitle1");
var txt2 = document.getElementById("otherTitle2");
var txt3 = document.getElementById("otherTitle3");
if (obj.value == "other")
{
txt1.style.display = "inline";
txt2.style.display = "inline";
txt3.style.display = "inline";
// txt1.name = "selFeed";
// txt2.name = "selFeed";
// txt3.name = "selFeed";
obj.name = "";
} else if (obj.value == "Ms."){
txt1.style.display = "none";
txt2.style.display = "inline";
txt3.style.display = "none";
// txt1.name = "";
// txt2.name = "selFeed";
// txt3.name = "";
obj.name = "";
} else {
txt1.style.display = "none";
txt2.style.display = "none";
txt3.style.display = "none";
// txt1.name = "";
// txt2.name = "";
// txt3.name = "";
obj.name = "selFeed";
}
// }
}
I don't know anything about JavaScript so I am a bit lost.
Maybe I have something setup wrong in the table in regards to the javascript.