JavaScript - Multiple Required Fields Using This Script

Hi folks.
I am new to javascript so please go easy on me if this is a silly request

Basically I have a table generated by a php script with a dynamic number of rows and columns. Here is a sample of the output from this script:
Code:

<tr>
<td style='width:60px'><a href='index.php?inc_id=30' onclick='return confirmDelete(this)'>Remove</a></td>
<td style='text-align:center'>test</td>
<td ><input type='text' name='0inccol0' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol1' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol2' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol3' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol4' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol5' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol6' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol7' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
</tr>
<tr>
<td style='width:60px'><a href='index.php?inc_id=31' onclick='return confirmDelete(this)'>Remove</a></td>
<td style='text-align:center'>test2</td>
<td ><input type='text' name='1inccol0' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol1' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol2' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol3' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol4' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol5' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol6' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol7' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
</tr>
<tr>
<td style='width:60px'><a href='index.php?inc_id=32' onclick='return confirmDelete(this)'>Remove</a></td>
<td style='text-align:center'>test3</td>
<td ><input type='text' name='2inccol0' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol1' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol2' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol3' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol4' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol5' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol6' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol7' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
</tr>

What I want to do is create a row of 'totals' fields at the bottom of this table that will sum the fields in the column above.
Looking at the naming convention above, the first number is the row, the number at the end is the column so I will want to sum all of the input values with a name ending in 0 in the first 'total' field, all the input values with names ending in 1 in the next and so on. The number of rows and columns is dynamic based on the users selections prior to buiding the table.

The reason I am using input fields is that I would also like an event (onChange/onBlur?) that will update the totals fields if a user manually changes the value in one of the inputs.

Any advice on this will be appreciated!

I have been looking around on the webs but have not found anything. I can find how to add multiple fields, but what if they reside on different forms on the same page?

For example, here is my code with two forms:
Code:

 <FORM name="form1">
<b>Size</b><input type="text" size="12" value="" name="size">*
<b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)">&nbsp;<b>-</b> 
<input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> 
<input type="text" size="15" value="" name="xtra">*
<input type="hidden" size="4" value="304.8" name="b1">
<input type="hidden" value="0" name="ans1" size="10">
<input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" size="7" value="0" name="tw1" readonly="readonly"><b>Total Lbs<b>&nbsp;&nbsp;&nbsp;&nbsp;
</FORM>

<FORM name="form2">
<b>Size</b><input type="text" size="12" value="" name="size">*
<b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)">&nbsp;<b>-</b> 
<input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> 
<input type="text" size="15" value="" name="xtra">*
<input type="hidden" size="4" value="304.8" name="b1">
<input type="hidden" value="0" name="ans1" size="10">
<input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" size="7" value="0" name="tw1"><b>Total Lbs<b>&nbsp;&nbsp;&nbsp;&nbsp;
</FORM> 

In this example, I want to sum the two fields named "tw1" (the last field on each form) into a text box.

Is this possible?

Hi

So, I have a working single autocomplete function, but I want to use the same function on different fields....

this is my code:

Code:

