Drop down with php

cip6791 · August 10, 2010

Hello,

I'm trying to use a dropdown to display different divs.

_<html>

_<head>

_{<title>DDlist Div Display</title>}

_{<script type="text/javascript">}

_{function ShowDivArea(info) {}

_{var sel = document.getElementById('divArea').getElementsByTagName('div');}

_{for (var i=0; i<sel.length; i++) { sel}_{.style.display = 'none'; }}

_{if (info == '0') { return; }}

_{document.getElementById('divArea'+info).style.display = 'block';}

_}

_</script>

_{<style type="text/css">}

_{.divArea { display:none; height:100px; width:200px; border:1px solid red; }}

_</style>

_</head>

_<body>

_{<select id="DDDivList" onchange="ShowDivArea(this.selectedIndex)">}

_{<option value="0" selected> -- Select A Design Service --</option>}

_{<option value="1"> QR Bookmark </option>}

_{<option value="2"> Twitter </option>}

_{<option value="3"> Ning or Tumblr </option>}

_{<option value="4"> Flyers </option>}

_{<option value="5"> Business Card or Brochure</option>}

_{<option value="6"> Album or Mixtape cover</option>}

_{<option value="7"> Other</option>}

_</select>

_{<div id="divArea">}

_{<div id="divArea1" class="divArea">}

_{<h1>QR Bookmarks</h1>}

_{<form action='qrgen.php' method='POST'>}

_{<input type='text' name='bmarksite'> URL<br>}

_{<input type='text' name='sitedesc'> Description<br>}

_{<input type='submit' value='Convert'><br>}

_<?php

_{include("QrCodes.php")}

_?>

_<?php

_{$bmarksite = $_POST['bmarksite'];}

_{$sitedesc = $_POST['sitedesc'];}

_{if ($sitedesc&&$bmarksite)}

_{

_{$qrcode = new QrCodes;}

_{$qrcode -> IsImage =1;}

_{echo $qrcode -> GetBookmark("$bmarksite","$sitedesc");}

_{echo "</br>";}

_{echo $bmarksite;}

_{echo "</br>";}

_{print $sitedesc;}

_}

_else

_{

_{echo "Please fill in all the required fields.";}

_}

_?>

_</div>

_{<div id="divArea2" class="divArea">Twitter</div>}

_{<div id="divArea3" class="divArea">Ning or Tumblr</div>}

_{<div id="divArea4" class="divArea">Flyers</div>}

_{<div id="divArea5" class="divArea">Business Card or Brochure</div>}

_{<div id="divArea6" class="divArea">Album or Mixtape Cover</div>}

_{<div id="divArea7" class="divArea">Other</div>}

_</div>

_</body>

_</html>

The problem is with this line: <form action='qrgen.php' method='POST'>. I am using a wordpress page template. What should I change the qrgen.php to? Or how do I get it to work?

Thank you for your help.

Lucky2710 · August 11, 2010

I'm working on a similar problem.

I found this http://bytes.com/topic/javascript/answers/88791-show-hide-text-form-field-based-drop-down-selection Look at the reply that Mrk put. His is done with tables but you can easily put your divs in the tables. In order to do what your trying to do you need javascript

Like i said though i'm doing the exact same thing right now so if you go with this and get stuck let me know i've almost got it working how i need it too.

Lucky2710 · August 11, 2010

Heads up if you use the script i linked to earlier. You CAN NOT put a table inside the table. Idk why but it doesn't work.

Lucky2710 · August 11, 2010

Never-mind yes you can!

cip6791 · August 11, 2010

Any luck? I m still having the same problem.

Lucky2710 · August 11, 2010

Ya i got it working. Heres a working code for 7 divs.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6,id7) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
document.getElementById(id7).style.display = 'none';

if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id6).style.display = 'block';
}
if ( txt.match(id7) ) {
document.getElementById(id7).style.display = 'block';
}
}
// ]]>
</script>
</head>
<body>
<table width="500" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td width="303" class="title">Select a Design Service</td>
<td width="195" class="field">
<select name="type" onChange="display(this,'1','2','3','4','5','6','7');">
  <option value="s" selected>Please Select...</option>
  <option value="1">QR Bookmaek</option>
  <option value="2">Twitter</option>
  <option value="3">Ning or Tumblr</option>
  <option value="4">Flyers</option>
  <option value="5">Business Cards or Brochure</option>
  <option value="6">Album or Mixtape Cover</option>
  <option value="7">Other</option>
</select>
</td>
</tr>
</thead>
<tfoot>
</tfoot>

<tbody id="1" style="display: none;">
  <tr><td><br>

<div>1</div>

</td></tr>    
</tbody>

<tbody id="2" style="display: none;">
  <tr><td><br>

<div>2</div>

</td></tr>    
</tbody>

<tbody id="3" style="display: none;">
  <tr><td><br>

<div>3</div>

</td></tr>    
</tbody>
<tbody id="4" style="display: none;">
  <tr><td><br>

<div>4</div>

</td></tr>    
</tbody>
<tbody id="5" style="display: none;">
  <tr><td><br>

<div>5</div>

</td></tr>    
</tbody>
<tbody id="6" style="display: none;">
  <tr><td><br>

<div>6</div>

</td></tr>    
</tbody>
<tbody id="7" style="display: none;">
  <tr><td><br>

<div>7</div>

</td></tr>    
</tbody>
<tbody>
</tbody>
</table>
</body>
</html>

Sign In

Drop down with php

Recommended Posts

cip6791

Link to comment

Share on other sites

Lucky2710

Link to comment

Share on other sites

Lucky2710

Link to comment

Share on other sites

Lucky2710

Link to comment

Share on other sites

cip6791

Link to comment

Share on other sites

Lucky2710

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information