JavaScript - How Can I Shorten Form Element References?

Hey all,

I am having issues with below script. Firebug returns:
form[0] is undefined
[Break on this error] $(form[0].elements).each(function() {

I have this under my form:
<script>
var thisForm = $('#validateForm');
thisForm.validation();
</script>



Code:

(function($) {
    /*
    Validation Singleton
    */
    var Validation = function() {
        
        var rules = {
            
            email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,".+@.+\..+");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            },
            url : {

               check : function(value) {

                   if(value)
                       return testPattern(value,"https?://(.+\.)+.{2,4}(/.*)?");
                   return true;
               },
               msg : "Enter a valid URL."
            },
            required : {
                
               check: function(value) {

                   if(value)
                       return true;
                   else
                       return false;
               },
               msg : "This field is required."
            }
        }
        var testPattern = function(value, pattern) {

            var regExp = new RegExp("^"+pattern+"$","");
            return regExp.test(value);
        }
        return {
            
            addRule : function(name, rule) {

                rules[name] = rule;
            },
            getRule : function(name) {

                return rules[name];
            }
        }
    }
    
    /* 
    Form factory 
    */
    var Form = function(form) {
        
        var fields = [];
    
        $(form[0].elements).each(function() {
            var field = $(this);
            if(field.attr('validation') !== undefined) {
                fields.push(new Field(field));
            }
        });
        this.fields = fields;
    }
    Form.prototype = {
        validate : function() {

            for(field in this.fields) {
                
                this.fields[field].validate();
            }
        },
        isValid : function() {
            
            for(field in this.fields) {
                
                if(!this.fields[field].valid) {
            
                    this.fields[field].field.focus();
                    return false;
                }
            }
            return true;
        }
    }
    
    /* 
    Field factory 
    */
    var Field = function(field) {

        this.field = field;
        this.valid = false;
        this.attach("change");
    }
    Field.prototype = {
        
        attach : function(event) {
        
            var obj = this;
            if(event == "change") {
                obj.field.bind("change",function() {
                    return obj.validate();
                });
            }
            if(event == "keyup") {
                obj.field.bind("keyup",function(e) {
                    return obj.validate();
                });
            }
        },
        validate : function() {
            
            var obj = this,
                field = obj.field,
                errorClass = "errorlist",
                errorlist = $(document.createElement("ul")).addClass(errorClass),
                types = field.attr("validation").split(" "),
                container = field.parent(),
                errors = []; 
            
            field.next(".errorlist").remove();
            for (var type in types) {

                var rule = $.Validation.getRule(types[type]);
                if(!rule.check(field.val())) {

                    container.addClass("error");
                    errors.push(rule.msg);
                }
            }
            if(errors.length) {

                obj.field.unbind("keyup")
                obj.attach("keyup");
                field.after(errorlist.empty());
                for(error in errors) {
                
                    errorlist.append("<li>"+ errors[error] +"</li>");        
                }
                obj.valid = false;
            } 
            else {
                errorlist.remove();
                container.removeClass("error");
                obj.valid = true;
            }
        }
    }
    
    /*
    Validation extends jQuery prototype
    */
    $.extend($.fn, {
        
        validation : function() {
            
            var validator = new Form($(this));
            $.data($(this)[0], 'validator', validator);
            
            $(this).bind("submit", function(e) {
                validator.validate();
                if(!validator.isValid()) {
                    e.preventDefault();
                }
            });
        },
        validate : function() {
            
            var validator = $.data($(this)[0], 'validator');
            validator.validate();
            return validator.isValid();
            
        }
    });
    $.Validation = new Validation();
})(jQuery);

So I am using JavaScript to make a table on a page and what I want to do is have the JavaScript create the table, and then allow the user to fill it with data. I have been able to make the JavaScript create the table, my question is how to reference the cells in my script that adds data to the cell. I want the users to be able to click a button an add data into different cells so i figured giving them each an Id and referring to that Id in the button is the best way to do it.

How can I edit my code to give each cell a different Id? Or is there a better way of doing this?
My table code looks like this (i have filled it with random data so it is not just a blank table).

<code>
<script type="text/javaScript">
window.onload = fnInit;

