Dynamic JS form Issue in a PHP page

@Eno1Aug 11.2009

I’m pretty new to this stuff so bear with please.

I have a form that has a dynamic drop down list with MySql table results displayed as well as a static “Add New” choice. It defaults to “please select”

I’m using JS to make fields appear below the list when the user chooses “add new” but as always … issues.. *sigh*

The JS code:

======================
function hide(obj)
{
obj1 = document.getElementById(obj);
obj1.style.visibility = ‘hidden’;
obj2 = document.getElementById(obj);
obj2.style.visibility = ‘hidden’;
obj3 = document.getElementById(obj);
obj3.style.visibility = ‘hidden’;
}
function show(obj)
{
obj1 = document.getElementById(obj);
obj1.style.visibility = ‘visible’;
obj2 = document.getElementById(obj);
obj2.style.visibility = ‘visible’;
obj3 = document.getElementById(obj);
obj3.style.visibility = ‘visible’;
}
function show_other2(optionValue)
{
if(optionValue==’add_new’){show(‘txt1’) & show(‘txt2’) & show(‘txt3’);} else{hide(‘txt1’) & hide(‘txt2’) & hide(‘txt3’);}

}
=====================

I have onChange=”show_other2(this.value) as the trigger on the drop down list menu. I have the ‘txt1’ etc inside Div tags encapsulating the fields I want to hide and show.

The code actually works well except for the first load of the page. The first load hides ‘txt1’ and thats it… the remaing two fields are shown.. but when the drop down list is used all the fields work great.. the three fields will appear on ‘add_new’ and disappear in unison when any other selection is made.

So.. any ideas? I don’t know much about JS.. other than it does great things. I came up the current code layout by fluke… I grabbed it from a site then adapted it. By the way.. if show_other2 doesn’t have the 2 the last two fields don’t work.

I’m a little perplexed at this stage..

Thanks in advance.. Eno

to post a comment

JavaScript

2 Comments(s) _↴

@Eno1authorAug 11.2009 — #By the way.. I did change the defaults from please select to add new and the last two fields were still visible on initial load.

Thanks in advance.. Eno

@Eno1authorAug 12.2009 — #I figured it out on my own .. yes.. like many if not most of you I have big bags under my eyes and an overwhelming feeling of victory.. ? ... it works great both in firefox and IE; here's the details:

In a form used by members to choose a list/group to join. They can choose the group from a drop down list or supply their own new list/group.

I have numerous choices in the drop down list dynamically fed from a MySql table and two 'static' entries one of which, "Please Select", is the default (what users see when the page loads)

THe Static Choices

"Please Select..."

"Add New"

When the user clicks to view the page and the page loads the drop down list defaults to "Please Select"

If the user chooses one of the dynamic choices from the data base nothing visibly happens.. the form is still visible in its original state and they can continue with their selection.

If they choose "Add New", three new text fields appear below, the form is now changed based on their selection. If they change their mind and make a different selection (including "Please Select") the three boxes/text fields disappear again.

So the form is completely dyanmic. Its like having two forms in one and the code is clean, I suspect I could continue adding and removing aspects of the form based on the same principles in the code ie: just continue with new id such as 'txt4', 'txt9' etc.

I deliberately kept the code clean as I can see myself using the same sort of code over and over again.

I'm using PHP and MYsql so I use includes as much as possible.. again.. clean reusable code to be tweaked and called on.

