JavaScript - Dynamic User Data Persistance In Ie

I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total.

Here is the bit that does the calculation:
Code:

function advCalc(selected) {

	var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;

	result = result.toFixed(2) ;
	result = addCommas(result) ;
	
	document.getElementById("total"+selected).innerHTML = result ;

}

The bit that adds a new row of fields is:
Code:

function addPart(divName){
          var newdiv = document.createElement('div') ;
		  newdiv.setAttribute('id', 'partrow' + counter) ;
		  newdiv.setAttribute('style', 'clear:both;') ;
          newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>&pound;</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
          document.getElementById(divName).appendChild(newdiv) ;
          counter++ ;
}

The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc.

It isn't working for any other fields added but I can't see what is wrong

Hello all. I am currently viewing various reports based on a location chosen by a dropdown. When I select GO, the page sends the location to a popup, which then queries based on that location and displays the graph on the popup window. What I want to do is to eliminate the popup and send the location to a <div> on the same page and then have the query run and display the graph on the same page. Is this possible, or do Divs have to be static content?

Thanks,

Parallon

I have a dynamic website where my client can upload pictures to, i have php dynamically show the images and etc, i also have php assign each photo an id number. Basically what it is each photo dynamically gets id=$i++. So every photo uploaded it goes up one higher. Now i wanted to make it so in javascript the same happens, the id is dynamically i++ but im not very good in javascript so i was hoping i could get some help. Basically i want it to be something like this. (unless u know a better way of doing the same kind of effect)

Code:

var i=0;
$(document)
.ready(function(){
setTimeout(function () {$("#i++").fadeOut("slow");}, 100);
setTimeout(function () {$("#i++").fadeIn("fast");}, 400);
});

I just need help getting the i++ to work.

In a webpage I am developing I need to change the presentation depending on user selection. At the moment this code is huge and not very maintainable. The first purpose was to have a working code, now I would like to make it more maintainable. Below is a main part of the problem;

Code:

function myFunction(type)
{						
	if (type.value == "1")
	{
		var form1 = document.getElementById("OrderForm1");
		form1.style.display = "block";				
		var form2 = document.getElementById("OrderForm2");
		form2.style.display = "none";
		var form3 = document.getElementById("OrderForm3");
		form3.style.display = "none";			
	}
	else if (type.value == "2")
	{		
		var form1 = document.getElementById("OrderForm1");
		form1.style.display = "none";				
		var form2 = document.getElementById("OrderForm2");
		form2.style.display = "block";
		var form3 = document.getElementById("OrderForm3");
		form3.style.display = "none";					
	}
	else if (type.value == "3")
	{
		var form1 = document.getElementById("OrderForm1");
		form1.style.display = "none";				
		var form2 = document.getElementById("OrderForm2");
		form2.style.display = "none";
		var form3 = document.getElementById("OrderForm3");
		form3.style.display = "block";
	}
}


<div id="OrderForm" style="display: block;">
	<div id="OrderForm1" style="display: none;">
		<FORM METHOD="POST"></FORM>
	</div>
	<div id="OrderForm2" style="display: none;">
		<FORM METHOD="POST"></FORM>
	</div>	
	<div id="OrderForm3" style="display: none;">
		<FORM METHOD="POST"></FORM>
	</div>
</div>

Basically the myFunction will be called based on user input. This input will show one section of html code and hide other sections of html code. So if input is "1", then OrderForm1 shall be shown and OrderForm2 and OrderForm3 must be hidden. if input is "2", the OrderForm2 shall be shown and OrderForm1 and OrderForm3 must be hidden etc. By adding more forms to show and hide, this code is growing massively.

I would like to add some kind of for loop function to this but I am not sure how to loop through the various section names (OrderForm1, OrderForm2 and OrderForm3) and set the appropriate value.

Appreciate any help

hi i need help in creating dynamic form using jquery. i create a form in this form i want when "add another" link is clicked then it adds one more set of fields.

form is here
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script src="js/script.js" type="text/javascript"></script>
<style>
#form1 div {
   font-size:14px;
   margin-bottom: 10px;
   clear: left;
}
#form1 label {
   width: 125px;
   display: block;
   font-size:14px;
   font-weight: bold;
   color: #999;
   float: left;
}
#link {
   margin-left:125px;
}
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<div>
  <label>IM Screen Names:</label>
    <input type="text" name="textfield" id="textfield" />
    <select name="select" id="select">
      <option value="AIM" selected="selected">AIM</option>
      <option value="gtalk">Google Talk</option>
      <option value="skype">Skype</option>
      <option value="windows live">Windows Live</option>
      <option value="yahoo">Yahoo</option>
    </select><br />
    <div id="link"><a href="">Add another</a></div>
</div>
</form>
</body>
</html>

