JavaScript - Selecting All The Dynamically Created Radio Button

im trying to create a script for greasemonkey (tried getting help from their discussion forums, but no one ever answers), but its still written in javascript.

so here is what im trying to do. Ive got a dynamically created division that aligns to the right of the browser window. Now im trying to put links inside it as you normally would with like a document.write statement or other methods.
The only problem is, any method i try wont work for me.

heres my code, maybe someone could give me some things i could try.
Code:

function QuickLinks() 
{ 
	var body = document.body;
	var div2 = document.createElement("div");
	div2.setAttribute('class','QL');
	div2.setAttribute('style','background-color: #692510;width: 200px;height: 500px;top: 2cm;position: absolute;right: 5px;z-index: 4;');
	var links = document.createTextNode("where i want my links"); //now with that statement it just writes text, ive tried document.write and many other methods and nothing seems to work.
	div2.appendChild(links);  //this just inserts the links into the div.
	body.appendChild(document.createElement('br'));
	body.appendChild(div2);
}

QuickLinks();

I'm having an issue adding focus() to an input that is dynamically created with jquery. I'm still learning, so I've mixed in traditional js with my jquery code because it's easier for me to understand. Anyhow document.getElementById(name).style.backgroundColor="#72A4D2"; successfully changed the background of the input ID, but document.getElementById(name).focus(); does nothing. I know that this is the correct code because if I hard code an input into the form (which you can see I've commented out below, such as
document.getElementById('password').focus(); it refocuses successfully on that input. Thus I'm stumped yet again.

Anyone know how to deal with this issue?

JS:
Code:

 
$(function() {

	var i = $('input').size() + 1;

	$('a.add').click(function() {
							  
		$('<p>Username ' + i + ': <input type="text" id="user' + i + '" name="user' + i + '" onblur="javascript:checkl(this.name, this.value);"></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
		

		i++;
	});
});

function checkl(name, value){
	var errors=new Array();
	var x; 
  	var msg = "There were some problems...\n";
	
	if (value==="") {
  	errors['blank'] = "Field must not be blank";
	}
  
  	for (x in errors)
 	 {
	  msg += "\n"+errors[x];
  	 }

 	 if (!(x==undefined)){ 
  	alert(msg); 
	document.getElementById(name).style.backgroundColor="#72A4D2"; //works, changed input background successfully
	document.getElementById(name).focus(); // does NOT work, no focus
	// document.getElementById('password').focus(); // successfully refocuses on hard coded 'password' input
	}else{
	document.getElementById(name).style.backgroundColor="";
	}
}

HTML:
Code:

<a href="#" class="add" id="1"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a> 
<form id="target" name="target" action="post.php" method="post" onsubmit="return validate(this);">
<div id="inputs">
<!-- dynamically created inputs here -->
</div>

<!-- Password: <input type="password" id="password" name="password" size="10"> -->
<input type="submit" value="Send">

</form>

Hello,

I'm trying to write a script for a website that reads from a database and makes a separate table for each entry in the database. Since the number of entries can change, I want to dynamically create a div for each one, which I can later hide or display based on user selection. However, when I try to access the dynamically created elements by their ID, they return null.

Is what I'm trying to do here actually possible?

Code:

	for(var i = 0; i < tables.length; i ++)
	{
		var newDiv = document.createElement("div");
		newDiv.setAttribute("id", tables[i].name);
		newDiv.setAttribute("name", tables[i].name);
		newDiv.setAttribute("class", "hidden");
		newDiv.innerHTML += tables[i].name;
		newDiv.innerHTML += "<table id = 'table"+tables[i].name+"' border = '1'>";
		newDiv.innerHTML += "<tr>";
		
		for(var rows = 0; rows < table.arrayOfFields.length; rows++)
		{
			newDiv.innerHTML+="<th>"+table.arrayOfFields[rows].title+"</th>";
			numOfEntries = table.arrayOfFields[rows].arrayOfEntries.length;
		}
		
		newDiv.innerHTML+="<tr>";

		for(var cols = 0; cols < numOfEntries; cols++)
		{
			
			for(var rows = 0; rows < table.arrayOfFields.length; rows++)
			{
				newDiv.innerHTML+="<td>"+table.arrayOfFields[rows].arrayOfEntries[cols].data+"</td>";
			}
			
			newDiv.innerHTML+="<tr>";
		
		}
		
		newDiv.innerHTML+="</table>";
		document.body.appendChild(newDiv);

	}

Hi Experts,

i'am able create dynamically 2 text boxes ( start date & End Date) . Also i am able to create dynamically (img) calendar gif pictures beside each textbox.
What i am stuck on is how to popup a calendar while clicking on the img and assign the date to a dynamic texboxes...

Any help is much appreciated..

thank you


here is the part of my code :

// Create Start Date Text box
var newStartDate = document.createElement('input');
newStartDate.setAttribute("type","date");
newStartDate.size=8;


// Create calendar 1 img
var newCalImg1 = document.createElement('img');
newCalImg1.src = "../media/forms/cal.gif";



// Create End Date Text box
var newEndDate = document.createElement('input');
newEndDate.size=8;

// Create calendar2 img
var newCalImg2 = document.createElement('img');
newCalImg2.src = "../media/forms/cal.gif";

Hi Peers,

i have a button that helps me creating more than one dynamic text box and dropdownlist...
how it possible to capture the values in those dynamic comtrols ?



i am trying the following but did not work ..when the code is excuted it gives me [object]

// Create Text box 1
var newStartDate = document.createElement('input');
newStartDate.setAttribute("type","date");
newStartDate.size=8;

//capture the value in a temp variable val1
var val1 = document.getElementsByName(newStartDate);
alert(val1);


the alert gives [object]

thanks

Hi,

This is my first time here so I hope I'm not posting to the wrong forum. If this has been answered before, please direct me to the corrent post.

I've created several dynamic checkboxes with with following code:

<code>
var pnl = document.getElementById("pnlSalesPeople");

for (i = 0; i < sales.length; i++)
{
var ck = document.createElement("input");

ck.type = "checkbox";
ck.id = "ck" + i;
//ck.checked = true;

var label = document.createElement('label');
label.htmlFor = ck.id;
label.id = "label" + i;
label.appendChild(document.createTextNode(sales[i]));

pnl.appendChild(ck);
pnl.appendChild(label);
pnl.appendChild(document.createElement('<br />'));
}
</code>

All the checkboxes get put into the panel, one per line, as expected. However, clicking on any of them does not change their checked state--if I uncomment the line setting the state above, all the checkboxes are checked, but they don't become unchecked when clicking on them.

I'm thinking I'm missing something that will make these checkboxes behave like they should or my approach to dynamic creation is flawed. In any event, my knowledge of Javascript is certainly not at expert level so I'm hoping there might a simple solution to my dilemma. Any help on this is genuinely appreciated. TIA

Hello, I am trying to save a dynamically created anchor's id onclick, but I am having a lot of trouble.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
</style>
</head>

<body onload="initAll();">
<div id="test"></div>

<script type="text/javascript">
var xhr = false;			//global xhr variable
var allRequestIds = new Array();
var allRequestDates = new Array();
var allRequestNames = new Array();
var allRequestBriefs = new Array();
var allListLinks = new Array();
var allListItems = new Array();
var linkId;       //global variable for clicked link's id; set to be the same as xml data's id; used to pull more data in next page


function initAll(){
	if (window.XMLHttpRequest){		//initialize xmlhttprequest into xhr variable
	xhr = new XMLHttpRequest();
	}
	else{}//ie stuff goes here
	xhr.open("GET","xml/request.xml",true);		//open connection
	xhr.onreadystatechange=createLinks;				//onreadystatechange call createLinks()
	xhr.send(null);	
}

function createLinks(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			if(xhr.responseXML){
				var allRequests=xhr.responseXML.getElementsByTagName("request");		//save all requests into array
				var newList=document.createElement("ol");                               //create a new ordered list
				for(i=0;i<allRequests.length;i++){                        //arrays of each tag, and an array of links
					allRequestIds[i]=allRequests[i].getElementsByTagName("requestId")[0].firstChild.nodeValue;
					allRequestDates[i]=allRequests[i].getElementsByTagName("date")[0].firstChild.nodeValue;
					allRequestNames[i]=allRequests[i].getElementsByTagName("name")[0].firstChild.nodeValue;
					allRequestBriefs[i]=allRequests[i].getElementsByTagName("brief")[0].firstChild.nodeValue;
					allListLinks[i]=document.createElement("a");            //create an array of links
					allListLinks[i].appendChild(document.createTextNode(""+allRequestDates[i]+" "+allRequestNames[i]+" "+allRequestBriefs[i]+""));    //i don't know how to add a new line within createtextnode!!! wtf?! i wanted to add a <br />
					allListLinks[i].setAttribute("href","somepage.html");
					allListLinks[i].setAttribute("class","dynamicLink");		
					allListLinks[i].setAttribute("onclick","pullDetailed();");
					allListItems[i]=document.createElement("li");             //create an array of list items
					allListItems[i].appendChild(allListLinks[i]);  //append each anchor into each list item
					newList.appendChild(allListItems[i]);          //append all list items into ordered list
				}
				document.getElementById("test").appendChild(newList);      //append list into test paragraph
				
			}
		}
	}
}

