JavaScript - Dynamically Inserting Javascript Ad Tag From Third Party Will Not Center In Div?

Hi,

I am using javascript to collect hidden form elements and then send the values to a php page, without reloading or changing the page. Basically i have a list of job vacancies, with just an apply button, when a person clicks on the apply button, the form collects some information from their account and sends it using the javascript code.

Now this works fine, except for if somebody then clicks on the second job it sends the information from the first form again. And it seems to remember the information.

What i am trying to find out is it possible to have multiple forms on one page which once submitted send variables to javascript which then send them to a php but clear themselves so that it doesn't remember the previous values.

Here is the code for the form:

Code:

<form id="submit" method="post">
                            <fieldset>
                       <input type="hidden" name="usern" id="usern" value="php variable" />
                       <input type="hidden" name="joborder_id"  id ="joborder_id" value="php variable" />
                       <input type="hidden" name="site_id"  id ="site_id" value="php variable" />
                       <button class="button positive">Apply For This Job </button>
                       </fieldset>
                       </form>
                       <div class="success" style="display: none;">Your Application has been sent.</div>
                              &nbsp;
                            </form>

And the Javascript code is he

Code:

$(document).ready(function(){
	$("form#submit").submit(function() {
	// we want to store the values from the form input box, then send via ajax below
	var usern     = $('#usern').attr('value');
	var joborder_id    = $('#joborder_id').attr('value');
	var site_id    = $('#site_id').attr('value');
		$.ajax({
			type: "POST",
			url: "apply.php",
			data: "usern="+ usern +"& joborder_id="+ joborder_id +"& site_id="+ site_id,
			success: function(){
				$('form#submit').hide(function(){$('div.success').fadeIn();});

			}
		});
	return false;
	});
});

Any ideas or suggestions would be appreciated,

Thanks

Lee

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!

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";

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'm new here and this is my first post, I hope I can find help here.

How can i dynamically generate this type of form element in javascript, including the table rows and columns enclosing the form elements and whenever that 'Add More' button is clicked, a new instant of the same form will generated and select drop down list populated.

I have try to google for solution, but without success.

I code in PHP, but i need it to integrate in my code.


Thanks for your help.

The below code is not inserting the smile into the textbox.
In IE8 I get an error around
Code:

if((sel.type == "Text" || sel.type == "None") && rng != null)

In Firefox 3.5 I get an error around:
Code:

if (es <= 2)

Each textarea has: id and name
Code:

<textarea class="textinput" id="about_me" name="about_me" cols="45" rows="6">

Here is the whole smile code I am using.

Code:

//Smile Start 
var myAgent   = navigator.userAgent.toLowerCase();
var myVersion = parseInt(navigator.appVersion);

var is_ie  = ((myAgent.indexOf("msie") != -1)  && (myAgent.indexOf("opera") == -1));
var is_nav = ((myAgent.indexOf('mozilla')!=-1) && (myAgent.indexOf('spoofer')==-1) && (myAgent.indexOf('compatible') == -1) && (myAgent.indexOf('opera')==-1) && (myAgent.indexOf('webtv') ==-1) && (myAgent.indexOf('hotjava')==-1));

var is_win = ((myAgent.indexOf("win")!=-1) || (myAgent.indexOf("16bit")!=-1));
var is_mac = (myAgent.indexOf("mac")!=-1);