function fnInit()
{
// Declare variables and create the header, footer, and caption.
var oTable = document.createElement("TABLE");
var oTHead = document.createElement("THEAD");
var oTBodyam = document.createElement("TBODY");
var oTBodypm = document.createElement("TBODY");
var oTFoot = document.createElement("TFOOT");
var oCaption = document.createElement("CAPTION");
var oRow, oCell;
var i, j;

// Declare stock data that would normally be read in from a stock Web site.
var heading = new Array();

heading[0] = "";
heading[1] = "Monday";
heading[2] = "Tuesday";
heading[3] = "Wednesday";
heading[4] = "Thursday";
heading[5] = "Friday";
var block = new Array();

block[0] = "8:30";
block[1] = "9:55";
block[2] = "11:20";
block[3] = "12:45";
block[4] = "2:10";
block[5] = "3:35";
block[6] = "5:00";
block[7] = "6:30";
var stock = new Array();

stock[0] = new Array(block[0],"88.625","85.50","85.81","99.54","55.46");
stock[1] = new Array(block[1],"102.75","97.50","100.063","49.54","55.46");
stock[2] = new Array(block[2],"56.125","54.50","55.688","99.54","55.46");
stock[3] = new Array(block[3],"71.75","69.00","69.00","99.54","55.46");
stock[4] = new Array(block[4],"71.75","69.00","69.00","99.54","55.46");
stock[5] = new Array(block[5],"71.75","69.00","69.00","99.54","55.46");
stock[6] = new Array(block[6],"71.75","69.00","69.00","99.54","55.46");
stock[7] = new Array(block[7],"71.75","69.00","69.00","99.54","55.46");

// Insert the created elements into oTable.
oTable.appendChild(oTHead);
oTable.appendChild(oTBodyam);
oTable.appendChild(oTBodypm);
oTable.appendChild(oTFoot);
oTable.appendChild(oCaption);

// Set the table's border width and colors.
oTable.border=1;
oTable.bgColor="lightslategray";

// Insert a row into the header and set its background color.
oRow = document.createElement("TR");
oTHead.appendChild(oRow);
oTHead.setAttribute("bgColor","lightskyblue");

// Create and insert cells into the header row.
for (i=0; i<heading.length; i++)
{
oCell = document.createElement("TH");
oCell.innerHTML = heading[i];
oRow.appendChild(oCell);
}

// Insert rows and cells into bodies.
for (i=0; i<stock.length; i++)
{
var oBody = (i<3) ? oTBodyam : oTBodypm;
oRow = document.createElement("TR");
oBody.appendChild(oRow);
for (j=0; j<stock[i].length; j++)
{
oCell = document.createElement("TD");
oCell.innerHTML = stock[i][j];
oRow.appendChild(oCell);
}
}
</code>

I am trying to have it so that when someone choose a value from the select box, it then displays it in the html. The problem is im not very good with javascript, and my error keeps coming up as undefined where as before it was coming up as "[object HTMLSelectElement]". Can anyone tell me whats up?

PHP Code:
<html>
<head>
<script type="text/javascript">
function moveValue()
{
var no=document.getElementById("no");
var option=no.options[no.selectedIndex].numberr;
document.getElementById('numberr').innerHTML = option;

}
</script>
</head>

<body>
<form>
Select numbers:<br />
<select id="no">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>
<input type="button" onclick="moveValue()" value="-->">
<i id="numberr">Testing</i> 

</form>

</body>
</html> 


and now that i look at it, i suspect that the reason that it is not working is that i should have "ID"'s or value's on each of the options but i do not know for certain

Hey all,

I am confused about the true difference between the two below examples.

Code:

first example:
// Demonstrating a problem with closures and loops
var myArray = [“Apple”, “Car”, “Tree”, “Castle”];
var closureArray = new Array();
// Loop through myArray and create a closure for each that outputs that item
for (var i = 0; i < myArray.length; i++) {
var theItem = myArray[i];
closureArray[i] = function() {
document.write(theItem + “ < br / > ”);
}
}
// Loop through the closures and execute each one.
for (var i = 0; i < closureArray.length; i++) {
closureArray[i]();
}

Here we iterate through the length of myArray, assigning the current index of myArray to theItem variable. We declare closureArray 4 times as an anonymous function. The anonymous function in turn declares the predefined write() function, which is passed parameters. Since write() is in closureArray() a closure is created??? During each iteration, theItem is reassigned its value. The four closures reference this value. Since they reference this same value and since this value is reassigned ultimately to the value of the fourth index position, tHe time we execute closureArray later on, all four closures output the same string. This is because all four closures are within the same scope "the same environment" and therefore are referencing the same local variable, which has changed.

I have a couple of problems with this example:
1) I thought a closure is a function that is returned - the inner function is not returned above.
2) theItem is not even a local variable of the parent function (closureArray) - I thought in order for a closure to work, the inner function only accesses the local variables of the outer function, but in this case the local variable is defined OUTSIDE of the parent function.
3) The guy says the "the four closures are sharing the same environment." The thing is even in the second example, they are sharing the same environment.

Second example:
Code:

