This topic is locked

Enableing and Disabling Fields dependent on Lookup

9/24/2007 4:41:11 AM
PHPRunner General questions
A
almond author

Dear PHPRunner Gurus,
Good day, I have checked the forums already and I can't seem to find any link with regards to my problem. I am trying to disable a group of fields depending on the options on a lookup. If I choose a certain value on the look up, certain fields will be disabled and other fields that pertain to that option will be enabled. Somewhat like the thing you can do in VB when you change a value of a combo box or choose and option in a radio button group then object will be disabled or enabled as follows. Hope someone can help me with my problem.
Here is an image of the thing i want to do.


Thanks in advance for the help and good day to all once again.
More power to PHPRunner and keep up the good work guys...
PHP Newbie,
Almond

J
Jane 9/24/2007

Hi,
you can do the following:

  1. open include/commonfunctions.php file, find BuildSelectControl function and add onChange event handler to your dropdown field
  2. add id=status1 for the OBMNNbr, OBRank and other fields, id=status2 for the EOC, Port and other fields on the Visual Editor tab
  3. check selected value in your new onChange event and set up style for these fields as inline or none.
    I would recommend you to learn some Javascript and PHP so you can implement this on your own.

    Here are some tutorials:

    http://www.webcheatsheet.com/php/

    http://www.w3schools.com/js/default.asp

A
almond author 9/24/2007

Hello,
Much thanks Jane for the reply. I would really love to implement the code below but need some sample or any sample close to that code. Can anyone point me to somewhat same code or near to it.
Really need to implement. Thanks once again for the help.
Once I have the code running I will sure post it for i know it would help others as well.
Good day to all...
almond <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=21616&image=1&table=forumreplies' class='bbc_emoticon' alt=':rolleyes:' />

A
almond author 9/25/2007

Good day to all PHPRunner Gurus.
I got the following script from http://www.w3schools.com.
&lt;script type="text/javascript">

function disable()

{

document.getElementById("mySelect").disabled=true

}

function enable()

{

document.getElementById("mySelect").disabled=false

}

</script>

And the scripts seems to be the solution to my inquiry above. Unfortunately I have tried many times to trigger the script by modifying the codes in the commonfunctions.php file and editting BuildSelectControl Function. Unfortunately, I cant seem to trigger the script on the onchange of the Status field.

What I did was create a .js file which contains the script above and saved it in the include directory. Then i put the tag [b]&lt;script language="JavaScript" type="text/JavaScript" src="include/ecplan.js"></script> [/b] inside the _add.php using the HTML Editor.
Then i add some codes in commonfunctions.php under the BuildSelectControl Function which looks like these:
if($strTableName=="tblcrewplanning_view" && $field == "Status")

$onchange="disable()";

Can anyone enlighthen me on how to trigger javascripts using the onchange. Please really need to implement these. <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=21630&image=1&table=forumreplies' class='bbc_emoticon' alt=':unsure:' />
Thanks in advance to all...
almond

D
drh 12/3/2007

Good Day Almond,

This is almost exactly what I need to do. Have you achieved success? If so, I am curious how you went about it. I am somewhat familiar with javascript, but I definitely don't understand what is trying to be conveyed from the responses you received. I am also new to PHPR4.1. I have several applications using PHPR3.1, but much of 4.1 is new to me.
I have a field called 'reason' which is a dropdown/lookup field. Selections are customer pmt, insurance pmt, other. If reason == other, I want to display a text area field called 'comment', else 'comment' field is hidden.
If anyone has any pointers, thanks in advance.
Dave

J
Jane 12/4/2007

Dave,
you can add onChange function on the Visual Editor directly.

Here is a sample code:

{literal}<script>

document.forms.editform.value_comment.disabled=true;

document.forms.editform.value_reason.onchange=function()

{

if(this.options[this.selectedIndex].reason=='other')

{

document.forms.editform.value_comment.disabled=false;

}

else

{

document.forms.editform.value_comment.disabled=true;

}

}

</script>{/literal}

D
drh 12/4/2007

Thank you Jane.
I added the script you sent to the Visual Editor. Here is a snippet so you can see exactly where I placed it in the code.

class=buttonborder><INPUT class=button type=submit value= Save name=submit1></SPAN>

<SPAN class=buttonborder><INPUT class=button type=reset value= Reset ></SPAN>

<SPAN class=buttonborder><INPUT class=button onclick="window.location.href='cbsform5_list.php?a=return'" type=button value=" Back to list "></SPAN>

<input type=hidden name="a" value="added"></TD></TR></FORM></TBODY></TABLE></DIV><B

class=xbottom><B class=xb4a></B><B class=xb3a></B><B

class=xb2a></B><B class=xb1a></B></B></TD></TR></TBODY></TABLE></DIV><B