The Javascript code (placed inside <Script></script> containers of course:

======================

function hide(obj)

{

obj1 = document.getElementById(obj);

obj1.style.visibility = 'hidden';

obj2 = document.getElementById(obj);

obj2.style.visibility = 'hidden';

obj3 = document.getElementById(obj);

obj3.style.visibility = 'hidden';

}

function show(obj)

{

obj1 = document.getElementById(obj);

obj1.style.visibility = 'visible';

obj2 = document.getElementById(obj);

obj2.style.visibility = 'visible';

obj3 = document.getElementById(obj);

obj3.style.visibility = 'visible';

}

function show_other2(optionValue)

{

if(optionValue=='add_new'){show('txt1') & show('txt2') & show('txt3');} else{hide('txt1') & hide('txt2') & hide('txt3');}

}
=====================

-The other code is in the <div> containers

-The "onload=" code in the body tag (The onload= syntax was what was giving me fits)

-The "onchange=" code in the dropdown list.

You can make as many dynamic div tags as you like .. simply add the new numbered "id" such as 'txt5' etc to the JS code above as a new object. and continue to add <div id=('txt#') as in the format below.

<div id=('txt1')></div>

<div id=('txt2')></div>

<div id=('txt3')></div>

The div tags are is of course placed around the area of the form you want to hide and make reappear

ex:

Object 'txt1':

<div id="txt1">

<table>

<tr>

<td><input type="text" size="35" maxlength="60"/></td>

</tr>

</table>

</div>

Object 'txt2':

<div id="txt1">

<table>

<tr>

<td><input type="text" size="35" maxlength="60"/></td>

</tr>

</table>

</div>

Object 'txt3':

<div id="txt1">

<table>

<tr>

<td><input type="text" size="35" maxlength="60"/></td>

</tr>

</table>

</div>

==========

This code is in the <body> container. (The syntax in this code is important)

Ex:

<body onload="hide('txt1'); hide('txt2'); hide('txt3')" vlink="#000080" bgcolor="#FFFFFF">

</body>

This code is what causes the fields to hide on the first load of the page... note the semi-colons between each hide object but not after the last one. This format is important.

Take Care!

Eno

=============

Lastly is the "onchange=" code I use with the drop down list, this code of course causes the the divs to appear when the user chooses "add new".. and they will disappear again if the user changes his/her mind and picks a different selection.

Ex:

<select name="choose_list_menu" id="choose_list_menu" onChange="show_other2(this.value)"">

Note the "2" in: "show_other2(this.value)"

If I remove the "2" the code doesn't seem to work.

===========

So here is the code in a clean workable format and note its an HTML file as it stands. I use PHP and includes to load my pages with dynamic data but all this script needs is for users to have JS enabled.

I hope this helps anyone looking for such a solution. Please be sure to offer help to others.. We often spend needless hours on things that others have the answer to.. lets help each other out ?

===========

<!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>

<script type="text/javascript">

function hide(obj)

{

obj1 = document.getElementById(obj);

obj1.style.visibility = 'hidden';

obj2 = document.getElementById(obj);

obj2.style.visibility = 'hidden';

obj3 = document.getElementById(obj);

obj3.style.visibility = 'hidden';

}

function show(obj)

{

obj1 = document.getElementById(obj);

obj1.style.visibility = 'visible';

obj2 = document.getElementById(obj);

obj2.style.visibility = 'visible';

obj3 = document.getElementById(obj);

obj3.style.visibility = 'visible';

}

function show_other2(optionValue)

{

if(optionValue=='add_new'){show('txt1') & show('txt2') & show('txt3');} else{hide('txt1') + hide('txt2') + hide('txt3');}

}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Hide Form Example</title>

</head>

<body onload="hide('txt1'); hide('txt2'); hide('txt3')" vlink="#000080" bgcolor="#FFFFFF">

<p>

<p>Choose and change your choices:</p>

<form id="form1" name="form1" method="post" action="">

<label for="dropdown_list">Just a list</label>

<select name="dropdown_list" id="dropdown_list" onChange="show_other2(this.value)">

<option value="ps">Please Select</option>

<option value="add_new">Add New</option>

<option value="v_bc">Vancouver BC</option>

</select>

</p>

<div id="txt1">Enter Name You Want To Add:

<table>

<tr>

<td><input type="text" size="35" maxlength="60"/></td>

</tr>

</table>

</div>

<div id="txt2">Enter Address:

<table>

<tr>

<td><input type="text" size="35" maxlength="60"/></td>

</tr>

</table>

</div>

<div id="txt3">Enter Email::

<table>

<tr>

<td><input type="text" size="35" maxlength="60"/></td>

</tr>

</table>

</form>

</div>

</body>

</html>

Also in #JavaScript _↴

Gmail's "Attach Another Item"counting down from a future timestamp How to make a search case insensitive

Success!

Help @Eno1 spread the word by sharing this article on Twitter...

Tweet This

Dynamic JS form Issue in a PHP page

}
=====================

2 Comments(s) _↴

}
=====================

Also in #JavaScript _↴

Success!

Social

Version

Dynamic JS form Issue in a PHP page

} =====================

2 Comments(s) ↴

} =====================

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

}
=====================

2 Comments(s) _↴

}
=====================

Also in #JavaScript _↴