JavaScript - Javascript Dynamically Generated Form

hi i am totally frustrated !!
i have been using this on my webpage.
http://www.barelyfitz.com/projects/tabber/

if u see under the advanced section there is a code for changing tabs dynamically.

Code:

document.getElementById('mytab1').tabber.tabShow(0);

this doesn't work.
basically i have a webpage internet.htm. which has a menubar with loads of menu items.
if i click one of the submenu items this code should change the dynamic tabs in admin.htm. the code i have defined for the submenu click is:
Code:

<li><a href="admin.htm" onClick="document.getElementById('Admin').tabber.tabShow(0)" >Forms</a></li>

the full code is:


Code:

<ul id="QualityMenuBar" class="MenuBarHorizontal">
                  <li><a class="MenuBarItemSubmenu" href="#"><strong>Admin</strong></a>
                    <ul>

                    
                      <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(0)" >Forms</a></li>
                      <li><a href="AdminDocuments.htm"  >Guidance</a></li>
                      <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(2)" >Organisation Chart</a></li>
                      <li><a href="AdminDocuments.htm">Plans</a></li>
                      <li><a href="AdminDocuments.htm">Procedures</a></li>
                    </ul>
                  </li>

this is what the admindocuments.htm contains, based on the website link i have borrowed the code from.

Code:

<div class="tabber" id="admin">

     <div class="tabbertab">
	  <h2>Forms</h2>
   
<script type="text/javascript" src="adminForms.js"></script>

     </div>


      <div class="tabbertab">
	  <h2>Guidance</h2>

       
	<script type="text/javascript" src="adminGuidance.js"></script>
     </div>


     <div class="tabbertab">
	  <h2>Org. Chart</h2>
	<script type="text/javascript" src="adminOrg.js"></script>
     </div>
     
     
       <div class="tabbertab">
	  <h2>Plans</h2>
	<script type="text/javascript" src="adminPlans.js"></script>
     </div>
     
     
       <div class="tabbertab">
	  <h2>Procedures</h2>
	 <script type="text/javascript" src="adminProc.js"></script>
     </div>

</div>

whenever i click the submenu they all point to the first tab only. it doesn't change inspite of the code.
what am i doing wrong here?

please advice.
Many thanks.

Hi guys, I created a form that contains about 10 form fields and would like to add the option to dynamically add more sets of those 10 fields if a user clicks a word or a button but I need help. I'm a beginner when it comes to JavaScript and would appreciate any help. This is what I need to generate dynamically. Can someone give me an idea of how to get started please?

Code:

<div id="dynamicInput">
<ul>
<li>1</li>
<li><input name='textfield1' type='text' size='10' /></li>
<li><select name='commodity' width='100' style='width: 100px'>
<option>Option 1</option>
</select></li>
<li><input name='textfield2' type='text' size='5' /></li>
<li><input name='textfield3' type='text' size='10' /></li>
<li><input name='textfield4' type='text' size='10' /></li>
<li><input name='textfield5' type='text' size='10' /></li>
<li><input name='textfield6' type='text' size='5' /></li>
<li><input name='textfield7' type='text' size='5' /></li>
<li><input name='textfield8' type='text' size='5' /></li>
</ul>
</div>

I'm attempting to run a small piece of code that will execute one of two source js files on my server. I have no problem creating the proper DOM script object with the proper type and conditional src value. However, when i add it to the document it does not seem to execute. I've tried adding it in two places, both using .appendChild();

myLocation.parentNode.appendChild(newScript);

and

document.getElementsByTagName("head")[0].appendChild(newScript);

(myLocation is a calculated element representing the current script tag)
In both these cases, the script tag is added to the document where I intended, but it does not appear to execute. The src has some doc writes in it and the tags the new script should generate right after itself are not there, as they are when I hard code the new sourced script tag into the document.

All in all, my confusion comes from the fact that when I write a <script ... src="mysrc.js"></script> into my document, it behaves differently than when I have a script write an identical tag into the document in the same location.

