JavaScript - Form Filling From A Dynamic Iframe

Disclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies.
Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame
Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs.

Gentlemen,

I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars.
The function for resizing the iframe id="child" is already correctly implemented like so:

Code:

<script language="JavaScript">
<!--
function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('child').contentWindow.
      document.body.scrollHeight;
  //change the height of the iframe
  document.getElementById('child').height=
      the_height;
}
//-->
</script>

and the call
Code:

<iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child">

This what I have going on:

- index.html => contains some content and the iframe id="child"
- childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/"

Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid.

Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called.

In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required.

This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC.
All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com".

The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script.

As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated.
Thanks,

I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total.

Here is the bit that does the calculation:
Code:

function advCalc(selected) {

	var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;

	result = result.toFixed(2) ;
	result = addCommas(result) ;
	
	document.getElementById("total"+selected).innerHTML = result ;

}

The bit that adds a new row of fields is:
Code:

function addPart(divName){
          var newdiv = document.createElement('div') ;
		  newdiv.setAttribute('id', 'partrow' + counter) ;
		  newdiv.setAttribute('style', 'clear:both;') ;
          newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>&pound;</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
          document.getElementById(divName).appendChild(newdiv) ;
          counter++ ;
}

The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc.

It isn't working for any other fields added but I can't see what is wrong

So I have a little calendar widget on my site, for people to choose their dates for a reservation system. They then click a 'Book Now' button which creates a dynamic url (using their start date and the number of dates) to the booking engine. The problem is, the way it accomplishes this (window.location.href=), breaks cross-domain tracking on Google Analytics. And I'm not smart enough to figure out how to do it any other way.

What I'd like to do is have clicking the Book Now button change the URL in the form action within the form with ID resForm, and then submit the form. I'm hoping someone can help me edit the form so that it accomplishes this. I'd be incredibly thankful.

This is what I currently have:

Code:

<script>
jQuery(document).ready(function($) {

$(".book-now").click(function() {

if($('#check-in').length > 0 && $('#DepartureDate').val() != '') {

var data = $('#check-in').val();
var arr = data.split('/');

var datac = $('#DepartureDate').val();
var arr2 = datac.split('/');

var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(arr[2],arr[0] -1,arr[1]);
var secondDate = new Date(arr2[2],arr2[0] -1,arr2[1]);

var diffDays = Math.round((firstDate.getTime() - secondDate.getTime())/(oneDay));

if ((diffDays) < 0) 
{
    diffDays = Math.abs(diffDays); 
    var link = "https://res.windsurfercrs.com/bbe/page1.aspx?propertyID=13841&checkin=" + arr[0] + "/" + arr[1] + "/" + arr[2] + "&nights=" + diffDays;

    console.log(link);

    window.location.href= link;
}

    else
    {
        alert ('Please fill in correct Check-In and Check-Out dates. The Check-In date must be before the Check-Out date.');
    }

} else {
alert ('Please fill in a Check-In and Check-Out date, thanks!');
}

});

});
</script>

The form looks like this:

Code:

<form action="#" onSubmit="_gaq.push(['_linkByPost',this]);" method="post" id="resForm">
<input type='text' name="checkin" id="check-in" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='arrivaldate'/>
<input name="checkout" id="DepartureDate" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='departuredate'/>
<input type="button" value="BOOK NOW" class='book-now' />
</form>

Reply With Quote




01-25-2015, 12:46 AM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Just call the _gaq() function manually.

Code:

    _gaq.push(['_linkByPost',document.getElementBy("resForm")])
    window.location.href= link;

Is this possible?

Please look at the attached image.

I am trying to create a team creation page for a site I am making, however I want the user to be able to see all the names they enter before the information is passed to the .php file to send it to the MySQL table.

1. So, every time the user enters a name and presses the "add name" button the name details are stored in an Javascript array and displayed in the box below.
2. When the user presses the "save team" button the team name is passed by a simple form post and the javascript array is passed to a php array and then processed ready to be passed to the MySQL table.

