JavaScript - Dynamic Array From Users Input Choice

Hi all,

I am a relatively new to javacript and need some help.

I have several arrays already defined:
array_1
array_2
array_3
etc.

I also have a few divs with ids and classes:
<div id="1" class="sample"></div>
<div id="2" class="sample"></div>
<div id="3" class="sample"></div>
etc.


I am trying to use the class (sample) to run a function:
(1) first I get the ID: current_id = $(this).attr("id");
(2) based on the id I want to display the array: alert('array_'+current_id);

The problem is I get an alert box with the array name ("array_1") and not the CONTENT of the array. How do i solve this?

Thanks!!

Hey all! So there I was newly hired and tasked with pouring through someone else's code to see what could be modified and brought up to date. After successfully finding the errors and correcting them and fulfilling the tasks my new supervisor assigned me, he slaps me on the back and says, "Well done! Now make it dynamic!" By which he meant the chapter buttons I spent hours creating from the existing code.

Here's what he wants: the old code has an array, we'll call it someArray, that is assigned its values by the instructional developer as html pages are added to the course. So for example the code might look like this,
Code:

var someArray = new Array(4);
    
    someArray[0] = "video1/video1.html";
    someArray[1] = "video2/video2.html";
    someArray[2] = "video3/video3.html";

Now, each page has an associated chapter button. So video1/video1.html would have ch1Btn, video2/video2.html would have ch2Btn and so forth. Each button in turn calls a specific function which does only one thing - sets the currentPage variable to page associated with that button/array contents. For example, I have created the following functions to call each page:
Code:

	
        function doCh1(){currentPage = 0; goToPage();}
	function doCh2(){currentPage = 1; goToPage();}
	function doCh3(){currentPage = 2; goToPage();}

I should mention that all this is being done from within an html wrapper that calls each page into an iframe. The currentPage variable is assigned the url of one of the elements from the pageArray.

My supervisor wants to be able to manually add pages to the pageArray and have the javascript code generate the associated buttons and function calls so when the learner clicks on one of the dynamically created buttons, s/he is taken to the correct page.

Currently I'm using static images with the onclick calling the correct function to set my currentPage value and send the learner on his/her merry way.

Is there a way to do all of this dynamically? If so, can you help me get my head around this by providing some examples?

Sorry for the long post.

Thank you,

M

Hello,

I've a checkbox validation script to check for at least one ckeck.
Code:

<script type="text/javascript">

function chkChecks(){
isChecked=false
alert(document.forms["form1"]["checked[]"].length);
for(var i=0;i<document.forms["form1"]["checked[]"].length;i++){
if(document.forms["form1"]["checked[]"][i].checked){
isChecked=true
}
}

if(isChecked){
document.forms["form1"].submit()
}
else{
alert('Please select a checkbox')
}

}

</script>

for the form Code:

<form name="form1" action="test.php">
<input type="checkbox" name="checked[]" value="1">
<input type="checkbox" name="checked[]" value="2">
<input type="checkbox" name="checked[]" value="3">
<input class="button_140" type="button" value="Check" onclick="chkChecks()">
</form>

It works well for more than one checkboxes, but these are generated dynamically by PHP and if there is only one checkbox, document.forms["form1"]["checked[]"].length returns 'undefined'.

Can I modify this to work in all cases?

thanks,
art.

I apologize in advance for my ignorance. I'm relatively new to javascript. I am trying to dynamically create a page based on information in a .txt. So far the code works. But only for a spacific line in the .txt. I would like it to create numbered divs and fill with approprate info from .txt for each line in .txt. Does that make sense?
Any help you can provide would be greatly appriciated. Oh and I'm not worried about cross browser function this is for intra-net and all clients use Mozilla.


P.S.: I will paste full code if necessary and it is explained exactly how. Is it:

[ "my code goes here" ]

or

[code]
my code goes here
[code]

Hi, I am stumped. I have been trying unsuccesfully for three days to figure something out, and it has brought me here. I am a noob javascripter, so please bear with me.

I have created a page with an input button that refers to a function:
Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Thu, 26 May 2011 03:39:57 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Meltmedia Web Intern Test</title>
    
    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    </style>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<LINK REL=StyleSheet HREF="what.css" TYPE="text/css" MEDIA=screen>