Also, fyi, I'm currently using Chrome (though I will require a multi-platform solution). Thanks for your time.

I currently have a page which, when the user clicks a button creates a new row displaying a form. I also have other forms on this page however so I was wondering if anyone knew how to close a form using javascript? Thanks for any help. My code to create the table row and form are below...

Code:

myform = document.createElement("form");
	myform.method = "post";
	myform.action = "editdetails.php";
	myform.id = "editemail";
	myform.name = "editemail";
	
	var a=document.getElementById('editdetailstable').insertRow(2);
	var b=document.getElementById('editdetailstable').insertRow(3);
	
	var x=a.insertCell(0);
        x.innerHTML="New Email:  ";
	x.align = "right";

	var y=a.insertCell(1);
        y.innerHTML="<input type='text' name='email' id='email' />";
	
        var z=b.insertCell(0);
	z.innerHTML="<input type='button' value='Change' />"
	z.colSpan = "2";
	z.align = "center";

Hi everyone,

I am pretty new to JS and I am looking for help writing a function that will dynamically calculate filed values.

I have a PHP-generated form which may have a varying number of fields. I need to:
1. calculate the line total for each row -- unitprice * units = linetotal
2. calculate total of all linetotals.

I have named my fields as follows:

unitprice[1], unitprice[2]... , units[1], units[2], ...

I have the following calculate function:

Code:

function calculateOld() {
	// get both values
	unitprice = document.forms["invoice"].unitprice.value;
	units = document.forms["invoice"].units.value;
	// do some calculation
	lineTotal = formatNumber((unitprice * units), 2);
	// set the value in the right field
	document.forms["invoice"].linetotal.value = lineTotal;
	
	unitprice2 = document.forms["invoice"].unitprice2.value;
	units2 = document.forms["invoice"].units2.value;

	if(unitprice2 != '') {
		// do some calculation
		lineTotal2 = formatNumber((unitprice2 * units2), 2);
		// set the value in the right field
		document.forms["invoice"].linetotal2.value = lineTotal2;
		document.forms["invoice"].totalprice.value = formatNumber((parseFloat(lineTotal) + parseFloat(lineTotal2)),2);
	}
	else {
		document.forms["invoice"].linetotal2.value = '';
		document.forms["invoice"].totalprice.value = formatNumber(lineTotal,2);
	}
}

This does calculate what I need but only if I have up to two rows. I need to make the function dynamically count how many rows there are, and calculate the linetotal for each row. And here's where my limited JS knowledge brings me to a halt.

I have been thinking about what this new and dynamic function should look like, but that's the best I could produce...

Code:

function calculate() {
	
	var unitprice[i]	= document.forms["invoice"].unitprice[i].value;
	var units[i]		= document.forms["invoice"].units[i].value;
	var linetotal[i]	= formatNumber((unitprice[i] * units[i]), 2);
	
	return linetotal;
}

Your help will be appreciated. Please explain how things are done, don't just give me the code. Thanks in advance!

Hello my first post.
I have a function that insert commas via onclick or onblur.

Code:

function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

I also am using code from this link, where I can specify what parameters to allow the user to enter only positive/negative, decimals values and restricting characters that are not allowed.
http://www.mredkj.com/tutorials/validate2.html

I am having a hard time to incorporate the addCommas function into the link above.

Does anyone have an example that I can look at where I can have commas added to a value dynamically while typing?
e.g. if I type 1000 after that last 0 keystroke, it turns the value into 1,000. If I add 3 more zeros it turns it into 1,000,000. In the same vain if I subtract a 0 from the 1,000,000 the value is 100,000 instead.

I appreciate any assistance 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 Everyone

I'll explain the situation first:

I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected.

More Detail:

LEFT SIDE OF SCREEN:

[DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected.

[ADD] <- add button that puts the values from the dropdown list to an array.

RIGHT SIDE OF SCREEN:

My Courses:
* TEST1001
* TEST1002

This is being updated dynamically so that whenever the add button is hit, this lists grows.

[SEND] <- Send button

Thank you,

I have the need to include an Ad Tag from a third party source that is generated via javascript which document.writes the code to display the ad. I have no control over this. I have it working on my end, BUT for the life of me I cannot get this to center in my div. It's like it busts out and aligns left after my div. I can't fathom what is going on. "IF" I include this ad tag directly in the page inside the div, it centers. But I need to dynamically pass it some data before it requests the ad, so I Have to dynamically create it, but this is the issue. It displays, just aligned left outside the target div.

So, I am given a js tag with a src and that src generates a document.write that writes out an iframe.

Here is my code below. I take the js src and replace some value in it since it is a string.
Then I create a script element and then insert it into my div element on my page.

var js_src = ("contents_of_the_src").gsub(/tie=/,'tie=' + random10_digit)
var js_script = new Element('script',{'src': js_src});
Event.observe($('myDiv'), 'load', $('myDiv').insert({top : js_script}));

so the view in question is something like this:

<div id="myDiv">
<script language="text/javascript">
var js_src = ("contents_of_the_src").gsub(/tie=/,'tie=' + random10_digit)
var js_script = new Element('script',{'src': js_src});
Event.observe($('myDiv'), 'load', $('myDiv').insert({top : js_script}));
</script>
</div>

I've tried moving the js out of the div, afterwards, and try to insert then. I tried to create a new div, center that, and write the ad tag to it. All left alighned and outside of the div.

Hi Friends,
I need to select browser option dynamically using javascript for handling cookies , i.e., in need select checkbox "override automatic cookie handling" checkbox dynamically. Kindly help me friends how to select this checkbox dynamically.

Tools - -> Internet Options --> Privacy (Tab) --> Advance (Button) --> Override automatic cookie handling .

Thanks in Advance,
Siva.

I'd like to create a basic form where 3 text input fields are named with the following names referrerId, referrerId2 & referrerId3.

My goal is once the text fields within the form are populated with the users data, then once the user clicks submit, a new browser window opens up (in parent window preferably), navigating to the following url exactly as shown. Highlighted in red is the dynamic information I'd like appended.

Vacation Packages &referrerId=FIRSTNAME&referrerId2=LASTNAME&referrerId3=AGENTNUMBER

Any help would be greatly appreciated. Thanks!

I have a form with 3 fields that will allow a user to search a database of clients by either name, email, or client id number. However, I would like the user to only be able to put information in one field. It can be done be either deleting the other two fields when the user inputs information into a different field, or by disabling the other two fields when the user enters information in one (and also frees up all fields if the user ends up deleting what they entered). I've searched and found several helps that were close to what I need but not exactly. I was wondering if anyone would be able to help.

Below is a start of what I had. Basically, it will disable the fields when I mouse out of them but won't re-enable them when I mouse back in. As you can see, I tried various combinations of events. (My code below also doesnt null out the other fields when the user opts to use a different field than the one they first began to enter info in). Any help is much appreciated and if this needs more explanation I will try to clarify better.

Thanks

Code:

<html>	
	<head>
		<script type="text/javascript">
			function makeDisable($ID){
				var x=document.getElementById($ID)
				x.disabled=true
			}
			function makeEnable(){
				var x=document.getElementById($ID)
				x.disabled=false
			}
		</script>
	</head>
	<body>
		<form name='selectclient' action='client_edit.php' method='get'>
		<table>
		<tr>
			<td align='right'>Client ID:</td>
			<td><input id='id' type='text' size='20' name='client_id' onmouseout="makeDisable('id')" onmouseover="makeEnable('id')" value=''  /></td>
		</tr>		
		<tr>
			<td align='right'>Client Email:</td>
			<td><input id='email' type='text' size='20' name='client_email' onblur="makeDisable('email')" onfocus="makeEnable('email')" value=''  /></td>
		</tr>		
		<tr>
			<td align='right'>Client Name:</td>
			<td>
			<select id='name' name='client_name' onblur="makeDisable('name')" onmouseover="makeEnable('id')">
				<option value=''>-- Select --</option>
				<option value='1' >Ted</option>
				<option value='2' >David</option>
				<option value='3' >Zack</option>
			</select>
			</td>
		</tr>
		<tr>
		<td align='left'><input value='Edit' type='submit' name='submit' /></td>
		</tr>
		</table>
		</form>

	</body>
</html>

hi this is santosh first off all thanks in advance to all who r reading my question
im in prblm in my project in 1 file i have to first display textbox in html statically which will hav + & - button preceding it , & on click of + button one more textbox should appear dynamically & first textbox + button should disapper & it should hav only - button & the textbox which was dynamically generated now on click of first textbox + button should hav + & - button & it should go on. & on click of - button textbox which is in front of it should get deleted.


here i tried alot but my code is showing + & - button to every textbox that is dynamically generated which is not the requirement plz help me im in great need.

earlier also i hav submitted my queries & got a fully satisfied result bcoz of that now im having great hopes from u & this site
plz reply as early as possible

waiting for ur reply

again thanks in advance

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 have search for about a week and still no luck.
I need to dynamically display mutliple images using javascript, no hardcoding. The images have different categories. For ex. bellTower01.jpg, bellTower02.jpg...and fountain01.jpg, fountain02.jpg....

-Use JavaScript to display several images and scroll through them
To display multiple thumbnails, arrange them into a small quantity (no more than 8 per page)
Provide pagination

I really really really need help. I have never done javascript before, so I'm still learning. I seriously checked out many threads and links but nothing works or is what I want. I hope someone can help me out and hopefully also allow me to become better at coding this kind of stuff.

I am not allowed to code in php for this project. I can only use javascript to display the images. Also, I don't really need anything fancy, like slideshows or rotations, I just the image to appear when I select that specific category. I want to get the images from my folder/directory.

Right now, I have it working as it just being hardcoded.
Below is my code for my galleries page:

<?php

//creates a session..initializes session data
session_start ();

echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scenes of Purdue</title>
<!-- Styling of the Webpage -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>

</head>

<body>
<div id="shadowContainer">
<div id="mainContainer">
<div id="mainHeader"></div>
<div id="topNav">
<ul>

<li><a href="index.php">Home</a></li>
<li><a href="galleries.php">Galleries</a></li>
</ul>
</div><div id="content">
<br />
<div class="clearfix"><h1>Select a Category to View</h1>
<br />

<div class="paginationBar" id="paginationBar">
<select id="catDropDown" onchange="javascript:getCategory()">
<option value="-" selected="selected">Select a Category</option>
<option value="bellTower">Bell Tower</option>
<option value="fountain">Fountain</option>
</select>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br />

<ul id="pagination">
</ul>

<div id="r1c1"></div>
<div id="r1c2"></div>
<div id="r1c3"></div>

<div id="r2c1"></div>
<div id="r2c2"></div>
<div id="r2c3"></div>


<script type="text/javascript"><!--
var bellTowerArray = new Array();

bellTowerArray[0] = "bellTower01.jpg";
bellTowerArray[1] = "bellTower02.jpg";
bellTowerArray[2] = "bellTower03.jpg";
bellTowerArray[3] = "bellTower04.jpg";
bellTowerArray[4] = "bellTower05.jpg";
bellTowerArray[5] = "bellTower06.jpg";
bellTowerArray[6] = "bellTower07.jpg";
bellTowerArray[7] = "bellTower08.jpg";
bellTowerArray[8] = "bellTower09.jpg";
bellTowerArray[9] = "bellTower10.jpg";
bellTowerArray[10] = "bellTower11.jpg";
bellTowerArray[11] = "bellTower12.jpg";
bellTowerArray[12] = "bellTower13.jpg";
bellTowerArray[13] = "bellTower14.jpg";
bellTowerArray[14] = "bellTower15.jpg";
bellTowerArray[15] = "bellTower16.jpg";

var fountainArray = new Array();

fountainArray[0] = "fountain01.jpg";
fountainArray[1] = "fountain02.jpg";
fountainArray[2] = "fountain03.jpg";
fountainArray[3] = "fountain04.jpg";
fountainArray[4] = "fountain05.jpg";
fountainArray[5] = "fountain06.jpg";
fountainArray[6] = "fountain07.jpg";
fountainArray[7] = "fountain08.jpg";
fountainArray[8] = "fountain09.jpg";
fountainArray[9] = "fountain10.jpg";
fountainArray[10] = "fountain11.jpg";
fountainArray[11] = "fountain12.jpg";
fountainArray[12] = "fountain13.jpg";
fountainArray[13] = "fountain14.jpg";
fountainArray[14] = "fountain15.jpg";
fountainArray[15] = "fountain16.jpg";
fountainArray[16] = "fountain17.jpg";
fountainArray[17] = "fountain18.jpg";

var currentArray = new Array();

function getCategory()
{
if(document.getElementById("catDropDown").selectedIndex == 1)
{
currentArray = bellTowerArray;
}
else if(document.getElementById("catDropDown").selectedIndex == 2)
{
currentArray = fountainArray;
}//if/else
if(document.getElementById("catDropDown").selectedIndex > 0)
{
displayImages(0);
doPagination();
}
}

function displayImages(start)
{
//r1c1
if(!(start > currentArray.length-1))
document.getElementById("r1c1").innerHTML = "<a id=\"r1c1_a\" href=\"images/regular/" + currentArray[start] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start] + "\" id=\"r1c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r1c1").innerHTML = "";