Hi,

Is it possible to code a slideshow where the slides can change at a different intervals? Which can be set by me??

The slideshow will hold just text and links but will need to be dynamic in size.

i.e. there maybe 5 or 6 lines of text anything more can be viewed by a view more link and then i'll need the box to stretch to fit rest of text.

how would i do this??

Thanks

I am running a vBulletin and am using a script to set a cookie each time someone clicks a banner. When the user then reloads the page it looks for that cookie and hides the banner if the cookie exists.

I now want to write the date into the cookie name so that the cookie name changes every day. I want to do this because for some reason the cookie gets re-written sometimes and never expires.

Because of vBulletin and Firefox I have to use PHP to check initially if the cookie is even set. Here is my current script, any help would be appreciated.
Code:

<?PHP
if( isset( $_COOKIE['noads139'] ) )
{

}
else
{
	?>
<script type="text/javascript">
function as_click () {
	myDate = new Date();
   myDate.setTime(myDate.getTime()+(1*24*60*60*1000));
   document.cookie = 'noads139=noads139; expires=' + myDate.toGMTString()+"; path=/"
}

// incredibly funky onload add-event scripting, for all browsers

		 if(typeof window.addEventListener != 'undefined')
		 {
		 	//.. gecko, safari, konqueror and standard
		 	window.addEventListener('load', adsense_init, false);
		 }
		 else if(typeof document.addEventListener != 'undefined')
		 {
		 	//.. opera 7
		 	document.addEventListener('load', adsense_init, false);
		 }
		 else if(typeof window.attachEvent != 'undefined')
		 {
		 	//.. win/ie
		 	window.attachEvent('onload', adsense_init);
		 }

		 //** remove this condition to degrade older browsers
		 else
		 {
		 	//.. mobile safari, mac/ie5 and anything else that gets this far

		 	//if there's an existing onload function
		 	if(typeof window.onload == 'function')
		 	{
		 		//store it
		 		var existing = onload;

		 		//add new onload handler
		 		window.onload = function()
		 		{
		 			//call existing onload function
		 			existing();

		 			//call adsense_init onload function
		 			adsense_init();
		 		};
		 	}
		 	else
		 	{
		 		//setup onload function
		 		window.onload = adsense_init;
		 	}
		 }
function adsense_init () {

	if (document.all) {  //ie

		var el = document.getElementsByTagName("iframe");
	
		for(var i = 0; i < el.length; i++) {
			if(el[i].src.indexOf('googlesyndication.com') > -1) {

				el[i].onfocus =  as_click;
			}
		}
	
	} else {   // firefox
	
		window.addEventListener('beforeunload', doPageExit, false);
		window.addEventListener('mousemove', getMouse, true);
	
	}
		
}

//for firefox
var px;
var py;

function getMouse(e) {
	px=e.pageX;
	py=e.pageY;
}

function findY(obj) {
	var y = 0;
	while (obj) {
		y += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return(y);
}

function findX(obj) {
	var x = 0;
	while (obj) {
		x += obj.offsetLeft;
		obj = obj.offsetParent;
	}
	return(x);
}

function doPageExit(e) {

	ad = document.getElementsByTagName("iframe");
	for (i=0; i<ad.length; i++) {
		var adLeft = findX(ad[i]);
		var adTop = findY(ad[i]);
		var inFrameX = (px > (adLeft - 10) && px < (parseInt(adLeft) + parseInt(ad[i].width) + 15));
		var inFrameY = (py > (adTop - 10) && py < (parseInt(adTop) + parseInt(ad[i].height) + 10));
		
		if (inFrameY && inFrameX) {

			myDate = new Date();
            myDate.setTime(myDate.getTime()+(1*24*60*60*1000));
            document.cookie = 'noads139=noads139; expires=' + myDate.toGMTString()+"; path=/"
		
		}
	}

}

//end for firefox
</script>
<?PHP
}
?>
<div id="adsense" style="display: none">
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxx";
/* 728x90, created 4/15/10 */
google_ad_slot = "xxxxxxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<script type="text/javascript">
if (document.cookie.indexOf('noads139') < 0)
{
document.getElementById('adsense').style.display = '';
}
else {

}
</script>
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
{
document.getElementById('adsense').style.display = 'none';
}
else {
	
}
</script>

hi i got some code from another site. i modified it according to my needs. what is it doing it adds dynamic form fields by clicking "add another" link. the problem is when logged in user wants to modify his contact details he clicks on edit then gets to this modification form where all the data in his db is selected and displayed in that form fields. so the problem here is when he clicks on add another link it adds up that many fields sets that appeared currently. means if there appeared four sets of fields then clicking on add another link will add four more fields. what i want is to add only one set of fields which contains of text field and select menu.

my code is here
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
                $('#input' + num).after(newElem);
            });
         
        });
    </script>
    <style>
