JavaScript - Array To Populate Html List With Sublist Issues

Hello All,

I have a form where the number of input fields (lets call them B through N) is determined by the length of a php array. Above those input fields is another field (lets call this field input A) that I would like to be auto populated based on what the user enters in fields B through N.

Here is my code. The first table (with all of the "totals" fields) holds all of the input fields that I would like to auto update. These fields should auto update so that every input in EACH of the "fy" fields in the second table is added together. Example: every input in the id="fy_{$fy.fy}_high_impact_cost" field should be added together as the user enters them, and the id="totals_high_impact_cost" field should be auto updated with that total.

Code:

<form method="post" name="submit" action="new_item.php" accept-charset='UTF-8'>

<table border="box" width="100%">
<tr>
<td align="center">$<input id="totals_high_impact_cost" size="3" name="totals_high_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_impact_cost" size="3" name="totals_most_likely_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_impact_cost" size="3" name="totals_low_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_actual_expense" size="3" name="totals_actual_expense" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_high_mitigation_cost" size="3" name="totals_high_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_mitigation_cost" size="3" name="totals_most_likely_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_mitigation_cost" size="3" name="totals_low_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_cost_in_scope" size="3" name="totals_cost_in_scope" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_unfunded_threat" size="3" name="totals_unfunded_threat" maxlength="20" style="text-align: right" />M</td>
</tr>
</table>

{foreach value=fy from=$php_array}
<table>
<tr>
<td align="center">$<input id="fy_{$fy.fy}_high_impact_cost" size="3" name="fy_{$fy.fy}_high_impact_cost" maxlength="20" style="text-align: right" value="{$fy.high_impact_cost}" onchange="update_totals_high_impact_cost()" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_impact_cost" size="3" name="fy_{$fy.fy}_most_likely_impact_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_impact_cost" size="3" name="fy_{$fy.fy}_low_impact_cost" maxlength="20" style="text-align: right" value="{$fy.low_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_actual_expense" size="3" name="fy_{$fy.fy}_actual_expense" maxlength="20" style="text-align: right" value="{$fy.actual_expense}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_high_mitigation_cost" size="3" name="fy_{$fy.fy}_high_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.high_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_mitigation_cost" size="3" name="fy_{$fy.fy}_most_likely_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_mitigation_cost" size="3" name="fy_{$fy.fy}_low_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.low_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_cost_in_scope" size="3" name="fy_{$fy.fy}_cost_in_scope" maxlength="20" style="text-align: right" value="{$fy.cost_in_scope}" />M</td>
</tr>
</table>
{/foreach}

</form>

Please email me at alexhall12315@yahoo.com if you would like more explanation. Thanks in advance for any help!!! =)

Hi Guys,

I am after populating a HTML box (or another language if html wont do) with a number of different files pdfs, exe's etc for customer to download.

The content of this box will depend on the choices from two drop down lists.

I have got two drop down lists setup filtering off each other...

I have thought about tagging each document and then pulling up a file off the choices selected?

Not sure the best way to go about this.

Regards

Heres the code so far....
Code:

 <HTML>
<HEAD><TITLE>prototype CP</Title>
<style type="text/css">
.style1 {
	text-align: center;
}
.style2 {
	font-size: small;
	color: #FFFFFF;
}
.style3 {
	font-size: small;
}
</style>
</Head>
<BODY OnLoad="BuildContacts(0);" style="background-color: #336699; background-image: url('back.jpeg')">
 
<FORM Name="myForm">
	<div class="style1">
		<span class="style2">I have a
</span>
<font color="#000000">

<SELECT Name="SalesNames" OnChange="BuildContacts(this.selectedIndex);" class="style3">
   <OPTION Value="">
   <OPTION Value="nexgen">nexgen
   <OPTION Value="zimbra">zimbraCS
   <OPTION Value="exchange">exchange
</Select></font><span class="style2">
 mailbox and I want to set it up on:
</span>
<font color="#000000">

<SELECT Name="SalesContacts" class="style3">
   <OPTION Value="">--------