//r1c2
if(!(start+1 > currentArray.length-1))
document.getElementById("r1c2").innerHTML = "<a id=\"r1c2_a\" href=\"images/regular/" + currentArray[start+1] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+1] + "\" id=\"r1c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r1c2").innerHTML = "";

//r1c3
if(!(start+2 > currentArray.length-1))
document.getElementById("r1c3").innerHTML = "<a id=\"r1c3_a\" href=\"images/regular/" + currentArray[start+2] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+2] + "\" id=\"r1c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r1c3").innerHTML = "";

//r2c1
if(!(start+3 > currentArray.length-1))
document.getElementById("r2c1").innerHTML = "<a id=\"r2c1_a\" href=\"images/regular/" + currentArray[start+3] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+3] + "\" id=\"r2c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r2c1").innerHTML = "";

//r2c2
if(!(start+4 > currentArray.length-1))
document.getElementById("r2c2").innerHTML = "<a id=\"r2c2_a\" href=\"images/regular/" + currentArray[start+4] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+4] + "\" id=\"r2c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r2c2").innerHTML = "";

//r2c3
if(!(start+5 > currentArray.length-1))
document.getElementById("r2c3").innerHTML = "<a id=\"r2c3_a\" href=\"images/regular/" + currentArray[start+5] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+5] + "\" id=\"r2c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
else
document.getElementById("r2c3").innerHTML = "";
}

function doPagination()
{
var numpages = (currentArray.length / 6) +1;
var numleft = currentArray.length % 6;

document.getElementById("pagination").innerHTML = "";

for(i=0; i<numpages-1; i++)
{
document.getElementById("pagination").innerHTML += "<span onclick='displayImages("+ i*6 +")'>"+ (i+1) + "<"+"/span> ";
}

if(numpages <=1)
{
document.getElementById("pagination").innerHTML = "";
}
}

document.getElementById("catDropDown").selectedIndex = 0;

-->
</script>

</div>
</div>
</div>
<div id="footer"><a href="readme.php">Readme</a><br />
<div class="clearfix">
<div style="float: left"><a href="adminLogin.php" title="Admin Login" class="adminLoginAjax">Admin login</a></div>

</div>
</div>
</div>

</div>

</body>
</html>