<script type="text/javascript">
	function lookup(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>



	<div>
		<form>
			
           <script type="text/javascript">
			var index = '1';
			</script>

			 
            <div>
				Type your county:
				<br />
				<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
			</div>
            
             <div>
				Type your county:
				<br />
				<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
			</div>
			
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="suggestionList" id="autoSuggestionsList">
					&nbsp;
				</div>
                
                
                
                
			</div>
		</form>
	</div>

I know the id's are the same in this, but I tried changing them and it still seems to make little difference.. I did wonder if I could add something variable to the id's and pass that in the function call, but could not figure it out.... the above gives me autocomplete on two fields, but will only fill one of them...

Any suggestions would be appreciated

I am working with a script from Dynamic Drive (found here) that allows you to select and copy a form element.

I would like to modify the code to allow me to select multiple form elements with one select all button.

this is the code for the head section:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script language="Javascript">
<!--

/*
Highlight and Copy form element script- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/

//specify whether contents should be auto copied to clipboard (memory)
//Applies only to IE 4+
var copytoclip=1

function HighlightAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
if (document.all&&copytoclip==1){
therange=tempval.createTextRange()
therange.execCommand("Copy")
window.status="Contents highlighted and copied to clipboard"
setTimeout("window.status=''",1800)
}
}
//-->
</script>

and this is what I have so far in the body:

Code:

<a class="highlighttext" href="javascript:HighlightAll('form1.select1')">Select All</a><br>
    <div class="form">
    <form name="form1">
    	    <textarea name="select1" rows=1 cols=50 >document name</textarea>  
    <textarea name="select2" rows=1 cols=50 >company</textarea>  
    <textarea name="select3" rows=1 cols=50 >language</textarea>
    	    </form>
    </div>

From the code, I would like to make it so that I can HighlightAll for each of the textareas (there will be lots of them).

I have tried a lot of different options...I am not very experienced with Javascript, but have used it from time to time. A little more experienced with jQuery, but not enough to convert this.

Any help is greatly appreciated.

The simplified code below works, and should give you an idea of what Im trying to achieve. The final version will have dozens of input fields so you can see why the below method stinks

Code:

<html><head><title>Values</title>

<script type="text/javascript">
<!--
function getid() {
var myNum = document.frm1.field1.value;

if(myNum == "A"){
	document.frm1.field2.value = "1"
} else if(myNum == "B"){
	document.frm1.field2.value = "2"
} else {
	document.frm1.field2.value = ""
}

var myNum2 = document.frm1.field3.value;

if(myNum2 == "A"){
	document.frm1.field4.value = "1"
} else if(myNum2 == "B"){
	document.frm1.field4.value = "2"
} else {
	document.frm1.field4.value = ""
}

}
//-->
	
</script>

</head><body>  

<form name="frm1" id="frm1">

	<input type="text" size="40" name="field1" id="field1" onChange="JavaScript:getid();" /><input type="text" size="4" id="field2" name="field2" /> <br>

	<input type="text" size="40" name="field3" id="field3" onChange="JavaScript:getid();" /><input type="text" size="4" id="field4" name="field4" /> <br>
</form>

</body>  
</html>

Each text input will have A or B written in by the user, which should automatically place that letters associated ID in its partner field. If any other letter is entered the ID will automatically be left blank.

With the above code I'd need to repeat it over and over for each of the dozens of input fields. The final version wont be using simply A/B either but around 50 possible inputs each with their own ID which would make around 1000 possible variations. What am I missing here that will simplify the process? Thanks

Hello

I am new to JavaScript , so I am learning as fast as possible, but I need to implement something in java scrip and I am not very sure how to do it

I have a xhtml page (JSF project) I have inputText fields, every time I check a checkbox to display a text area, all the information that is in my inputText fields disappears (I already posted in the JSF forum), Is there any way to use JavaScrip to keep the values in those fields? Basically when I check the checkbox I call the onchange="this.form.submit()" , So I would like to know if using javaScript I can capture the values in those fields, and after I change the value of the checkbox and the information is erased, rewrite the values into those field

Thanks in advance

Hi everyone
I know this has probably been asked a million times before but I have been searching the net for hours and have not found a solution so I am hoping one of you clever people will be able to help me. PLEASE!!

I am using this snow fall script http://www.dynamicdrive.com/dynamicindex3/rain.htm

It works perfectly in IE but not in Firefox or Safari. I'd like it to work in all or most browsers if thats possible.

Unfortunately, I am still learning so don't understand all the technical speak as yet so if someone can help in simple terms I'd be ever so grateful

Thank you so much to anyone who can help me out!

please pardon my ignorance, but I'm clueless as to why this won't work.... the following is in the header of my page.

The first part is the "menu" of the page, the second ( <script type="text/javascript" src="rotate1.js.js"> ) is an external script that rotates an image on the page..... the 2nd works perfectly in a page by itself, but when I insert it in the template with the menu script, images won't rotate.

I know I'm missing something that tells the 2nd script to run, but I just don't know what it is? I'm just frustrated with myself that I can't figure it out and i've read so many forums/tutorials/helps that I've only succeeded in confusing myself further! HA!

i apologize again for my ignorance... last time i did a web site was 8 years ago, but my boss is paying me to get this done and I REALLY need to pay my phone bill this week!!!

Code:

<script language="Javascript">
<!--
<!--
function gotoURL(u)
{
document.location = u;
}

function turnon(i)
{
if (document.getElementById || (document.all && !document.GetElementById))
i.style.backgroundColor = "#baccfc";
i.style.textColor 
}

function turnoff(i)
{
if (document.getElementById || (document.all && !document.GetElementById))
i.style.backgroundColor = "#3462fd";
}
<script type="text/javascript" src="rotate1.js.js">

-->
//-->
</script>

Thanks in advance for ANY advice you may have!!!!

I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution?


Code:

<script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
	if(!document.getElementById) return; //Prevent older browsers from getting any further.
	var field_area = document.getElementById(area);
	var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
	//Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
	//		field given in the argument is 'friend_' the last id will be 'friend_4'.
	var last_item = all_inputs.length - 1;
	var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	
	//If the maximum number of elements have been reached, exit the function.
	//		If the given limit is lower than 0, infinite number of fields can be created.
	if(count > limit && limit > 0) return;
 	
	 //Older Method
		
		field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
	
}
//-->
</script>


<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>

<input type="button" value="Add" onclick="addField('steps_area','',15);"/>

The page loads and existing data is put in their correct fields.

When I click 'add more' to add more fields to the form it does so and I am able to add new data.

If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared.

how can I get it so the data stays, like in phpmyadmin when adding new fields.


JS
Code:

function addmore(addwhat) {
	// count existing boxes to find out next number to use.
	// ?
	if (addwhat == 'addresses') {
	fieldid = 'addressesdiv';
	}
	if (addwhat == 'namesnumbers') {
	fieldid = 'namesdiv';
	}
	var dv = document.getElementById(fieldid).innerHTML;
	var lines = dv.match(/<br>/ig).length;
	
		if (addwhat == 'addresses') {
					document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>';
					}
		if (addwhat == 'namesnumbers') {
					document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>';
					document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>';
					}
	}

PHP
Code:

<?
if ($_POST['Submit'] == 'Submit') {
echo("sent<br>");
for ($c = 1; $c <= (count($_POST)-1)/2; $c++) {
echo("name" . $c . " = " . $_POST['name'.$c] ."&nbsp;&nbsp;&nbsp;mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>");
}
}

$customer_id = "11";

// get existing data.

// if not yet sent get data from databases
$ok = "no";
		if ($_POST['Submit'] != "Submit") {
		echo("<br>not sent<br>");
		$res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'");
		$maincount = mysql_num_rows($res);
		echo("<br>number of clients = ".$maincount."<br>");
			for ($c = 1; $c <= $maincount; $c++) {
			$_POST['name'.$c] = mysql_result($res, $c-1, "client_name");
			$_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile");
			echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>");
			}
		} else {
						// display last posted info
						echo("<br>sent<br>");

						$ok = "yes";
						// check if info was entrted correctly or not.
						
						for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) {
							if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") {
							echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>");
							$ok = "no";
							$maincount ++;
							}
							if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") {
							echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>");
							$ok = "no";
							$maincount ++;
							}
						}

				}

if ($ok == "no") {
					?>
					<form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&amp;phpsession=" . $phpsession); ?>">
					<div style="width: 850px;">
						<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
						<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
					</div>
					<br style="clear: both;">
					  <a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a> 
					  <input type="hidden" name="customer_id" value="<?=$customer_id;?>">
					  <input type="submit" name="Submit" value="Submit">
					</form>
					<?
					}
?>

Hi There! New poster here. I have searched the forums for an answer to my question, but I haven't found anything. Forgive me if the question has an obvious answer or is in general too noobish.

I am using a jQuery javascript app to make a regular table into a table that has a scrollbar on the right side and can be scrolled.

The script I mean is he http://derek.app02.i-sites.com/scrol...arTable-0.1.js

The purpose is that users can scroll the contents of the table and still see the headers, so that they don't have to remember which column is what.

To do this, the scrollbartable app extracts the first header of the table and puts it aside:

Code:

/* Remove the header and put it before the rest of the table as a new table*/
var $firstRow = $t.clone();					
$firstRow.find('tr:not(:first)').remove();
$t.find('tr:first').remove();     
$t.before($firstRow);

However, the table I am using has two tr's in the header:

Code:

<table class="rspace scrollbarTableLarge">
		<thead>
			<tr>
				<th rowspan="2">1</th>
				<th rowspan="2">2</th>
				<th rowspan="2">3</th>
				<th rowspan="2">4</th>
				<th colspan="{$project->getPlannedAnalyses()|@count}">Analyses</th>
				<th rowspan="2">6</th>
                         </tr>
			 <tr>
				{foreach from=$project->getPlannedAnalyses() item=analyse}
					<th>{$analyse->naam}</th>
				{/foreach}
			</tr>
		</thead>
		
		<tbody>
                 .....
                </tbody>

So as you see the fifth column has a name "Analyses", and it is subdivided into an arbitrary amount of other colums (as many as there are analyses).

The Scrollbartable app only puts the first <tr> in the header. All the names of the analyses of teh second <tr> are put in the table itself and scroll away when the table is scrolled.


How can I modify the javascript in a simple way so that it also takes the second <tr> and puts in in a non-scrollable header?

Thanks in advance for your answers!

hi guys

i really dont understand where i am going wrong.I've read countless articles including http://blog.nemikor.com/2009/10/03/u...ons-of-jquery/ but still having trouble with multiple versions of jquery not working. either the jquery slideshow doesnt work or the jquery ie select width fix doesnt work! rrghhh

Code:

<head>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/ie6pngfix/iepngfix_tilebg.js"></script><!-- ie6 png fix -->
<script type="text/javascript" src="/js/ddlevelsmenu.js"></script><!-- drop down menu js -->

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script><!-- slideshow jquery file 1 -->
<script type="text/javascript" src="/js/slides.min.jquery.js"></script><!-- slideshow jquery file 2 -->
<!-- slideshow jquery controls -->
<script type="text/javascript">
jQuery(function () {
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#', '');
}
// Initialize Slides
jQuery('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
slideSpeed: 1200,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function (current) {
// Set the slide number as a hash
// window.location.hash = '#' + current;
}
});
});
</script>
<script type="text/javascript">
var jQuery_1_4_4 = $.noConflict(true);
</script>


