|
JavaScript - Need To Get Values From Dynamic Textboxes In An Array And Validate It
Hi all,
I create textboxes dynamically by the following code function addElement() { var contentID = document.getElementById('content'); var newTBDiv = document.createElement('div'); newTBDiv.setAttribute('id','strText'+intTextBox); divname='strText'+intTextBox; newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='divid' +intTextBox name='txtbx[]'/>"; intTextBox = intTextBox + 1; contentID.appendChild(newTBDiv); } It works fine,but i want to get the values and validate it so i use the following code.. var idval=new Array(); for(var i=0;i<intTextBox;i++) { idval[i]=document.getElementById('divid').value; alert(idval[i]); } but it didn`t work out,Any suggestions really helpful. Thankyou. Similar TutorialsI have a piece of JavaScript code that should validate that a username field is not empty or null and that a telephone field is in the correct format using event handler registration. It seems to be validating fine but if there is an error it still manages to submit. HTML Code: <html>
<head>
<script type = "text/javascript" src = "js/validator.js" >
</script>
</head>
<body>
<form id = "decorForm" action = "">
<table border = "0">
<tr>
<th>Username: </th>
<td>
<input type = "text" id = "myUserName" size = "15" maxlength = "15"/>
</td>
</tr>
<tr>
<th>Telephone: </th>
<td>
<input type = "text" id = "telephone" name = "telephone" size = "15" maxlength = "13"/>
<br />
(999)999-9999
</td>
</tr>
<tr>
<td>
<input type = "submit" value = "Submit" />
</td>
<td>
<input type = "reset" value = "Reset" />
</td>
</tr>
</table>
</form>
<script type = "text/javascript" src = "js/validatorr.js" >
</script>
</body>
</html>
JAVASCRIPT (validator.js) Code: function chkUser() {
// Verifies that the UserName field is not empty.
var myUserName = document.getElementById("myUserName");
if (myUserName.value == "" || myUserName.value == null) {
alert ("Please enter a Username!");
return false;
} else {
return true;
}
}
function chkTelephone() {
// Verifies that the Telephone field value is in the correct format.
var tel = document.getElementById("telephone");
var pos = tel.value.search(/^\(\d{3}\)\d{3}-\d{4}$/);
if (pos != 0) {
alert ("Please enter telephone number in the following format: (999)999-9999");
return false;
} else {
return true;
}
}
function chkFields() {
// Verifes all fields and returns boolean to event handler
// The event handler function
if (chkUser() && chkTelephone()) {
return true;
} else {
return false;
}
}
JAVASCRIPT (validatorr.js) Code: //Register the event handlers for validator.js
document.getElementById("decorForm").onSubmit = chkFields;
I am trying to use this as an example. Hi everyone, Is there a shorter and cleaner way of performing the following: The objective is to get the value/input from the first set of textboxes in the form and copy them to other set of textboxes. Outline of the form is as follows: First set of textboxes Company Address City State Zip Country Select number of users -->1 2 3 User 1 Company Address City State Zip Country User 2 Company Div Address1 Address2 City State Zip Country User 3 Company Address City State Zip Country ============================================= At the moment the code looks like this where (comp,div, addra,addrb,city,state,zip and country) are the name attributes of the first set of text boxes and (comp1.....country1,comp2.....country2, comp3....country3) are the name attributes for the textboxes for user 1,2 and 3 respectively. Code: function compAddress(){
document.form.comp1.value = document.form.comp.value;
document.form.div1.value = document.form.div.value;
document.form.addra1.value = document.form.addra.value;
document.form.addrb1.value = document.form.addrb.value;
document.form.city1.value = document.form.city.value;
document.form.state1.value = document.form.state.value;
document.form.zip1.value = document.form.zip.value;
document.form.country1.value = document.form.country.value;
document.form.comp2.value = document.form.comp.value;
document.form.div2.value = document.form.div.value;
document.form.addra2.value = document.form.addra.value;
document.form.addrb2.value = document.form.addrb.value;
document.form.city2.value = document.form.city.value;
document.form.state2.value = document.form.state.value;
document.form.zip2.value = document.form.zip.value;
document.form.country2.value = document.form.country.value;
document.form.comp3.value = document.form.comp.value;
document.form.div3.value = document.form.div.value;
document.form.addra3.value = document.form.addra.value;
document.form.addrb3.value = document.form.addrb.value;
document.form.city3.value = document.form.city.value;
document.form.state3.value = document.form.state.value;
document.form.zip3.value = document.form.zip.value;
document.form.country3.value = document.form.country.value;
Thanks, I have the below form where the user enters the hours and minutes worked on a task. I want to be sure that the total for the form is at least 8 hours. How can I do that? Code: <form method="POST" onSubmit="return validateHours()" name="theForm" > <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form> [ICODE] <html> <head> <title>ABS</title> <?php $j="dove"; ?> <script language="JavaScript" type="text/javascript"> <!-- function checkform ( form ) { if (form.Name.value == "") { alert( "Please enter your email address." ); form.Game.value="<?php echo $j;?>"; form.Name.focus(); return false ; } if (form.Game.value == "") { alert( "Please enter your game address." ); form.Game.focus(); return false ; } if (document.form.Shame[0].value== "") { alert( "Please enter your game address." ); form.Game.focus(); return false ; } return true ; } </script> </head> <body> <form name="form" action="Store_it.php" method="post" onSubmit="return checkform(this);"> <input type="text" name="Name" /> <input type="text" name="Game" /> <input type="text" name="Shame[]" /> <input type="text" name="Shame[]" /> <input type="text" name="Shame[]" /> <input name="submit" type="submit"> </form> </body> </html> [icode] I need to use the array's shame and just check if the third one is not empty. I have searched DOM and other stuff but i cannot get to the 2 element of the array shame. How do i check the value of the array. Hi, im looking for some help figuring out how to achieve the following: i have an ecommerce site. on a product a customer can select attributes associated with that product (i.e colour, size, shape etc.). Each attriute is represented by a HTML select, containing the values allowed for that product. the problem comes when certain colours do not come in certain sizes. Say my product has the following: colours: red, yellow, blue size: small, medium, large shape: square, circle but there is no stock for red,medium and red,large. I need to dynamically remove medium + large when red is selected so they cannot be chosen from the select. This could apply for any combination of attributes. Also this is completely dynamic so there could be 2 attributes or 10 attributes, and changing one would need to cascade down the selects. i have posted the code at the bottom of the post. The js representation of what is selectable is an object, containing other objects, each object representing a variation and wether to show or not. i know this is a right mouthful to try and explain, its even hard to figure out how to do it! an example of what im trying to achieve is: http://www.bit-cart.com/online-store-front-live-demo/products/Mikes-Test-Product.html. I do have jquery available on my page if it helps. any ideas would be most appreciated! thanks mike HTML: Code: <select name='attribute_12' id='attribute_12' class='attribute-select'>
<option value='166'>attribute_12 166</option>
<option value='165'>attribute_12 165</option>
<option value='171'>attribute_12 171</option>
</select>
<select name='attribute_10' id='attribute_10' class='attribute-select'>
<option value='108'>attribute_10 108</option>
<option value='110'>attribute_10 110</option>
<option value='120'>attribute_10 120</option>
<option value='148'>attribute_10 148</option>
</select>
<select name='attribute_19' id='attribute_19' class='attribute-select'>
<option value='201'>attribute_19 201</option>
<option value='202'>attribute_19 202</option>
<option value='203'>attribute_19 203</option>
</select>
JS: Code: <script type="application/javascript">
var variants = {
"304" : {"attrs":[171,108,201], "show":0},
"305" : {"attrs":[171,108,202], "show":1},
"306" : {"attrs":[171,108,203], "show":0},
"307" : {"attrs":[171,120,201], "show":1},
"308" : {"attrs":[171,120,202], "show":0},
"309" : {"attrs":[171,120,203], "show":1},
"310" : {"attrs":[171,148,201], "show":0},
"311" : {"attrs":[171,148,202], "show":1},
"312" : {"attrs":[171,148,203], "show":0},
"313" : {"attrs":[171,110,201], "show":1},
"314" : {"attrs":[171,110,202], "show":0},
"315" : {"attrs":[171,110,203], "show":1},
"316" : {"attrs":[166,108,201], "show":0},
"317" : {"attrs":[166,108,202], "show":1},
"318" : {"attrs":[166,108,203], "show":0},
"319" : {"attrs":[166,120,201], "show":1},
"320" : {"attrs":[166,120,202], "show":0},
"321" : {"attrs":[166,120,203], "show":1},
"322" : {"attrs":[166,148,201], "show":0},
"323" : {"attrs":[166,148,202], "show":1},
"324" : {"attrs":[166,148,203], "show":0},
"325" : {"attrs":[166,110,201], "show":1},
"326" : {"attrs":[166,110,202], "show":0},
"327" : {"attrs":[166,110,203], "show":1},
"328" : {"attrs":[165,108,201], "show":0},
"329" : {"attrs":[165,108,202], "show":1},
"330" : {"attrs":[165,108,203], "show":0},
"331" : {"attrs":[165,120,201], "show":1},
"332" : {"attrs":[165,120,202], "show":0},
"333" : {"attrs":[165,120,203], "show":1},
"334" : {"attrs":[165,148,201], "show":0},
"335" : {"attrs":[165,148,202], "show":1},
"336" : {"attrs":[165,148,203], "show":0},
"337" : {"attrs":[165,110,201], "show":1},
"338" : {"attrs":[165,110,202], "show":0},
"339" : {"attrs":[165,110,203], "show":1}
}
</script>
Hello all, I have a form that submits a POST request when data is submitted. A Servlet then processes this POST request and a JavaBean is used to make some calculations. The HTML response is not generated within the Servlet but instead I forward the request to a JSP to generate the response. - This all works fine, thankfully. However, I am stupidly suck trying to validate the form on the client side with a JavaScript function before the form is submitted. Here is my index.jps: Code: <%--
Document : index
Created on : 19-Nov-2009, 13:41:30
Author : lk00043
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/JavaScript">
<!-- Start hiding JavaScript Statements
function validateForm() {
var student;
var score1, score2, score3, score4;
student = document.getElementById('student');
s1 = document.getElementById('score1');
s2 = document.getElementById('score2');
s3 = document.getElementById('score3');
s4 = document.getElementById('score4');
score1 = parseInt(s1.value);
score2 = parseInt(s2.value);
score3 = parseInt(s3.value);
score4 = parseInt(s4.value);
if(student.value.length == 0) {
document.getElementById('StudentError1').innerHTML = " Enter a student name!";
return false;
}
if ((isNaN(score1)) || (score1 < 0) || (score1 > 100)) {
document.getElementById('Error1').innerHTML = " Enter a number between 0 and 100!";
return false;
}
if ((isNaN(score2)) || (score2 < 0) || (score2 > 100)) {
document.getElementById('Error2').innerHTML = " Enter a number between 0 and 100!";
return false;
}
if ((isNaN(score3)) || (score3 < 0) || (score3 > 100)) {
document.getElementById('Error3').innerHTML = " Enter a number between 0 and 100!";
return false;
}
if ((isNaN(score4)) || (score4 < 0) || (score4 > 100)) {
document.getElementById('Error4').innerHTML = " Enter a number between 0 and 100!";
return false;
}
}
// End hiding JavaScript Statements -->
</script>
<title>Lab Class 7 - Task 2</title>
</head>
<body>
<h1>Lab Class 7</h1>
<form name="collectgrades" action="AssessGrades" method="POST" onSubmit="validateForm()" >
Name of Student: <input type="text" name="student" id="student"/><span id="StudentError1"> </span><br />
Presentation: <input type="text" name="score" id="score1"/><span id="Error1"> </span><br />
Writing style: <input type="text" name="score" id="score2"/><span id="Error2"> </span><br />
Technical content: <input type="text" name="score" id="score3"/><span id="Error3"> </span><br />
Depth of analysis: <input type="text" name="score" id="score4"/><span id="Error4"> </span><br />
Feedback:<select name="feedback" size="4" multiple="multiple">
<option>"Could be better structured."</option>
<option>"Depth of analysis is good."</option>
<option>"Very advanced material."</option>
<option>"Very well structured."</option>
</select><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Regardless of whether incorrect input is given, the data is still POSTed to the server and calculated on or a Server Side error is given. Am I correct in calling the function onClick? The validation essentially needs to be so that: - Student field contains a string - Score1, Score2, Score3 and Score 4 contain a number between 0 and 100 Any help is most appreciated, Cheers, Beetle. Hi all, I am a relatively new to javacript and need some help. I have several arrays already defined: array_1 array_2 array_3 etc. I also have a few divs with ids and classes: <div id="1" class="sample"></div> <div id="2" class="sample"></div> <div id="3" class="sample"></div> etc. I am trying to use the class (sample) to run a function: (1) first I get the ID: current_id = $(this).attr("id"); (2) based on the id I want to display the array: alert('array_'+current_id); The problem is I get an alert box with the array name ("array_1") and not the CONTENT of the array. How do i solve this? Thanks!! Hello, I've a checkbox validation script to check for at least one ckeck. Code: <script type="text/javascript">
function chkChecks(){
isChecked=false
alert(document.forms["form1"]["checked[]"].length);
for(var i=0;i<document.forms["form1"]["checked[]"].length;i++){
if(document.forms["form1"]["checked[]"][i].checked){
isChecked=true
}
}
if(isChecked){
document.forms["form1"].submit()
}
else{
alert('Please select a checkbox')
}
}
</script>
for the form Code: <form name="form1" action="test.php"> <input type="checkbox" name="checked[]" value="1"> <input type="checkbox" name="checked[]" value="2"> <input type="checkbox" name="checked[]" value="3"> <input class="button_140" type="button" value="Check" onclick="chkChecks()"> </form> It works well for more than one checkboxes, but these are generated dynamically by PHP and if there is only one checkbox, document.forms["form1"]["checked[]"].length returns 'undefined'. Can I modify this to work in all cases? thanks, art. I apologize in advance for my ignorance. I'm relatively new to javascript. I am trying to dynamically create a page based on information in a .txt. So far the code works. But only for a spacific line in the .txt. I would like it to create numbered divs and fill with approprate info from .txt for each line in .txt. Does that make sense? Any help you can provide would be greatly appriciated. Oh and I'm not worried about cross browser function this is for intra-net and all clients use Mozilla. P.S.: I will paste full code if necessary and it is explained exactly how. Is it: [ "my code goes here" ] or [code] my code goes here [code] Hey all! So there I was newly hired and tasked with pouring through someone else's code to see what could be modified and brought up to date. After successfully finding the errors and correcting them and fulfilling the tasks my new supervisor assigned me, he slaps me on the back and says, "Well done! Now make it dynamic!" By which he meant the chapter buttons I spent hours creating from the existing code. Here's what he wants: the old code has an array, we'll call it someArray, that is assigned its values by the instructional developer as html pages are added to the course. So for example the code might look like this, Code: var someArray = new Array(4);
someArray[0] = "video1/video1.html";
someArray[1] = "video2/video2.html";
someArray[2] = "video3/video3.html";
Now, each page has an associated chapter button. So video1/video1.html would have ch1Btn, video2/video2.html would have ch2Btn and so forth. Each button in turn calls a specific function which does only one thing - sets the currentPage variable to page associated with that button/array contents. For example, I have created the following functions to call each page: Code:
function doCh1(){currentPage = 0; goToPage();}
function doCh2(){currentPage = 1; goToPage();}
function doCh3(){currentPage = 2; goToPage();}
I should mention that all this is being done from within an html wrapper that calls each page into an iframe. The currentPage variable is assigned the url of one of the elements from the pageArray. My supervisor wants to be able to manually add pages to the pageArray and have the javascript code generate the associated buttons and function calls so when the learner clicks on one of the dynamically created buttons, s/he is taken to the correct page. Currently I'm using static images with the onclick calling the correct function to set my currentPage value and send the learner on his/her merry way. Is there a way to do all of this dynamically? If so, can you help me get my head around this by providing some examples? Sorry for the long post. Thank you, M Hi, I am stumped. I have been trying unsuccesfully for three days to figure something out, and it has brought me here. I am a noob javascripter, so please bear with me. I have created a page with an input button that refers to a function: Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Thu, 26 May 2011 03:39:57 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Meltmedia Web Intern Test</title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<LINK REL=StyleSheet HREF="what.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
//function ChangeBackground()
<!--{
// document.getElementById("column2").style.backgroundColor="#ffbdaa";
// document.getElementById("row1").style.backgroundColor="#ffbdaa";
// document.getElementById("row3").style.backgroundColor="#ffbdaa";
// document.getElementById("row4").style.backgroundColor="#ffbdaa";
// document.getElementById("mainbody").style.backgroundColor="#f7d7cd";
// } -->
function ChangeBackground() {
var colors = document.getElementsByClassName("changeme");
//alert(colors.length);
for (var i = 0; i < colors.length; i++) {
if (colors[i].className="changeme") {
colors[i].style.backgroundColor="ffbdaa";
}
}
}
//if (document.getElementsByClassName('changeme')[5].style.backgroundColor="#e8e8e00") {
// document.getElementsByClassName('changeme')[5].style.backgroundColor="#ffbdaa";
// }
//div1 original color is #e8e8e8
//div2 original color is #e2ebe4
//tablerows original color is #ccddd0
</script>
</head>
<body>
<div id="mainbody" class="changeme">
<img id="header" src="osx_header.jpg">
<div id="inset">
<div id="column1" class="column1">
<p class="text0">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aenean sed est et mi varius
euismod sed nec neque. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas ultricies pulvinar lacinia.
<a href="http://www.google.com/" rel="nofollow" target="_blank" style="color:blue">This is a link.</a>
</p>
<p class="text1" style="font-size:16px;">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Sed a felis et eros gravida dignissim.
Quisque lobortis magna non purus vulputate
pellentesque. Mauris sit amet felis felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam molestie lacinia arcu vitae pretium.<sup>2.3</sup>
</p>
<div id="unordered_list">
<ul id="blue_bullets">
<li>Vestibulum ante erat, laoreet quis pellentesque quis,
tincidunt fermentum turpis.
<li>Maecenas in mollis massa.
<ul>
<li>Ut tempus tincidunt molestie. Phasellus eget nulla
id erat scelerisque porttitor vel pharetra nibh.
<li>Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos.
</ul>
<li>Aenean ligula massa, tempor sed pulvinar sit amet, imperdiet a nisi.
</ul>
</div><!--end of ordered list-->
<div id="button">
<!-- <img src="btn-click-here.gif"> -->
<input type="button" onClick="ChangeBackground()" value=" ">
</div><!--end of button-->
<table id="table1">
<tr id="firstrow">
<th id="row1" class="changeme"></th>
<th id="row2" class="changeme"><strong>header1</strong></th>
<th id="row3" class="changeme"><strong>header2</strong></th>
<th id="row4" class="changeme"><strong>header3</strong></th>
</tr>
<tr>
<td>one</td>
<td>1234</td>
<td>bears</td>
<td>abcd</td>
</tr>
<tr>
<td>two</td>
<td>5678</td>
<td>beets</td>
<td>efgh</td>
</tr>
<tr>
<td>three</td>
<td>9101</td>
<td>battlestar</td>
<td>ijkl</td>
</tr>
<tr>
<td>four</td>
<td>1121</td>
<td>galactica</td>
<td>mnop</td>
</tr>
</table>
<!--end of table-->
<ol class="ordered">
<li>Integer molestie sodales risus eu commodo. <i>Duis eget est
dapibus neque congue</i> accumsan id eu nibh.
</li>
<li>Proin malesuada hendrerit lobortis. Integer et erat leo.
Praesent nec justo nulla. <i>Sed in dolor id neque faucibus
consequat.</i>
</li>
<li>Vestibulum sit amet justo id <strong>risus tempus ornare.</strong> Etiam
faucibus urna volutpat lorem dictum imperdiet.
</li>
</ol>
</div> <!--end of column1-->
<div id="column2" class="changeme">
<p class="text00"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></p>
<p class="text2">Aenean sed est et mi varius euismod sed nec neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
ultricies pulvinar lacinia. Sed a felis et eros gravida dignissim.
Quisque lobortis magna non purus vulputate pellentesque.</p>
<p class="text2">Mauris sit amet felis felis. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nullam molestie lacinia arcu
vitae pretium. Vestibulum ante erat, laoreet quis pellentesque quis,
tincidunt fermentum turpis. Maecenas in mollis massa. Ut tempus
tincidunt molestie.</p>
<p class="text2">Phasellus eget nulla id erat scelerisque porttitor
vel pharetra nibh. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Aenean ligula massa, tempor
sed pulvinar sit amet, imperdiet a nisi. Nulla ullamcorper posuere dolor,
ac rutrum velit sollicitudin ac. Ut felis leo, ultricies a bibendum ac,
luctus semper massa.</p>
</div> <!--end of column2-->
</div> <!--end of inset-->
</div>
</body>
</html>
i would like to change certain style elements of the array each time the button is clicked. I have 5 color sets i would like use for the page, so i would like the button to trigger the color change in a loop, ie when the last color group is reached, the next click returns to the original color set and it continues again. This is a demo page, not for actually publication. I am trying to teach myself javascript and this is an idea that came to me. The things i want to change are the background color of two div's and the top row of a table. My style sheet is seperate, and I will also do the same for the javascript once I can get it to work properly. Thank you in advance for any help. hello I am having a problem to add numbers store in an array. arrayValues[0][0] = 1; arrayValues[0][1] = 2; var col = 0; var sum; for ( var row = 0; row < index; i++ ) sum += arrayValues[col][row]; my result is ==> 12 it is defining my sum variable as string. even I try do do this var sum = 0; to define sum as numeric variable. my result was ==>012. Any idea, this is my first javaScritp code. Thanks. Hi Guys, How do I sum the values of an array and output the result using document.write? Say my array is var number=new Array(1.234,56.43,1.02); THANKS Thought this wud work? Code: <script type="text/javascript"> var x = [1, 2, 3, 4, 5, 6, 7, 8, 9]; document.write(sum(x)); </script> From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X") Code: <select name="options-1" id="options-1"> <option value="">Select an option</option> <option value="1">KA-WH</option> <option value="2">KA-BK</option> <option value="3">KA-GN</option> </select> <select name="options-2" id="options-2"> <option value="">Select an option</option> <option value="4">BADGE-1</option> <option value="5">BADGE-2</option> <option value="6">BADGE-3</option> </select> <select name="options-3" id="options-3"> <option value="">Select an option</option> <option value="7">E-WH</option> <option value="8">E-GD</option> <option value="9">E-BK</option> </select> for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3. The above form fields will be created dynamically, may contain more or fewer items. I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array. Hi all I am trying to create a code which stores information about songs The information to be stored are : song ID song name song artist song URL So far what I've done is create an empty array with four properties The code asks the user to enter information and then displays them However i'm having difficulty figuring out how to insert all the information entered in the array. For example if information about 3 songs were entered, how can I insert all of them in the array I created. After storing the information, I want to be able to search for songs by their ID. When I wrote the function to do this, if lets say I entered two songs one with S1 as ID and one with S2 as ID, I type S1 in the search box, but it doesn't return anything. However if I enter S2, it returns the information of the track with this ID, which makes me think that entering information for a second song overwrites the first one This is my code so far: <html> <body> <h1>Tracks and Artists</h1> <script type="text/javascript"> function request(tracks) { for (var i=0;i<2;i++) { tracks.trackID = prompt("Enter track ID") tracks.trackName = prompt("Enter track name") tracks.trackArtist = prompt("Enter artist name") tracks.trackURL = prompt("Enter track URL") alert(display(tracks)) } } function insert() { function display(tracks) { return "Track ID: " + tracks.trackID + "\nTrack name: " + tracks.trackName + "\nTrack artist: " + tracks.trackArtist + "\nTrack URL: " + tracks.trackURL } var tracks = [{trackID: "", trackName:"", trackArtist:"", trackURL:"" }] request(tracks) </script> </body> </html> Hi How can i output two maximum numbers of an array if they are equal? var flower["roses", "violets", "buttercups", "daisies"]; var flowerAmounts[9, 8, 3, 9]; Output should be: The maximum amount of flowers is 9. There are 9 roses and 9 daisies. Hope someone can help, thanks hi, I have this keypressed function: Code: function keyPressed(event, input) {
if (event.keyCode == 8) {
return true;
}
var char = event.which ? event.which : event.keyCode;
char = String.fromCharCode(char);
var exers = "1234 1234 1234";
return (exers.charAt(input.value.length) == char);
}
This function allow me to press in order the numbers in array (index0). It is works very well. But i want to add an array with more exercises like: Code: var exerc = new Array();
exerc[0]= "1234 1234 1234";
exerc[1] = "5678 5678 5678";
exerc[2] = "9012 9012 9012";
Also, i have a dropdown menu that parser options from a xml file: Code: <form> <select style="width:100px" id='courses'> </select> </form> and my xml file looks like: Code: <courses>
<course title="exercise 1">
<lesson>1234 1234 1234</lesson>
</course>
<course title="exercise 2">
<lesson>5678 5678 5678</lesson>
</course>
<course title="exercise 3">
<lesson>9012 9012 9012</lesson>
</course>
.
.
.
</courses>
*I write the same index because i have two input field. I see the first choose (depend on dropdown) in first input, and i rewrite the same exercise in the second input. So, it's something like an exercise for me and i stack here. - I repeat. It is work with only one index very well. The problem is that, when i add more that one index in the array. Any suggestion about my problem?Javascript it is not my strong point I try this but it is doesn't work.Baybe it is totally wrong! Code: function keyPressed(event, input) {
if (event.keyCode == 8) {
return true;
}
var char = event.which ? event.which : event.keyCode;
char = String.fromCharCode(char);
var exerc = new Array();
exerc[0]= "1234 1234 1234";
exerc[1] = "5678 5678 5678";
exerc[2] = "9012 9012 9012";
for (i=0;i<exerc.length;i++)
{
document.getElementById("courses").selectedIndex;
}
return (exers.charAt(input.value.length) == char);
}
I'm having problems with selecting values from array. I have a dropdown box where you choose what fruit you want to buy. When selected the array should assign 2 values to that fruit. I don't know how to do that. Here's what I have.. I added comments. Javascript part: Code: <script type="text/javascript">
function Fruits() {
var selectfruit = newArray( //assigning values to fruit selected from dropdown box
newArray("Banana", 1, 1),
newArray("Apple", 1.2, 0.5),
newArray("Mango", 1.1, 0.9),
newArray("Orange", 0.1, 9.99));
var howmanyfruits = Number(document.getElementById("howmanyfruits").value); // how many fruits are you buying
var totalfruitsowned = Number(document.getElementById("totalfruitowned").value); // How many fruits do you already have
/* cash and coupons needed to buy fruits.
cash is cpst for 1 fruit.
coupons is cost for 1 fruit
cash_all is cost for all fruits you're buying
coupons_all is cost for all fruits you're buying
each fruits requires cash AND coupons to be bought. Cash and coupons are tied to the first values in Array.
Eg. If you choose Apple that value would be 1.2
The 'fruitsmaxtobuy' variable is not tied to the first value, but the second one in array.
If you choose Apple that value would be 0.5.
*/
var cash = Math.round(((totalfruitsowned * 0.51 * selectfruit) + 700)*10)/10;
var coupons = Math.round(((totalfruitsowned * 0.51 * selectfruit) + 850)*10)/10;
var cash_all = Math.round((howmanyfruits * cash)*10)/10;
var coupons_all = Math.round((howmanyfruits * coupons)*10)/10;
var fruitsmaxtobuy = Math.round((totalfruitsowned * 0.12 * selectfruit)*10)/10;
/*
Display Error if nothing is entered or if you forget to enter total fruits
*/
if (((howmanyfruits=="" || howmanyfruits==null) && (totalfruitsowned=="" || totalfruitsowned==null)) || ((howmanyfruits==Number(document.getElementById("howmanyfruits").value)) && (totalfruitsowned=="" || totalfruitsowned==null)))
{document.getElementById("cash").innerHTML = "Error";
document.getElementById("coupons").innerHTML = "Error";
document.getElementById("cash_all").innerHTML = "Error";
document.getElementById("coupons_all").innerHTML = "Error";
document.getElementById("fruitsmaxtobuy").innerHTML ="Error"}
else {
document.getElementById("cash").innerHTML = cash;
document.getElementById("coupons").innerHTML = coupons;
document.getElementById("cash_all").innerHTML = cash_all;
document.getElementById("coupons_all").innerHTML = coupons_all;
document.getElementById("fruitsmaxtobuy").innerHTML =fruitsmaxtobuy}
}
</script>
HTML part: Code: <form action="" id="fruitcost">
<table align="center" width="37.5%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th colspan="2" align="center">Fruit cost calcultor</th>
</tr>
<tr>
<td>Select Fruit:</td>
<td align="center"><select id="selectfruit">
<option>Banana</option>
<option selected>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</td>
</tr>
<tr>
<td>Total Fruits Owned:</td>
<td align="center"><input id="totalfruitsowned" type="text" /></td>
</tr>
<tr>
<td>How many fruits are you buying:</td>
<td align="center"><input id="howmanyfruits" type="text" /></td>
</tr>
<tr>
<td>Money Needed to buy 1 fruit:</td><td><font id="cash"></font></td>
</tr>
<tr>
<td>Coupons Needed to buy 1 fruit:</td><td><font id="coupons"></font></td>
</tr>
<tr>
<td>Money Needed:</td><td><font id="cash_all"></font></td>
</tr>
<tr>
<td>Coupons Needed:</td><td><font id="coupons_all"></font></td>
</tr>
<tr>
<td>Nr. of fruits you can buy:</td><td><font id="fruitsmaxtobuy"></font></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" value="Submit" onclick="Fruits()" /></td>
</tr>
</tbody>
</table>
</form>
|
|||||||