JavaScript - Help With Adding A Pop-up Box

Hello

Thanks to those people on this Forum who have provided me with help, along with my little knowledge of Javascript I have been able to create the basis of a form for my Skittle League which will allow teams to submit results over the web.

I have one calculation to complete before I look to make the form live and I am hoping someone can provide the final peice of the jigsaw.

The scoresheet can be found at

http://www.stroudskittles.co.uk/test/scorecard.html

The form adds togther the 5 values for each half for each team and places them in a Half Total box below.

The form adds together the two totals for each half for each team then places them in a Total box below

I have been able to add a operation using the onchange event the points are automatically calculated for each half and total, depending on the overall scores, 2 points for a win, 1 for a draw 0 for a loss.

What I'm struggling to do is add the three points totals together to generate the Overall Points for a team and place them in a text box at the top of the scoresheet (marked xxx on the page).

Can anyone suggest the best method to do this.

Also is it possible to combine the sums into one script therefore reduing the overall size.

Your help very much appreciated

Hi,

I was trying to add some simple javascript (toggle visibility function of a div) to the FB 'like' button and 'Google +1' button. This to simply create some more visitor interactivity by showing a thank you message for doing so.

I've tried by just adding 'onclick=' to the element that actually shows the button, with a <a href="#" onlcick="..."> --element--</a> manner, and with a <span> and a <div> element around it.

Neither of them work. The toggle script is 100% correct (using it actively with <a href="javascript:void(0);" onclick="javascript:toggleVisibility('feedbackform')">feedback</a> ) Of course I made sure the div id had correct name and it is unique for the toggle function.

Anybody got any ideas on how to go with this?

JS:
Code:

function toggleVisibility(controlId) {
	if (document.getElementById) { // DOM3 = IE5, NS6
		var control = document.getElementById(controlId);
		if(control.style.display == "")
			control.style.display = "none";
		else
			control.style.display = "";        
	}
	else {
		if (document.layers) { // Netscape 4
			if(document.controlId.display == "")
				document.controlId.display = "none";
			else
				document.controlId.display = "";        
		}
		else { // IE 4
			if(document.all.controlId.style.display == "")
				document.all.controlId.style.display = "none";
			else
				document.all.controlId.style.display = "";        
		}
	}
}

Hi and thanks for your help,

I have two text boxes on my page and a third where I would like it to automatically subtract the two any time either one of them is changed.

What is the simplest way to do this?

Thanks again for your help,
Will

Im trying to dynamically add more fields into my form.

HTML:
Code:

<table id="add_episodes" class="editor" border="0" cellspacing="0" cellpadding="5">
            <tr>
                <td><input size="3" type="text" name="number" /></td>
                <td><input type="text" name="title" /></td>
                <td><input type="button" value="Add another text input" onClick="addInput('add_episodes', 'number');addInput('add_episodes', 'title');"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>
                    <input name="entry_id" type="hidden" value="<?php echo $id; ?>">
                    <input class="input submit" type="submit" name="submit" value="Add <?php echo $type; ?>">
                </td>
            </tr>
        </table>

Javascript
Code:

function addInput(divName, type)
{
    var counter = 1;
    var limit = 50;
    if (counter == limit)  {
        alert("You have reached the limit of adding " + counter + " inputs");
    }
    else {
        var tr.document.createElement('<tr>');
        if(type == 'number')
        {
        var newdiv = document.createElement(element);
        newdiv.innerHTML = '<input size="3" type="text" name="number" />';
        document.getElementById(add_input).appendChild(newdiv);
        }
        if(type == 'title')
        {
        var newdiv = document.createElement(element);
        newdiv.innerHTML = '<input type="text" name="title[]" />';
        document.getElementById(divName).appendChild(newdiv);
        }
        counter++;
        document.getElementById(add_input).appendChild(tr);
    }
}

This is one of my first times working with javascript, usually i work with PHP.

Im trying to add more input elements of
Code:

<tr>
<td><input size="3" type="text" name="number" /></td>
<td><input type="text" name="title" /></td>
</tr>

And don't reply that i should make the names into arrays for me to submit more stuff, I'll change that later. But for simplicity and a straightforward problem. I can't get it add more form elements in the correct place or nothing happens at all.

hi All,

I want to add UL item to Li in java script dynamically .so that i can build submenu dynamically.can any one help me.

helo,
i just want to know how to add the same panel by clicking on a button right below the button..

Hi,

Want to add numbers using JS. Have 4 text boxes for user entry. Want either a label (preferred) or fifth text box to automatically sum those entries. Did following but not working. Any suggestions?

