Conditional Dropdown Boxes

steve · Post by **steve** » Thu May 17, 2012 5:24 pm

I want to incorporate conditional drop down boxes into my admin/new_ticket.php

I added the following code to admin/new_ticket.php

Code: Select all

<script language="javascript" type="text/javascript">

function dropdownlist(listindex)

{

document.formname.subcategory.options.length = 0;

switch (listindex)

{

case "Home Ware" :

document.formname.subcategory.options[0]=new Option("Select Sub-Category","");

document.formname.subcategory.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");

document.formname.subcategory.options[2]=new Option("Audio/Video","Audio/Video");

document.formname.subcategory.options[3]=new Option("Beddings","Beddings");

document.formname.subcategory.options[4]=new Option("Camera","Camera");

document.formname.subcategory.options[5]=new Option("Cell Phones","Cell Phones");

break;

case "Education" :

document.formname.subcategory.options[0]=new Option("Select Sub-Category","");

document.formname.subcategory.options[1]=new Option("Colleges","Colleges");

document.formname.subcategory.options[2]=new Option("Institutes","Institutes");

document.formname.subcategory.options[3]=new Option("Schools","Schools");

document.formname.subcategory.options[4]=new Option("Tuitions","Tuitions");

document.formname.subcategory.options[5]=new Option("Universities","Universities");

break;

case "Books" :

document.formname.subcategory.options[0]=new Option("Select Sub-Category","");

document.formname.subcategory.options[1]=new Option("College Books","College Books");

document.formname.subcategory.options[2]=new Option("Engineering","Engineering");

document.formname.subcategory.options[3]=new Option("Magazines","Magazines");

document.formname.subcategory.options[4]=new Option("Medicine","Medicine");

document.formname.subcategory.options[5]=new Option("References","References");

break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category :</td>
<td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Category</option>
<option value="Home Ware">Home Ware</option>
<option value="Education">Education</option>
<option value="Books">Books</option>
</select></td>
</tr>
<tr>
<td align="right" valign="middle">Sub Category :
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Sub-Category</option>
</select>
</noscript></td>
</tr>
</table>
</form>

When I run this code in a separate test.php file it works fine, however when I incorporate it into admin/new_ticket.php the second drop down box does not update.

Any Ideas why this does not work when added to the Hesk script?

I am assuming the issue is with this line

Code: Select all

<td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">

steve · Post by **steve** » Fri May 25, 2012 7:57 pm

I think this MOD would help a lot of people. Myself included

Why does this not work within Hesk? Works fine in a stand alone .php file.

Post by **Klemen** » Fri May 25, 2012 8:08 pm

Try replacing all instances of "formname" with "form1", because that's the real form name in HESK submit a ticket form.

steve · Post by **steve** » Fri May 25, 2012 8:33 pm

Thanks that did it.

plc · Post by **plc** » Wed Jun 20, 2012 2:30 pm

Hi.

I'm confused as to where exactly within new_ticket.php I must add the code above.

plc · Post by **plc** » Thu Jun 21, 2012 12:45 pm

I'm also not understanding the sub-categories. Are these fake? It doesn't appear to me that hesk supports subcategories...How does this work?

steve · Post by **steve** » Thu Jun 21, 2012 6:26 pm

This code will create a conditional drop down box for you. Select option "A" in the first drop down box, the user can then select options "G" "H" and "I" in the second drop down box.

OR

Select option "B" in the first drop down box, the user can then select options "J" "K" and "L" in the second drop down box.

In Hesk/admin/new_ticket.php I put this code

Code: Select all

<script language="javascript" type="text/javascript">

    function dropdownlist(listindex)

    {

    document.form1.subcategory.options.length = 0;

    switch (listindex)

    {

    case "Home Ware" :

    document.form1.subcategory.options[0]=new Option("Select Sub-Category","");

    document.form1.subcategory.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");

    document.form1.subcategory.options[2]=new Option("Audio/Video","Audio/Video");

    document.form1.subcategory.options[3]=new Option("Beddings","Beddings");

    document.form1.subcategory.options[4]=new Option("Camera","Camera");

    document.form1.subcategory.options[5]=new Option("Cell Phones","Cell Phones");

    break;

    case "Education" :

    document.form1.subcategory.options[0]=new Option("Select Sub-Category","");

    document.form1.subcategory.options[1]=new Option("Colleges","Colleges");

    document.form1.subcategory.options[2]=new Option("Institutes","Institutes");

    document.form1.subcategory.options[3]=new Option("Schools","Schools");

    document.form1.subcategory.options[4]=new Option("Tuitions","Tuitions");

    document.form1.subcategory.options[5]=new Option("Universities","Universities");

    break;

    case "Books" :

    document.form1.subcategory.options[0]=new Option("Select Sub-Category","");

    document.form1.subcategory.options[1]=new Option("College Books","College Books");

    document.form1.subcategory.options[2]=new Option("Engineering","Engineering");

    document.form1.subcategory.options[3]=new Option("Magazines","Magazines");

    document.form1.subcategory.options[4]=new Option("Medicine","Medicine");

    document.form1.subcategory.options[5]=new Option("References","References");

    break;
    }
    return true;
    }
    </script>
    </head>
    <title>Dynamic Drop Down List</title>
    <body>
    <form id="form1" name="form1" method="post" action="submitform1.asp" >
    <table width="100%" border="0" >
    <tr>
    <td style="text-align:right" width="150">Category:</td>
    <td width="80%"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
    <option value="">Select Category</option>
    <option value="Home Ware">Home Ware</option>
    <option value="Education">Education</option>
    <option value="Books">Books</option>
    </select></td>
    </tr>
    <tr>
    <td style="text-align:right" width="150">Sub Category:
    </td>
    <td width="80%"><script type="text/javascript" language="JavaScript">
    document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
    </script>
    <noscript><select name="subcategory" id="subcategory" >
    <option value="">Select Sub-Category</option>
    </select>
    </noscript></td>
    </tr>
    </table>
    </form>

Just below

Code: Select all

	<!-- Department and priority -->
	<table border="0" width="100%">
	<tr>
	<td style="text-align:right" width="150"><?php echo $hesklang['category']; ?>: <font class="important">*</font></td>
	<td width="80%"><select name="category" <?php if (in_array('category',$_SESSION['iserror'])) {echo ' class="isError" ';} elseif (in_array('category',$_SESSION['isnotice'])) {echo ' class="isNotice" ';} ?> >
	<?php
	if (!empty($_GET['catid']))
	{
		$_SESSION['as_category'] = intval($_GET['catid']);
	}

	$sql = 'SELECT * FROM `'.hesk_dbEscape($hesk_settings['db_pfix']).'categories` ORDER BY `cat_order` ASC';
	$result = hesk_dbQuery($sql);
	while ($row=hesk_dbFetchAssoc($result))
	{
	    if (isset($_SESSION['as_category']) && $_SESSION['as_category'] == $row['id']) {$selected = ' selected="selected"';}
	    else {$selected = '';}
	    echo '<option value="'.$row['id'].'"'.$selected.'>'.$row['name'].'</option>';
	}

	?>
	</select></td>
	</tr>
	<tr>
	<td style="text-align:right" width="150"><?php echo $hesklang['priority']; ?>: <font class="important">*</font></td>
	<td width="80%"><select name="priority" <?php if (in_array('priority',$_SESSION['iserror'])) {echo ' class="isError" ';} ?> >
	<option value="3" <?php if(isset($_SESSION['as_priority']) && $_SESSION['as_priority']==3) {echo 'selected="selected"';} ?>><?php echo $hesklang['low']; ?></option>
	<option value="2" <?php if(isset($_SESSION['as_priority']) && $_SESSION['as_priority']==2) {echo 'selected="selected"';} ?>><?php echo $hesklang['medium']; ?></option>
	<option value="1" <?php if(isset($_SESSION['as_priority']) && $_SESSION['as_priority']==1) {echo 'selected="selected"';} ?>><?php echo $hesklang['high']; ?></option>
	<option value="0" <?php if(isset($_SESSION['as_priority']) && $_SESSION['as_priority']==0) {echo 'selected="selected"';} ?>><?php echo $hesklang['critical']; ?></option>
	</select></td>
	</tr>
	</table>

	<hr />

That places the two drop down boxes below the Category and Priority drop down boxes.

Change the names and options of the drop down boxes.

Also change

Code: Select all

name="category"

&

Code: Select all

name="subcategory"

to

Code: Select all

name="custom12"

&

Code: Select all

name="Custom13"

Where "Custom12" and "Custom13" are the fields you want to populate with the collected data.

This will not allow you to use database data to populate the drop down boxes, you will have to choose your selections then code them directly into the PHP file.

This should work the same for the customer interface (hesk/index.php) but I have not tested it as I do not use the customer interface for my installation.

plc · Post by **plc** » Tue Jun 26, 2012 5:25 pm

Okay. I fully understand the concept now, thanks. But I still can't get it to work. I inserted the code where you mention above and nothing appears. I see Category: <listed options> but when I select one(I have 4) nothing happens.

steve · Post by **steve** » Tue Jun 26, 2012 5:53 pm

If you pasted the mentioned code in admin/new_ticket.php and nothing appeared then you have pasted it into the wrong part or the wrong file.

Also, when you say you selected one of your categories, of which you have four, are you referring to your Hesk categories? If so, this code will not do what you are trying to make it do. This will create two totally new and separate drop down boxes, where the second is a slave to the first.

plc · Post by **plc** » Tue Jun 26, 2012 6:01 pm

I can confirm I have it in the right file and spot within the file.

I clearly misunderstood how to apply it though. So I can't use this with actual HESK categories. If so, no problem. I'm perfectly fine hardcoding them into the php. Still, nothing new appears just my actual Hesk categories.

steve · Post by **steve** » Tue Jun 26, 2012 6:23 pm

Can you show me the code you are using?

I just tested this code and it works fine. I am having a hard time understanding your issue.

Are you seeing the two addition drop down boxes created? If yes, when you change the selection in the first of the new boxes does the contents of the second change?

steve · Post by **steve** » Tue Jun 26, 2012 7:06 pm

Figured out how to tie it into the Hesk Category Drop down box

in admin/new_ticket.php

find

Code: Select all

<td width="80%"><select name="category" <?php if (in_array('category',$_SESSION['iserror'])) {echo ' class="isError" ';} elseif (in_array('category',$_SESSION['isnotice'])) {echo ' class="isNotice" ';} ?> >

Change it to

Code: Select all

<td width="80%"><select name="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);"<?php if (in_array('category',$_SESSION['iserror'])) {echo ' class="isError" ';} elseif (in_array('category',$_SESSION['isnotice'])) {echo ' class="isNotice" ';} ?> >

Change each case to reflect the number that corresponds to the category you want to list. eg.

Code: Select all

case "1" :

remove from the dropdown script

Code: Select all

      <tr>
        <td style="text-align:right" width="150">Category:</td>
        <td width="80%"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
        <option value="">Select Category</option>
        <option value="Home Ware">Home Ware</option>
        <option value="Education">Education</option>
        <option value="Books">Books</option>
        </select></td>
        </tr>

Now when you select hesk Category "XYZ" the drop down box will populate with data relevant to that hesk category only.

plc · Post by **plc** » Wed Jun 27, 2012 1:03 pm

That looks promising. Here's[1] my eventual goal. Allow me to preface this be stating I fully understand this goes beyond the scope of our current conversation. Be that as it may, I'm hoping this mod-if you can call it that-can serve as the building blocks. What do you think?

References:
[1]Root Categories:
choice 1)
I need help with...
a) a physical computer issue
b) a program
c) accessing a company resource
d) accessing an internet resource
e) a miscellaneous issue
choice 2)
I have a request regarding...
a) a new staff member
b) purchasing a new computer
c) renewal of a program license
d) something else...