<script type="text/javascript">

//function ChangeBackground()
 		 <!--{
//		  	document.getElementById("column2").style.backgroundColor="#ffbdaa";
//			document.getElementById("row1").style.backgroundColor="#ffbdaa";
//			document.getElementById("row3").style.backgroundColor="#ffbdaa";
//			document.getElementById("row4").style.backgroundColor="#ffbdaa";
//			document.getElementById("mainbody").style.backgroundColor="#f7d7cd";
// } -->
 
function ChangeBackground() {
	var colors = document.getElementsByClassName("changeme");	
	//alert(colors.length);
		for (var i = 0; i < colors.length; i++) {
			if (colors[i].className="changeme") {
				colors[i].style.backgroundColor="ffbdaa";
				}
			
	}
}
//if (document.getElementsByClassName('changeme')[5].style.backgroundColor="#e8e8e00") {
//       document.getElementsByClassName('changeme')[5].style.backgroundColor="#ffbdaa";
//  }
//div1 original color is #e8e8e8
//div2 original color is #e2ebe4
//tablerows original color is #ccddd0
 </script>

 
 </head>
 
<body>
<div id="mainbody" class="changeme">
<img id="header" src="osx_header.jpg">


<div id="inset">
<div id="column1" class="column1">

<p class="text0">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Lorem ipsum dolor sit amet, 
   					   consectetur adipiscing elit. 
					   Aenean sed est et mi varius 
					   euismod sed nec neque. Lorem ipsum dolor sit amet, 
					   consectetur adipiscing elit. Maecenas ultricies pulvinar lacinia. 
<a href="http://www.google.com/" rel="nofollow" target="_blank" style="color:blue">This is a link.</a> 
   </p>

<p class="text1" style="font-size:16px;">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Sed a felis et eros gravida dignissim. 
   					 Quisque lobortis magna non purus vulputate 
					 pellentesque. Mauris sit amet felis felis. 
					 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
					 Nullam molestie lacinia arcu vitae pretium.<sup>2.3</sup>
					 </p>

	<div id="unordered_list">
		<ul id="blue_bullets">
			<li>Vestibulum ante erat, laoreet quis pellentesque quis, 
			tincidunt fermentum turpis.
			<li>Maecenas in mollis massa.
					<ul>
						 <li>Ut tempus tincidunt molestie. Phasellus eget nulla 
						 id erat scelerisque porttitor vel pharetra nibh.
						 <li>Class aptent taciti sociosqu ad litora torquent per 
						 conubia nostra, per inceptos himenaeos.
					</ul>
			<li>Aenean ligula massa, tempor sed pulvinar sit amet, imperdiet a nisi.
		</ul>			
	</div><!--end of ordered list-->
	
	<div id="button">

        <!--	<img src="btn-click-here.gif">  -->
		<input type="button" onClick="ChangeBackground()" value=" ">
  
	</div><!--end of button-->
		
	<table id="table1">
		<tr id="firstrow">
			<th id="row1" class="changeme"></th>
			<th id="row2" class="changeme"><strong>header1</strong></th>
			<th id="row3" class="changeme"><strong>header2</strong></th>
			<th id="row4" class="changeme"><strong>header3</strong></th>
			</tr>
		<tr>
			<td>one</td>
			<td>1234</td>
			<td>bears</td>
			<td>abcd</td>
			</tr>
		<tr>
			<td>two</td>
			<td>5678</td>
			<td>beets</td>
			<td>efgh</td>
			</tr>
		<tr>
			<td>three</td>
			<td>9101</td>
			<td>battlestar</td>
			<td>ijkl</td>
			</tr>
		<tr>
			<td>four</td>
			<td>1121</td>
			<td>galactica</td>
			<td>mnop</td>
			</tr>
	</table>
	<!--end of table-->

<ol class="ordered">
	<li>Integer molestie sodales risus eu commodo. <i>Duis eget est  
    dapibus neque congue</i> accumsan id eu nibh. 
	</li>
	<li>Proin malesuada hendrerit lobortis. Integer et erat leo. 
    Praesent nec justo nulla. <i>Sed in dolor id neque faucibus 
    consequat.</i> 
	</li>
	<li>Vestibulum sit amet justo id <strong>risus tempus ornare.</strong> Etiam 
    faucibus urna volutpat lorem dictum imperdiet. 
	</li>
</ol>

</div> <!--end of column1-->

<div id="column2" class="changeme">
<p class="text00"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></p>
<p class="text2">Aenean sed est et mi varius euismod sed nec neque. 
   						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
						ultricies pulvinar lacinia. Sed a felis et eros gravida dignissim. 
						Quisque lobortis magna non purus vulputate pellentesque.</p>
<p class="text2">Mauris sit amet felis felis. Lorem ipsum dolor 
   						sit amet, consectetur adipiscing elit. Nullam molestie lacinia arcu 
						vitae pretium. Vestibulum ante erat, laoreet quis pellentesque quis, 
						tincidunt fermentum turpis. Maecenas in mollis massa. Ut tempus 
						tincidunt molestie.</p>
<p class="text2">Phasellus eget nulla id erat scelerisque porttitor 
   						vel pharetra nibh. Class aptent taciti sociosqu ad litora torquent 
						per conubia nostra, per inceptos himenaeos. Aenean ligula massa, tempor 
						sed pulvinar sit amet, imperdiet a nisi. Nulla ullamcorper posuere dolor, 
						ac rutrum velit sollicitudin ac. Ut felis leo, ultricies a bibendum ac, 
						luctus semper massa.</p>

</div> <!--end of column2-->

</div> <!--end of inset-->

</div>
</body>
</html>

i would like to change certain style elements of the array each time the button is clicked. I have 5 color sets i would like use for the page, so i would like the button to trigger the color change in a loop, ie when the last color group is reached, the next click returns to the original color set and it continues again.

This is a demo page, not for actually publication. I am trying to teach myself javascript and this is an idea that came to me.

The things i want to change are the background color of two div's and the top row of a table. My style sheet is seperate, and I will also do the same for the javascript once I can get it to work properly.

Thank you in advance for any help.

Hi all,
I create textboxes dynamically by the following code

function addElement()
{

var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
divname='strText'+intTextBox;
newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='divid' +intTextBox name='txtbx[]'/>";
intTextBox = intTextBox + 1;
contentID.appendChild(newTBDiv);
}

It works fine,but i want to get the values and validate it so i use the following code..

var idval=new Array();
for(var i=0;i<intTextBox;i++)
{
idval[i]=document.getElementById('divid').value;
alert(idval[i]);
}

but it didn`t work out,Any suggestions really helpful.

Thankyou.

From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X")


Code:

<select name="options-1" id="options-1">
<option value="">Select an option</option>
<option value="1">KA-WH</option>
<option value="2">KA-BK</option>
<option value="3">KA-GN</option>
</select>
 
<select name="options-2" id="options-2">
<option value="">Select an option</option>
<option value="4">BADGE-1</option>
<option value="5">BADGE-2</option>
<option value="6">BADGE-3</option>
</select>

<select name="options-3" id="options-3">
<option value="">Select an option</option>
<option value="7">E-WH</option>
<option value="8">E-GD</option>
<option value="9">E-BK</option>
</select>

for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3.

The above form fields will be created dynamically, may contain more or fewer items.

I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array.

Hi

I have problem to manipulate my form with array.
I want to copy my input from one input to other input
but it didnt work.

i did explore the usage of document.myForm.feed[3].value
but it gave me error.

Pleaseee help?
Thanks


script sample:
<form name=myForm>
<input name=feed[] onBlur=duplicate(this)>
<input name=feed[] onBlur=duplicate(this)>
<input name=feed[] onBlur=duplicate(this)>
<input name=feed[] onBlur=duplicate(this)>
<input name=feed[] onBlur=duplicate(this)>
<input name=feed[] onBlur=duplicate(this)>
<input name=feed[] onBlur=duplicate(this)>
<input name=feed[] onBlur=duplicate(this)>

<input name=copier[] onBlur=sendback(this)>
<input name=copier[] onBlur=sendback(this)>
<input name=copier[] onBlur=sendback(this)>
<input name=copier[] onBlur=sendback(this)>
<input name=copier[] onBlur=sendback(this)>
<input name=copier[] onBlur=sendback(this)>
<input name=copier[] onBlur=sendback(this)>
<input name=copier[] onBlur=sendback(this)>
<input name=copier[] onBlur=sendback(this)>
</form>



<SCRIPT>
function duplicate(info)
{
//this function should copy 'info' to copier input
//with the same element location
//eg: feed[3] will copy to copier[3], feed[5] will copy to copier[5]
//(can be any element insert by user)

// the task would be:
// 1. to get which element number has been inserted
// 2. to get the origin text value
// 3. to write the same element position for copier

}


function sendback(info)
{
//this function should copy 'info' to feed input
//with the same element location
//copier[2] will copy to feed[2], copier[3] will copy to feed[3]
//(can be any element insert by user)
}
</SCRIPT>

Hello everyone

I am trying to receive the output of an array from a text input here is the code that I am attempting to do but it is not displaying the output January

Here is the code example
[CODE]
<html>
<script type ="text/javascript">
<!--
function coms(str){
var myArray = new Array();
myArray[0] = ["January"];

var index = 0;

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

if(myArray[i] == "January"){
index i;
}

if(str.length == myArray[i]){
document.write(str);
}
}
}
</script>
<body>
<form>
Panel:<input type="text" name="panel" onkeyup="coms(this.value)" />
<div id="read"><p>Data is displayed here</p></div>
</form>
</body>
</html>
[CODE]

Any tips to make this possible are welcome

thank you kindly

i have tried searching the forums for help but really am getting no where. i am trying to call an array item from an input box. the input is all numbers. the arrays are v + numbers. i cannot seem to figure out how to get the item from the array.

eg
Code:

var v00501 = ["HOLTSVILLE,I R S SERVICE CENTER","NY","631","-5","Y"]
var v00544 = ["HOLTSVILLE,IRS SERVICE CENTER","NY","631","-5","Y"]
var v00601 = ["ADJUNTAS,JARD DE ADJUNTAS,URB SAN JOAQUIN","PR","787/939","-4","N"]

function pop() {

var zipv = "v" + myform.Zip.value +"[0]";
alert(zipv);
}

or

Code:

function pop() {

alert(pop1());

}

function pop1() {
return "v" + myform.Zip.value +"[0]";
}

so for this if the user typed in 00501 i get v00501[0] no matter what i try. i want HOLTSVILLE,I R S SERVICE CENTER to be returned or whatever item i am calling for. this all has to be on client side as i dont have server access so the zip codes are all set up as arrays in a seperate file. i really dont know alot about javascript but i am learning. any help on how i can accomplish this would be appreciated.

hello,

I have a text input box where users can input values separated by a line break. What I need to do is to take those values and put them all into an array once they hit "submit".

I can do this one line at a time, but I would like to be able to do it all in one hit.

Can it be done in javascript?

thanks in advance...

the title kind of sums it up... if I have an array of equations (I'm guessing they should be strings but they don't have to be) and a user-defined variable can that variable be used for the "x" in the equations? I already did the easy part ...

Code:

<!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 <input onkeyup="solve(this.value)" /><br>
 <input id="box0" /><br>
 <input id="box1" /><br>
 <input id="box2" /><br>
 <script type="text/javascript">

var equations=["(x*9/5)+32","x+273.15","x-50*(8/13)"]
 
function solve(val){
for (var i = 0; i < equations.length; i++) {
document.getElementById("box"+i).value= //ummm...

	}
} 

</script>
 </body>
 </html>

Hi,

I'm struggling with all this DOM stuff so I hope someone can help.

I have a form with multiple input fields and I'm trying to identify the specific input field that is in focus so that I can display a relevant status bar message.

I have a message array with various entries in it and I'm calling a showStatus() function with an onfocus function from the form itself e.g.

The code in the input form =
Code:

<input type="text" name="first" size="31" maxlength="20" class="entry" onfocus="showStatus()"/>

The showStatus() function so far is =
Code:

function showStatus()
{
	var message = ['Please provide your First Name.', 
plus loads of other properley formatted status messages......]

var x=document.getElementById().focus();
window.status = message[x];
}

I'd like to access the array variable of the item that is in focus not only for the message but also for an onblur function to validate input.

Any ideas?
My thanks
R

Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form?

Thanks

I've got a form that performs a calculation upon submit.
I want it to perform a different calc depending on the choice from a drop down box in the form. Are there any examples of this? or can someone explain how i do it?

thanks