function pullDetailed(){
	alert("function pullDetailed called!");	//this is just testing to see if this function has been called on anchor click
	linkId=this.innerHTML.;	//this doesn't work
	alert(linkId);
}
</script>
</body>
</html>

does anybody have an ideas? thank you.

Hi all,

I have a set or icons that which over time I replace with a different icon and and add a onclick event to them. This is my code

Code:

function updateStatusIcons(retText) {
	updatingStatuses = true;
	var updates = retText.split("|");

	for (z=0; z<updates.length; z++) {
		var sysId = trim(updates[z].split(":")[0]);
		var projectId = trim(updates[z].split(":")[1]);

		if (projectId != "") {
			var statusImg = getSysidsImg(sysId);
			statusImg.src = "images/tick.gif";
			statusImg.className = "hand";
			statusImg.title = "Project "+ projectId +" created, Click here to find in project search";
			statusImg.onclick = function () { document.location = "projectSearch-FTTC.jsp?initAction=loadproject&projectId="+ projectId; };

			// Remove sysid from csv
			removeSysidfFromCSL(sysId);
		}
	}


	if (pollingOn) {
		pollingupdate = setTimeout("checkForProjectComplete()", 5000);
	}
	updatingStatuses = false;

	if (runErrorFunction) {
		markErrors();
	}
}

