PDA

Click to See Complete Forum and Search --> : Show hide layer problem

mughrabi
09-17-2003, 02:17 PM
Dear all, I've used the code below to show or hide part of a form , my problem is that even the hidden part inserts in the databse (but not when empty) , I can't keep the hidden part empty because all the parts (hidden or not) has dynamically filled text boxes,

Do you have any suggestions :confused:

here's the code that I used


<html>
<head>
<script language="javascript">
<!---

var currDivObj = null;
function changeDIV(selObj) {
var divObj;
selValue = selObj.options[selObj.selectedIndex].value;
if(document.all)
divObj = eval("window.div" + selValue);
else
divObj = document.layers["div" + selValue];


if(document.all){
if(currDivObj){
currDivObj.style.display = "none";
}
divObj.style.display = "block";
}else {
if(currDivObj){
currDivObj.display = "none";
}
divObj.display = "block";
}
currDivObj = divObj;
}

</script>
<body>
<form>
<table><tr>
<TD align="right">
<select name="sel1" onChange = "changeDIV(this)">
<option value="0">Select a College</option>
<option value="1">Yale College</option>
<option value="2">Graduate School of Arts and Sciences</option>
</select>
</TD>
</tr>
</table>
<div id="div0" name="div0" style="display:none;">

</div>
<div id="div1" name="div1" style="display:none;">

<table border="0" bgcolor="#c9c9c9" cellpadding="5" cellspacing="1">
<tr>
<td>$<input type="text"></input></td>
<td>Unrestricted</td>
</tr>
<tr>
<td>$<input type="text"></input></td>
<td>Facilities Renovation</td>
</tr>
<tr>
<td>$<input type="text"></input></td>
<td>Faculty support/Curriculum Development</td>
</tr>
<tr>
<td>$<input type="text"></input></td>
<td>Financial Aid</td>
</tr>
<tr>
<td>$<input type="text"></input></td>
<td>Library Collections</td>
</tr>
<tr>
<td>$<input type="text"></input></td>
<td>Undergraduate Life</td>
</tr>
</table>

</div>
<div id="div2" name="div2" style="display:none;">

<table border="0" bgcolor="#c9c9c9" cellpadding="5" cellspacing="1">
<tr>
<td>$<input type="text"></input></td>
<td>Unrestricted</td>
</tr>
<tr>
<td>$<input type="text"></input></td>
<td>Financial Aid</td>
</tr>
<tr>
<td>Other Please specify:</td>
<td>$<input type="text"></input></td>
</tr>
</table>

</div>

<p>&nbsp;</p>
</form>
</body>
</html>
Khalid Ali
09-17-2003, 03:56 PM
post a link to the site where this form is from,

You should be able to find out before the form is submitted that which elements are hidden,and then set their values to none for e.g

add this function in the JS section of your code

