DEVELOPMENT

This tutorial describes how to display different types of form element depending on the value of the option selected from the drop-down list by the user. I'll not certainly use synchronous technique to perform this task, which is rather easy by sending request to the web server using form and then retrieving that value in the other php page to display appropriate form elements. What, I'll perform is the asynchronous operation, that is loading of form element without loading or reloading of webpages.

The SITUATION

Different form element are the option of the drop-down list displayed on the index.php. The user select one of the form element(option) & simultaneously respected element is displayed on the screen.

form snap

INDEX.PHP

<html>
<head>
<script>
function showfrm(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("frmdisp").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getfrm.php?n="+str,true);
xmlhttp.send();
 }
</script>
</head>
<body>
<form> 
<elect onchange="showfrm(this.value)">
    <option value="0">Please, select type of element u wan't</option>
    <option value="1">One linear input text</option>
    < value="2" >Text Area</option>
    <option value="3">Radio Button</option>
    </select>
 </form>
 <p><span id="frmdisp"></span></p>
 </body>
 </html>
    

GETFRM.PHP

The code is self-explanatory in itself.

<?php
 
$q=$_REQUEST["n"]; 

 if($q==1)
 {
     echo "<input type=\"text\" name=\"tfield\">";
   
}else if($q==2)
 {
     echo "<textarea row=\"5\" cols=\"50\  name=\"tarea\">";
     
}else if($q==3)
 {
     echo "<input type=\"radio\" name=\"lang\" value=\"PHP\">PHP
<input type=\"radio\" name=\"lang\" value=\"PHYTON\">PHYTON"; } ?>







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

RELATED POST