The problem is I don't know to do the first bit (number1).

Any ideas or pointers?

hi i got some code from another site. i modified it according to my needs. what is it doing it adds dynamic form fields by clicking "add another" link. the problem is when logged in user wants to modify his contact details he clicks on edit then gets to this modification form where all the data in his db is selected and displayed in that form fields. so the problem here is when he clicks on add another link it adds up that many fields sets that appeared currently. means if there appeared four sets of fields then clicking on add another link will add four more fields. what i want is to add only one set of fields which contains of text field and select menu.

my code is here
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
                $('#input' + num).after(newElem);
            });
         
        });
    </script>
    <style>
#myForm div {
   font-size:14px;
   margin-bottom: 10px;
   clear: left;
}
#myForm label {
   width: 125px;
   display: block;
   font-size:14px;
   font-weight: bold;
   color: #999;
   float: left;
}
#btnAdd {
   margin-left:130px;
}
</style>

</head>
 
<body>
<form id="myForm" method="post" action="process.php">
   <div>
    <label>First Name: </label><input type="text" name="fname" id="fname"><br>
    </div>
    <div>
    <label>Last Name: </label><input type="text" name="lname" id="lname"><br>
    </div>
    <?php
   $connect = mysql_connect("localhost","user","pass");
   mysql_select_db("db");
   $get_im = mysql_query("SELECT * FROM contactim WHERE userid='$_SESSION[userid]'");
   $count = mysql_num_rows($get_im);
   while($get_contactim = mysql_fetch_assoc($get_im)) {
      $userim_db = $get_contactim['username'];
      $im_db = $get_contactim['im'];
      //echo $userim_db."<br>";
      
      for($i = 1; $i <= $count; $i++) {
   ?>
    <div id="input1" class="clonedInput">
      <label>IM Screen Names:</label>
        <input type="text" name="name[]" id="name1" value="<?php if($userim_db == "") { echo ""; } else { echo $userim_db; } ?>" />
        <select name="screenname[]" id="screenname1">
          <option value="AIM" <?php if($im_db == "AIM") { echo "SELECTED"; } ?>>AIM</option>
          <option value="gtalk" <?php if($im_db == "gtalk") { echo "SELECTED"; } ?>>Google Talk</option>
          <option value="skype" <?php if($im_db == "skype") { echo "SELECTED"; } ?>>Skype</option>
          <option value="windows" <?php if($im_db == "windows") { echo "SELECTED"; } ?>>Windows Live</option>
          <option value="yahoo" <?php if($im_db == "yahoo") { echo "SELECTED"; } ?>>Yahoo</option>
        </select><br />
        <?php
      }
   }
      ?>
    </div>
 
    <div>
       <a href="#" id="btnAdd">Add another</a>
    </div>
    <input type="submit" name="submit" value="Submit">
</form>
 
</body>
</html>

hi i need help in creating dynamic form using jquery. i create a form in this form i want when "add another" link is clicked then it adds one more set of fields.

form is here
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script src="js/script.js" type="text/javascript"></script>
<style>
#form1 div {
   font-size:14px;
   margin-bottom: 10px;
   clear: left;
}
#form1 label {
   width: 125px;
   display: block;
   font-size:14px;
   font-weight: bold;
   color: #999;
   float: left;
}
#link {
   margin-left:125px;
}
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<div>
  <label>IM Screen Names:</label>
    <input type="text" name="textfield" id="textfield" />
    <select name="select" id="select">
      <option value="AIM" selected="selected">AIM</option>
      <option value="gtalk">Google Talk</option>
      <option value="skype">Skype</option>
      <option value="windows live">Windows Live</option>
      <option value="yahoo">Yahoo</option>
    </select><br />
    <div id="link"><a href="">Add another</a></div>
</div>
</form>
</body>
</html>

Hi,

I'm pretty new to javascript and ajax and need some help.

