DEVELOPMENT

Sometimes, there is a need of a form in which it's type & number of fields depends on a particular value. This value can be fixed constant or some user's defined value set during run time as a GET or a POST variable. Websites providing different resturant's profile in a area, includes each resturant's menu. The menu of any restaurant have different type of categories & each category have different type of dishes.

The code for the form to add menu of different resturant by their respected owner can be written, very easily if we want to execute our code synchronously. The same situation become intresting, If we want the whole process to be performed without reloading the page - that is asynchronous. The word asynchronous have already given you a clue that there is a use of AJAX.

THE SITUATION

User selects the number of category from a drop-down list. Accordingly, the no. of drop-down list appears on the page asking for the no. of input text field that must be included in each category. I've written two page code, one is our main page index.php and the other is backprc.php where the response of ajax GET request will be generated.

dynamic form element

INDEX.PHP

<script> 
function loadprc(str)
{ var xmlhttp; if (window.XMLHttpRequest) 
{ xmlhttp=new XMLHttpRequest(); 
} 
else 
{ 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}
xmlhttp.onreadystatechange=function() 
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ document.getElementById("pdiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","backprcs.php?n="+str,true);
xmlhttp.send(); 
}
</script> 
<body>
<body>
<select onchange="loadprc(this.value)"> 
<option>Select no. of Category</option>
<option>1</option> 
<option>2</option>
<option>3</option>
</select> 
<div id="pdiv">
</div> 
</body>
    

BACKPRCS.PHP

php

$var=$_GET['n'];

echo "
"; for($i=1;$i<=$var;$i++) { $cat="Category".$i; $onmd="innerFrm(this)"; echo ""; echo "

"; } echo "";

GETTING BACK TO INDEX.PHP
  








All rights reserved, the content is copyrighted to the author.

RELATED POST