Everything works fine except for the onclick event. In the hover message of the icon, the correct project ID is displayed in the message, hoever in the function, the onclick funtion always loads the page with the last set project id. How can I pass the project id into the onclick function and make it stay fixed and not be the value of that it was last set to?

TIA,
Dale

I have 4 rows in a table.

Each row consist of 4 radio buttons.

Each radio button per row has different values in it but has the same name (group)
ex:
<input type="radio" name="a" value="1">
<input type="radio" name="a" value="2">
<input type="radio" name="a" value="3">
<input type="radio" name="a" value="4">

<input type="radio" name="b" value="1">
<input type="radio" name="b" value="2">
<input type="radio" name="b" value="3">
<input type="radio" name="b" value="4">

and so on..

If I click radio button A with value 2, I want to output the total at the bottom as "2"..

Also, if I click radio button B with value 3, I want to output the total of A and B as 5

and so on..

How can I automatically calculate the answer based on which radio button was click?

update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery

Hi,
I am using a javascript datepicker which works fine with simple textboxes:
For example:
I have a textBox startDate1 in the table below:
<form method="post" name="upload" action="">
<table id="tableId">
<tr>
<td>
<input type="text" name="startDate1" value="" readonly="true" size="10"/>
<script language="JavaScript">
new tcal ({'formname': 'upload','controlname': 'startDate1'});
</script>
<td>
</tr>
<table>
</form>

