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
We need your code, simplified if you can.
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
}
?>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 :)
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.