|
JavaScript - Problem With My Javascript To Fetch Data From Html Table
Hi,
I am new to javascript, Please help me with the issue below. My javascript code below should actually fetch the data from html table on button click. function displaymessage() { alert ("button pressed"); var table_cells = new Array(); var table7 = document.getElementById('Auth'); for (i=0,n=table7.rows.length; i < n ; i++) { var Rowdata = table7.rows[i]; table_cells[i] = new Array(); for(j=0,cols = Rowdata.cells.length; j < cols; j++) { table_cells[i,j] = Rowdata.cells[j].innerHTML; alert (table_cells[i,j]); } } alert (table_cells[1,1]); alert (table_cells[2,1]); alert (table_cells[3,1]); alert (table_cells[4,1]); alert (table_cells[5,1]); alert (table_cells[6,1]); alert (table_cells[7,1]); alert (table_cells[8,1]); } The problem with my code above is that the statement "alert (table_cells[i,j]);" executes properly and shows the correct value. But the other alert statements shows only the value of the last row of the table. i.e., my table has 9 rows. and all the alert statements shows 9th row's 2nd column's value outside the for loop. But inside the for loop it executes fine. I tried it in IE7. I seem to miss something. Could someone please help me out with this? Thanks in advance. Similar TutorialsI am trying for a javascript code that would ask for the excel file location when run, fetch data from two columns till eof in an excel file (MS Excel 2010), append it to an existing text file and upload the plain text file to an ftp location. The ftp username, password and location needs to be hard coded in the script. Is this possible? Hi All. I have a dropdown list on a web form containing dates. My Question: How can I call data for that selected item(date) from a MySQL database and display it to the user? And more specifically, if that selected date has no data in the data base, I want to be able to display that as well. I'm looking for a Javascript solution, and if possible a php solution. Thank You! Hi, I am doing some custom development in Salesforce.com's Force.com platform. I have built a custom object (table) called "conferences" which has 2 fields named "Conference name" and "Number of attendees". I need to pass data from these fields to a Java Script Alert box. Can someone please help me out with the Javascript code I need to use to make this happen? Basically I need to know the method, procedure or function to use to pass data from the object (table) into the Javascript alert box. I am very new to Javascript. Thanks JayPS. Hi guys I d like to know that is it possible to submit data to the server or to an email from the client using JAVAScript? I know that javascript is clientside,but if you work with Facebook, when you chat, just view its source, u ll see that is using Javascript? I d like to know,how is it possible? Hi all, I have a code that will fetch out the data from database OnMouseOver. But it is working fine if don't add table on the div which will come OnMouseOver. If i try to show the fetched data in table then the code doesn't work. Please someone help me with this. Here is my code: Code:
<script type="text/javascript" language="JavaScript">
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
} else if (document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>
</head>
<body>
<table align="center" width="300px"/>
<tr>
<td>MakeID</td>
<td>Make</td>
<td>Veh Type</td>
</tr>
<?php
$conn = mysql_connect ('localhost', 'root', '');
mysql_select_db ('my_db', $conn);
function create_div($width, $height, $fields, $table, $w_field, $w_value, $unique) {
$f = implode("`, `", $fields);
$sql = "SELECT `$f` FROM `$table` WHERE `$w_field` = '$w_value'";
$res = mysql_query($sql) or die(mysql_error());
$div = "<div align=center id=\"data".$unique."\" style=\"display:none; position:absolute; border-style:solid; background-color:white; padding: 10px; width:".$width."px; height:".$height."px\" />\n";
$div .= '<table width="100%" cellpadding="4" cellspacing="2">';
$div .= '<tr><th>Serial</th><th>First Name</th><th>Email</th></tr>';
while($r = mysql_fetch_assoc($res)){
$div .= '<tr>';
$div .= '<td>'.$r['id'].'</td>';
$div .= '<td>'.$r['firstname'].'</td>';
$div .= '<td>'.$r['email'].'</td>';
$div .= "</tr>";
$div .= "</table>";
$div .= "</div>\n";
return $div;
}
$sql = "SELECT * FROM name";
$res = mysql_query($sql) or die(mysql_error());
$i=0;
$fields = array("id", "firstname", "email");
while($r = mysql_fetch_assoc($res)){
echo create_div("300", "200", $fields, "admin", "id", $r['id'], $i);
?>
<tr>
<td><?php echo $r['id']; ?></td>
<td><a onmouseover="ShowContent('data<?php echo $i; ?>'); return true;" onmouseout="HideContent('data<?php echo $i; ?>'); return true;" href="#"><?php echo $r['name'];?></a>
</td>
<td><?php echo $r['desc']; ?></td>
</tr>
<?php
$i++;
}
?>
</table>
</body>
</html>
Hello folks! This is my first time posting here, and I am relatively new to JavaScript. I have come in need of assistance in guiding me in the right direction. My intentions are to create a web-based page where one can select from a few drop down menu's, and enter a few select pieces of information. This information would then be logged for later purposes, when the user chooses to retrieve this information (during the initial usage, no long term storage) in the format of a report. Would anyone have sources to similar coded applications, or any ideas of the directions I can go in for further assistance. I have at this point been utilizing the W3 website to learn. Thanks a ton! Hi, I have a problem. please help me in this regard. I have a combobox which contain numeric values from 1-7. i want to generate a table with 2 rows and 4 columns through javascript. Means when a user select numeric value like '3' from a combo box then a page generates '3' tables without refreshing a page. And if a user selects '4' from a combobox then a script generates 4 tables with 2 rows and 4 columns and so on. kindly guide me that how can i mkae this javascript. plz help So I've now made the layout of my website and I need to know how to position a javascript date I made, in a html table. This is the basic "var d=new date();" code I'm trying to implement in the menu section of my website. Also, I need to know how to do this using an external javascript file.
I have some javascript which applies alternative row colors to a table and also gives you a highlight effect when you mouseover the rows. However, the problem I have is that it applies to every table on my page, I only want it to apply to a specific table in the html file (I'm using frontpage), not all of them How would I go about doing this? The code is below, it has a bit of styling at the top before the javascript. <style type="text/css" media="all"> table.altsrowtable { width: 90%; margin: auto; border-collapse: collapse} td { border: 1px solid black; cursorointer;text-align:center} /* row 1 */ tr td { background: #edf3fe; } tr:hover td, tr.ie td { background: #e1e1ff; } /* row 2 */ tr.bis td { background: #D9ECFF; } tr.bis:hover td, tr.bisie td { background: #e1e1ff; } /* selected row 1 */ tr.sel:hover td, tr.selie td { background: #edf3fe; } /* selected row 2 */ tr.selbis:hover td, tr.selbisie td { background: #D9ECFF; } </style> <script type="text/javascript" span="altsrowtables" div="altsrowtable" id="altsrowtable" class="altsrowtable"> var IE = false; /*@cc_on IE=true; @*/ var r; function setRows(){ r = document.getElementsByTagName('TR'); for(var i=0;i<r.length;i++) r[i].className = (i/2 != Math.round(i/2))? '':'bis'; } function selectRow(aRow,add){ var c = aRow.className; if(add) setRows(); var b = aRow.className; if(IE) aRow.className = b==''? 'selie' : b=='bis'? 'selbisie' : c=='selie'? 'ie' : c=='ie'? 'selie' : c=='bisie'? 'selbisie' : c=='selbisie'? 'bisie' : ''; else aRow.className = b==''||c==''? 'sel' : b=='bis'||c=='bis'? 'selbis' : c=='selbis'? 'bis' : ''; } // roll-over (only for IE) function roll(what) { var c = what.className; what.className = c==''? 'ie' : c=='bis'? 'bisie' : c=='bisie'? 'bis' : c=='selbis'? 'selbisie' : c=='selbisie'? 'selbis' : c=='selie'? 'sel' : c=='sel'? 'selie' : ''; } // fire on loading onload= function() { setRows(); for(var i=0;i<r.length;i++) { if(IE) { r[i].onmouseover = function(){ roll(this); } r[i].onmouseout = function(){ roll(this); } } } } </script> <style type="text/css"> table.altrowstable { font-family: calibri; font-size:11px; color:#333333; border-width: 1px; border-color: #C0C0C0; border-collapse: collapse; } table.altrowstable th { border-width: 1px; "background-image:url('QP Header.png');" border-style: solid; border-color: #C0C0C0; font-size:12px; font-style:bold; } table.altrowstable td { border-width: 1px; border-style: solid; border-color: #a9c6c9; } </style> Thanks Sean Hello Everybody, I have a scenario where in i have 2 divisions, TOP and BOTTOM. In the BOTTOM Division i have a list box and Submit button in a form. User can select an item from the list box and click on the submit button. After user clicks the submit button i want to display some data/graph in the bottom division. However with my current code i see that on clicking the submit button , the data is displayed on a fresh page. Please guide me if this is possible or should i use a different logic. The code goes here. Code: <html>
<head>
<TITLE> Display Graph </TITLE>
<script type="text/javascript">
function processData(form)
{
var BoardNumber = document.forms[0].elements[0].value;
var BoardIndex = document.forms[0].elements[0].selectedIndex;
alert("Selected board is :" + BoardNumber + ":Selected Index is :" + BoardIndex);
document.write("Trying to print some data : ");
document.write("<br>");
document.write("The board number is " + BoardNumber);
}
</script>
<style type="text/css">
body {
background-color : #fefefe;
font-family:arial , verdana, sans-serif;
text-align : center;
}
.page {
margin-bottom : 10px ;
text-align : left;
font-size: 12px;
background-color : 00ff00;
background-repeat:repeat-y;
border:1px solid #666666;
height : auto;
}
.Down {
margin-top : 10px ;
text-align : left;
font-size: 12px;
background-color : ff0000;
background-repeat:repeat-y;
border:1px solid #666666;
height : auto;
}
.header{ padding : 3px;
background-color:#f3f3f3; }
.content {padding : 10px;
margin-left : 100px;
}
</style>
</haed>
<body>
<div class = "page">
<div class = "header"><h1> My Company Name </h1> </div>
<div class = "content">
<!-- The main Page Goes here -->
<h2> Top DIVISION </h2>
<p>
This is test page. This is test page. This is test page. This is test page. This is test page. This is test page. This is test page. This is test page. This is test page. This is test page. This is test page. This is test page. This is test page. This is test page.
</p>
</div>
</div>
<div class = "Down" name="Down">
<h2> BOTTOM DIVISION </h2>
<p>
Down : I NEED TO DISPLAY DATA/GRAPH in the same division. Not in a fresh page????
<BR>
<B>
SELECT THE BOARD NUMBER and PRESS THE BUTTON "Process Request"
</B>
<form name = "SelectColor">
<select name = "boardnum">
<option selected = "selected " value = " " > select board </option>
<option value = "Board_7125">7125</option>
<option value = "Board_7325">7325</option>
<option value = "Board_7335">7335</option>
<option value = "Board_7340">7340</option>
<option value = "Board_7342">7342</option>
<option value = "Board_7400">7400</option>
<option value = "Board_7401">7401</option>
<option value = "Board_7405">7405</option>
<option value = "Board_7420">7420</option>
<option value = "Board_7550">7550</option>
</select>
<input type="button" name="process" id="process"
value="Process Request..." onclick="processData(this.form)" /></p>
</form>
</p>
</div>
</body>
</html>
I need some help making a button function do what I want it to do. I have a index page that shows all my projects in a table with tabs you can click on that shows certain parts of all projects (ie tab for finance, project title). For now, every single project is shown on the website when you bring up the index page. Also the top part of the page, where I have the issue, there is a drop down list of all the projects with a "GO" button next to it. I want a user to be able to scroll down that list and click the button and the page would only show that particular project, ie choosing the tabs to go back and forth dealing with the one project only. The tabs are each its own .php file with the exact coding in all of them. Here is what I have on my index page that I need help on in order to make this button work. Any help will be appreciated. My main issue is this coding Code: <input type="button" value="GO" name="proj_list" /> But here is the whole index page Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2009 Events</title>
<link rel="stylesheet" type="text/css" href="../css/dddropdownpanel.css" />
<link rel="stylesheet" type="text/css" href="../css/sortable.css" />
<link rel="stylesheet" type="text/css" href="../css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/chromestyle.css" />
<link rel="stylesheet" type="text/css" href="../css/ajaxtabs.css" />
<script type="text/javascript" src="../includes/datepicker.js"></script>
<script language="javascript" src="../includes/tablesort.js"></script>
<script language="javascript" src="../includes/tableActions.js"></script>
<script language="javascript" src="../includes/chrome.js"></script>
<script language="javascript" src="../includes/ajaxtabs.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<?php include("../header.php"); ?>
</div>
<div id="navbar2">
<?php include("../menu.php"); ?>
</div>
<div id="content">
<div id="breadcrumb">
<script language="javascript" src="../includes/breadcrumbs.js"></script>
</div>
<?php
// If the user wants to add a project
if (isset($addproject)):
else:
$dbcnx = @mysql_connect("xxxxx", "xxxxxx", "xxxxxxxx");
if (!$dbcnx) {
echo( "<P>Unable to connect to the xxxxxxxxx" .
"database server at this time.</P>" );
exit();
}
mysql_select_db("techweb", $dbcnx);
if (! @mysql_select_db("techweb") ) {
echo( "<P>Unable to connect to the xxxxxxx" .
"database at this time.</P>" );
exit();
}
// If a project has been submitted,
// add it to the database.
if ("SUBMIT" == $proj_submit) {
$sql = "INSERT INTO projects SET " .
"proj_priority='$priority', " .
"proj_title='$title', " .
"proj_bdlead='$bdlead', " .
"proj_englead='$englead', " .
"proj_objective='$objective', " .
"proj_capability='$capability', " .
"proj_approach='$approach', " .
"proj_venue='$venue', " .
"proj_tradeshow='$tradeshow', " .
"proj_funding='$funding', " .
"proj_src-ds='$src-ds', " .
"proj_src-cap='$src-cap', " .
"proj_src-irad='$src-irad', " .
"proj_status='$status', " ;
if (mysql_query($sql)) {
echo("<P>Your project has been added.</P>");
} else {
echo("<P>Error adding submitted project: " .
mysql_error() . "</P>");
}
}
echo("<h1 style='text-align:left'> 2009 Projects </h1>");
// Request the text of all the projects
$result = mysql_query(
"SELECT * FROM projects");
if (!$result) {
echo("<P>Error performing query: " .
mysql_error() . "</P>");
exit();
}
?>
<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" name="proj_list" />
<?
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>
I'm almost finished with this app for XUL / HTML Table Generation, and i have a really strange problem... The HTML strings in the Arrays can be changed, and the HTML file saved, and the HTML page reloaded, and the changes will render. However, i have one array, no matter what i change the HTML strings to, it refuses to render the changes made to the HTML strings. It's quite confusing... the array in question is Code: // Humidor InnerHTML
HumidorInnerHTML[0] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[1] = "<input type='textbox' id='Others_Caption" + HumidorIndex + "'>";
HumidorInnerHTML[2] = "<input type='textbox' value='85' id='Others_Height" + HumidorIndex +"'>";
HumidorInnerHTML[3] = "<input type='textbox' value='85' id='Others_Width" + HumidorIndex +"'>";
HumidorInnerHTML[4] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[5] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[6] = "<img src='delete.png' onClick=DeleteRow('" + HumidorIndex + "','Humidor_Table');>";
HumidorInnerHTML[7] = "<img src='add.png' onClick=AddRow('" + HumidorIndex + "','Humidor_Table');>";
and the function that generates the HTML Table on the fly (and adds the cell data to them) is he Code: function AddRow(index, DIV)
{
MyTable = document.getElementById(DIV);
var newCell;
var newRow = MyTable.insertRow(index);
var Length;
switch (DIV)
{
case "Intro_Table" : Length = IntroInnerHTML.length;
break;
case "Image_Table" : Length = ImageInnerHTML.length;
break;
case "Watch_Table" : Length = WatchInnerHTML.length;
break;
case "Others_Table" : Length = OthersInnerHTML.length;
break;
case "Humidor_Table" : Length = HumidorInnerHTML.length;
break;
}
for (var i = 0; i < Length; i++)
{
newCell = newRow.insertCell(i);
switch (DIV)
{
case "Intro_Table": newCell.innerHTML = IntroInnerHTML[i];
break;
case "Image_Table": newCell.innerHTML = ImageInnerHTML[i];
break;
case "Watch_Table": newCell.innerHTML = WatchInnerHTML[i];
break;
case "Others_Table": newCell.innerHTML = OthersInnerHTML[i];
break;
case "Humidor_Table": newCell.innerHTML = WatchInnerHTML[i];
break;
}
}
// Update the Index Counters
switch (DIV)
{
case "Intro_Table": IntroIndex++;
break;
case "Image_Table": ImageIndex++;
break;
case "Watch_Table": WatchIndex++;
break;
case "Others_Table": OthersIndex++;
break;
case "Humidor_Table": HumidorIndex++;
break;
}
}
when the page is loaded, the Init() function is started, that code is he Code: function Init()
{
AddRow(1, "Intro_Table");
AddRow(1, "Image_Table");
AddRow(1, "Watch_Table");
AddRow(1, "Humidor_Table");
AddRow(1, "Others_Table");
}
Did i miss something? there must be something i've over looking. I have even tried isolating some other external JS, and CSS includes that i have, and isolating them has no change in the result. the html file is live he http://kevinjohnson.clanteam.com/XML...anageSite.html thanks Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript">
function send_onclick(frmName)
{
var bolSubmit;
bolSubmit = true;
if (frmName.email.value == "")
{
alert("You must enter an email address");
bolSubmit = false;
}
if (bolSubmit == true)
{
frmName.submit(frmName);
}
}
</script>
</head>
<body>
<form name="frmName" method="post" action="validate.asp">
Enter your name in the text box. If nothing is entered, a warning <br />
message will be displayed. Only when you enter something into the <br />
text box will the page be submitted. <br /><br />
Please enter your name : <input type="text" name="email" size="20" /><br />
<input type="button" name="butSent" value="Do it" onclick="return send_onclick(frmName)">
</form>
</body>
</html>
Hi there, I would like to know the purpose of having var bolSubmit in the code above. Also, why is it that "form name" allows my code to work even though there is a warning stating that it is outdated, but when I change it from "form name" to "form id", it does not complain of the warning anymore, but instead my code does not work. Please advise. please help me~~Hi I have to create a table using javascript. Firefox displays the expected result but for IE, the column width is screwed >"< I have to use the col tag to set width because sometimes the first row maybe merged. All I need is to create a table that strictly displays according to the inputted column widths from my program. In below I have setup very short example that construct table in a similar way to my original javascript function. I also draw a ruler to help showing the proper width of 400px on the screen. column 1 should be 100px width and column 2 should be 300px. Please help me~~T_T Code: <?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body onload="init()">
Hard Coded:
<DIV style="WIDTH: 400px; HEIGHT: 25px;overflow:hidden;">
<TABLE style="border:none; BORDER-SPACING: 0px; WIDTH: 400px; TABLE-LAYOUT: fixed" cellSpacing="0" cellpadding="0">
<col width="100px">
<col width="300px">
<TBODY>
<TR>
<TD style="background-color:blue">
a
</TD>
<TD style="background-color:green">
b
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
Ruler:
<div id='ruler' style="background-color:yellow;width:400px;height:28px;"></div>
Javascript inserted:
<div id="hi">
</div>
</body>
<script language="javascript">
function init() {
var w = [100, 300]
// test table create
var testDiv, testTBody, testTable, testTr, testTd, testCol;
document.getElementById("hi").appendChild(testDiv = document.createElement("div"));
with (testDiv.style) {
width="400px";
height="25px";
}
testDiv.appendChild(testTable = document.createElement("table"));
with (testTable) {
style.tableLayout="fixed";
style.borderSpacing="0px";
style.width = "400px";
appendChild(testCol = document.createElement("col"));
testCol.style.width = 100 + 'px';
appendChild(testCol = document.createElement("col"));
//testCol.style.width = 300 + 'px';
appendChild(testTBody = document.createElement("tbody"));
cellSpacing= 0
}
testTBody.appendChild(testTr = document.createElement("tr"));
with (testTr){
}
for (var i= 0; i < 2; i++) {
testTr.appendChild(testTd = document.createElement("td"));
testTd.innerHTML = "Testing";
with (testTd) {
style.borderTop = "1px solid lightgray";
style.borderLeft="1px solid lightgray";
style.borderRight="1px solid black";
style.borderBottom="1px solid black";
}
}
}
</script>
</html>
i have the code: foreach($product_names as $product_row) { ?> <tr> <td > </td><td width='200px'><?php echo $product_row->getName();?></td> <td width='200px'><input type="checkbox" name="graphic[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> <td width='200px'><input type="checkbox" name="text[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> </tr> <?php } ?> and a submit button on the page. the i also have the javascript code for the onclick="check()" : <html> <head> <script type="text/javascript"> function check() { var graphics = document.getElementsByName("graphic[]"); for(i=0;i<graphics.length;i++) { if(graphics[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } var text = document.getElementsByName("text[]"); for(i=0;i<text.length;i++) { if(text[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } } </script> </head> so what all this means is i have two arrays of checkboxes for each product. as soon as i check any checkbox the submit button appears. i click on the submit button and i go to the next form. the problem now comes in if i click on the "back" button to go back to the previous page via the bwrowser..the submit button is disabled althou all my checkboxes that i checked, are still checked....i want the submit button to show??? please help?? thanks I have two versions of this document. The first version uses only JavaScript and the standard PROMPT(). It works very well, but I would like to insert the name prompt into the page using the input command. For some reason the variable loaded in the HTML statement doesn't get passed to the JavaScript. Any ideas would be appreciated! This is only a small test page. Sorry I don't know about the [code] tag... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> <meta name="created" content="Sat, 10 Sep 2011 19:40:31 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title>Enter golfers name</title> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="script1.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function GetPage(){ document.write("OK") var lab = ""; var result = fullname.toUpperCase(); var word=result.split(" "); fname = word[0] lname = word[1] alpha = lname.slice(0,1); lab = fname.concat("_") lab = lab.concat(lname) if(word[2]){ ext = word[2] lab = lab.concat("_") lab = lab.concat(ext) } var intro = "./Stats_"; page = intro.concat(alpha); page = page.concat("_golfers.html#"); page = page.concat(lab) document.write(page) <!-- window.location.pathname = page } </script> </head> <body> <center> <form action="form_action.asp" method="get"> You can enter the golfersname or select him from the above list.<br><br> <input type="text" name="fullname" /> <button type="submit" onclick="GetPage()">GO</button> </form> </center> <BR><BR><BR> This is the end </body> </html> Hello, I am nearing completion on the modification of a Javascript/Html Order Form. The problem arises when I click on 'Submit Order' after filling in details and choosing a product. For some reason, the pop up box shows the correct product, but it shows the $ Total from the previous box in the table. Thank you all for your time in looking into this: Code: <html>
<head>
<title>JS Order</title>
<script language="JavaScript">
<!-- Start hiding from older browsers.
// This function displays the nag screen when a field hasn't been filled in.
function nag(form, field, x)
{
ufield=field.toUpperCase();
alert("Details missed " + ufield + "!" + "\n\nPlease fill in the field and submit the form again.");
form.elements[x].focus();
}
// This function is used to round the tax amount to the nearest hundreths.
function roundPrice(price)
{
// save a copy of the price in case it is an even dollar amount.
var workPrice = price;
// Make the price a string by adding a string 0 to the end.
workPrice += "0";
// Find out where the decimal point is.
var pointIndex = workPrice.indexOf(".",0);
// If there is a decimal point now check to see if it needs to be rounded up.
if (pointIndex >= "0") {
// Set an index for the thousands digit.
var thousands = pointIndex +3;
// if the third number past the decimal point is greater than or
// equal to 5, then we need to round up the hundredth digit.
if (workPrice.charAt(thousands) >= "5")
{
// Turn the price into a number.
workPrice=parseFloat(price);
// Round up the price.
workPrice=workPrice + .01;
// Turn it back into a string.
workPrice=workPrice + "0";
// Cut off the thousands on down.
rPrice = workPrice.substring(0,thousands);
} else {
// We didn't need to round the price up so cut off the
// thousands on down and return the price
rPrice = workPrice.substring(0,thousands);
}
// Its an even dollar amount so just put on the .00 on the end.
} else {
rPrice = price + ".00";
}
// Now return the rounded price.
return rPrice;
}
// This function calculates the form.
function updatePrice()
{
// Reset the subtotal price
var addPrice = 0;
// Reset the running total prices.
var nowPrice = 0;
// Reset the nubmer of part ordered.
var partcount = 0;
// Step through each element in the form.
for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++)
{
// If the form element has "qty" in the name then we need to process it.
if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty')
{
// If the item has a quantity of not 0, then we need to process it.
if (self.document.forms[0].elements[i].value != 0)
{
// Locate the cost
costIndex = i + 1;
// Increment the part counter.
partcount++;
// Get the actual value for the quantity.
nowQty = eval(self.document.forms[0].elements[i].value);
// Get the cost of the item.
nowPrice = eval(self.document.forms[0].elements[costIndex].value);
// Calculate the extended cost (i.e., quanty * cost).
nowPrice = eval(nowPrice * nowQty);
// Add to the subtotal.
addPrice += nowPrice;
}
}
}
// Round off the subTotal price.
subTotal=roundPrice(addPrice);
// Put the sub total price into the form.
self.document.forms[0].subtot.value = subTotal;
// Figure the tax.
tax = parseFloat(self.document.forms[0].taxrate.value * addPrice);
// Round off the tax price.
totalTax = roundPrice(tax);
// Put the total tax into the form.
self.document.forms[0].totaltax.value = totalTax;
// Start figuring the total including tax.
// Turn the price string into a number.
subPrice = parseFloat(addPrice);
// Turn the tax string into a number.
addTax = parseFloat(totalTax);
// Add the tax and subtotal to get the total price.
totalPrice = (addTax + subPrice);
// Round the total price.
finalPrice = roundPrice(totalPrice);
// Update the form with the total cost.
self.document.forms[0].cost.value = finalPrice;
// Update the form with the number of line items.
self.document.forms[0].items.value = partcount;
}
function orderIt(form)
{
// If the order is zero, display a message.
if (form.cost.value == "0.00")
{
alert("You have not ordered anything. Please select an item and re-submit your order.")
} else {
if (form.elements[0].value == "")
{
nag(form, form.elements[0].name,0)
} else if (form.elements[1].value == "")
{
nag(form, form.elements[1].name, 1)
} else if (form.elements[2].value == "")
{
nag(form, form.elements[2].name, 2)
} else if (form.elements[4].value == "")
{
nag(form, form.elements[4].name, 4);
} else if (form.elements[5].value == "")
{
nag(form, form.elements[5].name, 5);
} else if (form.elements[6].value == "")
{
nag(form, form.elements[6].name, 6);
} else if (form.elements[10].value == "")
{
nag(form, form.elements[10].name, 10);
} else {
var message = "You have ordered the following items:\n";
message = message + "Qty\tCost\tDescription\n";
// Step through each element in the form.
for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++)
{
// If the form element has "qty" in the name then we need to process it.
if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty' && self.document.forms[0].elements[i].value !=0)
{
// Get the quantity.
qtyItem = self.document.forms[0].elements[i].value;
costItem = self.document.forms[0].elements[i-2].value;
// Get the description.
descItem = self.document.forms[0].elements[i-1].value;
// add the line item to the confirmation message.
message = message + qtyItem + "\t" + costItem + "\t" + descItem + "\n";
}
}
message = message + "\nOrder total: $" + self.document.forms[0].cost.value
if (confirm(message))
{
self.document.forms[0].submit();
}
}
}
}
// end hiding from older browsers -->
</script>
</head>
<body bgcolor="white" text="black" alink="red" vlink="purple" link="blue" background="images/bkgrd.gif">
<p>
<table width=440>
<tr><td>
<p>
<form name=options method=post action="/cgi-bin/order.cgi">
<table border="0" width="100%" id="table1">
<tr>
<td width="109" align="right"><font face="Arial" size="2"> First Name:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=FirstName size=30 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Last Name:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=LastName size=30 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Address Line 1:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=Address1 size=40 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Address Line 2:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=Address2 size=40 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Suburb:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=Suburb size=25 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">City:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=City size=25 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Postal Code:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=PostalCode size=15 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Country:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=Country size=15 maxlength=40 value=NZ></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Home Phone:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=HomePhone size=20 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Mobile Phone:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=MobilePhone size=20 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">E-Mail Address:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=EmailAddress size=30 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Domain Name:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=DomainName size=30 maxlength=40></font></td>
</tr>
</table><br>
<font face="Arial" size="2">Enter a quantity of 1 into the package you require.<br><br>
Monthly payments incur a $2 per month administration fee.
Set up is <b>free</b> for all packages (for a limited time).</font><br><br>
<table border=1 cellpadding=2 width="500" bordercolorlight="#808080">
<tr>
<th><font face="Arial" size="2">Description</font></th>
<th><font face="Arial" size="2">Qty</font></th>
<th><font face="Arial" size="2">Total</font></th>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc1" value="Basic Monthly">
</font><font face="Arial" size="2">Basic Package <BR><B> Pay Monthly</B></font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty1" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost1" value="11.99">
</font><font face="Arial" size="2">$11.99</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc2" value="Basic PrePay 1 Year">
</font><font face="Arial" size="2">Basic Package - $9.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty2" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost2" value="109.89">
</font><font face="Arial" size="2">$109.89</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc3" value="Basic PrePay 2 Years">
</font><font face="Arial" size="2">Basic Package - $8.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty3" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost3" value="197.78">
</font><font face="Arial" size="2">$197.78</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc4" value="Basic PrePay 3 Years">
</font><font face="Arial" size="2">Basic Package - $7.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty4" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost4" value="263.67">
</font><font face="Arial" size="2">$263.67</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc13" value="Deluxe Monthly">
</font><font face="Arial" size="2">Deluxe Package<BR><B> Pay Monthly</B></font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty13" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost13" value="21.99">
</font><font face="Arial" size="2">$21.99</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc14" value="Deluxe PrePay 1 Year">
</font><font face="Arial" size="2">Deluxe Package - $19.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty14" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost14" value="219.89">
</font><font face="Arial" size="2">$219.89</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc15" value="Deluxe PrePay 2 Years">
</font><font face="Arial" size="2">Deluxe Package - $18.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty15" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost15" value="417.78">
</font><font face="Arial" size="2">$417.78</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc16" value="Deluxe PrePay 3 Years">
</font><font face="Arial" size="2">Deluxe Package - $17.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty16" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost16" value="593.67">
</font><font face="Arial" size="2">$593.67</font></td>
</tr>
</table>
<font face="Arial" size="2">
<br>
</font>
<table border=1 cellpadding=2 width="500" bordercolorlight="#808080">
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc17" value="Blogging Software Installation Service">
</font><font face="Arial" size="2">Installation Service<BR><B> Blogging software
(Wordpress etc)</B></font></td>
<td align=center width="39"><font size="1" face="Arial"><input type=text name="qty17" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost18" value="39.00">
</font><font face="Arial" size="2">$39.00</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc19" value="Shopping Cart Installation Service">
</font><font face="Arial" size="2">Installation Service<BR><B> Shopping Cart
(ZenCart, osCommerce, Cubecart etc)</B></font></td>
<td align=center width="39"><font size="1" face="Arial"><input type=text name="qty19" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost19" value="349.00">
</font><font face="Arial" size="2">$349.00</font></td>
</tr>
</table>
<p>
<table width=500>
<tr>
<td align=right>
<div align="left">
<table cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=right><font face="Arial" size="2">Sub Total: $</font><font size="1" face="Arial"><input name=subtot value="0.00" size=10 maxlength=10 onChange="updatePrice()"></font></td>
</tr>
<tr>
<td valign=bottom><font size="1" face="Arial"><input type=hidden value=".15" name=taxrate size=5 maxlength=5 onchange="updatePrice()">
</font></td>
<td align=right><font face="Arial" size="2">GST: $</font><font size="1" face="Arial"><input type=text name=totaltax size=10 maxlength=10 value="0.00" onChange="updatePrice()"></font></td>
</tr>
<tr>
<td colspan=2 align=right><font face="Arial" size="2">Total Order: $</font><font size="1" face="Arial"><input name="cost" type=text value="0.00" size=10 maxlength=10 onChange="updatePrice(this.form)"><input type=hidden maxlength=4 size=4 name=items></font></td>
</tr>
</table>
</div>
<p>
<font size="1" face="Arial">
<input type=button value="Submit Order" onClick="orderIt(this.form);" style="float: left"></font><font face="Arial" size="2">
</font><font size="1" face="Arial">
<input type=reset value="Clear Order" style="float: left"><font face="Arial" size="2">
</form>
</font></font>
</center>
</body>
</html>
favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! |
|||||||