|
JavaScript - Help With A 'for' Loop Adding Form Elements
I am trying to develop a function that creates a certain number of form elements based on a certain number that a user inputs. It does not do what I want it to do (obviously). The problem lies within the TextBoxAppear() function. The function worked when I tested it by adding just text (document.getElementByID('leftcolumn').innerHTML = "<p>test function</p>" so I know for a fact whatever I added to the function is the problem. What has been added to the function and needs fixing is in BOLD
Code: <!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Exercise 4</title>
<style type = "text/css">
#leftcolumn { width: 300px; border: 1px solid red; float: left}
#rightcolumn { width: 300px; border: 1px solid red; float: left}
</style>
<script>
function start()
{
var button = document.getElementById( "submitButton" );
button.addEventListener( "click", TextBoxAppear, false );
}
function TextBoxAppear()
{
var numberOfValuesInput = document.getElementByID( 'NumberOfValuesField' );
var numberOfValues = parseFloat( numberOfValuesInput.value );
var textBoxCreation = "<form action ="http://www.deitel.com"><p>";
for ( var i = 1; i < numberOfValues; ++i )
{
textBoxCreation += "<label>Value" + i + ":<input id = 'Value" + i + "' type = 'text'></label>";
}
textBoxCreation += "<input id = "calculateButton" type = "button" value = "Calculate"></p></form>
document.getElementById('leftcolumnn').innerHTML = textBoxCreation;
}
window.addEventListener( "load", start, false );
</script>
</head>
<body>
<form action ="http://www.deitel.com">
<p><label>Number of values to be calculated:
<input id = "numberOfValuesField" type = "text"></label>
<input id = "submitButton" type = "button" value = "Submit"></p>
</form>
<div id ="leftcolumn"><p>test left column</p></div>
<div id ="rightcolumn"><p>test right column</p></div>
</body>
</html>
Similar TutorialsHi all. I have a form named "theForm". How can I loop through this form elements that have an "id" ATTRIBUTE to them and then populate my ids array? var ids = new Array; for(i=0; i<document.theForm.elements.length; i++) { IF ELEMENT HAS AN ID ATTRIBUTE POPULATE ids array } Ok so I have these elements on my page: Code: <input type="text" size="5" name="val[]" value="'.$NotaMaxima.'"> I want to loop through each one and take their number add it to another number set in a variable elsewhere and then alert that number. The amount of these elements on the page changes constantly, so I can't count on that. It has to loop through each one to find the values. I tried this: Code: var els,i,asig;
els=document.getElementsByTagName('val');
for(i in els) {
asig = parseInt(els[i].value) - parseInt(asig);
}
alert(asig);
But no go, any ideas? im creating a completely javascript only game. Your doge, and your trying to stay away from falling rocks. I have doge, and i can move him. I have only 1 falling rock on the canvas at once. I need to add more rocks falling at once, but i don't know how to go about doing it. here is my code: document.onkeydown = checkKey; //listener for left or right arrow key function checkKey(e) { e = e || window.event; if (e.keyCode == '37') { left(); }else if (e.keyCode == '39') { right(); } } function draw(image, x, y){ //for drawing to canvas var canvas = document.getElementById("game"); var context = canvas.getContext("2d"); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, x, y); }; imageObj.src = image; } x = 0; //doge starting location y = 340; draw("doge.png",x,y); function left(){ draw("clear.png", x, y); draw("doge.png", x-50, y); x = x-50 } function right(){ draw("clear.png", x-20, y); draw("doge.png", x+50, y); x = x+50 } x1 = Math.floor((Math.random() * 600) + 1); y1 = -20; //chooses random location of rock function main(){ draw("clearrock.png",x1,y1); draw("doge.png",x,y); draw("rock.png",x1,y1+20); y1 = y1+20 if(y1 === 500){ y1 = -20; x1 = (Math.floor((Math.random() * 60) + 1))*10; //chooses new random location of rock } if(x1 > x-30 && x1 < x+140){ if(y1 === y-20){ alert("Dead doge"); clearInterval(mainint); } } } var mainint = setInterval(function(){main()}, 100); //game ticks Hi again, I have written the follow code. It is meant to (when finished) output a table showing each member of the array PEOPLE. There Income ,there Tax bracket and there finally there total tax paid. The calulations in the if-else statements are correct. I have to create a loop that will go through the if else statements equal to the amount of the people in the array (This is no problem I have done this earlier) My problem is when I try to add each element (PEOPLE) to the table or there indivual tax outcomes. Can I create a loop and increment in the elements each iteration to put on the table?(for there names) As I am not meant to store each iteration,it is to write to the table each time. This is the code I'm working on with out the loop. [CODE]<html> <head> <script> PEOPLE = new Array ('Mr Dobbaleana','David Lai','Richard Watson','Leigh Brookshaw','Stijn Dekeyser'); BRACKET_LIMITS = new Array (0,6000,37000,80000,180000); MIN_TAX = new Array (0.00,0.00,4650.00,17550.00,54550.00); TAX_RATES = new Array (0.00,0.15,0.30,0.37,0.45); var taxBracket =0; var taxToPay =0; document.writeln ('<table border="2">'); document.writeln ('<tr>'); document.writeln ('<th>'+('Name')+'</th>'); document.writeln ('<th>'+('Income')+'</th>'); document.writeln ('<th>'+('Bracket')+'</th>'); document.writeln ('<th>'+('Tax')+'</th>'); document.writeln ('</tr>'); var currentPersonInRow = parseInt(prompt('Enter your income')); if (currentPersonInRow <= BRACKET_LIMITS[1]){ taxBracket=BRACKET_LIMITS.indexOf(0); taxToPay = (currentPersonInRow-BRACKET_LIMITS[0])*TAX_RATES[0]+MIN_TAX[0]; // will give total taxable income } else if (currentPersonInRow<=BRACKET_LIMITS[2]){ taxBracket=BRACKET_LIMITS.indexOf(6000); taxToPay = (currentPersonInRow-BRACKET_LIMITS[1])*TAX_RATES[1]+MIN_TAX[1]; // will give total taxable income } else if (currentPersonInRow<=BRACKET_LIMITS[3]){ taxBracket=BRACKET_LIMITS.indexOf(37000); taxToPay = (currentPersonInRow-BRACKET_LIMITS[2])*TAX_RATES[2]+MIN_TAX[2]; // will give total taxable income } else if (currentPersonInRow<=BRACKET_LIMITS[4]){ taxBracket=BRACKET_LIMITS.indexOf(80000); taxToPay = (currentPersonInRow-BRACKET_LIMITS[3])*TAX_RATES[3]+MIN_TAX[3]; // will give total taxable income } else { taxBracket=BRACKET_LIMITS.indexOf(180000); taxToPay = (currentPersonInRow-BRACKET_LIMITS[4])*TAX_RATES[4]+MIN_TAX[4]; // will give total taxable income } document.writeln ('<tr>'); document.writeln ('<td>'+(PEOPLE[0])+'</td>'); document.writeln ('<td>'+('$')+(currentPersonInRow)+'</td>'); document.writeln ('<td>'+(taxBracket)+'</td>'); document.writeln ('<td>'+('$')+(taxToPay)+'</td>'); document.writeln ('</tr>'); </script> </head> <body> </body> </html> [/ICODE] OK this is the code I wrote and it works but doesnt meet the assigment critera. Code: <html>
<head>
<script>
PEOPLE = new Array ('Mr Dobbaleana','David Lai','Richard Watson','Leigh Brookshaw','Stijn Dekeyser');
BRACKET_LIMITS = new Array (0,6000,37000,80000,180000);
MIN_TAX = new Array (0.00,0.00,4650.00,17550.00,54550.00);
TAX_RATES = new Array (0.00,0.15,0.30,0.37,0.45);
var personZero = parseFloat( prompt ((' Enter income for ')+(PEOPLE[0]),('0.00')));
var personOne = parseFloat (prompt ((' Enter income for ')+(PEOPLE[1]),('0.00')));
var personTwo = parseFloat (prompt ((' Enter income for ')+(PEOPLE[2]),('0.00')));
var personThree = parseFloat (prompt ((' Enter income for ')+(PEOPLE[3]),('0.00')));
var personFour = parseFloat(prompt ((' Enter income for ')+(PEOPLE[4]),('0.00')));
if ((personZero >= BRACKET_LIMITS[0])&&(personZero <= BRACKET_LIMITS[1]))
{
var cal1= (personZero-BRACKET_LIMITS[0]);
var cal2= (cal1*TAX_RATES[0]);
var totalTaxPaid = (cal2+MIN_TAX[0]);
var taxBracketOfPeople1=0;
alert(totalTaxPaid);
}
if ((personZero >= BRACKET_LIMITS[1])&&(personZero <= BRACKET_LIMITS[2]))
{
var cal1= (personZero-BRACKET_LIMITS[1]);
var cal2= (cal1*TAX_RATES[1]);
var totalTaxPaid = (cal2+MIN_TAX[1]);
var taxBracketOfPeople1=1;
alert(totalTaxPaid);
}
if ((personZero >= BRACKET_LIMITS[2])&&(personZero <= BRACKET_LIMITS[3]))
{
var cal1= (personZero-BRACKET_LIMITS[2]);
var cal2= (cal1*TAX_RATES[2]);
var totalTaxPaid = (cal2+MIN_TAX[2]);
var taxBracketOfPeople1=2;
alert(totalTaxPaid);
}
if ((personZero >= BRACKET_LIMITS[3])&&(personZero <= BRACKET_LIMITS[4]))
{
var cal1= (personZero-BRACKET_LIMITS[3]);
var cal2= (cal1*TAX_RATES[3]);
var totalTaxPaid = (cal2+MIN_TAX[3]);
var taxBracketOfPeople1=3;
alert(totalTaxPaid);
}
if ((personZero >= BRACKET_LIMITS[4]))
{
var cal1= (personZero-BRACKET_LIMITS[4]);
var cal2= (cal1*TAX_RATES[4]);
var totalTaxPaid = (cal2+MIN_TAX[4]);
var taxBracketOfPeople1=4;
alert(totalTaxPaid);
}
if ((personOne >= BRACKET_LIMITS[0])&&(personOne <= BRACKET_LIMITS[1]))
{
var cal1= (personOne-BRACKET_LIMITS[0]);
var cal2= (cal1*TAX_RATES[0]);
var totalTaxPaid1 = (cal2+MIN_TAX[0]);
var taxBracketOfPeople2=0;
alert(totalTaxPaid1);
}
if ((personOne >= BRACKET_LIMITS[1])&&(personOne <= BRACKET_LIMITS[2]))
{
var cal1= (personOne-BRACKET_LIMITS[1]);
var cal2= (cal1*TAX_RATES[1]);
var totalTaxPaid1 = (cal2+MIN_TAX[1]);
var taxBracketOfPeople2=1;
alert(totalTaxPaid1);
}
if ((personOne >= BRACKET_LIMITS[2])&&(personOne <= BRACKET_LIMITS[3]))
{
var cal1= (personOne-BRACKET_LIMITS[2]);
var cal2= (cal1*TAX_RATES[2]);
var totalTaxPaid1 = (cal2+MIN_TAX[2]);
var taxBracketOfPeople2=2;
alert(totalTaxPaid1);
}
if ((personOne >= BRACKET_LIMITS[3])&&(personOne <= BRACKET_LIMITS[4]))
{
var cal1= (personOne-BRACKET_LIMITS[3]);
var cal2= (cal1*TAX_RATES[3]);
var totalTaxPaid1 = (cal2+MIN_TAX[3]);
var taxBracketOfPeople2=3;
alert(totalTaxPaid1);
}
if ((personOne >= BRACKET_LIMITS[4]))
{
var cal1= (personOne-BRACKET_LIMITS[4]);
var cal2= (cal1*TAX_RATES[4]);
var totalTaxPaid1 = (cal2+MIN_TAX[4]);
var taxBracketOfPeople2=4;
alert(totalTaxPaid1);
}
if ((personTwo >= BRACKET_LIMITS[0])&&(personTwo <= BRACKET_LIMITS[1]))
{
var cal1= (personTwo-BRACKET_LIMITS[0]);
var cal2= (cal1*TAX_RATES[0]);
var totalTaxPaid2 = (cal2+MIN_TAX[0]);
var taxBracketOfPeople3=0;
alert(totalTaxPaid2);
}
if ((personTwo >= BRACKET_LIMITS[1])&&(personTwo <= BRACKET_LIMITS[2]))
{
var cal1= (personTwo-BRACKET_LIMITS[1]);
var cal2= (cal1*TAX_RATES[1]);
var totalTaxPaid2 = (cal2+MIN_TAX[1]);
var taxBracketOfPeople3=1;
alert(totalTaxPaid2);
}
if ((personTwo >= BRACKET_LIMITS[2])&&(personTwo <= BRACKET_LIMITS[3]))
{
var cal1= (personTwo-BRACKET_LIMITS[2]);
var cal2= (cal1*TAX_RATES[2]);
var totalTaxPaid2 = (cal2+MIN_TAX[2]);
var taxBracketOfPeople3=2;
alert(totalTaxPaid2);
}
if ((personTwo >= BRACKET_LIMITS[3])&&(personTwo <= BRACKET_LIMITS[4]))
{
var cal1= (personTwo-BRACKET_LIMITS[3]);
var cal2= (cal1*TAX_RATES[3]);
var totalTaxPaid2 = (cal2+MIN_TAX[3]);
var taxBracketOfPeople3=3;
alert(totalTaxPaid2);
}
if ((personTwo >= BRACKET_LIMITS[4]))
{
var cal1= (personTwo-BRACKET_LIMITS[4]);
var cal2= (cal1*TAX_RATES[4]);
var totalTaxPaid2 = (cal2+MIN_TAX[4]);
var taxBracketOfPeople3=4;
alert(totalTaxPaid2);
}
if ((personThree >= BRACKET_LIMITS[0])&&(personThree <= BRACKET_LIMITS[1]))
{
var cal1= (personThree-BRACKET_LIMITS[0]);
var cal2= (cal1*TAX_RATES[0]);
var totalTaxPaid3 = (cal2+MIN_TAX[0]);
var taxBracketOfPeople4=0;
alert(totalTaxPaid3);
}
if ((personThree >= BRACKET_LIMITS[1])&&(personThree <= BRACKET_LIMITS[2]))
{
var cal1= (personThree-BRACKET_LIMITS[1]);
var cal2= (cal1*TAX_RATES[1]);
var totalTaxPaid3 = (cal2+MIN_TAX[1]);
var taxBracketOfPeople4=1;
alert(totalTaxPaid3);
}
if ((personThree >= BRACKET_LIMITS[2])&&(personThree <= BRACKET_LIMITS[3]))
{
var cal1= (personThree-BRACKET_LIMITS[2]);
var cal2= (cal1*TAX_RATES[2]);
var totalTaxPaid3 = (cal2+MIN_TAX[2]);
var taxBracketOfPeople4=2;
alert(totalTaxPaid3);
}
if ((personThree >= BRACKET_LIMITS[3])&&(personThree <= BRACKET_LIMITS[4]))
{
var cal1= (personThree-BRACKET_LIMITS[3]);
var cal2= (cal1*TAX_RATES[3]);
var totalTaxPaid3 = (cal2+MIN_TAX[3]);
var taxBracketOfPeople4=3;
alert(totalTaxPaid3);
}
if ((personThree >= BRACKET_LIMITS[4]))
{
var cal1= (personThree-BRACKET_LIMITS[4]);
var cal2= (cal1*TAX_RATES[4]);
var totalTaxPaid3 = (cal2+MIN_TAX[4]);
var taxBracketOfPeople4=4;
alert(totalTaxPaid3);
}
if ((personFour >= BRACKET_LIMITS[0])&&(personFour <= BRACKET_LIMITS[1]))
{
var cal1= (personFour-BRACKET_LIMITS[0]);
var cal2= (cal1*TAX_RATES[0]);
var totalTaxPaid4 = (cal2+MIN_TAX[0]);
var taxBracketOfPeople5=0;
alert(totalTaxPaid4);
}
if ((personFour >= BRACKET_LIMITS[1])&&(personFour <= BRACKET_LIMITS[2]))
{
var cal1= (personFour-BRACKET_LIMITS[1]);
var cal2= (cal1*TAX_RATES[1]);
var totalTaxPaid4 = (cal2+MIN_TAX[1]);
var taxBracketOfPeople5=1;
alert(totalTaxPaid4);
}
if ((personFour >= BRACKET_LIMITS[2])&&(personFour <= BRACKET_LIMITS[3]))
{
var cal1= (personFour-BRACKET_LIMITS[2]);
var cal2= (cal1*TAX_RATES[2]);
var totalTaxPaid4 = (cal2+MIN_TAX[2]);
var taxBracketOfPeople5=2;
alert(totalTaxPaid4);
}
if ((personFour >= BRACKET_LIMITS[3])&&(personFour <= BRACKET_LIMITS[4]))
{
var cal1= (personFour-BRACKET_LIMITS[3]);
var cal2= (cal1*TAX_RATES[3]);
var totalTaxPaid4 = (cal2+MIN_TAX[3]);
var taxBracketOfPeople5=3;
alert(totalTaxPaid4);
}
if ((personFour >= BRACKET_LIMITS[4]))
{
var cal1= (personFour-BRACKET_LIMITS[4]);
var cal2= (cal1*TAX_RATES[4]);
var totalTaxPaid4 = (cal2+MIN_TAX[4]);
var taxBracketOfPeople5=4;
alert(totalTaxPaid4);
}
</script>
</head>
<body>
<script>
document.writeln ('<table border="2">');
document.writeln ('<tr>');
document.writeln ('<th>'+('Name')+'</th>');
document.writeln ('<th>'+('Income')+'</th>');
document.writeln ('<th>'+('Bracket')+'</th>');
document.writeln ('<th>'+('Tax')+'</th>');
document.writeln ('</tr>');
document.writeln ('<tr>');
document.writeln ('<td>'+(PEOPLE[0])+'</td>');
document.writeln ('<td>'+('$')+(personZero)+'</td>');
document.writeln ('<td>'+(taxBracketOfPeople1)+'</td>');
document.writeln ('<td>'+('$')+(totalTaxPaid)+'</td>');
document.writeln ('</tr>');
document.writeln ('<tr>');
document.writeln ('<td>'+(PEOPLE[1])+'</td>');
document.writeln ('<td>'+(personOne)+'</td>');
document.writeln ('<td>'+(taxBracketOfPeople2)+'</td>');
document.writeln ('<td>'+(totalTaxPaid1)+'</td>');
document.writeln ('</tr>');
document.writeln ('<tr>');
document.writeln ('<td>'+(PEOPLE[2])+'</td>');
document.writeln ('<td>'+(personTwo)+'</td>');
document.writeln ('<td>'+(taxBracketOfPeople3)+'</td>');
document.writeln ('<td>'+(totalTaxPaid2)+'</td>');
document.writeln ('</tr>');
document.writeln ('<tr>');
document.writeln ('<td>'+(PEOPLE[3])+'</td>');
document.writeln ('<td>'+(personThree)+'</td>');
document.writeln ('<td>'+(taxBracketOfPeople4)+'</td>');
document.writeln ('<td>'+(totalTaxPaid3)+'</td>');
document.writeln ('</tr>');
document.writeln ('<tr>');
document.writeln ('<td>'+(PEOPLE[4])+'</td>');
document.writeln ('<td>'+(personFour)+'</td>');
document.writeln ('<td>'+(taxBracketOfPeople5)+'</td>');
document.writeln ('<td>'+(totalTaxPaid4)+'</td>');
document.writeln ('</tr>');
document.writeln('</table>');
</script>
</body>
</html>
Hope that wasnt to confusing Thanks heaps Shaynedarcy Years ago I created HTML that employs checkboxes and textboxes. I am now writing JS with the intention of adding flexibility and limiting redundancy. I am not sure I truly understand how to correctly interact the two though. For example, one of my scripts have arrays that contain the names of the checkboxes and textboxes, with a 'for' loop to document.write() them to references within the HTML code. This does not seem to be working for me though. Here is what I have thus far (in short): Code: <script language="javascript">
var teamNames = new Array(3);
teamNames[0]="South Africa";
teamNames[1]="Mexico";
teamNames[2]="Uruguay";
for (i=0; i<=31; i++) {
document.write("<p>" + teamNames[i] + "<\/p>");
}
</script>
</head>
<body>
<tr><td>Jun 11</td><td><input type="checkbox"
name="teamNames[0]" value="teamAbbr[0]"></td>
</body>
I've left out a lot of the code (to include the teamAbbr array, but you get the points. I've tried moving the JS within the HTML body and playing with the reference syntax, but nothing so far. Any help would be great! I wrote js functions to reset a php form (multiple questions). The below works: Code: function resetForm(){
resetGroup(document.forms[0].answer1);
resetGroup(document.forms[0].answer2);
}
Answer1 and answer2 are the elements of $_POST array. (<input name="answer1"> in php). In this example, I tried with only two questions, but I have up to 35 questions in one form. Instead of writing the above resetGroup() 35 times, I want to for-loop it. I tried Code: function resetForm(){
for (var i=1; i<3; i++){
resetGroup(document.forms[0]."answer"+i);
}
That didn't work. Could someone help me to make the loop work? Or would someone have better or simpler idea? Thanks. Hiya I have created a small html with some javascript that runs through and picks up <a hrefs> and opens the links in new tabs (to check raw html for dead links) It also pastes the links on the same page, thing is, in my loop as you'll see below it pastes the link then I try to <br /> to display the next underneath like so (on the same page): Link Link Basically it works perfect for link 1 but it doesnt loop back around and grab the 2nd link. Ideally I would like numbered links with a total at the bottom, I've been sitting trying to do it for about 3 hours now Heres my code, will explain much faster if you run it: Code: <HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
<!--
function open_links()
{
document.getElementById("htmlDiv").innerHTML = document.getElementById("htmlArea").value;
a = document.getElementById("htmlDiv").getElementsByTagName("a");
for(i=0; i < a.length; i++)
{
window.open(a[i].href);
var divReport = document.getElementById("report");
report.innerHTML = (a[i].href);
document.report.write(item );
document.write("<br\/>");
}
}
-->
</script>
</HEAD>
<BODY>
<div>
<textarea id="htmlArea" cols=50 rows=20></textarea>
<button onclick="open_links();">Check Links</button>
<div style="font-family: Lucida Console; color: rgb(255, 255, 255); font-size: 12px; background: none repeat scroll 0% 0% black; width: 523px;" id="report">
</div>
</div>
<div id="htmlDiv" style="display: none;"></div>
</BODY>
</HTML>
If anyone has an idea why it wont run I'd be greatful, because what I can do is make it work fine but it makes a new page, I want it on the same page below the text area Thanks in advance for any help! Liam Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! Hello Coding Forums, I have a list of pub skittle players and I want a definite gap after two iterations. So.. The Red Lion ...... John and his Mrs The Two Pigs ......Martin and his mate The next pub ...... the next pair The next pub ...... the next pair Below is what I have so far : Code: var pubs = new Array('The Red Lion','The White Hart','The Cross Keys','North End Club','The Three Crowns','The British Legion','The Hare and Hounds','The Royal Oak');
var teamMembers = new Array ('Joan & Richard','Steve & Colin','Brian & Martin','Alice & Moyra',' Kirsty & Ben',' Lorri & Mark','Paul & Andy','Finchey & Sue');
for (var cplCount = 0; cplCount < teamMembers.length; cplCount = cplCount + 1)
{
document.write('The venue will be ' + pubs[cplCount] + ' and the players are ' + teamMembers[cplCount] + '<BR>');
}
As you can see it's one big list at the moment. Any help would be greatly appreciated Morris L hello, I am trying to add a window event listener on some links in a loop instead of doing them one by one. I've tried Code: function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=changeIframeSrc(src, 'solid',1, event);
document.links[i].onmouseout=changeIframeSrc(null,'none',0,event);
}
}
and Code: function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=function(a1,a2,a3,a4){
return function(){changeIframeSrc(a1,a2,a3,a4);}
}(src, 'solid',1, event);
}
}
but the event keeps coming up undefined. Any ideas on how to do this? I'm using the jquery plugin found here. I love the look but I have a form that uses functions like this: Code: function cascadeCountry(value) {
if (document.getElementById("srchlookstate_province") != null) {
http.open('get', 'cascade_search.php?a=country&v=' + value );
document.getElementById('srchlookstate_province').innerHTML=" "+loadingTag;
http.onreadystatechange = handleResponse;
http.send(null);
}
}
So, when you select a country and it retrieves the state/province text input, the jquery css is not applied to it. Is there something I need to add to the code above or to the jquery initialization code he Code: $(function() {
$("form.jqtransform").jqTransform();
});
Hi, The following code adds an element to a page when a new address is inputted. Is there a way to remove all added elements with a Clear All button? I have a "Clear All" button with id="ClearAddresses" but I don't know how to remove all created elements - the code here only removes one at a time, since the element is created when the "Search" button is clicked. Code: var Dom = {
get: function(el)
{
if (typeof el === 'string')
return document.getElementById(el);
else
return el;
},
add: function(el, dest)
{
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
remove: function(el)
{
var el = this.get(el);
el.parentNode.removeChild(el);
}
};
var Event = {
add: function()
{
if (window.addEventListener)
{
return function(el, type, fn)
{
Dom.get(el).addEventListener(type, fn, false);
};
}
else if (window.attachEvent)
{
return function(el, type, fn)
{
var f = function()
{
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};
Event.add(window, 'load', function(){
var i = 0;
Event.add('addressSearch', 'click', function()
{
//This is a hack way of doing things...thanks asyncronous callbacks... /sarcasm
add_visited_address();
});
});
var visited_address_array = Array();
var address_check=0;
var MAX_ADDRESS_CHECKS=50;
function in_visited_address_array(new_entry)
{
for(var i=0; i<visited_address_array.length; i++)
{
if(new_entry == visited_address_array[i])
return true;
}
//otherwise...
return false;
}
function add_visited_address()
{
if(addressSearchAddress !=null)
{
var el = document.createElement('span');
var el_remove = document.createElement('span');
var new_entry = addressSearchAddress + ' : [' + addressSearchRadius + ']';
var new_address = addressSearchAddress;
var new_radius = addressSearchRadius;
el.innerHTML = '<span class=\"address-text\">' + new_entry + '</span><br>';
el_remove.innerHTML = "<a onMouseOver=\"rollover('address_remove')\" onMouseOut=\"rollout('address_remove')\" style='cursor:pointer;'>" +
"<img src=\"images/tabs-icons/normal-address_remove.png\" name='address_remove' title='remove' alt='remove'></a> ";
if(!in_visited_address_array(new_entry))
{
visited_address_array.push(new_entry);
Dom.add(el_remove, 'AddressesVisited');
Dom.add(el, 'AddressesVisited');
Event.add(el, 'click', function(e)
{
document.getElementById('address').value = new_address;
document.getElementById('radius').value = new_radius;
ClickGeocode();
});
Event.add(el_remove, 'click', function(e)
{
Dom.remove(el);
Dom.remove(this);
});
address_check=0;
}
else if(visited_address_array[visited_address_array.length-1] == new_entry && address_check<MAX_ADDRESS_CHECKS)
{
setTimeout("add_visited_address();", 100);
address_check++;
}
}
else
setTimeout("add_visited_address();", 50);
}
Hi, I have a working contact form with 3 of the fields requiring validation and they work well. I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them. My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag. Can anyone give me any help and advice as to how to accomplish this? Many thanks Code below.... Code: <script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->
</script
> Code: <form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="54%" class="subHeader">Full Name* </td>
<td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
</tr>
<tr>
<td class="subHeader">Company Name </td>
<td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
</tr>
<tr>
<td class="subHeader">Address</td>
<td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
</tr>
<tr>
<td class="subHeader">Postcode</td>
<td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
</tr>
<tr>
<td class="subHeader">Telephone Number* </td>
<td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
</tr>
<tr>
<td class="subHeader">Mobile Number </td>
<td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
</tr>
<tr>
<td height="25" class="subHeader">Email Address* </td>
<td class="subHeader"><input name="Email" type="text" id="Email" /></td>
</tr>
<tr>
<td height="30" class="subHeader">Status*</td>
<td class="subHeader"><select name="StatusClass" id="StatusClass">
<option selected="selected">Please Choose</option>
<option>Architect</option>
<option>Interior Designer</option>
<option>Private Client</option>
<option>Student</option>
<option>Trade Enquiry</option>
</select> </td>
</tr>
<tr>
<td height="23" class="subHeader">Project*</td>
<td class="subHeader"><select name="Project" size="1" id="Project">
<option selected="selected">Please Choose</option>
<option>Planning Stages</option>
<option>New Build</option>
<option>Refurbishment</option>
<option>Barn Conversion</option>
<option>No project - information only</option>
</select> </td>
</tr>
<tr>
<td height="37" class="subHeader">How did you hear about us?*</td>
<td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
<option selected="selected">Please Choose</option>
<option>Web Search</option>
<option>Grand Designs</option>
<option>Living Etc</option>
<option>Home Building & Renovation</option>
<option>Architect</option>
<option>Friend/Family</option>
<option>Magazine/Editorial</option>
<option>Newspaper Article</option>
<option>Trade Show/Exhibition</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td height="24" class="subHeader">Brochure Request </td>
<td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
</tr>
<tr>
<td class="subHeader">Message</td>
<td class="subHeader"><span class="style4">
<textarea name="Message" id="Message"></textarea>
</span></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
</tr>
<tr>
<td colspan="2" class="subHeader"><em>* Required fields</em></td>
</tr>
</table>
</form>
Hi Folks - I have a form that has an array of input values: <input type="text" name=txtValue[] /> <input type="text" name=txtValue[] /> I do this so I can loop through the values in php... now...that's the easy part... the hard part comes to this: next to each of those boxes is a search button that allows the user to open up a popup window that they can search for an item, and select the item. Once they select the item it should populate that particular input box with the selected item. I can easily do this with a uniquely named input box, but can't seem to figure out how to do it with an array of input boxes... any idea? Hi, I'm pulling my hair out to create a simple function! I am creating an array based on form elements. I then am trying to create an IF (and nested IF) statement to check if the fields are empty and then with the nested IF statement use certain fields to create mathematical functions. So far I have this: function QuantityMWh(form) { var formchk = document.forms[0] for (i = 0; i < formchk.elements.length; i++) { if (formchk.elements[1].value == "" && formchk.elements[2].value == "") { alert("Please fill out all fields.") break } } } It's only checking the first field and not the second, and vice versa. i.e. if only one field has text then it passes. What am I doing wrong? Thanks. Here is the code in question: Code: for (var x = 2; x < 6; x++) {
var form = document.playerAction["action" + proNum];
form[x] = null;
form[x] = z[x-2];
if (Player[x-1].health == 0) { form.splice(x-2,1) }
}
The code retrieves document.playerAction["action1"] (A select input type) and removes options 2-end (there is a max of 6). Then, if a certain player (x-1 causes it to loop 1-4) has a health of 0, it splices out that element). Everything works fine, except I get an error saying that "Object #<an HTMLSelectElement> has no method 'splice' " and it refuses to execute the if. How do I work around this? Hi there I have a form with elements named (& id) 1 through 5 Why can't I loop through all my form elements like this... Code: function toggle(){
for (var i=1;i<=5;i++)
{
var y = document.getElementById(i);
y.style.backgroundColor = '#FFFFFF';
}
}
The error I get is y is null??? If I hard code the id's like this... var y = document.getElementById('2'); it works fine?? Please Help NEWB Hello, I am using a simple form to submit values to another website. This has been working without any problems. I now have added a second form to the page. I have separated the text boxes and duplicated the information from one form to another. The problem is, when I click on the link that use to submit the information, nothing happens. Before the addition of the new form a new window would open with the search that I had submitted. Am I missing something to point to one form or the other? The following is the code that i am using in the form that no longer submits. Thanks in advance for any help. Code: <script language="javascript">
function submitPostLink()
{
document.postlink.submit();
}
</script>
<form action="http://wcca.wicourts.gov/simpleCaseSearch.do;jsessionid=61EFDA464D938EB53461CABB6EFC7D3B.renderHTTP/1.1" name="postlink" method="post" target="_blank">
<input type="hidden" name="partyName.lastName" id="ccapLAST">
<input type="hidden" name="partyName.firstName" id="ccapFIRST">
<input type="hidden" name="partyName.middleName" id="ccapMIDDLE">
<input type="hidden" name="partyName.showMissingMiddleNames" value="true">
<input type="hidden" name="recordsPerPage" value="25"><br>
<a onclick="submitPostLink()" href="#" a>SEARCH</a>
</form>
|
|||||||