<script type="text/javascript" src="/js/prototype.js"></script><!-- lightbox aka image viewer js file 1 -->
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script><!-- lightbox aka image viewer js file 2 -->
<script type="text/javascript" src="/js/lightbox.js"></script><!-- lightbox aka image viewer js file 3 -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(jQuery) {
</script>

<script type="text/javascript" src="/js/test/jquery.1-4-2.min.js"></script>
<script type="text/javascript" src="/js/test/jquery.ie-select-width.js"></script>
<!--[if lte ie 6]>
<script type="text/javascript" src="/js/test/jquery.bgiframe.js"></script>
<![endif]-->   
<script type="text/javascript">
$(function ()
{
    // Set the width via the plugin.
    $('select#fixed-select-no-css').ieSelectWidth
    ({
        width : 200,
        containerClassName : 'select-container',
        overlayClassName : 'select-overlay'
    });
   
    // Set the width via CSS.
    $('select#fixed-select-css').ieSelectWidth
    ({
        containerClassName : 'select-container',
        overlayClassName : 'select-overlay'
    });
   
    // Borders and padding etc for Internet Explorer 6/7.
    $('select#select-styleable').ieSelectWidth
    ({
        containerClassName : 'select-container',
        overlayClassName : 'select-overlay'
    });
});
</script>
<script type="text/javascript">
var jQuery_1_4_2 = $.noConflict(true);
</script>

<!-- Share this button script -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'c0b04a1e-f627-42e8-b040-cbfb63bd9b1c'});</script>
<script type="text/javascript" src="/js/showtab.js"></script>
</head>