class=xbottom><B class=xb4b3></B><B class=xb3b3></B><B class=xb2b3></B><B

class=xb1b3></B></B></TD></TR></TBODY></TABLE><BR>{include_if_exists file="include/footer.php"} {$linkdata}&lt;script>SetToFirstControl();</script>{literal}&lt;script>
document.forms.editform.value_comment.disabled=true;

document.forms.editform.value_reason.onchange=function()

{

if(this.options[this.selectedIndex].reason=='Other')

{

document.forms.editform.value_comment.disabled=false;

}

else

{

document.forms.editform.value_comment.disabled=true;

}

}

</script>{/literal}</BODY></HTML>


When I access the page, the comment field is disabled, but it remains disabled even when I select 'Other' from the dropdown list. I should also mention, that this is on the 'add' form. I do not have an edit page. Also, what I really want is for the comment field to be hidden not just disabled until 'Other' is selected from the dropdown list. At that time, I would like the comment field to be displayed and the user MUST enter (required) some text into the text area. I think I could accomplish that by changing
document.forms.editform.value_comment.disabled=true;

to

document.forms.editform.value_comment.other.style.visibility = 'hidden';
I will test.
Thank you.

Dave

D
drh 12/5/2007

Bump. Sorry, but any idea why the if statement does not work? The comment gets set to disabled, but never becomes enabled even if I select 'Other' from the 'reason' dropdown list box.
Am I missing something?
Dave

D
Dale 12/6/2007

Just a quick stab at this one for you.
I think the line

if(this.options[this.selectedIndex].reason=='Other')
should be

if(this.options[this.selectedIndex].text=='Other')
Try that.

Hope it helps.

D
drh 12/6/2007

DaleM,

Thank you that solved that problem.
Forum members,

Something very strange now though. No matter what I select from the dropdown list, it changes to 'Other' all the time. To reinterate, I have a form with just a few fields. 1 of the fields is 'reason' which is a dropdown list with 3 options and is required. The options are Debtor Pmt, Insurance Pmt, Other in that order. If 'Other' is selected, I want to enable 'comment' field which is a text area field.
Thanks to Jane and DaleM, I have the enable/disable field part working. When I open the form, the dropdown list displays 'Please Select'. I click on Debtor Pmt. but it immediately changes it to display 'Other'.
It has to be in the html / javascript part of the code, because if I remove it, the field works correctly. As much as I hate to make this a long reply, I am posting the 112 lines of html code. Hopefully, someone can spot the problem. <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=23949&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>cbsform5</TITLE>

<META http-equiv=Content-Type content="text/html; charset=windows-1252"><LINK

href="include/style.css" type=text/css rel=stylesheet>{$includes}

<META content="MSHTML 6.00.2900.3199" name=GENERATOR></HEAD>

<BODY bgColor=white {$bodyonload}>{include_if_exists file="include/header.php"}

<FORM name=editform action=cbsform5_add.php method=post

encType=multipart/form-data {$onsubmit}>{doevent name="AddOnLoad"}

<TABLE cellSpacing=0 cellPadding=0 align=center border=0>

<TBODY>

<TR>

<TD><B class=xtop><B class=xb1b></B><B class=xb2b></B><B class=xb3b></B><B

class=xb4b></B></B>

<DIV class=xboxcontentb>

<TABLE class=main_table cellSpacing=0 cellPadding=0 border=0>

<TBODY>

<TR>

<TD>

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD class=upeditmenu vAlign=middle align=middle width="100%" height=35>cbsform5, Add new record </TD></TR></TBODY></TABLE></TD></TR>

<TR>

<TD width="100%" bgColor=white height=1></TD></TR>{if $message!=""}

<TR>

<TD

style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px"

align=middle width="100%">

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD><B class=xtop><B class=xb1u></B><B class=xb2u></B><B

class=xb3u></B><B class=xb4u></B></B>

<DIV class=xboxcontentb>

<TABLE cellSpacing=0 cellPadding=5 width="100%" align=center

border=0>

<TBODY>

<TR>

<TD class=downedit2 align=middle colSpan=2>{$message}</TD></TR></TBODY></TABLE></DIV><B

class=xbottom><B class=xb4u></B><B class=xb3u></B><B

class=xb2u></B><B

class=xb1u></B></B></TD></TR></TBODY></TABLE></TD></TR>{/if}

<TR>

<TD

style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">

<DIV class=xboxcontent>

<TABLE cellSpacing=0 cellPadding=4 border=0>

<TBODY>

<TR>

<TD class=editshadeleft_b2 style="PADDING-LEFT: 15px"

width=150>name</TD>

<TD class=editshaderight_lb2 style="PADDING-LEFT: 10px"

width=250>{build_edit_control field="name" mode="add" value=$value_name} <IMG