// A correct use of closures within loops
var myArray = [“Apple”, “Car”, “Tree”, “Castle”];
var closureArray = new Array();
function writeItem(word) {
return function() {
document.write(word + “ < br / > ”);
}
}
// Loop through myArray and create a closure for each that outputs that item
for (var i = 0; i < myArray.length; i++) {
var theItem = myArray[i];
closureArray[i] = writeItem(theItem);
}
// Loop through the closures and execute each one.
for (var i = 0; i < closureArray.length; i++) {
closureArray[i]();
}

Here we iterate over the length of myArray (4 times), assigning the index of myArray to theItem variable. We also return a function reference to the closureArray during each iteration (closureArray[i]), where i is index number so we assign 4 functon references. So when we iterate through myArray, we immediatelly call the writeItem() fucntion passing an argument of theItem at its current value. This returns a child anonymous function and when that child function is called, it will execute a block that calls the predefined write() method. We assign that returned anonymous function to the variable closureArray. Hence, closureArray holds a reference to that anonymous function. So closureArray during each iteration holds a reference to the anonymous function and we later call closureArray, which in turn calls the anonymous function, therefore calling the predefined write() function to output the local variable of the parent function. This outputs each distinct index of myArray.
QUESTION:
This is because since we created the closure, when we call writeItem, passing theItem argument, since theItem is a local variable of the parent function of the closure, it is never destroyed when we later call closureArray (the reference to the child anonymous function)? Yet weren't we using a closure in the first example as well? So whey wasn't those variables preserved?

I don't think it has anything to do with assigning a returned anonymous function to closureArray. Even though an anonymous function creates a new memory position in the javascript engine, therefore not overwriting the other function references we create during the iteration, it's still referring to a local variable declared outside the reference. So if it's about the closure retaining value of parent's local variable even after exiting the parent function allowing for the current indexes to be preserved, then why did the closure in the first example fail to retain each index?

Thanks for response

Hello All,

I am fairly new to javascript. I need to access a button on a form and perform task using onclick. When I view the source of the page, the id of the button seems to be dynamic with a 'Link' suffix. (ex. xtydLink). How can I access this button if I cannot use getelementbyid because the ID changes?

Thanks in advance

Can someone see what is wrong with this code:

Code:

frm=document.createElement('form')
frm.action="/cgi-sys/formmail.pl"
frm.method="POST"
fld=document.createElement('textarea')
fld.appendChild(document.createTextNode(simpleCart.items))
frm.appendChild(fld)

It is supposed to dynamically create a textarea and fill it up with the return of simpleCart.items()

Hi all,

At work I have written a form builder which is all drag and drop.

The issue I have is with ending the drop, I have no problems in IE. The drag is controlled by the onmousemove and onmouseup events for the document body.

The trouble is, in Firefox, if the cursor is over a form item, then the onmouseup event doesn't fire and therefore the drag doesn't end.

There is no problem with other items, other HTML items, tables, list, divs, then all bubble the event to the body.

Anyone ever come across this, if so how did you get round it.

Do I need to manually make form elements bubble in Firefox? Maybe I should just stick a div opacity 0 over the drag objects and make that call the body's onmouseup event.

Any thoughts much appreciated,

Cheers,
Dale

Hi!

I have this form that depending on the shift you choose certain form elements get grayed out. Here's the part that I don't understand. I validate the form in php and display the errors but the form re-enables everything that was grayed out. Not the behavior I was expecting. How would I go about this?

I attached a copy of the HTML source created from php. I'm grateful for any help! Thanks!

Hi people, I'm a novice in javascript and have no clue how to get get the following logic through in a form. Any help will be greatly appreciated. I have searched the forums and looked at a few similar script but can't make out head and tail of it Sorry if this is a oft repeated question.

Here is the form I need, the post method is email :

Name (txtfield)

DOB (Date)

Address (txtarea)

Programme (Select list) : Options : Programme1, Programme2, Programme3

Date (Select list) : options : 10/10/2009 to 12/09/2009
15/10/2009 to 16/10/2009

Venue : Mainland
Harvey
Waterloo

Time : 9am - 12 noon
1 pm - 3 pm
3 pm - 5 pm

Here is the Logic :

Date : Conditions

If Programme1 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable.

If Programme2 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable.

If Programme3 is selected then date option 15/10/2009 to 16/10/2009 should auto selected and greyed out so that user don't have to select this.

Venue : Conditions

If Programme = Programme1 then all the venues should be selectable.

If Programme = Programme2 and date = 10/10/2009 to 12/09/2009 then all the venues should be selectable.

If Programme = Programme2 and date = 15/10/2009 to 16/10/2009 then only venues Harvey and Waterloo should be selectable.

If Programme = Programme3 and date = 15/10/2009 to 16/10/2009 then only venue Waterloo should be selectable.... in fact venue Waterloo should be auto selected and greyed out so that user cannot change it.

Time :Conditions : Always should be default selection and greyed out

If Programme = Programme1 and venue is any one of Mainland, Harvey, Waterloo then the time should default to 9 am - 12 noon.