I've tried re ordering the scripts around but still no joy? either the slideshow works or the ie select width fix doesnt but not both at the same time?

please advise
Omar.

Im using the following script:
Code:

<script type="text/javascript">
 function unhide(hiddentext) {
 var item = document.getElementById(hiddentext);
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }
 </script>
  <style type="text/css">

.unhidden { display: block; }
.hidden { display: none; }
</style>

to hide and unhide a block of text on my page, using onclick events.

the problem is its not allowing me to use it multiple times in a page.
when i use a second instance of it, both stop working.

the above demonstrated script is working with the following elements:

middle (approx) of page:
Code:

<td class="desc_cell"><strong>Download Station</strong><br /> 
                17&quot; Macbook Pro<br /><a href="javascript:unhide('itemlist');" onclick="changeText(this,'Hide Item List');" id="text1link"]Old Text>Click Here For Full Item List</a><div id="hiddentext" class="hidden">list of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes here</div>
</td>

bottom of page:
[code]<p align="center" style="citylist">Allen Park MI, Anchor Bay Gardens MI, Anchor Bay Harbor MI, Anchor Bay Shores MI, Andersonville MI,<a href="javascript:unhide('hiddentext');" onclick="changeText(this,' View Less...');" id="text1link"]Old Text>View More...</a></p><div id="hiddentext" class="hidden">Armada MI, Auburn Heights MI, Auburn Hills MI, Austin Corneorth Farmington MI, Northville MI, Norton MI, Novi MI, Oak MI, Oak Grove MI, Oak Park MI, Oakley Park MI, Oakwood MI, Orchard Lake MI, Ortonville MI, Oxbow MI, Oxford MI, Perry Lake Heights MI, Pleasant Ridge MI, Plymouth MI, Point Lakeview MI, Pontiac MI, Preston Coom MI, Wolcott Mills MI, Wolverine Lake MI, Wood Creek Farms MI, Woodhaven MI, Wyandotte MI, Yates MI, and many more!</div>