</Select>
</font>
	</div>
</Form>


</Body>
</Html>

<SCRIPT Language="JavaScript"><!--

//Build arrays for each mailbox type
Contacts=new Array(4);
Contacts[0]=new Array(3);
Contacts[1]=new Array(2);
Contacts[2]=new Array(5);
Contacts[3]=new Array(4);

//Nexgen
Contacts[0][0]="";
Contacts[0][1]="Outlook";
Contacts[0][2]="mac mail";
Contacts[0][3]="entourage";
Contacts[0][4]="iPhone";
Contacts[0][5]="Blackberry";
Contacts[0][6]="other mobile phone";

//Zimbra
Contacts[1][0]="Outlook";
Contacts[1][1]="mac mail";
Contacts[1][2]="entourage";
Contacts[1][3]="iPhone";
Contacts[1][4]="Blackberry";
Contacts[1][5]="other mobile phone";

//Exchange
Contacts[2][0]="Outlook";
Contacts[2][1]="mac mail";
Contacts[2][2]="entourage";
Contacts[2][3]="iPhone";
Contacts[2][4]="Blackberry";
Contacts[2][5]="other mobile phone";

//Call this to build the Contact list for the specified Salesperson
function BuildContacts(num)
{
   //Select the first Contact
   document.myForm.SalesContacts.selectedIndex=0;
   
   //For every contact in the array for this person, add a new option
   for(ctr=0;ctr<Contacts[num].length;ctr++)
   {
      document.myForm.SalesContacts.options[ctr]=new Option(Contacts[num][ctr],Contacts[num][ctr]);
   }
   //Set the length of the select list
   document.myForm.SalesContacts.length=Contacts[num].length;
}
//--></Script>

Problem
Part 1.
Gather data from linux server and output to a file named data_DDMMYY
Output file must contain the file name and size

Part 2.
Compare todays data_DDMMYY to yesterdays data_DDMMYY and output results to a file named difference_DDMMYY

Output file must show the difference in size between same named files and identify new and deleted files

Solution
Part 1.
Log into linux, use command "find . -daystart -ctime 0 -type f | xargs ls -sSh > data_DDMMYY"
Sample output:


Part 2.
Perhaps use of an array and iterator? (my knowledge is very limited when it comes to arrays and iterators)

Idea

Grab file 1, go to line 1, read first string and save to variable x, read second string and save to list2

Grab file 2, using the current line in list2, look for a match.

If a match is found, go to that line, read first string and save to variable y

Calculate difference of x-y and save to list1, output first line of list 1 and list 2 to difference_DDMMYY

If match is not found, output <string>.notFound to a new line in difference_DDMMYY

Grab file 1, go to line 2, read first string and save to x, read second string and save to new line in list 2

etc ... until all lines in file 1 have been used.

Then somehow I'd like to find the lines in file 2 that weren't copied to a list and output them to the difference_DDMMYY as <String>.newFile

I'm sure there's some sort of for loop I can use to solve this, but as of right now I'm stumped and need ideas >.<

Any and all help is appreciated.

P.S. I'm new to programming, I'm not sure which language would be best to fix this problem

hi, i am currently working on aptana stuidio Nokia WRT to create a mobile widget.

the projects requires the retrieval of data from a database. I've created a java servlet in eclipse to connect and execute query to the database.

In aptana, i'm using js file and html file. i am able to connect to the servlet,
process the data (split it) and store in an array to display the retrieved data on screen.

But now i am facing problems to put the retrieved data (array) into a drop down list for selection. can i do it in a js file?

thanks =)

Hi, I'm trying to find out the min and max values of randomly generated values in a array list. Its a checkout system that randomly add a customer to a queue and does the same to remove a customer depending on a randomly generated number. Ive managed to figure out the mean of the queue but can only display the total values added to the list rather than display when the queue was at it biggest value. If anyone can point me in the right direction it would be greatly appreciated.

___________________________________________________________________

import java.io.BufferedWriter;
import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.LinkedList;
import java.util.ListIterator;
import java.util.Queue;
import java.util.Random;