If Programme = Programme2, Date = 10/10/2009 to 12/09/2009 and venue is any one of three then, the time should default to 1 pm - 3 pm.

If Programme = Programme2, Date = 15/10/2009 to 16/10/2009 and venue is one of Harvey or Waterloo then the time should default to 1 pm - 3 pm

If Programme = Programme3, Date = 15/10/2009 to 16/10/2009 and venue = Waterloo then the default time should be 3 pm to 5 pm

Sorry for the long post and so many conditions. I'm trying to get a hang of how to go about doing this. This looks a pretty complicated logic but if you can point me in the right direction I'm sure I will get my head around this.

Thanks for having a look and thanks in advance for any help.

Cheers

Hi,

I'm trying to automatically generate a new <option> tag in a html form using the below code, but it's not working. Does anyone have any ideas? The get_lightboxes function is being called via the add_to_lightbox functon.

Javascript:

function get_lightboxes(title, new_lightbox_id){
var new_option = document.createElement('option');
new_option.text = title;
new_option.value = new_lightbox_id;
var select_box = document.getElementByID('lightbox_select');

try {
select_box.add(new_option, null);
}
catch(ex) {
select_box.add(new_option);
}

}

HTML:
<form method="post" action="<?=$_SERVER['PHP_SELF']?>" name="lightbox_form" onsubmit="add_to_lightbox('<?=$_GET['id']?>', '<?=$_GET['media_urn']?>', lightbox_select_<?=$_GET['id']?>.value); return false;">
<input type="hidden" name="submitted" value="1" />
<input type="hidden" name="user_email_<?=$_GET['id']?>" value="<?=$_GET['user_email']?>" />
<input type="hidden" name="record_id_<?=$_GET['id']?>" value="<?=$_GET['id']?>" />
<input type="hidden" name="media_urn_<?=$_GET['id']?>" value="<?=$_GET['media_urn']?>" />
<h2>Add/Delete from existing lightbox:</h2>
<p>
<select name="lightbox_select_<?=$_GET['id']?>" id="lightbox_select">
<? foreach ($get_lightboxes as $lightbox) : ?>
<? $lightbox_id = $lightbox["lightbox_id"]; ?>
<? $title = $lightbox["title"]; ?>
<? if(strlen($title) > 25) $title = substr($title, 0, 25) . "&hellip;"; ?>
<option value="<?=$lightbox_id?>"><?=$title?></option>
<? endforeach; ?>
</select>

<input type="submit" name="submit" value="Add" />
</p>
</form>

Hello

I am fairly new to Javascript. I have a function which takes a string which consists of key value pairs and sets a form control based on key being the form element name and value being the value to set. eg string could be "key1=orange;key2=2;key3=whetever"

Here is the function:

function processresponse(frm, serverResponse) {
var items = serverResponse.split(";");
for(var i = 0; i < items.length; i++)
{
var item = items[i];
var eqchar = item.search("=");
if(eqchar != -1)
{
var key = item.slice(0, eqchar);
var value = item.slice(eqchar+1);
var elemname = key;

if(document.getElementById(elemname) != null) {
var type = frm.elements[elemname].type;
if (type=="checkbox") {
value == "1" ? frm.elements[elemname].checked=true : frm.elements[elemname].checked=false;
}
else if (type=="text"){
//do processing for text (text input)
frm.elements[elemname].value = value;
}
else if(type=="select-one"){
//only one is openformmode - default to [0] - true
if(value == "0" || value.length == 0)
{
frm.elements[elemname].options[0].selected = true;
}
else
{
frm.elements[elemname].options[1].selected = true;
}
}
else {
alert("unknown ctrl type: " + type + " name: " + frm.elements[elemname].name + " val: " + value + " key: " + key);
}
} //if(frm.getElementById(elemname)
}
}
}

The problem line is:
var type = frm.elements[elemname].type;

elemname is case sensitive so if for example the form element is called dog and the string elemname is Dog, then the line fails with Error: 'elements[...].type' is null or not an object

So my check if(document.getElementById(elemname) != null) is insufficient to guard against this.

I realise I could do a try catch but there must be a more legant way than that.

How can I test the formname more reliably?

Any ideas would be very welcome.

Angus

In fact: does input type=image belong to the form's elements collection, in ECMAScript ? It looks like not.

When traversing the form's elements collection with classical javascript (document.forms[formname].elements), an input type="image" is not included.

Is this an inheritance from old browsers interpretors? Does anyone know the reason for this omission?

I have created a form with javascript embedded to dynamically assign value to Code:

document.myForm.myTextBox.value

based on user inputs, and when submitting the form, the targeted php file will process the data and records them in MySQL. The problem is that the value of myTextBox remains 'null' even when the javascript assigns a value to it (and it is visible in the form). Here is the code of the javascript:
Code:

document.register.street.value = http.responseText.split('^')[0];
document.register.city.value = http.responseText.split('^')[1];
document.register.street.disabled = true;
document.register.city.disabled = true;

To prevent user-mistyping, the textbox will be disabled after the value is set.

I tried to search but I found it is very difficult when I don't even know what key word to use to describe this issue. I hope anyone can help me with this here, and thanks for any inputs.

Hi!
I have encountered a problem with IE that I'm simply unable to solve. I have a form where the user can choose different things to input from a drop down list and depending on the choise, different kinds of textboxes of text areas etc. are loaded onto the page with JS. After the user has finished inputing text and submits the form, I read the input with PHP and process it further. Now, this works perfectly in firefox but IE doesn't seem to add the name properties to the elements (both textboxes and text areas) because PHP cannot find them and no info is printed from the input. The creation of the elements (adding them to the page...) works just fine, it's just getting the data from them that's the problem. Since it works in FF I know it's not a PHP problem. I've used the recommended .name to set the property (although I've also tried .setAttribute() etc), yet it still doesn't work. What can I do to solve this?

My relevant JS code:

Code:

function addTextbox(idName, head)
{
var target = document.getElementById('addThings');

var newDiv = document.createElement("div");
newDiv.id = "container"; 
newDiv.name = "container"; 
newDiv.setAttribute("className", "intNew"); //IE
newDiv.setAttribute("class", "intNew"); //FF

var newTextbox = document.createElement("input");
newTextbox.type = "text";
newTextbox.id = idName; //--
newTextbox.name = idName; //Doesn't work in IE?.. 
newTextbox.setAttribute("className", "newWidth"); //IE
newTextbox.setAttribute("class", "newWidth"); //FF

var text = document.createTextNode(head + ":"); 

target.appendChild(newDiv);
newDiv.appendChild(text);
newDiv.innerHTML += "<br />";
newDiv.appendChild(newTextbox);
newDiv.innerHTML += "<p />";

}

(The text area function is the same, more or less)

The PHP code, if anyone's interested:

Code:

if($_POST['createBtn'])
{
$head = $_POST['head']; //1
$intro = $_POST['intro']; //2
$question = $_POST['question']; //3
$answer = $_POST['answer']; //3
$image = $_POST['image']; //?
$author = $_POST['author']; //5
$end = $_POST['end']; //4
//sammanfattning

printHTMLTop(9);

$today = date('Y-m-d');

$text = <<<END
<div class="intContainer">
<div class="intHeadRow"><b>$head &nbsp;</b></div>
<div class="stpdIEContainer">
<div class="intTextContainer">
<p />
$intro
<p />
END;

if($question != "" && answer != "")
{
foreach($question as $k)
{
$text .= $k . "<p />";

foreach($answer as $j)
{
$text .= $j . "<p />";
}

}
}

$text .= <<<END
<p />
$end
<p />
<i>Skrivet av: $author den $today</i>
</div> <!-- intTextContainer -->
<div class="intImgContainer">&nbsp;</div></div> <!-- stpdIEContainer -->
</div> <!-- intContainer -->

END;

//Prints to new file (on server) 
$file = file_put_contents('interviews/interview01.html', $text); //Set name
//Add to DB

//print newly created file
$page = file_get_contents('interviews/interview01.html');

echo $page;

printHTMLBottom();

Greetings!

I'm trying to disable some form elements using the onclick from a radio input element. It ain't working so great!

I googled around and finally scraped together some code that in theory 'I' think should work. I'm no javascript guru! It has to be some tiny tiny thing I'm missing.

Here's my code and mind you this is a project in the making! I still have along way to go!

Thanks for you time and help!

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" xml:lang="en">
<head>
	<title>Empty Page</title>

<script type='text/javascript'>
function setReadOnly(obj)
{
if(obj.value == "1")
{
document.shiftreport.artprogs.disabled = true;
document.shiftreport.artprog_stat.disabled = true;

} else {
document.shiftreport.icprogs.disabled = true;
document.shiftreport.icprog_stat.disabled = true;
}
}
</script>	
	
</head>

<body>

<?php 

include_once('form_input_functions.php');

$artprog_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);
						
$artprog_wfls = array('no_job' => '------- select a job -------',
					  'ARTPROG/WFL/DAILY/BATCH' => 'ARTPROG/WFL/DAILY/BATCH',
					  'ARTPROG/WFL/OPERATIONS/IMAGE' =>	'ARTPROG/WFL/OPERATIONS/IMAGE',
					  'ARTPROG/WFL/WKLY/BATCH' => 'ARTPROG/WFL/WKLY/BATCH',
					  'ARTPROG/WFL/DAILY/CLAIMS' => 'ARTPROG/WFL/DAILY/CLAIMS'
					  );

$bllyprog_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);
					  