src="images/icon_required.gif"> </TD></TR>

<TR>

<TD class=editshade_b style="PADDING-LEFT: 15px"

width=150>office</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px"

width=250>{build_edit_control field="office" mode="add" value=$value_office} <IMG

src="images/icon_required.gif"> </TD></TR>

<TR>

<TD class=editshade_b style="PADDING-LEFT: 15px"

width=150>acctType</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px"

width=250>{build_edit_control field="acctType" mode="add" value=$value_acctType} <IMG

src="images/icon_required.gif"> </TD></TR>

<TR>

<TD class=editshade_b style="PADDING-LEFT: 15px"

width=150>amt</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px"

width=250>{build_edit_control field="amt" mode="add" value=$value_amt} <IMG

src="images/icon_required.gif"> </TD></TR>

<TR>

<TD class=editshade_b style="PADDING-LEFT: 15px"

width=150>reason</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px"

width=250>{build_edit_control field="reason" mode="add" value=$value_reason}

<IMG src="images/icon_required.gif"> </TD></TR>

<TR>

<TD class=editshade_b style="PADDING-LEFT: 15px"

width=150>comment</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px"

width=250>{build_edit_control field="comment" mode="add" value=$value_comment} </TD></TR>

<TR>

<TD class=downedit align=left colSpan=2><IMG

src="images/icon_required.gif"> - Required field </TD></TR>

<TR>

<TD class=downedit align=middle colSpan=2><SPAN

class=buttonborder><INPUT class=button type=submit value= Save name=submit1></SPAN>

<SPAN class=buttonborder><INPUT class=button type=reset value= Reset ></SPAN>

<SPAN class=buttonborder><INPUT class=button onclick="window.location.href='cbsform5_list.php?a=return'" type=button value=" Back to list "></SPAN>

<input type=hidden name="a" value="added"></TD></TR></FORM></TBODY></TABLE></DIV><B

class=xbottom><B class=xb4a></B><B class=xb3a></B><B

class=xb2a></B><B class=xb1a></B></B></TD></TR></TBODY></TABLE></DIV><B

class=xbottom><B class=xb4b3></B><B class=xb3b3></B><B class=xb2b3></B><B

class=xb1b3></B></B></TD></TR></TBODY></TABLE><BR>{include_if_exists file="include/footer.php"} {$linkdata}&lt;script>SetToFirstControl();</script>
{literal}&lt;script>
document.forms.editform.value_comment.disabled=true;

document.forms.editform.value_reason.onchange=function()

{

if(this.options[this.selectedIndex].text='Other')

{

document.forms.editform.value_comment.disabled=false;

}

else

{

document.forms.editform.value_comment.disabled=true;

}

}

</script>{/literal}</BODY></HTML>


Thanks in advance.
Dave

D
Dale 12/6/2007

You only have one = sign in the statement below.
if(this.options[this.selectedIndex].text='Other')
I think it should be ==

if(this.options[this.selectedIndex].text=='Other')
Another quick stab

D
drh 12/7/2007

Thanks again Dale. I guess I am blind in one eye and can't see out of the other. <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=23981&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' />

Thanks to anyone else who took a quick look at it.

Dave

D
drh 12/10/2007

Hi forum members.

Ok, I have the code to display (versus disable) a text area field on an add form if the value of a previous field was equal to 'Other' (my criteria).
[codebox]{literal}&lt;script>

document.forms.editform.value_comment.style.display = 'none';
document.forms.editform.value_reason.onchange=function()

{

if(this.options[this.selectedIndex].text=='Other')

{

document.forms.editform.value_comment.style.display = '';

}

else

{

document.forms.editform.value_comment.style.display = 'none';

}

}

</script>{/literal}[/codebox]
Using PHPR4.1

This works to hide / display the text area box. My question: Is it possible to hide the field label also until the criteria is met and then display both the field label and text area input box?
I have been googling this for several hours now, but have not come up with a solution.
Any help would be greatly appreciated.

D
drh 12/10/2007

Hello forum,

I thought perhaps I would be able to use the javascript document.write command and place the html for the label inside my javascript, put when I do this:
{literal}&lt;script>
document.forms.editform.value_comment.style.display = 'none';

document.forms.editform.value_reason.onchange=function()

{

if(this.options[this.selectedIndex].text=='Other')
{

document.forms.editform.value_comment.style.display = '';

document.write("<TR>

<TD class=shade width=150>comment</TD>

<TD width=250>{build_edit_control field="comment" mode="add" value=$value_comment} </TD></TR>");

}

else

{

document.forms.editform.value_comment.style.display = 'none';

}

}

</script>{/literal}
It breaks my javascript and the comment text area is displayed right from the beginning.
Obviously, I don't know what the 'literal' tags mean.
Please help.
Thanks,

Dave