function settHiddens(){
var frm = document.getElementById("form1");
var len = frm.lenth;
for(var x=0;x<len;x++){
if(frm[x].type=="hidden" && frm[x].value!="""){
frm[x].value="";
}
}
}

and then add the following in the form element, so that the form element may look like this

<form id="form1" onsubmit="return restHiddens();" action="formProcessingTarget.html" .....rest of the attribue follow>
mughrabi
09-17-2003, 04:43 PM
I really do appreciate ur help but unfortunately did not work ,

In fact this form is from another forum not from a site:
http://www-tcsn.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20655913.html

I think i didn't make mistakes regarding ur instructions above but would posting my whole code help ?

I'd be greatly thankful :)
Khalid Ali
09-17-2003, 05:04 PM
Can you show me how you implemented my suggestion...
mughrabi
09-17-2003, 05:30 PM
Sorry but here's the whole code ,

restHiddens() is at line 83

The form begins at line 96

<?php require_once('Connections/conn.php'); ?>
<?php
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;

switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}

$editFormAction = $HTTP_SERVER_VARS['PHP_SELF'];
if (isset($HTTP_SERVER_VARS['QUERY_STRING'])) {
$editFormAction .= "?" . $HTTP_SERVER_VARS['QUERY_STRING'];
}

if ((isset($HTTP_POST_VARS["MM_insert"])) && ($HTTP_POST_VARS["MM_insert"] == "form1")) {
$insertSQL = sprintf("INSERT INTO wireless_details (id, router_server_notes) VALUES (%s, %s)",
GetSQLValueString($HTTP_POST_VARS['id_ws'], "int"),
GetSQLValueString($HTTP_POST_VARS['serial'], "text"));

mysql_select_db($database_conn, $conn);
$Result1 = mysql_query($insertSQL, $conn) or die(mysql_error());
}

if ((isset($HTTP_POST_VARS["MM_insert"])) && ($HTTP_POST_VARS["MM_insert"] == "form1")) {
$insertSQL = sprintf("INSERT INTO fr_details (id, ts) VALUES (%s, %s)",
GetSQLValueString($HTTP_POST_VARS['id_fr'], "int"),
GetSQLValueString($HTTP_POST_VARS['ts'], "text"));

mysql_select_db($database_conn, $conn);
$Result1 = mysql_query($insertSQL, $conn) or die(mysql_error());
}
?>

<html>
<head>
<script language="javascript">
<!---

var currDivObj = null;
function changeDIV(selObj) {
var divObj;
selValue = selObj.options[selObj.selectedIndex].value;
if (document.getElementById)
divObj = document.getElementById("div" + selValue);
else if(document.all)
divObj = document.all("div" + selValue);
else if (document.layers)
divObj = document.layers["div" + selValue];

if(document.getElementById || document.all){
if(currDivObj){
currDivObj.style.display = "none";
}
divObj.style.display = "block";
}
else if (document.layers) {
if(currDivObj){
currDivObj.visibility = "hidden";
}
divObj.visibility = "visible";
}
currDivObj = divObj;
}

function restHiddens(){
var frm = document.getElementById("form1");
var len = frm.lenth;
for(var x=0;x<len;x++){
if(frm[x].type=="hidden" && frm[x].value!=""){
frm[x].value="";
}
}
}


</script>
<body>
<form name="form1" onsubmit= "return restHiddens();" action="<?php echo $editFormAction; ?>" method="POST" >
<table>
<tr>
<TD align="right"> <select name="sel1" onChange = "changeDIV(this)">
<option value="0">Select a College</option>
<option value="1">Yale College</option>
<option value="2">Graduate School of Arts and Sciences</option>
</select> </TD>
</tr>
</table>
<div id="div0" name="div0" style="display:none;"> </div>
<div id="div1" name="div1" style="display:none;">
<table border="0" bgcolor="#c9c9c9" cellpadding="5" cellspacing="1">
<tr>
<td>$ <input name="id_ws" type="text" id="id_ws"> </input></td>
<td>id</td>
</tr>
<tr>
<td height="34">$
<input name="serial" type="text" id="serial"> </input></td>
<td>serial</td>
</tr>
<tr>
<td>$ <input type="text"></input>
</td>
<td>Faculty support/Curriculum Development</td>
</tr>
<tr>
<td>$ <input type="text"></input>
</td>
<td>Financial Aid</td>
</tr>
<tr>
<td>$ <input type="text"></input>
</td>
<td>Library Collections</td>
</tr>
<tr>
<td>$ <input type="text"></input>
</td>
<td>Undergraduate Life</td>
</tr>
</table>
</div>
<div id="div2" name="div2" style="display:none;">
<table border="0" bgcolor="#c9c9c9" cellpadding="5" cellspacing="1">
<tr>
<td>$
<input name="id_fr" type="text" id="id_fr"> </input></td>
<td>id</td>
</tr>
<tr>
<td>$ <input name="ts" type="text" id="ts"> </input></td>
<td>ts</td>
</tr>
<tr>
<td>Other Please specify:</td>
<td>$ <input type="text"></input>
</td>
</tr>
</table>
</div>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
<p>rest of content</p>
<input type="hidden" name="MM_insert" value="form1">
</form>
</body>
</html>
Khalid Ali
09-17-2003, 05:54 PM
Here is the updated JS function

function restHiddens(){
var frm = document.getElementById("form1");
var len = frm.length;

for(var x=0;x<len;x++){
if(frm[x].type=="hidden" && frm[x].value!=""){
frm[x].value="";
}
}
return true;
}


and below is the updated form element

<form id="form1" name="form1" onsubmit= "return restHiddens();" action="<?php echo $editFormAction; ?>" method="POST" >
mughrabi
09-17-2003, 06:15 PM
This version does not submit values neither from hidden nor from visible fields :confused:
Khalid Ali
09-17-2003, 07:19 PM
I have to disagree mughrabi...I have just tested the code,it works and passes the data to the next page without the hidden fields value..Pleae make sure that all is working on your
If you want I might be able to put a working example at my webserver later
mughrabi
09-17-2003, 07:37 PM
OK please do , I'm deeply grateful.
Shokran
Khalid Ali
09-17-2003, 07:56 PM
There you go

http://68.145.35.86/temp/mughrabi_form_problem.html
mughrabi
09-17-2003, 08:48 PM
Dear Khaled,

I'm afraid that the problem is not solved,
first i entered two values in the text fields id_ws and serial
then before submit I chose the graduate school from the combo and entered two values , then submitted , the four values where submitted to the next page , here is the result
http://68.145.35.86/skills/javascripts/GetFormValuesParsingURLData.html?sel1=2&id_ws=1&serial=hhh&id_fr=2&ts=vvv&Submit=Submit&MM_insert=

Khaled I'm really sorry but i still need a solution.
Khalid Ali
09-17-2003, 08:58 PM
The problem is not that its not solved, the problem is in the underlying code you are using to show and hide the form fields,

This is the logical error in your code or whever wrote it.

WHat it should do is remove values from the fields once you select and then change to another option....

This is what you need to do.
run a check on every time you select a value from the list box.
And then make sure that the element that is selected in the list box only relative to that input fields are shown and all others are empty.
Khalid Ali
09-17-2003, 09:18 PM
I have updated the link and fixed your code..it should do what you intend it to..unless there is some thing new that you have not mentioned before..:D
mughrabi
09-17-2003, 10:15 PM
Thanx a lot Khaled , It's really good work ,
I don't know why whenever I add the restHiddens() that has the return true ; it stops inserting in the DB, I know it is supposed to work , but I'm sure there's nothing wrong in the syntax
here's the code again , do u suspect any thing wrong in the code khaled?

<html>
<head>
<script language="javascript">
<!---

var currDivObj = null;
function changeDIV(selObj) {
var divObj;
selValue = selObj.options[selObj.selectedIndex].value;
if (document.getElementById)
divObj = document.getElementById("div" + selValue);
else if(document.all)
divObj = document.all("div" + selValue);
else if (document.layers)
divObj = document.layers["div" + selValue];

if(document.getElementById || document.all){
if(currDivObj){
currDivObj.style.display = "none";
}
divObj.style.display = "block";
}
else if (document.layers) {
if(currDivObj){
currDivObj.visibility = "hidden";
}
divObj.visibility = "visible";
}
currDivObj = divObj;
}

function resetAll(obj){
var els = obj.getElementsByTagName("input");
var len = els.length;
for(var n=0;n<len;n++){
var el = els[n];
alert(el.type+" value = "+el.value)
if(el.type=="text" | el.type=="hidden"){
el.value="";
}
}
restHiddens();
}


function restHiddens(){
var frm = document.getElementById("form1");
var len = frm.length;

for(var x=0;x<len;x++){
if(frm[x].type=="hidden" && frm[x].value!=""){
frm[x].value="";
}
}
return true;
}



</script>
<body>
<form name="form1" id="form1" onsubmit= "return restHiddens();" action="<?php echo $editFormAction; ?>" method="POST" >
<table>
<tr>
<TD align="right"> <select name="sel1" onChange = "changeDIV(this)">
<option value="0">Select a College</option>
<option value="1">Yale College</option>
<option value="2">Graduate School of Arts and Sciences</option>
</select> </TD>
</tr>
</table>
<div id="div0" name="div0" style="display:none;"> </div>
<div id="div1" name="div1" style="display:none;">
<table border="0" bgcolor="#c9c9c9" cellpadding="5" cellspacing="1">
<tr>
<td>$ <input name="id_ws" type="text" id="id_ws"> </input></td>
<td>id</td>
</tr>
<tr>
<td height="34">$
<input name="serial" type="text" id="serial"> </input></td>
<td>serial</td>
</tr>
<tr>
<td>$ <input type="text"></input>
</td>
<td>Faculty support/Curriculum Development</td>
</tr>
<tr>
<td>$ <input type="text"></input>
</td>
<td>Financial Aid</td>
</tr>
<tr>
<td>$ <input type="text"></input>
</td>
<td>Library Collections</td>
</tr>
<tr>
<td>$ <input type="text"></input>
</td>
<td>Undergraduate Life</td>
</tr>
</table>
</div>
<div id="div2" name="div2" style="display:none;">
<table border="0" bgcolor="#c9c9c9" cellpadding="5" cellspacing="1">
<tr>
<td>$
<input name="id_fr" type="text" id="id_fr"> </input></td>
<td>id</td>
</tr>
<tr>

<td>$ <input name="ts" type="text" id="ts"> </input></td>
<td>ts</td>
</tr>
<tr>
<td>Other Please specify:</td>
<td>$ <input type="text"></input>
</td>
</tr>
</table>
</div>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
<p>rest of content</p>
<input type="hidden" name="MM_insert" value="form1">
</form>
</body>
</html>
Khalid Ali
09-17-2003, 10:36 PM
now you need to make sure that you are getting values on the php side...because if all is good on the page then there is a problem inphp code
mughrabi
09-19-2003, 06:56 PM
Dear Khaled,
Finally I found out why it wasn't inserting to the database with ur code, I guess this note will be useful to people who work with PHP/MySQL on DreamWeaverMX,

The function restHiddens resets the value of mm_insert to "" or (empty) since its type is hidden , I made a simple alteration to the function after which it worked

function restHiddens(){
var frm = document.getElementById("form1");
var len = frm.length;

for(var x=0;x<len;x++){
if((frm[x].type=="hidden") && (frm[x].value!="")&&(frm[x].name!="MM_insert")){
frm[x].value="";
}
}
return true;
}

Thats it !!
mughrabi
09-21-2003, 11:07 AM
Dear Khaled,
I know I'm going too far , but I'm really new to java script and I need ur help,

I've altered the former code so that one of the shown layers gives you the ability to show or hide a third or fourth layer,
I've tried to use ur code provided in the example
http://68.145.35.86/temp/mughrabi_form_problem.html
to solve the problem , it worked for two layers but I failed to make it work for four layers :o

here's the page that contains the four layers , the thirs and fourth are available when you choose wireless then sa and of course dynamic php filled fields won't work but still the page is Obvious.

Please I really need help :rolleyes:
(the code is continued in the following post cuz it's too long)

<td><div align="right"><font face="Verdana, Arial, Helvetica, sans-serif"><strong><font size="2">router
or server notes</font></strong></font></div></td>
<td> <input name="router_server_notes" type="text" id="router_server_notes"></td>
</tr>
<tr>
<td> <div align="right"><font face="Verdana, Arial, Helvetica, sans-serif"></font></div></td>
<td>&nbsp; </td>
</tr>
</table>
<table width="75%" border="1">
<tr>
<td width="47%" height="28"><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>wb
or sa</strong></font></div></td>
<td width="53%"><select name="via_sa_wb" id="via_sa_wb" onChange = "changeDIV1(this)">
<option value="0">--select--</option>
<option value="5">WB</option>
<option value="6">SA</option>
</select></td>
</tr>
</table>
<div id="div5" name="div5" style="display:none;">
<table width="75%" border="1">
<tr>
<td width="48%"><div align="right"><strong><font size="2" face="Verdana, Arial, Helvetica, sans-serif">WB</font></strong></div></td>
<td width="52%"> <select name="serial_wb" id="select">
<?php
do {
?>
<option value="<?php echo $row_WB['serial']?>"><?php echo $row_WB['dns']?></option>
<?php
} while ($row_WB = mysql_fetch_assoc($WB));
$rows = mysql_num_rows($WB);
if($rows > 0) {
mysql_data_seek($WB, 0);
$row_WB = mysql_fetch_assoc($WB);
}
?>
mughrabi
09-21-2003, 11:09 AM
</select></td>
</tr>
</table>
</div>
<div id="div6" name="div6" style="display:none;">
<table width="75%" border="1">
<tr>
<td><div align="right"><strong><font size="2" face="Verdana, Arial, Helvetica, sans-serif">id</font></strong></div></td>
<td>
<?php if ($row_sa_id['select_max_sa']>1){
$v_max1 = $row_sa_id['select_max_sa'];
}
if($row_sa_id['select_max_sa']<=1){
$v_max1=1;
}
?>
<input name="id_sa" type="text" id="id_sa" value="<?php echo $v_max1; ?>" size="32" readonly="">
</td>
</tr>
<tr>
<td><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">serial#</font></div></td>
<td> <input name="sa_serial" type="text" id="sa_serial"></td>
</tr>
<tr>
<td><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">AP</font></div></td>
<td> <select name="ap" id="ap">
<?php
do {
?>
<option value="<?php echo $row_AP['id']?>"><?php echo $row_AP['dns']?></option>
<?php
} while ($row_AP = mysql_fetch_assoc($AP));
$rows = mysql_num_rows($AP);
if($rows > 0) {
mysql_data_seek($AP, 0);
$row_AP = mysql_fetch_assoc($AP);
}
?>
</select></td>
</tr>
<tr>
<td><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">dns</font></div></td>
<td> <input name="dns_sa" type="text" id="dns_sa"></td>
</tr>
<tr>
<td><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">ver</font></div></td>
<td> <input name="ver" type="text" id="ver"></td>
</tr>
<tr>
<td><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">inst</font></div></td>
<td> <input name="inst" type="text" id="inst"></td>
</tr>
<tr>
<td><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">model</font></div></td>
<td> <select name="model" id="model">
<?php
do {
?>
<option value="<?php echo $row_sa_model['id']?>"><?php echo $row_sa_model['model']?></option>
<?php
} while ($row_sa_model = mysql_fetch_assoc($sa_model));
$rows = mysql_num_rows($sa_model);
if($rows > 0) {
mysql_data_seek($sa_model, 0);
$row_sa_model = mysql_fetch_assoc($sa_model);
}
?>
</select></td>
</tr>
<tr>
<td height="28"><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">IP
Address</font></div></td>
<td><input name="sa_ip_address" type="text" id="sa_ip_address"></td>
</tr>
<tr>
<td height="28"><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">notes</font></div></td>
<td> <input name="notes" type="text" id="notes"></td>
</tr>
</table>
</div>
<p>&nbsp;</p>
</div>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<input type="hidden" name="MM_insert" value="form1">
</form>
<!-- InstanceEndEditable --></td>
</tr>
</table></td>
</tr>
</table>
</body>
<!-- InstanceEnd --></html>