$bllyprog_wfls = array('no_job' => '------- select a job -------',
					  'BLLYPROG/WFL/DAILY/SISCHEDPAY' => 'BLLYPROG/WFL/DAILY/SISCHEDPAY',
					  'BLLYPROG/WFL/DAILY/REPORTS' => 'BLLYPROG/WFL/DAILY/REPORTS',
					  'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM' => 'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM',
					  '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
					  '$UTIL/O/AUDIT/CLOSE/BLLY' => '$UTIL/O/AUDIT/CLOSE/BLLY',
					  'DATASIWH/EXTRACTALL/DAILY/AUD/WFL' => 'DATASIWH/EXTRACTALL/DAILY/AUD/WFL',
					  );

$sbwcprog_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);
					  
$sbwcprog_wfls = array('no_job' => '------- select a job -------',
					   'WORKPROG/WFL/DAILY/WAREHOUSE' => 'WORKPROG/WFL/DAILY/WAREHOUSE',
				      '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
				      '$UTIL/O/AUDIT/CLOSE/WORKCOMP' => '$UTIL/O/AUDIT/CLOSE/WORKCOMP'
					  );
					  
$tcsprog_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);
						
$tcsprog_wfls = array ('no_job' => '------- select a job -------',
					   'TCS/WFL/DAILY/BATCH' => 'TCS/WFL/DAILY/BATCH',
					   'BLPROG/WFL/COPY/REMOVE/GLCHECKS' => 'BLPROG/WFL/COPY/REMOVE/GLCHECKS'
					  );
					  
$icprog_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);
					  
$icprog_wfls = array ('no_job' => '------- select a job -------',
					  'BLPROG/WFL/DAILY/INDCONT' => 'BLPROG/WFL/DAILY/INDCONT',
				      'INDCON/WFL/PRINT/IDCARDS' => 'INDCON/WFL/PRINT/IDCARDS',
				      'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT' => 'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT'
					 );

$truckprog_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);
					 
$truckprog_wfls = array('no_job' => '------- select a job -------',
					    'TRUCKPROG/WFL/DAILY/TKINTMARSH' => 'TRUCKPROG/WFL/DAILY/TKINTMARSH',
						'TRUCKPROG/WFL/DAILY/TKINTERNET' => 'TRUCKPROG/WFL/DAILY/TKINTERNET',
						'TRUCKPROG/WFL/DAILY/BATCH' => 'TRUCKPROG/WFL/DAILY/BATCH',
						'TRUCKPROG/WFL/DAILY/TKSCHEDPAY' => 'TRUCKPROG/WFL/DAILY/TKSCHEDPAY',
						'TRUCKPROG/WFL/DAILY/REPORTS' => 'TRUCKPROG/WFL/DAILY/REPORTS',
						'BLPROG/WFL/DAILY/CLAIMS' => 'BLPROG/WFL/DAILY/CLAIMS',
						'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM' => 'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM',
						'TRUCKPROG/WFL/DAILY/BALRPT' => 'TRUCKPROG/WFL/DAILY/BALRPT',
						'PROG-MEDICAL/WFL/DAILY/PMCLMEXT' => 'PROG-MEDICAL/WFL/DAILY/PMCLMEXT',
						'AGPROG/WFL/DAILY/AGNUCOPREM' => 'AGPROG/WFL/DAILY/AGNUCOPREM',
						'BL/WFL/WKLY/FEDEX/0005' => 'BL/WFL/WKLY/FEDEX/0005',
						'TRUCKPROG/WFL/WKLY/DE542' => 'TRUCKPROG/WFL/WKLY/DE542',
						'TRUCKPROG/WFL/WKLY/FDXDISAB' => 'TRUCKPROG/WFL/WKLY/FDXDISAB',
						'TRUCKPROG/WFL/WKLY/FDXDISERR' => 'TRUCKPROG/WFL/WKLY/FDXDISERR',
						'BL/WFL/ONLINE/DUMP/TRUCKING' => 'BL/WFL/ONLINE/DUMP/TRUCKING',
						'DATATKWH/EXTRACTALL/DAILY/WFL' => 'DATATKWH/EXTRACTALL/DAILY/WFL',
						'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP'
						);

$smallprog_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);						
						