Sub-Categories:

I need help with a physical computer issue:
choice 1) on/off
My Computer...
a) won't turn on at all
b) keeps shutting off
c) reboots randomly
d) reboots at specific times
e) won't stop rebooting

choice 2) noise
My computer...
a) continues to make a strange sound
b) is beeping at me!

choice 3) other
a) Please specify...

I need help with a program:
choice 1)
a)Proprietary programs...
1) Quickbooks
2) Simply Accounting
3) Other, finance
4) PCLAW
5) PROLAW
6) MS Dynamics CRM
7) iTunes/iCloud
8) BlackBerry
9) my program isn't listed...

b)MS Office programs...
1) Word
2) Excel
3) PowerPoint
4) Access
5) Publisher
6) OneNote

I need help with accessing a company resource:
choice 1) I can't access docs on...
a) my computer
b) the office network

choice 2) I'm having difficulties...
a) printing
b) scanning
c) sharing docs
d) sharing in Outlook

I need help with accessing an internet resource:

choice 1) I'm having difficulties with...
a) accessing a website
b) sending/receiving email
c) Skype/conferencing
d) remote desktop

I have a request regarding a new staff member:
<new staff member request form>

I have a request regarding purchasing a new computer:
<new PC request form>

I have a request regarding renewal of a program license:
<renewal request form>

I have a request about something else:
<generic request form>

End of References

steve · Post by **steve** » Wed Jun 27, 2012 3:39 pm

Did you get the script working?

Using the Java script above, you should be able to accomplish this, it will obviously have to be expanded to allow for more conditional boxes, but the code is all there you just need to put it all together.

plc · Post by **plc** » Wed Jun 27, 2012 5:18 pm

Perfect. I'll start working on it and post back if I encounter any problems.

PHPJunkyard support forum

Conditional Dropdown Boxes

Conditional Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Dynamic Dropdown Boxes

Re: Conditional Dropdown Boxes