#myForm div {
   font-size:14px;
   margin-bottom: 10px;
   clear: left;
}
#myForm label {
   width: 125px;
   display: block;
   font-size:14px;
   font-weight: bold;
   color: #999;
   float: left;
}
#btnAdd {
   margin-left:130px;
}
</style>

</head>
 
<body>
<form id="myForm" method="post" action="process.php">
   <div>
    <label>First Name: </label><input type="text" name="fname" id="fname"><br>
    </div>
    <div>
    <label>Last Name: </label><input type="text" name="lname" id="lname"><br>
    </div>
    <?php
   $connect = mysql_connect("localhost","user","pass");
   mysql_select_db("db");
   $get_im = mysql_query("SELECT * FROM contactim WHERE userid='$_SESSION[userid]'");
   $count = mysql_num_rows($get_im);
   while($get_contactim = mysql_fetch_assoc($get_im)) {
      $userim_db = $get_contactim['username'];
      $im_db = $get_contactim['im'];
      //echo $userim_db."<br>";
      
      for($i = 1; $i <= $count; $i++) {
   ?>
    <div id="input1" class="clonedInput">
      <label>IM Screen Names:</label>
        <input type="text" name="name[]" id="name1" value="<?php if($userim_db == "") { echo ""; } else { echo $userim_db; } ?>" />
        <select name="screenname[]" id="screenname1">
          <option value="AIM" <?php if($im_db == "AIM") { echo "SELECTED"; } ?>>AIM</option>
          <option value="gtalk" <?php if($im_db == "gtalk") { echo "SELECTED"; } ?>>Google Talk</option>
          <option value="skype" <?php if($im_db == "skype") { echo "SELECTED"; } ?>>Skype</option>
          <option value="windows" <?php if($im_db == "windows") { echo "SELECTED"; } ?>>Windows Live</option>
          <option value="yahoo" <?php if($im_db == "yahoo") { echo "SELECTED"; } ?>>Yahoo</option>
        </select><br />
        <?php
      }
   }
      ?>
    </div>
 
    <div>
       <a href="#" id="btnAdd">Add another</a>
    </div>
    <input type="submit" name="submit" value="Submit">
</form>
 
</body>
</html>

Is this possible?

Please look at the attached image.

I am trying to create a team creation page for a site I am making, however I want the user to be able to see all the names they enter before the information is passed to the .php file to send it to the MySQL table.

1. So, every time the user enters a name and presses the "add name" button the name details are stored in an Javascript array and displayed in the box below.
2. When the user presses the "save team" button the team name is passed by a simple form post and the javascript array is passed to a php array and then processed ready to be passed to the MySQL table.

The problem is I don't know to do the first bit (number1).

Any ideas or pointers?

I want to have <div> cells that the background-color css style dynamically change between 4 colors depending on how many times they are clicked. The options are none, yellow, red and green then repeat. So when the page loads, they are all at none, and if you click once it goes to green, twice to yellow, three times to red, then back to none.

I do not know if this is possible, but if anyone can point me to a tutorial, I would be appreciative. I just am having a hard time searching the proper terms.

Hi,

I am trying to create a xml document and load it into a 3rd party function as follows:

Quote:
var doc = new ActiveXObject('Microsoft.XMLDOM'); // OR
var doc = document.implementation.createDocument('', 'xml', null);

o.overlayKML('somefile.xml');
// Works perfectly
o.overlayKML(doc);
// Doesn't work at all, return unsupport error
I get to know that the overlayKML (3rd party function) needs to read a physical file with a path and sadly it doesn't support DOM.

How can I create a javascript document that mimic a physical file and introduce it into the function?

Thanks!

Hello,

I'm new here and also new to writing JS. I was hoping someone could tell me what is wrong with the code below. I am trying to load a page, and the filename will be different depending on current month and year. If I use the code below in the body for document.write instead of window.location it correctly displays this months page as 102009.htm. Is there a better way to do this?

Thanks in advance for any help.

Code:

<script type="text/javascript"> 
<!-- 
var months=new Array(13);
months[1]="01"
months[2]="02"
months[3]="03"
months[4]="04"
months[5]="05"
months[6]="06"
months[7]="07"
months[8]="08"
months[9]="09"
months[10]="10"
months[11]="11"
months[12]="12"
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var year=time.getYear();
window.location = (1month + year + ".htm") 
//--> 
</script>

I am trying to concatenate text to refer to a variable:
Code:

var HomePlayer1Points = 17
var i = 1
var a = "HomePlayer"
var b = "Points"
var c = a + i + b

alert(c.value)

it give me undefined instead of 17. How should this be done without using eval() ???