$smallprog_wfls = array('no_job' => '------- select a job -------',
					    'SMALLPROG/WFL/DAILY/BATCH' => 'SMALLPROG/WFL/DAILY/BATCH',
					    'SMALLPROG/WFL/DAILY/CERTS' => 'SMALLPROG/WFL/DAILY/CERTS',
					    'SMALLPROG/WFL/OPERATIONS/PRINT' => 'SMALLPROG/WFL/OPERATIONS/PRINT',
					    'SMALLPROG/WFL/WKLY/BATCH' => 'SMALLPROG/WFL/WKLY/BATCH',
					    'SFCLAIMS/WFL/DAILY/DWHCLAIMS' => 'SFCLAIMS/WFL/DAILY/DWHCLAIMS',
						'SFCLAIMS/WFL/DAILY/REPORTS' => 'SFCLAIMS/WFL/DAILY/REPORTS',
						'SFCLAIMS/WFL/WEEKLY/REPORTS' => 'SFCLAIMS/WFL/WEEKLY/REPORTS',
						'BL/WFL/ONLINE/DUMP/SFDB/1WORKER' => 'BL/WFL/ONLINE/DUMP/SFDB/1WORKER',
						'$UTIL/O/AUDIT/CLOSE/SFDB' => '$UTIL/O/AUDIT/CLOSE/SFDB',
						'DATASFWH/EXTRACTALL/DAILY/WFL' => 'DATASFWH/EXTRACTALL/DAILY/WFL',
						'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP'										
						);

$persauto_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);						
						
$persauto_wfls = array('no_job' => '------- select a job -------',
					   'PERSAUTO/WFL/DAILY/BATCH' => 'PERSAUTO/WFL/DAILY/BATCH',	
					   'PERSAUTO/WFL/OPERATIONS/IMAGE' => 'PERSAUTO/WFL/OPERATIONS/IMAGE',	
					   'PERSAUTO/WFL/OPERATIONS/PRINT' => 'PERSAUTO/WFL/OPERATIONS/PRINT',	
					   'PERSAUTO/WFL/WKLY/BATCH' => 'PERSAUTO/WFL/WKLY/BATCH',	
					   'PERSAUTO/WFL/DAILY/CLAIMS' => 'PERSAUTO/WFL/DAILY/CLAIMS',	
					   'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL' => 'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL',	
					   '$UTIL/O/AUDIT/CLOSE/DB1' => '$UTIL/O/AUDIT/CLOSE/DB1',	
					   'DATAWH/EXTRACTALL/DAILY/WFL' => 'DATAWH/EXTRACTALL/DAILY/WFL',	
					   'BL/WFL/OFFLINE/DUMP/WAREHOUSE' => 'BL/WFL/OFFLINE/DUMP/WAREHOUSE'											
					   );

$isoprog_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);						

$isoprog_wfls = array('no_job' => '------- select a job -------',
					  'ISOPROG/WFL/BATCH/ISOSAGDAILY' => 'ISOPROG/WFL/BATCH/ISOSAGDAILY'
					  );
					  
$bkuplive_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);
						
$bkuplive_wfls = array('no_job' => '------- select a job -------',
					  'BL/WFL/ONLINE/DUMP/BLDB' => 'BL/WFL/ONLINE/DUMP/BLDB',
					  '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
					  '$UTIL/O/AUDIT/CLOSE/BLDB' => '$UTIL/O/AUDIT/CLOSE/BLDB',
					  'DATARDWH/EXTRACTALL/DAILY/REIN/WFL' => 'DATARDWH/EXTRACTALL/DAILY/REIN/WFL',
					  '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
					  'BL/WFL/FICHE/DISK' => 'BL/WFL/FICHE/DISK'
					  );
					  
$testsite_status = array('none' => 'None',
						'stopped' => 'Stopped',
						'running' => 'Running',
						'completed' => 'Completed',
						);
						
$testsite_wfls = array('no_job' => '------- select a job -------',
				       'WFL/TESTLYON/DATABASE/ONLINE/DISABLE' => 'WFL/TESTLYON/DATABASE/ONLINE/DISABLE',
				       'UTIL/WFL/REMOVE/TESTLYON/BDFILES' => 'UTIL/WFL/REMOVE/TESTLYON/BDFILES',
				       'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => 'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP'					  
					  );
				
?>
	

<form method="POST" name="shiftreport" action="<?php print $_SERVER['PHP_SELF']; ?>">

<p>1st Shift <?php input_radiocheck('radio','shift','0','1','1'); ?></p>
<p>2st Shift <?php input_radiocheck('radio','shift','0','2','1'); ?></p>
<p>3st Shift <?php input_radiocheck('radio','shift','0','3','1'); ?></p>