<script language="javascript">
var addRange = function()
{
var NoHrsRangeComp = document.getElementById("NoHrsRangeComp");
var NoHrsRangeCred = document.getElementById("NoHrsRangeCred");
var NoHrsRangeOT = document.getElementById("NoHrsRangeOT");
var NoHrsRangeRC = document.getElementById("NoHrsRangeRC");
var RangeSum = document.getElementById("RangeSum");
var sum = 0;

if (isNaN(parseFloat(NoHrsRangeComp.value))){
NoHrsRangeComp.value = ""; }
if (isNaN(parseFloat(NoHrsRangeCred.value))){
NoHrsRangeCred.value = ""; }
if (isNaN(parseFloat(NoHrsRangeOT.value))){
NoHrsRangeOT.value = ""; }
if (isNaN(parseFloat(NoHrsRangeRC.value))){
NoHrsRangeRC.value = ""; }

sum = parseFloat(NoHrsRangeComp.value) + parseFloat(NoHrsRangeCred.value) + parseFloat(NoHrsRangeOT.value)
+ parseFloat(NoHrsRangeRC.value);
RangeSum.innerHTML = sum;
}
</script>

Input as follows:

<input style="width: 50px" type="text" name="NoHrsRangeComp" id="NoHrsRangeComp" onblur="addRange();"/>

<input style="width: 50px" type="text" name="NoHrsRangeCred" id="NoHrsRangeCred" onblur="addRange();"/>

<input style="width: 50px" type="text" name="NoHrsRangeOT" id="NoHrsRangeOT" onblur="addRange();"/>

<input style="width: 50px" type="text" name="NoHrsRangeRC" id="NoHrsRangeRC" onblur="addRange();"/>

<input style="width: 50px" type="text" name="RangeSum" id="RangeSum" onblur="addRange();"/>

For above entry prefer - label makes it look more like usual addition and does not confuse users to want to make entry.

<label id="RangeSum" onblur="addRange();" style="border-bottom:medium"></label>

John

I am trying to take the add the numbers input into form boxes 1 and 2 and then output them onto the screen following the form boxes. I have tried many different functions and none of them will work. Can anyone point me in the right direction? Here's my code so far:

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=iso-8859-1" />
<title>Math and Compare</title>
<link rel="stylesheet" type="text/css" href="assignment1.css" />	


<div align="center">
<script type="text/javascript">
var title = "<strong>Assignment 1 </br> Aughtman, Zackary</strong>"
document.write(title.fontsize(5));
</script>
<script type="text/javascript">
function result_One(firstNum, secondNum, result1)
		{
			firstNum = document.getElementById("box1").value;
			secondNum = document.getElementById("box2").value;
			result_One = this.firstNum + this.secondNum;
			return calc.result_One;
		}
</script>

</head>

<body>
</br>
</br>
<div id="div1" align="center">
<strong>Addition</strong>
</div>

	<table align = "center">
		<tr>
			<td>
				<form id="box1">
				<input type="text" value="" id="box1" class="box1" /> +
				<input type="text" value="" id="box2" class="box2" /> = 000000000
				</br>
				<div align="center">
				<input type="button" value="Add" id="add"  onclick="result_One;" />
			</td>
		</tr>
	</table>
</body>
</html>

to be honest I have no idea where to start, i have a table, with 2 numeric values at the minute, if the checkbox is selected I want the total price to be shown?

Any help to get me started would be great!

this is the form I have with the numeric values

Code:

<form id="calculation" action="#" method="post">

100 <input type="checkbox" name="check1" value="100" onClick='total_cost()'/>

120 <input type="checkbox" name="check2" value="200" onClick='total_cost()'/>

Total cost<input type="text" name="total" id="total" readonly="readonly" />

onClick='total_cost()' is referring to the javascript function where I just don't know where to start?

Hi there,

Greetings,

I have limited knowledge on Javascript. I wish someone could help me out. Thanks.

I have actually found a free script named "Image Flow" (http://finnrudolph.de/ImageFlow/Examples) on the website. Then, I have uploaded it to my web server. Everything was fine and functioning well. I would like to add in new Var (to make new window appears after clicking) according to the codes given but failed to do so.

The codes given are
A)
Code:

 
var target_1 = new ImageFlow();
target_1.init({ ImageFlowID: 'target_1,' 
                    onClick: function() {window.open(this.url, '_blank');} });

Then, I just added the above code into imageflow.JS and imageflow.packed.JS. (I have attached the file below)

Original:
Code:

domReady(function()
{
	var instanceOne = new ImageFlow();
	instanceOne.init({ ImageFlowID:'myImageFlow' });
});

After amendment:
Code:

domReady(function()
{
	var instanceOne = new ImageFlow();
	instanceOne.init({ ImageFlowID:'myImageFlow' });

var target_1 = new ImageFlow();
target_1.init({ ImageFlowID: 'target_1,' 
                    onClick: function() {window.open(this.url, '_blank');} });
});