public class Checkout {

private Queue<String> tillQueue;
private int rndNumber;
private int currentLen;
private ArrayList <Integer>lengthList;
private Random r;
public Checkout()
{
tillQueue = new LinkedList<String>();
currentLen = 0; //current queue length
lengthList = new ArrayList <Integer>();
r= new Random();

}
public void simulation()
{
System.out.println("Time" + "\t" + "Rnd" + "\t" +"Queue Status");

for (int t=2; t<10; t++)
{
rndNumber =r.nextInt(6)+1;

if (rndNumber==2 || rndNumber==4 || rndNumber==6)
{
tillQueue.add(String.valueOf(t));
currentLen++;
}
else if ((rndNumber==1 || rndNumber==3) && !tillQueue.isEmpty())
{
tillQueue.remove();
currentLen--;
}
else if(rndNumber==5)
{
//do nothing
}
if(tillQueue.isEmpty())
{
System.out.println(t + "\t" + rndNumber + "\t" + "Queue is empty");
}
else
{
System.out.println(t + "\t" + rndNumber + "\t" + tillQueue.toString());
}

lengthList.add(new Integer(currentLen));
}
}
public double CalculateMeanLength()
{
double mean=0.0;
int sumOfLengths = 0;

for (int i = 0; i<lengthList.size();i++)
{
sumOfLengths=sumOfLengths+(Integer)lengthList.get(i).intValue();
}

mean = (double)sumOfLengths/lengthList.size();

return mean;
}

public int ShowMax()
{
int max = 0;
//i know its going to be a for loop of some kind but not sure how to do it//
}


----------------------------output via controller================

Time Rnd Queue Status
2 6 [2]
3 5 [2]
4 3 Queue is empty
5 5 Queue is empty
6 1 Queue is empty
7 5 Queue is empty
8 5 Queue is empty
9 4 [9]
mean length = 0.375
max length = 3
//the max length here should be 1

===========================================

Thanks in advance for your help

Hi, I have a php script that gets all images in my directory and outputs them as gallery[0]=firstimage.jpg, [1], [2], ... The php script is supposed to work with the javascript, so to cover all angles here is the php

Code:

<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.jpeg$"); //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'gallery['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var gallery=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

Then this javascript uses the array for a slideshow, only I want to list each image as a small thumbnail. This will allow me to view the images on my webserver much more eye friendly.

Code:

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>

<div style="width: 170px; height: 160px">
<img id="slideshow" src="images/bear.gif" />
</div>

I'm not sure how to go about listing all the images. I was thinking about using definition lists and only selecting the last 10 images. I can insert images into the definition description so I thought that was my best shot. I get stuck on choosing the images from the array, I attempt something like the following
Code:

<img src="gallery[gallery.length-11]" /> </dd>

But that looks for a file, not the array. I then modified the script to get me the most recent images (if I were to add/remove images). Does this look correct?

Code:

<script type="text/javascript">
var curimg=0
function newestimg(){
document.getElementById("largethumb").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? gallery.length-1 : curimg
} 

</script>

Hi All,

I have an issue that is driving me batty. I have two js files called in my <head> section but only the first one listed runs. I know this is supposed to work but it doesn't. What am I missing?

I've searched here on the forum and on Google with no real results. I have read the info on javascriptkit but do not believe it applies. One script contains functions that run "onChange" of certain fields while the other runs "onSubmit" of the form. The "onChange" events from the first script run fine. The second one does not run at all. I get no errors. I can find no var conflicts. I even added an alert at the top of the main function in the second script to verify it was loading and the alert never pops up.

Head Script Tags: (The first script called works fine.)
Code:

<script type = "text/javascript" src = "SQFImageSwap.js"></script>
<script type = "text/javascript" src = "FormValidation.js"></script>

Form Tag Call: (to second script)
Code:

<form id="Ostandard" name="standard" action="/cgi-bin/standardquoterequest.pl" method="POST" enctype="application/x-www-form-urlencodedl" onSubmit="return validFormSubmit(this)">

Thank You!
-Jim

My code goes through the answer function (below) and it determines if you answered green. If you answered green a popup says correct other wise incorrect. How can I modify my code so that I can add multiple answers for different questions.Example
q1.html what color is the grass?
q2.htm what color is the sky?
.
.
q20.html what day of the week was the last baseball game?
_____________________________________________________
now in my javascript every question is going to go through the answer function and think the answer is green. that would be correct for q1.html but what if i am on q20.html and it goes through the answer function. It will think the answer is green. So how can i change the code so q1.html knows that the answer is green. q2.html knows the answer is blue?

here is my code

Code:

var n = 16; // modify this for number of seconds to answer
document.getElementById( 'time').value = "Answer in " + n + " seconds";
var i = setInterval('count()' , 1000);
var tooLate;
 
function count() {
tooLate = 0;
n--;
if(n >=0) {
document.getElementById( 'time').value = "Answer in " + n + " seconds";
}
else {
clearInterval(i);
 
alert("Too late!");
document.getElementById('answer').value = "";
tooLate = 1;
}
}
 
 
function answer() {
 
var correct = "green"; // This is the correct answer
if (tooLate == 0) {
if(document.getElementById( 'answer').value == correct) {
clearInterval(i);
alert("Right Answer with " + n + " seconds remaining");
}
else{
	clearInterval(i);
	alert("Incorrect! The answer was " + correct);
}
}

submitform();

//submit form
function submitform()
{
    document.forms["myform"].submit();
}
 
}

Thank you!

I have some code to pick a wire size and conduit size from 2 separate drop down list. Then inside the js it is evaluated to decide how many wires. My problem is I can't figure out how to make the drop down options go into the JS. I just put in an error alert to test if they were for now.

Here is my code:

Code:

function fillcap(){
		var wire = document.getElementById("wireSize");
		var conduit = document.getElementById("conduitSize");
		if (wire.option.length >= 10 && conduit.option.length == .5) {
			windows.alert("Wire Size exceeds conduit max fill!")
		}

And the html

Code:

		<h2>Fill Capacity</h2><br>
        <b>Wire Size</b><br>
		<select id ="wireSize">
		<option value="1">#14</option> 
		<option value="2">#12</option> 
		<option value="3">#10</option>
		<option value="4">#8</option> 
		<option value="5">#6</option> 
		<option value="6">#4</option>
		<option value="7">#3</option> 
		<option value="8">#2</option> 
		<option value="9">#1</option>
		<option value="10">1/0</option> 
		<option value="20">2/0</option> 
		<option value="30">3/0</option>
		<option value="40">4/0</option>
		<option value="250">250</option>
		<option value="300">300</option> 
		<option value="350">350</option> 
		<option value="400">400</option>
		<option value="500">500</option> 
		<option value="600">600</option> 
		<option value="700">700</option>
		<option value="750">750</option> 
		</select>  <br>
		<b>Conduit Size</b><br>
		<select id="conduitSize">
		<option value=".5">1/2</option> 
		<option value=".75">3/4</option> 
		<option value="1">1</option>
		<option value="1.25">1-1/4</option> 
		<option value="1.5">1-1/2</option> 
		<option value="2">2</option>
		<option value="2.5">2-1/2</option> 
		<option value="3">3</option> 
		<option value="3.5">3-1/2</option>
		<option value="4">4</option> 
		<option value="5">5</option> 
		<option value="6">6</option>
		</select><br>
		<input value="Wires allowed" onclick="fillcap()" type="button"> 
		<input type="text" name="myresultbox" id="resultbox10"> Wires<br>

Thank you for any advice.

Resolution if interested:
Code:

<head>
    <title>Lab8</title>
    <script src="arrays.js" type="text/javascript"></script>
    <link href="css.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        
        function amountTotal() {
            var totalDonations = 0;
            for (var i = 0; i < amount.length; i++) {
                totalDonations += amount[i];
            }
            return totalDonations;
        }
   
    </script>
</head>
<body>

    <table id="donations" rules="rows">
        <tr>
            <th>
                Date
            </th>
            <th>
                Name
            </th>
            <th>
                Amount
            </th>
            <th>
                Address
            </th>
        </tr>
        <script type="text/javascript">

            for (var i = 0; i < amount.length; i++) {

                if (i % 2 == 0) document.write("<tr>")
                else document.write("<tr class='yellowrow'>");
                document.write("<td>" + date[i] + "</td>");
                document.write("<td>" + firstName[i] + lastName[i] + "</td>");
                document.write("<td>" + amount[i] + "</td>");
                document.write("<td>" + street[i] + "<br />" + city[i] + "," + " " + state[i] + " " + zip[i] + "</td>");
            }
            document.write("</tr>")
      
        </script>
    </table>
    <table id="totalsTable">
        <tr>
            <th colspan="2">
                Summary
            </th>
        </tr>
        <tr>
            <td>
                Contributions
            </td>
            <td class="amt">
                <script type="text/javascript">
                    document.write(amount.length);
                </script>
            </td>
        </tr>
        <tr>
            <td>
                Amount
            </td>
            <td class="amt">$
                <script type="text/javascript">
                    var totalTotal = amountTotal();
                      document.write(totalTotal);
                </script>
            </td>
        </tr>
    </table>
</body>
</html>

I have a seperate .js sheet with some arrays on them (firstName, lastName, date, amount, city, state, zip) and I am trying to populate a table with these indexes. The 'yellowrow' highlights everyother row which is called out in my css sheet.


My header rows fill in but not the rest. Here is the link for the site actually posted on the web.
Code:

<body>
<table id="donations" rules="rows">
<tr>
<th>Date</th>
<th>Name</th>
<th>Amount</th>
<th>Address</th>
</tr>

<script type="text/javascript">
    for (var i = 0; i < amount.length; i++) {
        if (i % 2 == 0) document.write("<tr>")
        else document.write("<tr class='yellowrow'>");
        document.write("<td>" + date(i) + "</td>");
        document.write("<td>" + firstName(i) + lastName(i) + "</td>");
        document.write("<td>" + amount(i) + "</td>");
        document.write("<td>" + "<br />" + city(i) + "," + state(i) + zip(i) + "</td>");
    }
        document.write("</tr>")
</script>
</table>

</body>

I am trying to populate a listbox using Javascript. The listbox is populated using the xml response from ajax request. Below is the code used for the same

Code:

var xmlDoc = xmlhttp.responseXML;
for (var i = 0; i < xmlDoc.getElementsByTagName("id").length; i++) {
                        traderlists.add(new Option(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue, xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue));
                    }

This works fine for me.
But i am facing performance issue here. some ajax requests retrieves xmls with around 11,000 nodes and this takes too much of time to populate the listbox.

Can anyone please advice me with an better solution?

I have a check box right now that calls an onClick event.

Here is the Input:
Code:

<input name="usePad" type="checkbox" value="usePad" id="usePad" onclick="showBind('padShow','padOk')" />

Here is the Script:
Code:

var xmlhttpshowBind;
var showBindDiv;

function showBind(BindPage,BindDiv) {
xmlhttpshowBind=GetXmlHttpObject();
if (xmlhttpshowBind==null) 	{
	alert ("Browser does not support HTTP Request");
	return; }
var url="/scripts/"+BindPage+".php";
showBindDiv=BindDiv;
xmlhttpshowBind.onreadystatechange=showBindGet;
xmlhttpshowBind.open("GET",url,true);
xmlhttpshowBind.send(null); }

function showBindGet() {
	if (xmlhttpshowBind.readyState==4) {
	document.getElementById(showBindDiv).innerHTML=xmlhttpshowBind.responseText; } }

It works great to fill the div called for, but I would like it to remove the div contents if it's unchecked, I'm not sure how to do this?? Any help would be appreciated!

Thank you in advance!

hello
i am trying to fire a form which after the call to retrieve the data, populate the form with the data. i can see from firebug that the json data is being captured, but cannot seem to be able to populate the form with it. i am using a jquery plugin facybox, that opens the form, but the fields are blank. i have attached my code and would be grateful if someone could tell me where i am going wrong? many thanks

js code

Code:

<script type="text/javascript">
function edit(com, grid) {
if (com == 'Edit') {
        if($('.trSelected').length>0){
            if($('.trSelected').length>1){
                alert('Please select just one row');
                return;
            }
            var items = $('.trSelected');
            var itemlist ='';
            for(i=0;i<items.length;i++){
                itemlist+= items[i].id.substr(3);
            }
			$.ajax({
			   type: "POST",
			   dataType: "json",
			   url: "tempcontact.php",
			   data: "items="+itemlist,
			   success: function(data){
			   	document.getElementById('id').value = data.id;
            document.getElementById('email').value = data.email;
			    
			   $("#flex1").flexReload();
			   }
			 });
            
            /*and so on then you can call facybox*/
           jQuery.facybox({ div: "#editform"});
		   
        } else{
            alert('Please select a row to edit.');
        }
    }
      }
</script>

form

Code:

<div id="editform" style="display:none;">
  <form action="conedit.php" method="post" class="webform">  
<fieldset>  
<legend><span>Update Contact</span></legend>
<br /> <div id="dataText">Please delete the fields if there is no data 'No data to display'.</div>
  <label for="id">ID:</label>  
<input id="id" name="id" class="text" type="text" value="" />
<label for="name">Full Name:</label>  
<input id="name" name="name" class="text" type="text" value="" />  
  
<label for="email">Email address:</label>  
<input id="email" name="email" class="text" type="text" value="" />  
  
<label for="phone">Telephone:</label>  
<input id="phone" name="phone" class="text" type="text" value="" />  
  
<label for="mobile">Mobile:</label>  
<input id="mobile" name="mobile" class="text" type="text" value="" />  
 
<label for="fax">Fax:</label>  
<input id="fax" name="fax" class="text" type="text" value="" />  
  
<label for="notes">Notes:</label>  
<textarea name="notes" cols="25" rows="3"></textarea>  


</fieldset>
<input class="submit" type="submit"  name="submit" value="Update" />
</form>
</div>

<!-- *** NEED HELP PASSING VALUE id TO POPULATE SUBRECORDS *** -->
<!-- *** See line #51 to #55 *** -->

<?php
session_start();
ob_start();
if($_SESSION[userdetails]->role != "Admin") {
die("Access Denied!");
}
require_once("includes/connect.php");
// Check if he has the right info.
$sql = sprintf("SELECT * FROM members ORDER BY username ASC", $_SESSION[userdetails]->id);
$query = mysql_query($sql);
// You are now connected
?>
<head>
<html>

<head>
<title>Split ListBox Text To Text Boxes</title>
<script type="text/javascript"> <!-- archaic format: language="javascript" -->
function SplitText (info) {
if (info == '') { return; }
var tarr = info.split(",");
document.getElementById('tBox1').value = tarr[0];
document.getElementById('tBox2').value = tarr[1];
document.getElementById('tBox3').value = tarr[2];
document.getElementById('tBox4').value = tarr[3];
}
</script>
</head>

<body>
<form name="convert">
<p style="margin: 2px">
<p><select name="Groups" style="width: 176; height: 19; border: 1px solid #C0C0C0 ; font-size: 11px; font-family:Arial" size="1" onChange="SplitText(this.value)">
<option>===Select Group===</option>
<?php
$sql1 = mysql_query("SELECT * FROM qw_groups");
while($r1=mysql_fetch_assoc($sql1)){
$f1 = $r1[id];
$f2 = $r1[GroupName];
echo "<option value='$f1,$f2,,'>$f2</option>";
}
echo "</select>";
?>
<p><select name="GroupItems" style="width: 176; height: 19; border: 1px solid #C0C0C0 ; font-size: 11px; font-family:Arial" size="1" onChange="SplitText(this.value)">
<option>===Select Group Item===</option>
<?php

// **** IS IT POSSIBLE TO PASS THE VALUE "$f1" FROM GROUPS TO GROUPITEMS ****
// **** I WANT TO POPULATE THE SECOND DROPDOWN LIST WITH SUB-RECORDS WITHOUT SUBMIT /POST /REFRESH /OR RELOAD ****
// WHERE id = $f1 ?? maybe some java code id = $val onChange ??

$sql2 = mysql_query("SELECT * FROM qw_groupitems WHERE id = $f1");
while($r2=mysql_fetch_assoc($sql2)){
$f3 = $r2[Subid];
$f4 = $r2[GroupItem];
echo "<option value='$f1,$f2,$f3,$f4'>$f4</option>";
}
echo "</select>";
?>
</p>

<!-- Input selected data from listBox -->
<p style="margin: 2px">
<input type="text" name="textbox1" id="tBox1" value=""><br>
<input type="text" name="textbox2" id="tBox2" value=""><br>
<input type="text" name="textbox3" id="tBox3" value=""><br>
<input type="text" name="textbox4" id="tBox4" value=""><br>
</p>
</form>
</body>
</html>

I really need help with this. I really don't know how to make this work. I need to populate a drop down menu with a value passed through the browser if it's passed.

so the browser URL will look like:
domain.com/?referer=YellowPagesOnline

I need to capture the referer value from the browser store it into a cookie. If the cookie is set and then populate the drop down on the page with the cookie. If it's not set then a list of sources should appear.

So I already have the code to grab the string and store it in a cookie but I'm not sure how to do the initialization of the drop down with the cookie value.


This is what I have...

Code:

<script>
//Get the referer string out of the URL
function getQuerystring(key, default_)
{

  if (default_==null) default_="";
  key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
  var qs = regex.exec(window.location.href);
  if(qs == null)
    return default_;
  else
    return qs[1];
}


//Set the cookie for 30 days
function SetCookie(cookieName,cookieValue,nDays) {
 var today = new Date();
 var expire = new Date();
 if (nDays==null || nDays==0) nDays=1;
/* expire.setTime(today.getTime() + 3600000*24*nDays);*/
 expire.setTime(today.getTime() + (1000 * 60 * 60 * 24 * 30));     
 document.cookie = cookieName+"="+escape(cookieValue)
                 + ";expires="+expire.toGMTString();
}


//Put the cookie on the user's computer
function putcookie()
{
	var val = getQuerystring('referer');
	
	if(val !=""){
		if (document.cookie.length == 0)
		{
			SetCookie('referer', val, 1);
			alert(val);
		}
	}
	alert(document.cookie);
	
}
putcookie();




getCookie(name);

//If there is a cookie then get the cookie
function getCookie(c_name)
{

if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
 
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);

    if (c_end==-1) c_end=document.cookie.length;
	
if(document.SECatJax.referer.length > 0)
{	
  document.SECatJax.referer.value = unescape(document.cookie.substring(c_start,c_end));
 return false;
}
 alert(document.cookie);

    }
  }
  document.SECatJax.referer.value = 'Website'; 
}

The dropdown to appear if there isn't a cookie is
Code:

<select name="source_code" size="1" id="source_code" class="select_2" style="display:none">
<option value="" selected="selected">--</option>
<option value="Direct Mail">Direct Mail</option>
<option value="High School Presentation">High School Presentation</option>
<option value="Search Engine">Internet Search</option>
<option value="Newspaper">Newspaper</option>
<option value="Poster">Poster</option>
<option value="Radio">Radio</option>
<option value="Referral">Referral</option>
<option value="TV">TV</option>
<option value="Yellow Pages">Yellow Pages</option>
</select>

The drop down to appear if there is a cookie is[CODE]<select name="source_code2" size="1" id="source_code2" class="select_2" style="display:none">
<option value="YellowPagesOnline" selected="selected">YellowPagesOnline</option>
</select>[CODE]

Can someone help me with this please? Thanks.