I want to create a form that has an advanced search page which changes the search fields that appear, depending on what the user clicks.

For example, at the top there are three buttons:
1. Search images 2. Search videos 3. Search audio

As a user clicks these I want different search fields to be shown on the page.

I have tried searching for a way to do this via Google, with no luck. Can someone point me in the correct direction (via a demo or tutorial) on how to do this?

I don't just want the answer as I really want to learn how to get this to work!

Thanks

hello Sir/Mam

i have a piece of code here that creates a dynamic form..

Code:

<script type='text/javascript' language='javascript'>
	<!-- 
function createTextbox(){
	var textboxtag = document.createElement("input");
		textboxtag.setAttribute("name","username");				   
        document.getElementById("form1").appendChild(textboxtag);
					
				}
-->
</script>

<body>
<div id='div1'>
          <button name='textbox' onclick='createTextbox()'>Textbox</button>
</div>
<div id='div2'>
     <form id='form1' action='#' method='post'>
          
     </form>
</div> 
</body>

this code sets the "name" attribute to "username" automatically..
my problem is how to set the name attribute manually by the user after the dynamic textbox is created..

just like in visual basic where after you create a form e.g button or textfield, theres a side pane where you can change attributes like name, value, etc..

tnx for the time reading my post..sorry for my poor explanation of the problem..im new in javascript and trying to learn it all by myself..

Hi,

I'm trying to create a dynamic form using Javascript. This form essentially needs to collect data through certain fields and populate another.

Code:

<input name="Field1" type="text" />
<input name="Field2" type="text" />
<input name="Field3" type="text" />
<input name="Field4" type="text" />
<input name="Field5" type="text" />

Field 6 value = answer

I'm stuck on how to go about this. I'm assuming I need to create multiple conditions to check each field and then output to a text box?

Code:

