0

Hi i am new to php/ajax.
I have a drop down list.if i select 1st option,it displays one upload file option.
if select 2nd option,it display 3 upload box
if select 3 option ,it dispaly 6 upload box.

I did this using ajax & displaying it in a div.

What i am trying ,if i select 3 option during insertion in dropdown list, during edit it should be auto selected i.e.3 option having 6 upload box.

Need suggestions

2
Contributors
3
Replies
5
Views
5 Years
Discussion Span
Last Post by cereal
0
JS file

<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ads.php?q="+str,true);
xmlhttp.send();
}
</script>


HTMl file

<tr>
 <td id="adpg" valign="top">Add type</td>
 <td><select name="adtype" onchange="showHint(this.value);">
 <option>------Select ad type------</option>
 <option value="1"> Ad-One photo will be displayed</option>
 <option value="2">Priority Ad-Only 3 photos will be displayed</option>
 <option value="3">Premium Ad-Upto 6 photos will be displayed</option>
 </select></td>
  </tr>
  <tr>
  <td id="adpg" valign="top">Upload Photo :</td>
<td>
<div id="txtHint" style="height:auto;">
</div>
</td>

ads.php

<?php
if($_GET['q']==2)
{
	?>
	
	<div><input name="ufile[]" type="file" id="ufile[]"></div>
    <div><input name="ufile[]" type="file" id="ufile[]"></div>
    <div><input name="ufile[]" type="file" id="ufile[]"></div>
    
    <?php
}
if($_GET['q']==1)
{
	?>
	
	<div><input name="uploadedfile" type="file" id="uploadedfile"></div>
    <?php
   
}

else if($_GET['q']==3)
{
	?>
    <div><input name="ufile[]" type="file" id="ufile[]"></div>
    <div><input name="ufile[]" type="file" id="ufile[]"></div>
    <div><input name="ufile[]" type="file" id="ufile[]"></div>
    <div><input name="ufile[]" type="file" id="ufile[]"></div>
    <div><input name="ufile[]" type="file" id="ufile[]"></div>
    <div><input name="ufile[]" type="file" id="ufile[]"></div>
	<?php
}
?>
0

Ok, first of all you need to save the value and do a comparison when you go in the edit page:

<?php

$opt = 3;

?>

<select name="adtype" onchange="showHint(this.value);">
 <option>------Select ad type------</option>
 <option value="1" <?php echo ($opt == 1) ? 'selected="selected"': null; ?>> Ad-One photo will be displayed</option>
 <option value="2" <?php echo ($opt == 2) ? 'selected="selected"': null; ?>>Priority Ad-Only 3 photos will be displayed</option>
 <option value="3" <?php echo ($opt == 3) ? 'selected="selected"': null; ?>>Premium Ad-Upto 6 photos will be displayed</option>
</select>

Then you need to run a js function similar to the previous function while loading the page:

function ohey()
{
  str = <?php echo $opt; ?>;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","ads.php?q="+str,true);
  xmlhttp.send();
}

Finally change body tag to: <body onload="ohey()"> I've attached an example page, probably there's a cleaner way to do this, hope someone else will give you a better solution, bye :)

Attachments
<?php
$opt = 3; # get $opt from database
?>
<html>
<head>
<script type="text/javascript">

function ohey()
{
  str = <?php echo $opt; ?>;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ads.php?q="+str,true);
xmlhttp.send();

}

function showHint(str)
{
if (str.length==0)
  { 
  str = <?php echo $opt; ?>;
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ads.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body onload="ohey()">

<tr>
 <td id="adpg" valign="top">Add type</td>
 <td>
<select name="adtype" onchange="showHint(this.value);">
 <option>------Select ad type------</option>
 <option value="1" <?php echo ($opt == 1) ? 'selected="selected"': null; ?>> Ad-One photo will be displayed</option>
 <option value="2" <?php echo ($opt == 2) ? 'selected="selected"': null; ?>>Priority Ad-Only 3 photos will be displayed</option>
 <option value="3" <?php echo ($opt == 3) ? 'selected="selected"': null; ?>>Premium Ad-Upto 6 photos will be displayed</option>
</select></td>
  </tr>
  <tr>
  <td id="adpg" valign="top">Upload Photo :</td>
<td>
<div id="txtHint" style="height:auto;">
</div>
</td>

</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.