I am a new to js and GM but I am trying to make a script that will click a button on a page where there are multiple instances of the button.

The source I am looking at is below and I have narrowed down what I am looking at to the bold section.

<dl>
<dd class="left"><div id='recommendstatus_article4458331'>
<dl class="recommend">
<dt class='recs'><a href="javascript://" onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;">50</a>&nbsp;</dt>

<dd><a href="javascript:void(0);"
onclick="RecommendItem(1,'article','4458331','1','recommendstatus_article4458331' ); return false;"
onmouseover="return overlib('Give thumbs up', WRAP);"
onmouseout="return nd();">&nbsp;<img class='icon' title='' alt='Thumb up' style='background-position: -304px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd>
<dt class='tippers'><a href="javascript://" style='color: #969600;' onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;"></a></dt>
<dd><a href="javascript:void(0);"
onmouseover = "return overlib( 'GeekGold Tip', WRAP );"
onmouseout = "nd();"
onClick="GeekGoldTip(0,'article','4458331','recommendstatus_article4458331'); return false;">&nbsp;<img class='icon' title='' alt='tip' style='background-position: -368px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd>
<dd>
<a href="javascript:void(0);"
onclick="RecommendItem(0,'article','4458331','','recommendstatus_article4458331', 'article4458331' ); return false;"
onmouseover="return overlib('Hide this post', WRAP);"
onmouseout="return nd();">&nbsp;<img class='icon' title='' alt='Thumb up' style='background-position: -336px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a>
</dd>
<dt class='thumbsdown'>
</dt>
</dl>

How do I create a script to find each instance of the button and click it?

I'm an artist working on a project that involves 9 swfs embedded in a html page and placed in tables. Although each swf has it's own volume control and pause/play buttons on mouseover, I need an outside script
like java, that can be used to stop and start a few swf's simultaneously so that 3 or 4 play while the others are paused. There would be a few different combinations of them playing together that would be opted for by a menu choice. The swf's are in an old version of Macromedia Flash MX 6 using Action Script 2.
I have absolutely no experience writing java scripting. None. I would be glad to pay somebody to write it for me. The page is online. If interested, I can forward the link.
Thanks for your time.