function smile( txt ) {
//    document.all.txtmessage.value = document.all.txtmessage.value + txt;
//    	return false;
	doInsert(" " + txt + " ", "", false,document.getElementById('txtmessage'));             
}
function smile2( txt ) {
	doInsert(" " + txt + " ", "", false,document.getElementById('txttemplate'));
}
 function doInsert(ibTag, ibClsTag, isSingle, name_txt)
{
	var isClose = false;
	var obj_ta = name_txt;


	//----------------------------------------
	// It's IE!
	//----------------------------------------
if ( (myVersion >= 4) && is_ie && is_win)
//	if ( (ua_vers >= 4) && is_ie && is_win)
	{
		if (obj_ta.isTextEdit)
		{
			obj_ta.focus();
			var sel = document.selection;
			var rng = sel.createRange();
			rng.colapse;
			if((sel.type == "Text" || sel.type == "None") && rng != null)
			{
				if(ibClsTag != "" && rng.text.length > 0)
					ibTag += rng.text + ibClsTag;
				else if(isSingle)
					isClose = true;

				rng.text = ibTag;
			}
		}
		else
		{
  //-- mod_bbcode begin
          // this should work with Mozillas
          if ( (myVersion >= 4) && is_win) {
              var length = obj_ta.textLength;
              var start = obj_ta.selectionStart;
              var end = obj_ta.selectionEnd;
              if (end == 1 || end == 2)
                  end = length;
              var head = obj_ta.value.substring(0,start);
              var rng = obj_ta.value.substring(start, end);
              var tail = obj_ta.value.substring(end, length);
              if( start != end ){
                  if (ibClsTag != "" && length > 0)
                      ibTag += rng + ibClsTag;
                  else if (isSingle)
                      isClose = true;
                  rng = ibTag;
                  obj_ta.value = head + rng + tail;
                  start = start + rng.length;
              }
              else{
                  if(isSingle)
                      isClose = true;
                  obj_ta.value = head + ibTag + tail;
                  start = start + ibTag.length;
              }
              obj_ta.selectionStart = start;
              obj_ta.selectionEnd = start;
          }
          else {
  //-- mod_bbcode end  
    			if(isSingle)
    			{
    				isClose = true;
    			}
    			
    			obj_ta.value += ibTag;
    //-- mod_bbcode begin
         }
    //-- mod_bbcode end          
		}
	}
	//----------------------------------------
	// It's MOZZY!
	//----------------------------------------
	
else if ( obj_ta.selectionEnd )
	{ 
		var ss = obj_ta.selectionStart;
		var st = obj_ta.scrollTop;
		var es = obj_ta.selectionEnd;
		
		if (es <= 2)
		{
			es = obj_ta.textLength;
		}
		
		var start  = (obj_ta.value).substring(0, ss);
		var middle = (obj_ta.value).substring(ss, es);
		var end    = (obj_ta.value).substring(es, obj_ta.textLength);
		
		//-----------------------------------
		// text range?
		//-----------------------------------
		
		if (obj_ta.selectionEnd - obj_ta.selectionStart > 0)
		{
			middle = ibTag + middle + ibClsTag;
		}
		else
		{
			middle = ibTag + middle;
			
			if (isSingle)
			{
				isClose = true;
			}
		}
		
		obj_ta.value = start + middle + end;
		
		var cpos = ss + (middle.length);
		
		obj_ta.selectionStart = cpos;
		obj_ta.selectionEnd   = cpos;
		obj_ta.scrollTop      = st;

	}
	//----------------------------------------
	// It's CRAPPY!
	//----------------------------------------
	else
	{
		if (isSingle)
		{
			isClose = true;
		}
		
		obj_ta.value += ibTag;
	}
	
	obj_ta.focus();

	return isClose;
}
//Smile End

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,

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.

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

Below is the code.

My function:
Code:

function swap_content(id1,id2)
{
var tmp = document.getElementById(id1).name;
var theval = document.getElementsByName('primary_propertyp_id')[0].value;
document.getElementById(id1).name = document.getElementsByName('primary_propertyp_id')[0].name;
document.getElementsByName('primary_propertyp_id')[0].name = tmp;
document.getElementById(id2).id = document.getElementById('primary').id;
document.getElementById('primary').id = 'addressid_'+theval+'_div';
}

Applicable Code for primary info:
Code:

<div id="primary">
<label>primary to secondary:</label><input name="primary_propertyp_id" type="text" id="addressid_<? echo $row['primary_property_id']; ?>" value="<? echo $row['primary_property_id']; ?>"/>
</div>

Applicable Code for secondary info/link to change:
Code:

echo "<div id=\"addressid_" . $properties_row['id'] . "_div\">";
echo "<a href=\"#\" onclick=\"swap_content(&apos;addressid_" . $properties_row['id'] . "&apos;,&apos;addressid_" . $properties_row['id'] . "_div&apos;); return false\">Make Primary</a>";
echo "<input id=\"addressid_" . $properties_row['id'] . "\" name=\"addressids[]\" value=\"" . $properties_row['id'] . "\" type=\"text\">";
echo "</div>";

This is running through a PHP loop so it's making multiple divs and links for the secondaries. I am wanting to be able to swap out any of them to make them 'primary'....this works for the first click, but after the first click it makes every div id and input name the same as the first that was clicked.

It's also not working AT all if i click on the bottom link first, then a link above it. Top-down works, bottom-up doesn't...Please help

Thanks in advance,
Jeremy

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>

http://www.javascriptkit.com/javatut...rnalphp2.shtml


Anyone have a decent way of adding a fade affect to this script?

Hello all I am new here but this place looked great and like one of the only places where I could find the answer to my question.

I have created a page which pulls search results from various sites using PHP. It displays each result in a row in a table upon running.

I wanted to add a button saying "More information" at which point, a div would appear and load the associated link for that search result within an iframe within the newly appeared div. I've been able to get a div appear and disappear on button click but, I couldn't get it to dynamically load an iframe on click with the associated search results link.

Any suggestions are greatly appreciated. Also let me know if you need more information before assisting. Thanks!