--Now I want to add rows dynamically to this table for which I have
<a href="javascript:addRowToTable();" >Add Row</a>

and the corresponding javascript function:
<script type = "text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tableId');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

var box = row.insertCell(0);
var element = document.createElement('input');
element.setAttribute('type', 'text');
element.setAttribute('name', 'startDate' + iteration);
box.appendChild(element);
}
</script>
--This code creates the text boxes properly, but I am not being able to add the datepicker to it.
Please suggest me a way to add the datepicker to the textboxes in the dynamically generated rows.

Thank You
Regards
Rusho Shaw

I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked.

I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight...

The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway.

I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below.

Thanks.

Code:

/* designImages[x][0] = the image source on the page;
 * designImages[x][1] = the destination url on clicking the image;
*/

		var designImages = new Array();
		designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
		designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
		designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
		designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
		designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
		designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );

		designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
		designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
		designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
		designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
		designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
		designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );

		designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
		designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
		designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
		designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
		designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
		designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );

		designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
		designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
		designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
		designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
		designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
		designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );

		designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
		designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
		designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
		designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
		designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
		designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );

		designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
		designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
		designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
		designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
		designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
		designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );

		designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
		
window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (x in designImages)
			{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
			};
	}

function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

Hi all, I have a problem in javascript , ajax and jsp.
Please see this url http://xil.co.in/print_screen_2.JPG.

I am working on this form. There are sum buttons (like submit , add ,edit at bottom of this page , but not visible in printscreen).

On click of a radio button on left side , form fields on right side and small table on right bottom is gettig populated. The table on right bottom , is actually the eligibility criteria associated with the record whose radio was clicked on left . On clicking radio of this record(right side) , I want to populate its values in the above text boxes present right in front of text "Eligibility".

During the whole click process (clicking the left and right radio button ) page should not get refreshed.
I am able to show records on left side by iterating over a resultset (in jsp) and able to populate field on right side also, but have no idea how to populate table on right bottom dynamically such that I can handle onclick event on its radio button.

Pls tell me how to achieve this. Thanks in advance for any help.

hi again

hi i want to create a form

Form have 2 submit buttons

also have one drop down list

when selecting dropdown list item disable the one submit button

plzzzzzz help m for do this

with sample code needed.

I don't exactly know how to word my issue.

Basically, I need it so that if a user selects 'option1' in the group 'group1' when they go to 'group2' is only gives them a certain selection to choose from. If they choose 'option2' in 'group1' they will get a different set to choose from.

My main dilemma is it must do this without them having to submit.

All:

I need some help with a radio button code. It seems simple but I am really new at JavaScript so I need help. I have created a JavaScript code that has three radio buttons (High, Medium, and Low). When you click on high two text boxes appear so that an email address can be added.

What I need help with is making the text boxes disappear if someone accidentally click high and then went back to low or medium. Currently the High button stays clicked and the text boxes still show. Any help would be great.

Thanks,

Stephen



Code:

 <script type="text/javascript"> 
function showHide(el){ 
obj = document.getElementById(el).style; 
   (obj.display == 'none')? obj.display = 'block' : obj.display = 'none'; 
} 
</script> 
<form id="form1" name="form1" method="post" action=""> 
 <label> 
  <input type="Checkbox" name="High" value="High" onclick="showHide('group1')" /> High
  
 </label>

  

    <label> 
  <input type="Checkbox" name="Medium" value="Button" /> Mediun
  </label> 

  <label> 
  <input type="Checkbox" name="Medium" value="Button" /> Low
  </label> 
<p id="group1" style="display: none;"> 
    <label> 
    <b>friend1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</b><input type="Text" name="textGroup1" value="@gmail.com" /> <br/>
</label> 
    <br /> 
    <label> 
<b>friend2&nbsp;&nbsp;&nbsp</b><input type="text" name="textGroup1" value="@gmail.com" /> 
</label> 
    
  </p> 
  
</form>