if ((document.thisform.Field1.value == null) && (document.thisform.Field2.value == null)) {

I've done a bit of searching around but can't find anything with particular reference to this exact requirement, only brick level functions.

If I have left anything out, or if it's all amiss, please let me know.

Hello,

I've used the concept from this website to build a form.
http://www.enviromark.ca/english/quoteform.html

Notice how the second drop down options change depending on what option is selected in the first drop down.

Here's the Javascript
Code:

var Option1_Array = new Array("Choose a version", "1", "2");
var Option2_Array = new Array("Choose a version", "3", "4");


function program(objProgram) {
  var objVersion = objProgram.form.Version;
  var selectedArray  = window[objProgram.options[objProgram.selectedIndex].value.replace(/\s/g,'') + "_Array"];
  objVersion.options.length = 0;
  for (var i=0; i < selectedArray.length; i++) {
    objVersion.options[i]=new Option(selectedArray[i], selectedArray[i].replace(/->\s/g, ""));
  }
}

Here's the HTML
Code:

 <form>


                  
        <select name="Program" onChange="program(this)">
            <option value="Start">Please choose a program</option>
            <option value=Null>---------------------------------------></option>
            <option value="Option1">1</option>
            <option value="Option2">2</option>

          </select>
      
     
        <select name="Version" onChange="">
           
        </select>
     
       </form>

Now, this code works perfectly, and does exactly what I want it to. BUT I'd like to add more fields that accomplish the same thing.

For example choose option1 --> version 2 --> type 3 --> thing 5

Now, in order to do this I believe you need to generate a 'value = "a_value"' in the generated html option and select fields. That way, all you need to do is make separate functions for each level and the function can call the 'value' html attribute to handle each <select> depending on its declared value.

If this is the best way (it sounds a little sketchy to me) then any help would be great. Or, if you can add on more child selection options within one function.

Thanks,
-Matthew

i want to build a form have a "payment" select option
ex. when user choose option "credit card" is will show some textbox(firstname and lastname,ccnumber,ccv,expday...)
when user choose option "paypal" is will show some textbox(firsname,email paypal).

Please help me solve this

Hi guys,

I am able to create some of the dynamic controls but having trouble to order them in one column..

i have this view :

field1 field2 field3


what i want is :

field1
field2
field3

below is my code :



function AddLevel2()

{

//var mainContainer2 = document.getElementById('mainContainer2');
var newDiv = document.createElement('div')
newDiv.style.width = "560px";
newDiv.style.backgroundColor= projbgGr;
newDiv.style.position = "relative";
newDiv.style.left = "245px";



var BUDDL = document.createElement('select');

// size lenght of the DDL for both IE or Firefox
BUDDL.setAttribute("style","width:100px");

//firefox
BUDDL.setAttribute("width","100px");
BUDDL.style.width = "100px";
BUDDL.id = 'BU' + b ;
BUDDL.setAttribute('name','BU' + b);

BUDDL.style.position = "relative";
BUDDL.style.left = "5px";

BUDDL.onchange=show;


// filling the DDL by ITEM array Elements
var i=0;
for (i=0;i<=4;i++)
{
objOption = document.createElement('option')
objOption.text = "BU" + i;
//objOption.value=ITEM1[i];
BUDDL.options.add(objOption);
}




var j =1;
var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e";


//add Description Unit
Description = document.createElement( 'INPUT' );
Description.id = 'D' + b ;
Description.setAttribute('name','D' + b);
Description.size=2;
// size lenght of the Comment for both IE or Firefox
Description.setAttribute("style","width:300px");
//firefox
Description.setAttribute("width","300px");
Description.style.width = "300px";
Description.onblur = show;
//Description.style.backgroundColor= bgc;


//end Description
//number of testers

NumberTesters = document.createElement( 'INPUT' );
NumberTesters.id = 'T' + b;
NumberTesters.setAttribute('name','T' + b );
NumberTesters.size=2;
// size lenght of the Comment for both IE or Firefox
NumberTesters.setAttribute("style","width:40px");
//firefox
NumberTesters.setAttribute("width","40px");
NumberTesters.style.width = "40px";
NumberTesters.onblur=show;
//NumberTesters.style.backgroundColor= bgc;



//number of testers

// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";

var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";
newDelButton.style.position = "relative";
newDelButton.style.left = "7px";





// Append new text input to the newDiv

newDiv.appendChild(BUDDL);
newDiv.appendChild(Description);
newDiv.appendChild(NumberTesters);
newDiv.appendChild(newDelButton);

//newDiv.appendChild(newAddButton2);

//Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);

//Add a handler to button for deleting the newDiv from the mainContainer
newAddButton.onclick = AddLevel22;
//newAddButton.onclick = AddNewRecord;

//newAddButton2.onclick = AddLevel3;

newDelButton.onclick = function()
{
var answer = confirm ("You have to delete all UATs under this BU first\n \tIs this done ?\t")
if (answer)
{alert ("Now you can delete it");
mainContainer.removeChild(newDiv);}
else
alert ("Then please check all UATs under this BU first and delete them");


}

b++;
document.form1.NumberOfBU.value = parseInt(b-1);

//alert(document.form1.NumberOfBU.value);
//AddLevel3;

for (UATCounter = 1 ; UATCounter<=limit; UATCounter++)


{


//var newDiv = document.createElement('div')
//
// newDiv.style.width = "250px";
// newDiv.style.backgroundColor= projbgVi;
// newDiv.style.position = "relative";
// newDiv.style.left = "350px";


var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e";

newMDate = document.createElement( 'INPUT' );
newMDate.id = 'M'+ (b-1) + '_' + UATCounter ;
newMDate.setAttribute('name','M'+ (b-1) + '_' + UATCounter);
newMDate.setAttribute('type', 'Date');
newMDate.size=7;
newMDate.style.backgroundColor= bgc;
//newMDate.onfocus=Calend;
// function Calend ()
// {
// fnInitCalendar(this, this.getAttribute('id'), 'style=calendar.css,close=true');
// }

newMDate.onblur = show;



//Frontline Hours
FLHours = document.createElement( 'INPUT' );
FLHours.id = 'FL'+ (b-1) + '_' + UATCounter ;
FLHours.setAttribute('name', 'FL'+ (b-1) + '_' + UATCounter);
FLHours.size=2;
// size lenght of the Comment for both IE or Firefox
FLHours.setAttribute("style","width:40px");
//firefox
FLHours.setAttribute("width","40px");
FLHours.style.width = "40px";
//NumberTesters.style.backgroundColor= bgc;



//Frontline Hours
MGRHours = document.createElement( 'INPUT' );
MGRHours.id = 'MG'+ (b-1) + '_' + UATCounter ;
MGRHours.setAttribute('name', 'MG'+ (b-1) + '_' + UATCounter);
MGRHours.size=2;
// size lenght of the Comment for both IE or Firefox
MGRHours.setAttribute("style","width:40px");
//firefox
MGRHours.setAttribute("width","40px");
MGRHours.style.width = "40px";

//NumberTesters.style.backgroundColor= bgc;
//Frontlne Hours


//Create buttons for creating and removing inputs

var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";

var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";
newDelButton.style.position = "relative";
newDelButton.style.left = "7px";


//newDiv.appendChild(ProjDDL3);
newDiv.appendChild(newMDate);
newDiv.appendChild(FLHours);
newDiv.appendChild(MGRHours);

mainContainer.appendChild(newDiv);


}





}

Hi everybody,


I have a php file with an almost-standard html form. The not-so-standard part is that the name-attributes of the form elements are dynamically generated as such:

PHP Code:
<? for($i=0; $i<5; $i++) { ?>
<input type="text" name="field_<? echo $i; ?>" />
<? } ?>

Now I want to do some javascript validation on the fields, but I'm having a bit of trouble accessing the values of the fields. My current code is as follows:

Code:

var i = 0;
var num = <? echo $step1_sag_faktura_num; ?>;
						
for (i=0; i<num; i++){
window['file_' + i] = document.forms["nyisagform_step2"]["sag_fak_file_" + i].value;
}

But this doesn't seem to work. It gives no error message. It just validates true.

Can somebody tell me a way to do this? I'm no good at javascript and the code above is pieced together by bit I found on the internet.


Thanks in advance,
deafdigit

Hey,

Were I am stuck is with the jquery

I have a form that is done in a form class and when an option is selected from the dynamically populated drop down menu I would like it to fill in the text boxes so they can be edited.

I currently have:

getfeed.php - the page that is connected to the javascript

Code:

<?php
 
	include('class/class.form.php');
 
	include('class/class.users.php');
 
	$iID     = trim($_GET['extension']);
 
	if(!$iID) die('No User Data found.');
 
	$getValues = new Extension();
 
	$user_info = $getValues->getUsersInformation($iID);
 
	$sip_info  = $getValues->getSipInformation($iID);
 
	//print_r($user_info);
 
	//print_r($sip_info);
 
	$array = $getValues->getUsersInformation($iID);
 
 
	echo '<br /><br />-- end of query --';

The Javascript
Code:

if(document.id('LoadExtension') && document.id('ExtensionResponse')) { // id of select box
	var sel = document.id('LoadExtension'); // ser select box as var.
	sel.addEvent('change', function(chg) { // add change event to select box.
		if(sel.getSelected().get('value') != '') { // on change if selected value is not empty.
			new Request.HTML({
				url : 'http://Domain.co.nz/Air/includes/getFeed.php?extension='+ sel.getSelected().get('value'),
				onRequest: function() {
					document.id('ExtensionResponse').set('html', 'loading...');
				},
				onComplete: function(r1, r2, html, js) {
					document.id('ExtensionResponse').set('html', html);
				}
			}).send();
		}
	});
}

At the moment it does not load any data(I somehow need to get the $iID sent from the index.php but the drop down menu is a count array would I take it from this?) and is in a separate div below the form.