|
JavaScript - Updating Mysql Db From Html Table Values
Hello,
I'm dynamically outputting the contents of a MySQL table using Python, to a HTML table, which users view (obviously) through a web browser. It looks great, but the problem is that I'd like users to be able to update these values. For example, I have the current value of certain fields in text boxes. I'd like users to be able to change those values, then hit a submit button or similar (ideally on-the-fly) to update the dB. I imagine javascript will need to pass values to a Python script, but I don't know what the best way to go about this is. The table is generated with a loop like so: Code:
# Python code embedded in a .psp file
cursor = db.cursor()
cursor.execute("SELECT from_name, from_address, project, orb_proj, app, tier, environment, network, security_zone, datacenter, server_type, num_servers, date, status FROM requests")
rows = cursor.fetchall()
for row in rows:
new_row = """
<td>%s<br></td>
... (line repeated for each column)
""" % row[0:15]
req.write(new_row)
Any ideas? Maybe this whole thing should be rewritten in something else. Thanks! Similar TutorialsHi, I'm working on a project that will display a form that takes in the amount of Money I earn in a given month. This value is inserted into the code, and once submitted, a Live Updating value will display how much $ I would have earned so far this month. This counter will work and display much like Gas Pumps increment. So in example: I type in that I make $1,000 per month. Once submitted, the count begins. The code will figure out how much money I will be making every second of the day, and update it live. This value updates live displaying something like $0.0012. If I earn $1 Million per month, then the values would increment much faster. Could anyone give me some input? Thanks Hi, First the background information - I run a website for the FA, they have recently launched an Under 21's League. They want the Fixture & Results posted on the site, with a league table. There is the problem, I need to league table to automatically update according to the results I put in. I believe JavaScript is capable of this, I have spent the last few days learning a basic ~ intermediate level of JS. However, I am still stuck. If you think you could help me out then reply here, I know this is one hell of a lot of coding so if you can only point me in the right direction that would be great! A side note -- I was thinking about it and well the JS needs to pull information from another internal web page, which I believe it cannot do. However, I'm lead to believe it could read it from a file on the server? If so I guess I will need to create a form to submit the results? Hope someone can help me out Thanks, Ben Thanks for reading this thread. I'm looking for some information on a way to update HTML remotely that would be search engine friendly. It would do a replace similar to the google website optimizer scripts. Example... Page.html <head> <script>www.remotesite.com/updatekeywords.js</script> <script>replacekeywords</script> [would insert keywords here in a search engine friendly way] </noscript> </head> <body> <script>replacebody</script> [would insert body here in a search engine friendly way] </noscript> 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. I wish to get the values for the 3rd and 4th cell of each row where these contain drop down menus. I've tried various ways but my code doesn't seem to iterate through rows of a table. I can get the values for the first row, but not the rest. There's isn't a fixed row size for the table as the user will be able to add and delete them. I've put the values in separate arrays but instead of the array containing say [10, 20] it contains [10, 10] as it just duplicates the first row's values. Here's my code that I have so far: Code: function calculate(){
var len = document.getElementById(arguments[1]).rows.length;
var cMenus = [];
var gMenus= [];
for(var j = 1; j<len; j++){
for(var i = 2; i<arguments.length; i++){
var c = document.getElementById(arguments[2]);
var g = document.getElementById(arguments[3]);
cMenus[a] = c.options[c.selectedIndex].value;
gMenus[a] = g.options[g.selectedIndex].value;
}
a++;
}
<button type="button" onclick="calculate('text','course', 'credits', 'grade')">Calculate</button>
HTML Code up to the first dropdown menu: Code: <table id="course" summary="add/remove course details" width="350px" border="1">
<tr>
<td><input type="checkbox" name="tick"/></td>
<td><input type="text"/></td>
<td>
<select name="credits" id="credits">
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
</td>
<select name=....
I've tried adding j to the arguments or putting it in "[]" but nothing seems to work. I don't think the platform I'm using supports jquery, so help would be really appreciated for using javascript, thanks. [This is an updated question from my previous thread as I was unable to edit or delete my question] 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 Hi all! I am trying to write code that does the following: 1) creates an array with 6 objects in it. 2) each object has a respective image. 3) from the 6, one object is selected as the "target" 4) all the 6 images are displayed on the screen with a hint as to which of the 6 is the target this time. 5) the user selects one of the 6 he/she thinks is the right object. 6) if the selection is right, his/her score increases by 1, and the whole process loops. The issue is I want the whole process to loop, but I want to store the users score somewhere otherwise it will get reset to 0 everytime the process loops.I've been told I could use cookies for this, but I've been reading a lot that cookies are outdated. Is there an easy way to do this without cookies? The required code is below: Code: <head>
<script language="text/javascript">
var redScore = 0;
....
targets = new Array(); // creating a new array with all the possible elements
....
fisherYates(targets); //randomizing the array
...
var theTarget = targets[0]; // selecting the element at index 0 to be the target
...
...
lots of code that is not relevant
...
...
function redClick( buttonLocation ) {
if(buttonLocation == redLocation){
redScore = redScore +1;
I need something here that will save the score and reload the page
}
}
...
...
</script>
</head>
<body>
<table>
<tr>
<td><img id="red0" onclick="redClick(0)" /></td>
<td><img id="red1" onclick="redClick(1)" /></td>
<td><img id="red2" onclick="redClick(2)" /></td>
...
...
...
</tr>
</table>
</body>
I know this is quite complicated, so any help or direction would be much appreciated. Thank you! Hi, I've a Javascript function where i'm sending an return value. How do i capture this return value from HTML. My javascript func is as below: Code:
function check()
{
var frm=document.forms.stream_selection
sel_num = new Array();
Parr = new Array();
for(j=1;j<1000;j++)
{
if(frm[j] != null)
{
if(!frm[j].checked)
{
frm[0].checked=false
}
else
{
Parr.push(j);
ParrStr=Parr.join(',');
alert(Parr);
}
}
}
return(ParrStr);
}
My HTML call function is as below: Code: echo "<td><center><input name=\"sstreamname\" type=\"checkbox\" onclick=\"check():return true;\"></center></td></tr></font></center></tr></font></center>"; How do i get the value of ParrStr and transfer this to next form. I'm using PHP . Thanks, Ramki. so i have a navigation bar and instead of clicking on it to another page on the site where everything reloads again i want it to just reload the content area, so i have 5 tables of content each representing a different page and i just want it this way so i can implement something else that doesnt have anything to do with this Code: <script type="text/javascript">
var page = 1;
function setPage1()
{
page = 1;
}
function setPage2()
{
page = 2;
}
function setPage3()
{
page = 3;
}
function setPage4()
{
page = 4;
}
function setPage5()
{
page = 5;
}
function setBlank1(x)
{
if (page==1)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank2(x)
{
if (page==2)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank3(x)
{
if (page==3)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank4(x)
{
if (page==4)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank5(x)
{
if (page==5)
{
x.class="content";
}
else
{
x.class="blank";
}
}
this is my javascript so whats supposed to happen is when someone clicks a link on the nav bar it sets the page to that value so only that value is showing. i put the functions setPage1-5 in class="setPage1(this)" according to what content area they go too Code: table.blank {
display: none;
that is my blank class attribute so its not there but its loaded please ask me any questions and sugest anything im not a javascript expert or anything of that sort but ive been looking this over for a couple days now and i cant find anything online either Hi, I am trying to pass a video id value from one javascript page to another, extract the video id, append it to a utube url and then pass it to a html page for immediate display. I have managed to extract the video id value and append it to the url but cannot get it into the html section of the code. My code is posted below <html> <head> <script type="text/javascript"> function getParams() { var idx = document.URL.indexOf('?'); var urlId; var params = new Array(); if (idx != -1) { var url = document.URL.substring(idx+1, document.URL.length).split('&'); for (var i=0; i<url.length; i++) { videoVal = url[i].split('='); urlId = "http://www.youtube.com/v/" + videoVal[1]; } } document.getrElementById('UrlId').value=urlId; } params = getParams(); </script> </head> <body> <object width="425" height="344"> <param name="UrlId" value=urlId; </param><embed src=urlId type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed> </object> </p> </body> </html> I need to get it to appear as a complete url in the following lines in the html code <param name="UrlId" value=urlId; <embed src=urlId type="application/x-shockwave-flash"></embed> Can someone please help with this. Thanks I have one html text area in my JSP file. when i click on that text area, a pop-up will come, in that pop-up i have list of items. So after selecting a item from that pop-up list, need to click okay. so that text area will update with the selected value. In this case, i need to compare the first text area value and updated text area value. How can i do that in Java Script. First off, I'd like to say that I do not know much javascript. I am building a rather intensive website for tutorial purposes, and so far it has required me to become quite familiar with html5, css, php, and mysql. However, I've avoided javascript like the plague due to how different it seems from the rest. Lets just say, I'm confused. I've scoured the net looking for a similar tutorial on how to create a pop-up window onclick for a link. This is what I currently have it doing: Firstly, I query and display the DB, referencing images based on an incremental variable. I really want to make it all automatic...in the sense, that when I update the database with a new "Structure" it will automatically apply itself to the page without me having to edit html/css/js/php/etc. It all seems to be working fine, except when I click on the second listing. It refers to the same div (Town Center), because, I assume, the divs are identically labeled, and it refers to the first. Here is my code: This is my Callstructures.php file. Code: <?php
$query = "SELECT str_name, str_imageloc, str_infoloc FROM structures";
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());
$i = 0;
if (mysql_num_rows($result) > 0) {
while(list($str_name, $str_imageloc, $str_infoloc) = mysql_fetch_row($result)) {
echo "<li>";
echo "<a href='#' onClick='javascript: loadPopup()';>";
echo "<img src='$str_imageloc' title='$str_name' longdesc='$str_infoloc' alt='stralt text' class='image$i'>";
echo "</a>";
echo "</li>";
echo "<div id='popupContact'>";
include ($str_infoloc);
echo "</div>";
$i++;
}
}
?>
This is my main page: Structures.php Code: <body> <div id =allstr> <ul> <?php include 'gamephp/callstructures.php'; ?> </ul> <div id="backgroundPopup"></div> </div> </body> </div> </html> And here is the JavaScript I am using, popup.js: Code: /***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
centerPopup();
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
And the CSS for the popup: Code: /* pop up css */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
Should I keep this code? Is there anyway to make it work? My thought process is to change "callstructures" to include a variable ($i is already there) that creates a bunch of unique div ids Code: echo "<div id='popupContact$i'>"; Then in the JS, somehow alter it so it recognizes the change. If not, are there any tips, or possible links to tutorials and info on how I can figure this out. With much appreciation, Thanks! Hi gud mng, I have one problem... How to process textbox values/ call textbox values in JS through a Java program. My text box values are dates. I have to process these dates. Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database. My files are look like 20100929, 20100930, 20101001 For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml Code: Code:
<html>
<table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0">
<tr><td id="leftcolumn" width="170" align="left" valign="top">
<div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3>
<a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br /> <br />
<a rel="nofollow" target="_top" href="between.htm" >Between Days</a>
<link rel="stylesheet" type="text/css" href="epoch_styles.css" />
<script type="text/javascript" src="epoch_classes.js"></script>
<script type="text/javascript">
var cal1, cal2;
window.onload = function ()
{
cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1'));
cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2'));
};
/*............*/
function confirmation(f)
{
var startdate = f.fromdate.value
var enddate = f.todate.value
var myday=new Date()
var yr=myday.getFullYear()
var mn=myday.getMonth()+1
var dt=myday.getDate()
var today=""
var present, ys, ms, ds, ye,me,de, start, end
if(mn < 10) { mn = "0" + mn }
if(dt <10) { dt = "0" + dt }
today= yr + "/" + mn + "/" + dt
present=yr + "/" + mn + "/" +dt
if (today < startdate )
{
alert (" Start date should not be exceed to-day's date " + present )
startdate.focus()
return false
}
if (today < enddate )
{
alert (" End date should not be exceed to-day's date " + present )
enddate.focus()
return false
}
if (today == startdate )
{
alert(" You are selected to-days date as Starting day" );
}
var answer = confirm("Do you want to continue ?")
if (answer)
{ if( startdate < enddate)
alert("Dates between " + startdate + " to " + enddate + " are confirmed" )
else
alert("Dates between " + enddate + " to " + startdate + " are confirmed" )
}
else
{
alert("Date not confirmed")
window.location="to_date.htm";
}
ys= startdate.substring(0,4);
ms= startdate.substring(5,7);
ds= startdate.substring(8,10);
start=ys + "" + ms + "" +ds
ye= enddate.substring(0,4);
me= enddate.substring(5,7);
de= enddate.substring(8,10);
end=ye + "" + me + "" +de
}
/*.......................................................*/
</script>
<div style="margin-left:100px;">
<body>
<style type="text/css">
#conf
{
margin-left:115px;
}
</style>
<td align="left" valign="top">
<table width="100" border="0" cellpadding="0" cellspacing="0">
<td style="padding-top:0px">
</table>
<h4>From Date</h4>
<form name= "formbet" id="placeholder" method="post" action="#" >
<input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/>
<td align="left" valign="top">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<td style="padding-top:20px">
<h4>To Date</h4>
<input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br />
<input id="conf" type="button" onclick="confirmation(this.form)" value="Submit">
</form>
</body>
</html>
In my coding, ys, ms, ds represents year starting, month starting, starting day... ye, me, de represents end... start,end gives file names in the format of yyyymmdd now i want to process files from 20100101 to 20100930 means from date is 2010/01/01 and to date is 2010/09/30 if i press submit button the files from 20100101 to 20100930 are processes here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30 For this how do i call these textbox values (from date text box and todate) to another program (java) Thanks in advance. Hi all, I'm having some issues with getting a html form to send data through to my MYSQL database. JS is the one part of the script that I'm least sure about, so I assume the issue lies there... All the data from the text fields in the form go through to the MySQL table fine, but the data from the drop down box and checkbox doesn't make it... So, the html dropdown and checkbox code from the form is: Code: <label for="lettertype" id="lettertype_label">I want my letter to be: </label><br> <select id="lettertype" name="lettertype"> <option value="0"></option> <option value="public">Public, though Anonymous</option> <option value="private">Private</option> </select><br> <label class="error" for="lettertype" id="lettertype_error">Would you like your letter to be public or private?</label> <br> <label for="terms" id="terms_label">I understand thde terms and agreements...</label><br> <input type="checkbox" name="terms" value="Yes" /><br> <label class="error" for="terms" id="terms_error">We know no one ever reads these things, but we need to you at least pretend...</label> When submit is clicked, it calls the following javascript: Code: $(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#F6F6F6"});
$('input.text-input').focus(function(){
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#F6F6F6"});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var letter = $("textarea#letter").val();
if (letter == "") {
$("label#letter_error").show();
$("textarea#letter").focus();
return false;
}
var firstname = $("input#firstname").val();
if (firstname == "") {
$("label#firstname_error").show();
$("input#firstname").focus();
return false;
}
var surname = $("input#surname").val();
if (surname == "") {
$("label#surname_error").show();
$("input#surname").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var lettertype = $("select#lettertype").val();
if (lettertype == "0") {
$("label#lettertype_error").show();
$("select#lettertype").focus();
return false;
}
var terms = $("input#terms").val();
if (terms == "") {
$("label#terms_error").show();
$("input#terms").focus();
return false;
}
var dataString = '&letter=' + letter + '&firstname='+ firstname + '&surname=' + surname + '&email=' + email + '&lettertype' + lettertype + '&terms' + terms;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "../php/emailform.php",
data: dataString,
success: function() {
$('#replace').html("<div id='message'></div>");
$('#message').html("<br>")
.append("")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='mailconfirm' src='images/mailconfirm.png' /><br><br>");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#firstname").select().focus();
});
Then in terms of the PHP script, this is the excerpt: Code: $letter = $_POST['letter'];
$firstname = $_POST['firstname'];
$surname = $_POST['surname'];
$email = $_POST['email'];
$lettertype = $_POST['lettertype'];
$terms = $_POST['terms'];
$timestamp = date( 'Y-m-d');
$sql = "INSERT INTO ToBeEmailed (letter, firstname, surname, email, lettertype, terms, timestamp) VALUES ('$letter', '$firstname', '$surname', '$email', '$lettertype', '$terms', '$timestamp')";
If anyone could offer any advice that'd be great! Cheers in advance... I have a bunch of checkboxes like below that the user can check some or all and click the button and see the values of all the selected checkboxes. How can I do that? Code: <script>
function alertValues(){
}
</script>
<input type="checkbox" class ="normal2" value="131971" name="list[]" >
<input type="checkbox" class ="normal2" value="131973" name="list[]" >
<input type="checkbox" class ="normal2" value="131975" name="list[]" >
<input type="checkbox" class ="normal2" value="131977" name="list[]" >
<input type="button" onClick="alertValues()"
Dear All Please see the script below. This is a scrolling table. First row & last row are fixed, they don't moved. I also want to fixed the first two column (column1 & column2). Please help me. Code:
/* CSS Document */
table#table-body, table#table-header, table#table-footer
{
border-spacing:0;
border-collapse:collapse;
border:1px solid;
table-layout:fixed;
width:1000px;
border:1px solid #000;
}
table#table-header th
{
background:#c2a1a1;
}
table#table-footer td
{
background:#a39393;
}
table#table-body td
{
background:#e1d9d9;
}
table#table-body td, table#table-header th, table#table-footer td
{
border:1px solid #000;
width:100px;
height:30px;
overflow:hidden;
white-space:nowrap;
}
div#header-container, div#footer-container
{
overflow:hidden;
}
div#scroll
{
width:500px;
overflow:hidden;
max-height:150px;
padding-left:1px;
}
div#fake-scroll-container
{
width:500px;
overflow:hidden;
position:relative;
}
div#y-fake-scroll
{
overflow-y:scroll;
overflow-x:hidden;
background:transparent;
position:absolute;
right:0;
position:absolute;
max-height:149px;
top:31px;
}
div#x-fake-scroll
{
height:40px;
margin-top:-23px;
overflow-x:auto;
overflow-y:hidden;
margin-top:expression('0px');/* IE 7 fix*/
height:expression('17px'); /* IE 7 fix*/
}
div#y-scroll
{
max-height:150px;
overflow-y:auto;
overflow-x:hidden;
overflow:scroll;
width:1010px;
padding:0px 1px 1px 1px;
}
div#header-container
{
padding:1px 1px 0 1px;
}
div#footer-container
{
padding:0 1px;
}
Code:
// JavaScript Document
var YtableEmulator = document.getElementById('y-table-emulator');
var XtableEmulator = document.getElementById('x-table-emulator');
var table = document.getElementById('table-body');
YtableEmulator.style.height = table.clientHeight == 0 ? "330px" : table.clientHeight + "px";
XtableEmulator.style.width = table.clientWidth + "px";
var scrollablePanel = document.getElementById('scroll');
var headerContainer = document.getElementById('header-container');
var footerContainer = document.getElementById('footer-container');
var YfakeScrollablePanel = document.getElementById('y-fake-scroll');
var XfakeScrollablePanel = document.getElementById('x-fake-scroll');
YfakeScrollablePanel.style.top = headerContainer.clientHeight == 0 ? "34px" : headerContainer.clientHeight + "px";
scrollablePanel.onscroll = function (e) {
XfakeScrollablePanel.scrollTop = scrollablePanel.scrollTop;
}
YfakeScrollablePanel.onscroll = function (e) {
scrollablePanel.scrollTop = YfakeScrollablePanel.scrollTop;
}
XfakeScrollablePanel.onscroll = function (e) {
scrollablePanel.scrollLeft = XfakeScrollablePanel.scrollLeft;
headerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
footerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
}
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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Scrollable HTML Table with fixed header for IE 7, IE 8, Firefox 3.5, Chrome</title> <link type="text/css" rel="stylesheet" href="style.css"></link> </head> <body> <div id="fake-scroll-container"> <div id="header-container"> <table id="table-header" cellpadding="0" cellspacing="0"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> <th>Column 6</th> <th>Column 7</th> <th>Column 8</th> <th>Column 9</th> <th>Column 10</th> </tr> </table> </div> <div id="scroll"> <table id="table-body" cellpadding="0" cellspacing="0"> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> <td>Cell 1.4</td> <td>Cell 1.5</td> <td>Cell 1.6</td> <td>Cell 1.7</td> <td>Cell 1.8</td> <td>Cell 1.9</td> <td>Cell 1.10</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> <td>Cell 2.4</td> <td>Cell 2.5</td> <td>Cell 2.6</td> <td>Cell 2.7</td> <td>Cell 2.8</td> <td>Cell 2.9</td> <td>Cell 2.10</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> <td>Cell 3.4</td> <td>Cell 3.5</td> <td>Cell 3.6</td> <td>Cell 3.7</td> <td>Cell 3.8</td> <td>Cell 3.9</td> <td>Cell 3.10</td> </tr> <tr> <td>Cell 4.1</td> <td>Cell 4.2</td> <td>Cell 4.3</td> <td>Cell 4.4</td> <td>Cell 4.5</td> <td>Cell 4.6</td> <td>Cell 4.7</td> <td>Cell 4.8</td> <td>Cell 4.9</td> <td>Cell 4.10</td> </tr> <tr> <td>Cell 5.1</td> <td>Cell 5.2</td> <td>Cell 5.3</td> <td>Cell 5.4</td> <td>Cell 5.5</td> <td>Cell 5.6</td> <td>Cell 5.7</td> <td>Cell 5.8</td> <td>Cell 5.9</td> <td>Cell 5.10</td> </tr> <tr> <td>Cell 6.1</td> <td>Cell 6.2</td> <td>Cell 6.3</td> <td>Cell 6.4</td> <td>Cell 6.5</td> <td>Cell 6.6</td> <td>Cell 6.7</td> <td>Cell 6.8</td> <td>Cell 6.9</td> <td>Cell 6.10</td> </tr> <tr> <td>Cell 7.1</td> <td>Cell 7.2</td> <td>Cell 7.3</td> <td>Cell 7.4</td> <td>Cell 7.5</td> <td>Cell 7.6</td> <td>Cell 7.7</td> <td>Cell 7.8</td> <td>Cell 7.9</td> <td>Cell 7.10</td> </tr> <tr> <td>Cell 8.1</td> <td>Cell 8.2</td> <td>Cell 8.3</td> <td>Cell 8.4</td> <td>Cell 8.5</td> <td>Cell 8.6</td> <td>Cell 8.7</td> <td>Cell 8.8</td> <td>Cell 8.9</td> <td>Cell 8.10</td> </tr> </table> </div> <div id="footer-container"> <table id="table-footer" cellpadding="0" cellspacing="0"> <tr> <td>Summary 1</td> <td>Summary 2</td> <td>Summary 3</td> <td>Summary 4</td> <td>Summary 5</td> <td>Summary 6</td> <td>Summary 7</td> <td>Summary 8</td> <td>Summary 9</td> <td>Summary 10</td> </tr> </table> </div> <div id="y-fake-scroll"> <div id="y-table-emulator" style="width:40px;"> </div> </div> <div id="x-fake-scroll"> <div id="x-table-emulator"> </div> </div> <script type="text/javascript" src="script.js"> </script> </div> </body> </html> Hello, I have a goal in mind of creating a html table that is dynamically updated via JS. My goal is to have simple data displayed in table and have the top row replaced in intervals, which then moves all the other data down and deletes the final row. I am in planing stage so I am searching for methods you all may know of, also what kind of html skeleton should I build, would a simple table do the trick? Do I need to attach ids to my rows? Thanks -Micah 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 |
|||||||