|
JavaScript - Loop Through Form Elements Wiith An Id
Hi 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 } Similar TutorialsI 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>
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? 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 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. 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! 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 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'm in need of some help. I have a form that I want to clone and add up to 5 duplicates with slight changes. The changes a Add a second question and another set of related radio buttons for only the duplicates. Change the title in the Header to increment by 1 ex. Header 1, Header 2... I also would like to make the form elements "id" and "names" unique. Also, continue to use the add and remove button at the bottom. I hope this is doable. Any help will be appreciated. I have included my existing code. NOTE: for a visual, I mocked up the the original form and 1 copy of the fields in the html, not to be used. Code: <!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>
<title></title>
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
var newElem = $('#section' + num).clone().attr('id', 'section' + newNum);
newElem.children(':first').attr('id', 'first' + newNum).attr('name', 'first' + newNum).val('');
newElem.children(':first').attr('id', 'last' + newNum).attr('name', 'last' + newNum).val('');
newElem.children(':first').attr('id', 'phone' + newNum).attr('name', 'phone' + newNum).val('');
newElem.children(':first').attr('id', 'email' + newNum).attr('name', 'email' + newNum).val('');
newElem.children(':first').attr('id', 'yes' + newNum).attr('name', 'yes' + newNum).val('');
newElem.children(':first').attr('id', 'no' + newNum).attr('name', 'no' + newNum).val('');
$('#section' + num).after(newElem);
$('#btnDel').attr('disabled','');
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#section' + num).remove(); // remove the last element
$('#btnAdd').attr('disabled',''); // enable the "add" button
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
</script>
<form id="myForm">
<div id="section1" style="margin-bottom:4px; border-bottom:1px solid #000; width: 400px;" class="clonedInput"> <br>
<br>
<div style=" font-weight:bold; border: 1px solid #000; padding:4px;background:#CCC; font-size:18px; margin-bottom:5px;">Header</div>
First:
<input type="text" name="first1" id="first1" />
<br>
<br>
Last:
<input type="text" name="last1" id="last1" />
<br>
<br>
<br />
<div style=" font-weight:bold;padding:4px;">Header 2</div>
<div>Show this question and radios on load of page.</div>
<div>
<input type="radio" id="yes1" class="eRad" name="yes1" value="" />
<label class="" for="yes">Yes</label>
<input type="radio" id="no1" class="eRad" name="no1" value="" />
<label class="" for="no">No</label>
</div>
Phone:
<input type="text" name="phone1" id="phone1" />
<br>
<br>
Email:
<input type="text" name="email1" id="email1" />
</div>
<div id="section1" style="margin-bottom:4px; border-bottom:1px solid #000; width: 400px;" class="clonedInput"> <br>
<br>
<div style=" font-weight:bold; border: 1px solid #000; padding:4px;background:#CCC; font-size:18px; margin-bottom:5px;">Header 2 (increment this number)</div>
<div>Show this new question and radios on all copies</div>
<div>
<input type="radio" id="yes_a2" class="eRad" name="yes_a2" value="" />
<label class="" for="yes">Yes</label>
<input type="radio" id="no_a2" class="eRad" name="no_a2" value="" />
<label class="" for="no">No</label>
</div>
First:
<input type="text" name="first2" id="first2" />
<br>
<br>
Last:
<input type="text" name="last2" id="last2" />
<br>
<br>
<br />
<div style=" font-weight:bold;padding:4px;">Sub Header 2 (increment this number)</div>
<div>Show this question and radios on load of page.</div>
<div>
<input type="radio" id="yes_a2" class="eRad" name="yes_a2" value="" />
<label class="" for="yes">Yes</label>
<input type="radio" id="no_a2" class="eRad" name="no_a2" value="" />
<label class="" for="no">No</label>
</div>
Phone:
<input type="text" name="phone2" id="phone2" />
<br>
<br>
Email:
<input type="text" name="email2" id="email2" />
</div>
<div style="margin-top:10px;">
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
</form>
</body>
</html>
-Cheers Hi all I have a form with one or more DIV elements inside it. When I try to count form elements I get result=0? How is this possible? See the example: Code:
<html>
<head>
<script language="javascript">
function Count()
{
alert(document.frm1.elements.length);
for(i=0; i<document.frm1.elements.length; i++)
{
alert(document.frm1.elements[i].name);
}
}
</script>
</head>
<body>
<form id="frm1" name="frm1">
<div id="div1" name="div1">.</div>
</form>
<input type="button" onclick="Count();" />
</body>
</html>
If I put other element (textbox) inside the form, the count result is correct. Is DIV not an element?! How can I count one or more DIV and inner DIV's? Thanks for your help. Z. Guys, For some reason my script only works when I have at lease two checkboxes. To simulate the problem just run it once with two html input checkbox elements -> check one checkbox and press submit -> it works -> Now remove one input checkbox field and check the remaining checkbox & submit -> Bamm doesn't work... What am I doing wrong ? Code: <html>
<head>
<script>
function Check(chk)
{
for (i=0; i < chk.length; i++) chk[i].checked=document.ListActionForm.Check_ctr.checked ;
}
function desubmit()
{
if(get_args()==false) {alert("nothing_selected");return false;}
if(labelling(true)) return false;
}
function labelling(s) {return true;}
function get_args()
{
s=chkboxa2str(document.ListActionForm['listaction[]']);
if(s)alert(s);
if(s.length<8)return false;
else return s;
}
function chkboxa2str(chkbox_a) {
var list = "";
for(var i = 0; i < chkbox_a.length; i++){ if(chkbox_a[i].checked) { list += chkbox_a[i].value + " "; } }
return list;
}
</script>
</head>
<body>
<form action="?h=1296078874" method="post" name="ListActionForm" onsubmit="return desubmit()">
<input type='checkbox' name='listaction[]' value='2010102909103530'> Testbox 1<br>
<input type='checkbox' name='listaction[]' value='2010102909103532'> Testbox 2<br>
<input type="Submit" name="Submit" value="Versturen" >
</form>
</body>
</html>
Hi all, I had posted earlier on the NaN issue. I have worked some more on my test file. Basically I want the user to select an option depending on whether he/she has Paracetamol in syrup or drops form. Once this is selected, automatically a different div for syrup or for drops should be seen depending on what the user selected earlier. After this on pushing the calculate button, the output should be appropriate depending on the strength of the solution either for drops or syrup. I have put together what I think code that should work but it stubbornly refuses to do otherwise. I have attached the relevant file. If it doesn't work, obviously there is something wrong but what it is eludes me. Any help will be appreciated greatly, Thanks, I wanted to know if document.getElementById works while accessing form elements. I tried doing this just for testing purposes This code doesnt work function validateForm() { var val = document.getElementById("id_login").getAttribute("value"); alert(val); return false; } but this does function validateForm() { alert(document.myForm.text_login.value ); return false; } Why doesnt document.getElementByid work with form objects.it works with all non form HTML objects.. I am very new to javascript. I have a problem getting to any element from this form generated by the jsp page using struts. Please show me how to get to item[0].totalAmount for example, so that I can create a function to calculate the calculateTotal(). So far, when I do the alert, it is only valid up to document.myForm.item; the document.myForm.item[0] is invalid according to the alert. Any help is very much appreciated. function calculateTotal(){ alert(document.myForm.item); } <form name="myForm" method="post" action="/myAction.do"> <table id="display" border="1"> <tr> <th scope="col" id="totalAmount">Total Amount</th> <th scope="col" id="adjustmentAmount>Adjustment Amount</th> <th scope="col" id="newAmount">NewAmount</th> </tr> <tr> <td><input type="text" name="item[0].totalAmount" id="totalAmount" value="100" readonly="readonly"></td> <td><input type="text" name="item[0].adjustmentAmount" id="adjustmentAmount" value="" onblur="javascript:calculateTotal();" readonly="readonly"></td> <td><input type="text" name="item[0].newAmount" id="newAmount" value="" readonly="readonly"></td> </tr> <tr> <td><input type="text" name="item[1].totalAmount" id="totalAmount" value="350" readonly="readonly"></td> <td><input type="text" name="item[1].adjustmentAmount" id="adjustmentAmount" value="" onblur="javascript:calculateTotal();" readonly="readonly"></td> <td><input type="text" name="item[1].newAmount" id="newAmount" value="" readonly="readonly"></td> </tr> </table> </form> Hi I've got about 40 check-boxes on my 1 form. These check-boxes all have names (obviously) but they are NOT all unique names. The number of UNIQUE names on my form is probably around 8 or 9 (the actual number is NOT important). Because some check-boxes use the same names as other. It's set up this way, please don't ask me to change it, I can't change it. What's the syntax/method for looping through all the names? I was thinking I should do maybe a "for" loop; Code: for (var i = 0; i < fieldName.length; i++) But I don't know how to hold a variable of the unique names to start with. Can someone help please? |
|||||||