<table>
	<thead>
		<tr>
			<th>Application</th>
			<th>Job Stream</th>
			<th>Status</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td>ARTISAN</td>
			<td>
				<?php input_select('artprogs',$artprog_wfls['no_job'], $GLOBALS['artprog_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('artprog_stat', $artprog_status['none'] , $GLOBALS['artprog_status']); ?>
			</td>
		</tr>
		<tr>
			<td>SELF INSURED</td>
			<td>
				<?php input_select('bllyprogs',$bllyprog_wfls['no_job'], $GLOBALS['bllyprog_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('bllyprog_stat', $bllyprog_status['none'] , $GLOBALS['bllyprog_status']); ?>
			</td>
	
		</tr>
		<tr>
			<td>SBWC</td>
			<td>
				<?php input_select('sbwcprogs',$sbwcprog_wfls['no_job'],$GLOBALS['sbwcprog_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('sbwcprog_stat', $sbwcprog_status['none'] , $GLOBALS['sbwcprog_status']); ?>
			</td>
		</tr>
		<tr>
			<td>TCS</td>
			<td>
				<?php input_select('tcsprogs',$tcsprog_wfls['no_job'], $GLOBALS['tcsprog_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('tcsprog_stat', $tcsprog_status['none'] , $GLOBALS['tcsprog_status']); ?>
			</td>			
		</tr>
		<tr>
			<td>IC</td>
			<td>
				<?php input_select('icprogs',$icprog_wfls['no_job'], $GLOBALS['icprog_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('icprog_stat', $icprog_status['none'] , $GLOBALS['icprog_status']); ?>
			</td>			
		</tr>
		<tr>
			<td>TRUCKING</td>
			<td>
				<?php input_select('truckprogs',$truckprog_wfls['no_job'], $GLOBALS['truckprog_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('truckprog_stat', $truckprog_status['none'] , $GLOBALS['truckprog_status']); ?>
			</td>			
		</tr>
		<tr>
			<td>SMALL FLEET</td>
			<td>
				<?php input_select('smallprogs',$smallprog_wfls['no_job'], $GLOBALS['smallprog_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('smallprog_stat', $smallprog_status['none'] , $GLOBALS['smallprog_status']); ?>
			</td>			
		</tr>
		<tr>
			<td>PERSONAL AUTO</td>
			<td>
				<?php input_select('persauto',$persauto_wfls['no_job'], $GLOBALS['persauto_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('persauto_stat', $persauto_status['none'] , $GLOBALS['persauto_status']); ?>
			</td>			
		</tr>
		<tr>
			<td>ISO</td>
			<td>
				<?php input_select('isoprog',$isoprog_wfls['no_job'], $GLOBALS['isoprog_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('isoprog_stat', $isoprog_status['none'] , $GLOBALS['isoprog_status']); ?>
			</td>			
		</tr>
		<tr>
			<td>BACKUPS LIVE</td>
			<td>
				<?php input_select('bkuplive',$bkuplive_wfls['no_job'], $GLOBALS['bkuplive_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('bkuplive_stat', $bkuplive_status['none'] , $GLOBALS['bkuplive_status']); ?>
			</td>			
		</tr>
		<tr>
			<td>TEST SITE INSTRUCTIONS</td>
			<td>
				<?php input_select('testsite',$testsite_wfls['no_job'], $GLOBALS['testsite_wfls'], '390px'); ?>
			</td>
			<td>
				<?php input_select('testsite_stat', $testsite_status['none'] , $GLOBALS['testsite_status']); ?>
			</td>			
		</tr>
	</tbody>

</table>
</form>
</body>
</html>

The included functions file that I didn't include is below:

Code:

<?php 

function input_text($element_name, $value) {
	print '<input type="text" name="' . $element_name . '" value="';
	print htmlentities($values[$element_name]) . '">';
}

function input_submit($element_name,$label) {
	print '<input type="submit" name="' . $element_name .'" value="';
	print htmlentities($label) .'"/>';
}

function input_textarea($element_name,$values) {
	print '<textarea name="' . $element_name . '">';
	print htmlentities($values[$element_name]) . '</textarea>';
}

function input_radiocheck($type,$element_name,$values,$element_value,$clicker = '0') {
	print '<input type="' . $type . '" name="' . $element_name . '" value="' . $element_value . '" ';
	if ($element_value == $values[$element_name]) {
		print ' checked="checked"';
	}
	if ($clicker == '1') 
		print ' onclick="setReadOnly(this)"';
	print '/>';
}

function input_select($element_name, $selected, $options, $drop_width = '100px', $multiple = false) {
	print '<select style="width:' . $drop_width . ';" name="' . $element_name;
	if ($multiple) { print '[]" multiple="multiple'; }
	print '">';
	$selected_options = array();
	if ($multiple) {
		foreach ($selected[$element_name] as $val) {
			$selected_options[$val] = true;
		}
	}  else {
		$selected_options[ $selected[$element_name] ] = true;
	}
	
	foreach ($options as $option => $label) {
		print '<option value="' . htmlentities($option) . '"';
		if (isset($selected_options[$option])) {
			print ' selected="selected"';
		}
		print '>' . htmlentities($label) . '</option>';
	}
	print '</select>';
}
?>