|
JavaScript - How To Access Value Of Drop Down Boxes In Specific Cells In A Table?
Hi, I'm having trouble with trying to access a selected value of a drop down menu in a table. I have menus in columns 3 and 4, named cred and grade respectively, from rows 2 onwards, and I'm using a function to access them. How do I access the value's for manipulating other variables?
Here is what I have so far: Code: function f(tableID){
var len = document.getElementById(tableID).rows.length;
for(var i = 1; i<len; i++){
var c = document.getElementById(tableID).rows[i].cells[2].childNodes[0];
credits = c.options[c.selectedIndex].text;
}
}
Your help would be really appreciated Similar TutorialsCode: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
var names = ["Marble","Jarque","Dino","Pineapple"];
function abc(){
if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[0]){names.sort()}
else if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[2]){names.sort().reverse()}
else {names.sort()}
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
</script>
</head>
<body>
<div id="t"></div>
<input type="button" value="sort" onclick="abc()" />
</body>
</html>
First time sort: no problem But when it comes to the blue-highlighted parts It cannot do the sort().reserve() What's wrong with the codes? I am confuseif i use JS.. its should be in <head> but table should be in <body>.. how am i going to use that.. and put images in that table cell using JS??
Hi All, I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something. I can open them without table just by document.write(xmlfile location). Here is my code. please help. function showResultsTable(searched, srchedname) { // get the reference for the body var mybody = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element mytable = document.createElement("table"); mytable.setAttribute('id', 'resulttable'); mytablebody = document.createElement("tbody"); // creating all cells var mycurrent_cell = new Array(); for(var j = 0; j < srchedname.length; j++) { // creates a <tr> element mycurrent_row = document.createElement("tr"); mycurrent_cell[0] = document.createElement("td"); currenttext = document.createTextNode(j); mycurrent_cell[0].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[0]); mycurrent_cell[1] = document.createElement("td"); link = document.createElement("a"); link.name = ""+srchedname[j]); link.href = "C:\\AAA\\TestCasesList.xml"; mycurrent_cell[1].appendChild(link); mycurrent_row.appendChild(mycurrent_cell[1]); mycurrent_cell[2] = document.createElement("td"); currenttext = document.createTextNode(searched[j]); mycurrent_cell[2].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[2]); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); } Hello everyone. I want to move my image through table cells by using arrow buttons. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Move</title>
<style type="text/css" >
table
{
background-color:#FFCC00;
margin-top: 100px;
margin-bottom: 100px;
}
</style>
</head>
<body onload="setup()">
<script type="text/JavaScript" onkeydown="handleKey(event)">
document.write('<table border="1" cellspacing="0" cellpadding="10">');
var count =0
for (var row=0; row<20; row++) {
document.write('<tr>');
for (var col=0; col<20; col++) {
idnmr = count
count++
document.write('<td style="border:0"; id="idnmr";>');
document.write('</td>');
}
document.write('</tr>');
}
function setup() {
row=0;
col=0;
insertKnight(row,col);
}
function handleKey(e) {
if (typeof e !='object') e=window.event;
if (e.type == 'keydown' && (e.keyCode ==27 || (e.keyCode >= 37 && e.keyCode <=40))) {
switch (e.keycode) {
case 37:
dC= -1;
dR = 0;
break;
case 38:
dC= +1;
dR=0;
break;
case 39:
dC = 0;
dR = +1;
break;
case 40:
dC= 0;
dR=-1;
break;
}
emptyCell(row,col);
function emptyCell(row,col)
{
var id = 'r' + row + 'c' + col;
var cell= document.getElementById(id);
if(cell) cell,innerHTML='';
}
row +=dR;
col +=dC;
//insert image
insertKnight(row,col);
return false;
function insertKnight(row,col) {
var id = 'r' + row + 'c' + col;
var cell = document.getElementById(id);
var colour = cell.className;
if (colour != 'white') {
var knight='cherry.png';
}
else {
var knight= 'cherry.png';
function eraseImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '';
}
cell.innerHTML = '<img src=" ' + knight + ' " alt="' + colour + 'knight" />';
}
document.getElementById('debug').innerHTML = 'r='+row+' c='+col;
function drawImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '<img src="cherry.png"/>';
}
</script>
</body>
</html>
This is my code. Now i have problems with the eraseImage and drawImage functions. They just don't work. Any help will be appreciated. Thank you Hello, I have a drop down box, which display an images. It is also saved through a cookie on what option you leave it on. Is there a way you can make it so there are several drop downs on the same page that will also display images corresponding to the option chosen? Here's a live example: www.cirula.com/options here is my coding Code: <script language="javascript">
function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="http://www.google.com"
mylinks[1]="http://www.ebay.com"
mylinks[2]="http://www.yahoo.com"
window.location=mylinks[which]
}
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
</script>
</head>
<body onLoad="setDefaultValues()">
<div align="center">
<form name="mygallery">
<p><select name="picture" onChange="showimage(); setCookie(this.name,this.selectedIndex)" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>
<p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="http://www.cirula.com/images/google.png" name="pictures" width="150"
height="150" border=0></a>
Hello, I'm Stephen Martin, an undergraduate Psychology student and researcher. Although I am a self-proclaimed tech geek, the extent of my knowledge ends abruptly at any sort of coding. I need help from anyone who is willing. The paradigm: I am currently investigating the decision making strategies in a particular population (I cannot reveal too much, lest our study be scooped by competing researchers in the field). The paradigm that we use is built through a package called MouseLabWeb (http://www.mouselabweb.org/). MLWeb basically provides an interface for researchers to create a html/php/js/css website that presents a grid (table). A small example is shown on the aforementioned website. The javascript functions allow each participant's events to be recorded, timestamped, and written to a MySQL database. This allows the researcher to know which cells the participant viewed, in what order, for how long, and ultimately to which decision the participant came. Additionally, the PHP/HTML creates the table, but the data within it is populated by the javascript. This is a blessing and a curse. Here is why. The problem: The javascript offered by MLWeb allows the cells to be randomized. This is necessary, because in such paradigms, counter-balancing is required, otherwise there would be order effects (e.g., people tend to automatically read from the upper left) that are not controlled for. So the order of the columns and rows are randomized, the data which is then placed into the html/php table. For the current study, we want the cells corresponding to particular types of information to be shaded differently. For example, we'd want cells that contain bad information to be dark, cells that contain neutral info to be grey, and cells that contain good information to be white. The problem is that setting these values (style="background-color: #XXXXX) only applies to the table as created by the PHP. It only affects the position, and does not consider the information that it is filled with. We want the information that a cell is filled with to dictate what background-color the cell is. Example of the problem (A,B,C are the different types of info, with the surrounding character implying shading) What we want: Unrandomized: [.A.] [|B|] [#C#] Randomized: [#C#] [.A.] [|B|] What the problem is: Randomized: [.C.] [|A|] [#B#] Again, thank you for reading this long post. I'm up for any suggestions! TL;DR The website uses PHP to render a table and javascript to populate it. Javascript randomizes the column and row order upon each visitation, thus randomizing the cells. How do I make javascript issue a background-color change to each cell according to the information that it is populated with. Hey. so, I know how to add the row, and cells, I did that...except now I need to add properties to the cells (class, ID, onclick etc)...just wondering how I go about doing that. Here is what I have so far: Code: function add_new_proj(){
new_proj_id = prompt("What would you like the new Project Number to be?","xxx-xxxxx");
var table=document.getElementById('projectDisplay').insertRow(1);//creates a var which adds one row to the table
//the variables are finding the correct cell to enter the data into the new row (based on an array 0 based system)
var projectID=table.insertCell(0);
var ProjectName=table.insertCell(1);
var Client=table.insertCell(2);
var ClientProjectID=table.insertCell(3);
var delete_cell=table.insertCell(4);
projectID.innerHTML = new_proj_id;
ProjectName.innerHTML ="";
Client.innerHTML = "";
ClientProjectID.innerHTML = "";
delete_cell.innerHTML = "<span class='delete' id='$ProjKey-d' onclick='delete_edit_proj(\"ajax_modify_proj.php\",this.id)'> Delete </span>";
}
this is an example of what the cells look like (the ones that already exist, generated via PHP code): PHP Code: echo "<td class='projectTd' id='2tdName-$j' onclick='editTd(this.id);'> $ProjName </td>"; So yeah..I need the new cells to pretty much look like that >.< with a class, id, and onclick event. any help would be great! thanks Hi guys, i'm trying to develop a code for my sister, i would like to use javascript to finish off the following task: 1. I want to be able to select marks from 0 to 30, from 5 drop down boxes. 2. and as marks are selected, it should upgrade the total. 3. and then show me the total marks when finished. i've got up to creating the drop down boxes, now it's just adding the values once selected. Thanks! anyhelp would be welcome So I am using JavaScript to make a table on a page and what I want to do is have the JavaScript create the table, and then allow the user to fill it with data. I have been able to make the JavaScript create the table, my question is how to reference the cells in my script that adds data to the cell. I want the users to be able to click a button an add data into different cells so i figured giving them each an Id and referring to that Id in the button is the best way to do it. How can I edit my code to give each cell a different Id? Or is there a better way of doing this? My table code looks like this (i have filled it with random data so it is not just a blank table). <code> <script type="text/javaScript"> window.onload = fnInit; function fnInit() { // Declare variables and create the header, footer, and caption. var oTable = document.createElement("TABLE"); var oTHead = document.createElement("THEAD"); var oTBodyam = document.createElement("TBODY"); var oTBodypm = document.createElement("TBODY"); var oTFoot = document.createElement("TFOOT"); var oCaption = document.createElement("CAPTION"); var oRow, oCell; var i, j; // Declare stock data that would normally be read in from a stock Web site. var heading = new Array(); heading[0] = ""; heading[1] = "Monday"; heading[2] = "Tuesday"; heading[3] = "Wednesday"; heading[4] = "Thursday"; heading[5] = "Friday"; var block = new Array(); block[0] = "8:30"; block[1] = "9:55"; block[2] = "11:20"; block[3] = "12:45"; block[4] = "2:10"; block[5] = "3:35"; block[6] = "5:00"; block[7] = "6:30"; var stock = new Array(); stock[0] = new Array(block[0],"88.625","85.50","85.81","99.54","55.46"); stock[1] = new Array(block[1],"102.75","97.50","100.063","49.54","55.46"); stock[2] = new Array(block[2],"56.125","54.50","55.688","99.54","55.46"); stock[3] = new Array(block[3],"71.75","69.00","69.00","99.54","55.46"); stock[4] = new Array(block[4],"71.75","69.00","69.00","99.54","55.46"); stock[5] = new Array(block[5],"71.75","69.00","69.00","99.54","55.46"); stock[6] = new Array(block[6],"71.75","69.00","69.00","99.54","55.46"); stock[7] = new Array(block[7],"71.75","69.00","69.00","99.54","55.46"); // Insert the created elements into oTable. oTable.appendChild(oTHead); oTable.appendChild(oTBodyam); oTable.appendChild(oTBodypm); oTable.appendChild(oTFoot); oTable.appendChild(oCaption); // Set the table's border width and colors. oTable.border=1; oTable.bgColor="lightslategray"; // Insert a row into the header and set its background color. oRow = document.createElement("TR"); oTHead.appendChild(oRow); oTHead.setAttribute("bgColor","lightskyblue"); // Create and insert cells into the header row. for (i=0; i<heading.length; i++) { oCell = document.createElement("TH"); oCell.innerHTML = heading[i]; oRow.appendChild(oCell); } // Insert rows and cells into bodies. for (i=0; i<stock.length; i++) { var oBody = (i<3) ? oTBodyam : oTBodypm; oRow = document.createElement("TR"); oBody.appendChild(oRow); for (j=0; j<stock[i].length; j++) { oCell = document.createElement("TD"); oCell.innerHTML = stock[i][j]; oRow.appendChild(oCell); } } </code> Ok. I'm going to start by saying I'm a complete novice. I am having a hell of time finding specific codes for the things I need. I'm pretty impressive I've gotten this far. So I am trying to make a portfolio website, for myself, which has thumbnails on the left(which I'll crop in photoshop because it is easier for me than having to do any coding) which will make the main image on the right change. At the same time, I want it to change the text below to correspond to the current image. Now I have the images swapping alright, except that the thumbnails that have the onClick function in them won't sit inside the table I have inside the table. I don't understand why that happens. I can work around this, and just get rid of that table. Another problem is that even though I defined the collumns as each being 20%, they are not all the same size. I am using percentages so that the site will function regardless of screen resolution. Anyway, here is my current code. Ignore the image names, I'm just using what random images I have at hand while I test things out. Code: <html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<table width="80%" align="center">
<tr><td colspan="5">I'll put a header image here.</td>
</tr>
<tr>
<td width="20%"><center>Print</center></td>
<td width="20%"><center>Motion</center></td>
<td width="20%"><center>Photo</center></td>
<td width="20%"><center>Misc</center></td>
<td width="20%"><center>Resume</center></td>
</tr>
<tr>
<td colspan="2"><table align="left">
<td colspan="100%">Catagory 1
</td>
<tr>
<a href="mario.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="../Jpg/cattits.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="bowie.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
</tr>
<td colspan="100%">Catagory 2
</td>
<tr>
<td><img src="../Jpg/sluticon.jpg" /></td>
<td><img src="../Jpg/sluticon.jpg" /></td>
</tr>
</table></td>
<td colspan="3">
<img id="main" src="bowie.jpg" width="400">
</td>
</tr><td colspan="5">
<p>Description goes here</p></td>
<tr>
</tr>
</table>
</body>
</html>
Hi I am trying to make all the cells within a table droppable spaces, using the scriptaculous library. However I am not able to do so, and I am not certain why. The table cells are creating within the javascript. I then try to apply the droppables to the table cells through iteration, through the function when the document loads. It does not seem to be working. The document accesses an external php page and has inline php within a div element. I am uncertain if by having the draggable elements instantiated within the php script, that this would be causing any problem, as I cannot see how this would be, the php draggables all appear to be corresponding to the css in the document. Any help with the droppables would be appreciated. I have set up a css class hover, so that when the draggable passes over the droppable the edges of the droppable area should be turning blue, but this is not happening. Not sure what the problem is. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META name="generator" content="Free Script Editor, see www.freescripteditor.com">
<TITLE>Email Client</TITLE>
<link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
<script src="javascript/dragdrop.js" type="text/javascript"></script>
<script src="javascript/controls.js" type="text/javascript"></script>
<script src="javascript/effects.js" type="text/javascript"></script>
<script type="text/javascript">
var xmlhttp = false;
//check if we are using IE
try {
//If the javascript version is greater than 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
alert ("You are using Microsoft Internet Explorer.");
}
catch(e)
{
//if not, then use the older active x object.
try {
//if we are using Internet Explorer
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert("You are using Microsoft Internet Explorer");
}
catch (E)
{
xmlhttp = false;
}
}
//If we are using a non-IE browser, crea a javascript instance of the object
if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
xmlhttp = new XMLHttpRequest();
alert ("You are not using Microsoft Internet Explorer");
}
function getmessage(inbox_id)
{
var object = document.getElementById('content');
var server = "getmessage.php?inbox_id=" +inbox_id;
xmlhttp.open("GET", server);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
object.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
function addTable()
{
var dv = document.getElementById("right");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var x = 0;
//create the table rows
for(var j =0; j <=2; j++)
{
var row = document.createElement("tr");
//create the table columns
for (var k =0; k<=4;k++)
{
x++;
var cell = document.createElement("td");
var celltext = document.createTextNode(x);
cell.appendChild(celltext);
cell.setAttribute("className", "droparea");
cell.setAttribute("id", "x");
row.appendChild(cell);
}
//add the row to the end of the table body
tbody.appendChild(row);
}
table.appendChild(tbody);
dv.appendChild(table);
table.setAttribute("className", "tbl");
}
document.observe("dom:loaded", function()
{
var dh;
var cells = document.getElementsByTagName('td');
for (var z = 0; z <= cells.length; z++)
{
dh = cells[z].getAttribute('id');
if(dh)
{
Droppables.add('dh', {accept:'draggable', hoverclass: 'hover'});
}
}
});
</script>
</HEAD>
<BODY onload="addTable()">
<div class="container" id="container">
<!--header div - for message 'new', 'reply' -->
<div class="header">
<script type="text/javascript" src="buttons/header_nav.js"></script>
</div>
<!-- end of header div-->
<!--Begin the div class left - this will hold the inbox emails for review-->
<div class="left">
<?PHP
include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
$str = "id";
$i = 0;
$inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
$inbox_result = mysql_query($inbox_query);
while($row = mysql_fetch_array($inbox_result))
{//start while trainer query
$inbox_id = $row['0'];
$to = $row['1'];
$subject= $row['2'];
$sent = $row['3'];
$message = $row['4'];
$i++;
echo "<div class='draggable' id='$str$i'>
$inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$str$i $subject
$message</a>
<script type='text/javascript'>
new Draggable('$str$i', {scroll: window});
</script>
</div>";
}//end while inbox query
?>
</div> <!--end left div-->
<!--begin the right div - this is the right side of the screen frame for
postponed email area-->
<div class="right" id="right">
</div>
<!--end the right div element-->
<!--begin the main content div - this will hold sent message-->
<div class="content" id="content" overflow="auto">
</div>
<!--end content div-->
</div>
</BODY>
</HTML>
Writing Table Cells and Switch Statements I am to create a function and purpose is to write blank tables cells to make up horizontal bar. function will have 2 parameters=(partyType and percent partyType parameter stores variables of D,R,I,G or L percent parameter store percentage rounded to nearest integer so I am to make a switch and break statements /commands then have to create a For Loop in counter variable goes up from 1 through value of parmeter increments of 1 heres the code I created for this one Code: function createBar(partyType,percent){ // script element to create blank cells
switch(partyType) {
case "D": document.write("<td class='dem'></td>");
break;
case "E": document.write("<td class='rep'></td>");
break;
case "I": document.write("<td class='ind'></td>");
break;
case "G": document.write("<td class='green'></td>");
break;
case "L": document.write("<td class='lib'></td>");
break;
}
var barText = partyType
for (i=0; i < percent; i++)
{
document.write(barText);
So what improvements should I make? should my loop be before everything? Thanks OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue. Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked. Any help would be awesome!!!! Thanks!!!!!! Code: <html>
<head><title>menu</title>
<script type="text/javascript">
var element = null;
function select(xx)
{
if ( element ) {
element.style.backgroundColor='gray';
}
element = xx;
xx.style.backgroundColor='navy';
}
</script>
<style type="text/css">
a {text-decoration:none; color:white}
a:visited {color:white}
a:active {color:white}
a:hover {color:white}
table#lay_menu {width:100%; margin:0px}
table#lay_menu td {text-align:center; width:20%}
.menu {text-align:center; background-color:gray; }
.start {text-align:center; background-color:navy; }
</style>
</head>
<body>
<table id="layout">
<tr>
<td width="188">
<a href="#">
<div class="menu" onClick="select(this)">Artists</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">CPAs</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">Doctors</div>
</a> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Hey, so I'm a complete javascript newbie and am trying to create a drop down menu with four different boxes. The site I'm working on is basically an ecommerce site, so I'll use cars as a good example for what I want to do. Let's say that I'm selling cars and want to target the buyer directly, then I would have the following boxes, each one serving as a dependent of the one before it: 1. Pick the brand (BMW, Mercedes, Etc.) 2. Pick the type of car (Sports car, SUV, Mini Van, etc.) 3. Pick the color (blue, green, etc.) 4. Pick the price ($0-$19,999/$19,999-29,999/etc.) So far I have the first two boxes down by using the following site: http://www.supertom.com/menugen/. Now my problem is that the site only allows for the first two boxes to be made, and says that "the values in box1 are static and printed directly as normal HTML. The corresponding box2 options will also be copied into the HTML as well as the javascript for full functionality." Being a complete newbie, I have no idea what this means. So I decided to search the internet for an answer and was not able to find one, thus leading me here, which from the looks of it seems like a great forum. If anyone could tell me how to connect a third and fourth box that falls into the same hierarchy as the first and the second then I would appreciate. Really THANK YOU, and I'm really looking forward to reading your replies!! -Bobby Hi all, I'm very new to Javascript and wonder if someone can help me. I'm creating an online enrolment form for my company, who are a training company. Users enrolling on the course must make three choices - The level of course, the size of course and whether they wish to attend a workshop or study by distance learning. The combination of these three factors will determine the price. I'd like to have the price automatically calculated using javascript and displayed on the form before they submit. Can anyone give me an idea of how to do this? There are three drop down boxes for users to select their course. They a - Level of Qualification: Level 3 Level 4 Level 5 Level 6 Scale of Qualification: Award Certificate Diploma Preferred Delivery Method Workshop Distance Learning Each possible combination of these will affect the price. So for instance, if the user were to select 'Level 4', 'Certificate' and 'Workshop' the price would be calculated based on these three options. How can I calculate the ultimate price and then display it on the page (I was thinking of using innerHTML in a 'span' element to display the final value, but if anyone has any better ideas I'd be glad to hear them) The HTML code for the drop down boxes is below: Code: <form action="enrolment.php" method="post"> <select name="level" class="input" id="level"> <option value="chooselevel"></option> <option value="Level 3">Level 3</option> <option value="Level 4">Level 4</option> <option value="Level 5">Level 5</option> <option value="Level 6">Level 6</option> </select> <select name="size" class="input" id="size"> <option value="choosesize"></option> <option value="Award">Award</option> <option value="Certificate">Certificate</option> <option value="Diploma">Diploma</option> </select> <select name="delivery" class="input" id="deliv"> <option value="deliverymethod"></option> <option value="Workshop">Workshop</option> <option value="Distance Learning">Distance Learning</option> </select> </form> Thanks all, hope someone here can help! Regards Chris *EDIT: I should mention that the form is also inside a table - Not sure if that will make a difference. I have a table within a table, that is to say the table is embedded in a <tr> tag in another table and would like to extract row and cell data to make an ajax call. The table in question has several input fields and a submit button on each row. While I can find the table where the submit came from and can get the data from the <td> elements which contain data i.e.<? echo AsOfDate; ?>, I can't find the correct syntax to retrieve the data from the input fields in that same row. Can someone give me the correct syntax to retrieve the input data? Thanks, Tom var AssetTbl = document.getElementsByTagName('table'); for (i =0; i< AssetTbl.length; i++) { if (AssetTbl[i].id == "tblAssetHx") { RowID =AssetTbl[i].rows[1].cells[0].childNodes[0].data; if (RowID == ID) { // this syntax works to get the data from the non input fields // alert(AssetTbl[i].rows[1].cells[0].childNodes[0].data); // this doesn't work to get the input field data obviously! alert(document.getElementById('AssetTbl[i]').rows[1].cells[5].childNodes[0].data); } } } Table row HTML <tr> <td><? echo $AssetID; ?></td> <td><? echo $LastAsOfDate; ?></td> <td><? echo $LastQuantity; ?></td> <td><? echo $LastPrice; ?></td> <td><? echo $LastCurrentValue; ?></td> <td><input name="txtAsOfDate" id="txtAsOfDate" type="text" /></td> <td><input name="txtQuantity" id="txtQuantity" type="text" /></td> <td><input name="txtPrice" id="txtPrice" type="text" /></td> <td><input name="txtCurrentValue" id="txtCurrentValue" type="text" /></td> <td><input name="Submit" type="submit" value="Submit" onclick="GetAssetHxData(<? echo $AssetID; ?>)" /></td> </tr> I was wondering if anyone could help me with getting this working. I'm using html to create a table which has at least 1 row but no max number of rows - as they can be added/removed by the user - and 4 columns, 1st contains a checkbox and the last 2 contain drop down menus. I wish to be able to store the values of those menus in an array only if that row's checkbox has been checked. e.g if the first row has 1 and A as it's dropdown values and the second row has 2 and B. If only row 1 has been checked the array should only contain [1,A]. Instead mine holds all the values including the non-checked ones i.e [1,A,2,B]. My code for javascript function and html table are below: Code: function calculate(textID){
var table = document.getElementById('course'); //id of table
var rowCount = table.rows.length;
var array = []; //array to hold the values
var c = 0;
dmenus = document.getElementByTagName("select"); //get the drop down menus
for(var a = 1; a < rowCount; i++){ //a = 1 as the 1st row contains column headings
var row = table.rows[a];
var check = row.cells[0].childNodes[0];
if(null != check && true == check.checked){
for(var b = 0; b < dmenus.length; b++){
val = dmenus[b].options[dmenus[b].selectedIndex].value;
array[c] = val; //set index of array to equal value of dropdown box
c++;
}
}else{
b++;
}
}
Html code for table: Code: <table id="course">
<tr>
<td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')"/></td>
<th style="color:white">Course Title</th>
<th style="color:white">Credits</th>
<th style="color:white">Grade</th>
</tr>
<tr>
<td><input type="checkbox" name="tick" id="tick"/></td>
<td><input type="text"/></td>
<td>
<select name="credits" id="credits">
<option...</select></td>
<td>
<select name="grade" id="grade">
<option...</td>
It works only for the first row but if there are more than 1 row it doesn't do what it's supposed to. The coding platform I'm working on does not seem to support jquery so javascript code will be most appreciated. Thanks I have a table with tabs on it that calls different php files once the tab is clicked and on top of the table I have a drop list and a button. the whole table has 5 tabs and in there are 15 unique id with information on each tab that the table show when you click on the tab. The drop down list is a selection that you choose from of each of the 15 unique IDs. Once you choose one then click the button you should then only see that specific information about that particular id. (It can be in the table where you click each tab or all of it on one page I dont care.) So I need to get this button to work. I am very unfamiliar with buttons (thats why I am posting this) and I hope someone can help me Code: <form id="projects" method="post" action="project.php">
<select id="project_list" name="proj_list">
<optgroup label="projects">
<?php
// Display the details of each event in a table
while ( $option = mysql_fetch_array($result) ) {
echo("<option label=" . $option["proj_title"] .
"value=" . $option["ID"] . ">" . $option["proj_title"] . "</option>");
}
?>
</optgroup>
</select>
<input type="button" VALUE="GO"
onClick=location("****Do not know what to put here******) />
<?
endif;
?>
<div id="tabcontainer">
<ul id='tabs' class='shadetabs'>
<?php
// Populate tabs with data related to the selected project
echo ("<li><a href='project.php' rel='container' class='selected'>Project</a></li>");
echo ("<li><a href='capability.php' rel='container'>Demo Capability</a></li>");
echo ("<li><a href='approach.php' rel='container'>Approach</a></li>");
echo ("<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>");
echo ("<li><a href='financials.php' rel='container'>Financials</a></li>");
?>
</ul>
<!--
<ul id='tabs' class='shadetabs'>
<li><a href='project.php' rel='container' class='selected'>Project</a></li>
<li><a href='capability.php' rel='container'>Demo Capability</a></li>
<li><a href='approach.php' rel='container'>Approach</a></li>
<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>
<li><a href='financials.php' rel='container'>Financials</a></li>
</ul>
-->
<div id="divcontainer" style="border:1px solid gray; width:600px; margin-bottom: 1em; padding: 5px">
<p>Please select a project using the drop-down menu above. Use the tabs to view information about the selected project.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("tabs", "divcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</div>
Another thing that has been driving me crazy is that css positioning is handled differently by different browsers. JS is not my area, but I can do a lot with CSS, and I do, but cross browser compatibility is killing me. I can use an IF IE statement and only IE runs that segment of code, but I haven't been able to figure out out how to make ONLY firefox or ONLY opera or safari enact an encapsulated segment of code. The same type of IF statement doesn't work for them. Is there a single method using JS that works for all browsers? Thre is probably a very simple answer and I am just missing it somehow. Hello. I need to make drop down box, with 2 statments: hide, show. And I need one table, that javascript set [style="display: none"](When the dorp dow is: hide) and [style="";](When the DDB is set to: show. Can any one help a little, please? |
|||||||