However, no pictures were loaded after that.

Does it involve more than just "copy and paste"? Or what have I done incorrectly?

Sorry to disturb you.

-edit-

I want to be able to add fields to a form with JavaScript, already had a thread about this in the PHP section and someone gave me some code. But that didn't seem to work

So here is some other code:

JavaScript:
Code:

var my_div = null;
var newDiv = null;

function addElement()
{
  // create a new div element
  // and give it some content
  newDiv = document.createElement("div");
  newDiv.innerHTML = "<label for=\"column\">Column Name: </label><input style=\"margin-bottom:1em;\" type=\"text\" 						name=\"column[]\" id=\"column\">";

  // add the newly created element and it's content into the DOM
  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

HTML:
Code:

<div class="login">
	<form name="tbCreate" method="post">
		<label for="tableName">Table Name: </label>
		<input type="text" name="tableName"><br />
	</form>
    <input type="button" name="addElement" onClick="addElement()" value="Add Column">
 </div>
<div id='org_div1'></div>

Problem is, it only works if the org_div1 div not between any other tags apart from <body></body>. How can I make it so that the div can be put between the form tags?

Hi,

I'm currently designing a website for a takeaway company, and have one page displaying their menu. So that customers can easily calculate how much their takeaway will cost, I'm going to put checkboxes next to each item.

Each of the checkboxes' value will be the price of the item, and I need a script that will add the values (prices) of the checkboxes they've ticked.

They can then see the total cost of their takeaway without having to work it out, and add or remove items accordingly. I will then add a button which will print out a list of the items they ticked with the total price at the bottom. The customer can bring this in with them and the staff can easily see what they want and how much to charge them.
Firstly, I need to know how to make Javascript add these values (and probably save them as a variable) Secondly, how would I make this display on the page (either after they click a button, or automatically so they can see the price real-time)? - I assume this would be basic coding --- Code:

document.write(var)

And finally, how could I make a script which would print only the items which are ticked, and the total price?

Any help with this, even if you can only answer one of the questions, would be much appreciated.

Thanks in advance!

--
AJE

I'm just trying to add X days to a given date object. However, it's not the right answer (did it in PHP to check, and my PHP version works).

dateObj = new Date (month + '/' + day + '/' + year); // Grab the object for a given date
datestamp = dateObj.getTime(); // Get millisecond timestamp

newDate = new Date (datestamp + (1000 * 60 * 60 * 24 * parseInt (daysToAdd))); // Add "daysToAdd" days to the date

alert (newDate);

It's not daysToAdd days away...

Any help is greatly appreciated. I wrote a version not using the Date () object, but rather an array of the days in each month, and then subtracting each month until "day" was below 31, etc. It's a lot less efficient than this method though :P

I have been trying to develop a script that creates a slideshow that adds hyperlinks to the images.

I'm a beginner at Javascript, so I've made a bastardisation of 3 different scripts I've found that, by my reckoning, should work.

This is the slideshow code:
Code:

window.onload = initAll;

var gallery_url = new Array('<a href="http://www.optionstradingaustralia.com.au" target=_blank>', '<a href="http://home.iprimus.com.au/thebyrnes5/splats/index.html">')
var thisUrl = 0;

var gallery = new Array("portfolio_ota.jpg", "portfolio_bashbrothers.jpg");
var thisImage = 0;

var gallery_title = new Array("Options Trading Australia Website", "The Bash Brothers Website");
var thisTitle = 0;

var gallery_number = new Array("1", "2");
var thisNumber = 0;

function initAll() {
document.getElementById("previous").onclick = processPrevious;
document.getElementById("next").onclick = processNext;
}
	
function processPrevious () {
if (thisUrl == 0) {
thisUrl = gallery_url.length;
}
thisImage--;
document.getElementById("view_portfolio").src = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';
document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
return false;
}
	
function processNext () {
thisImage++;
if (thisUrl == gallery_url.length) {
thisUrl = 0;
}
document.getElementById("view_portfolio").src = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';
document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
return false;
}

I know that for the most part, this script works. It was only when I tried to add the component that involved adding a hyperlink that it broke. The bit of code in the HTML that it directly affects is <div id="view_portfolio"> &nbsp; </div>

Does anyone know why the javascript doesn't work? I have a feeling it's because I haven't applied the id tag in the HTML properly, but I don't know what exactly is wrong about it. I am hoping someone here can shed some light on the situation!

The gallery I have made so far is at http://www.clarebyrnedesign.com.au/portfolio.html, except that at the moment, the images don't show. I've attached the javascript & html code.

Thanks!