|
JavaScript - Using Javascript To Optionally Display A Form Command
Very naive coding question... i'm a novice coder and i think javascript is the solution i need but - maybe there's better ways...
Ok - my website accepts a login password to access certain pages. Depending on the password entered i set a javascript variable to either 'true' or 'false'. If the variable is set to 'true' then i want to give the user access to shopping cart buttons, if 'false' then the shopping cart buttons should be hidden. My current solution is to wrap javascript around each shopping cart button and display only if the variable is set to 'true'. The shopping cart button looks a bit like this: Code: <form method="post" action="http://www.shoppingcart.com"> <input type="hidden" name="product" value="product" /> <input type="hidden" name="price" value="9.99" /> <input type="hidden" name="return" value="http://www.home.com"/> <input type="submit" value="add to basket" /> </form> I've tried displaying this using document.write() - but it gets confused when it encounters the ":" in the web address. Also i get the impression from trawling the forums that document.write is not flavour of the month these days. And another thought - I accept the variable on one page - then move to multiple other pages to reference it.... will the variable still be there when i move to other pages or do i need to somehow pass it across each time? Trying to keep my coding XHTML compliant... Any pointers and idiot proof suggestions would be much appreciated. Similar TutorialsDear all, attached is a page for my website to allow visitors to purchase photos. It is made from 2 Paypal example scripts - one for the form and another for an additional text box. It works fine apart from one detail, the text being entered does not get sent - instead, the information it forwards is "6x4 Colour Prints. Item Number id10" The "6x4 Colour prints" bit is good - the "Item number id10" is where I'd ideally like to see the custom text being entered and the guys at Paypal developer forums have said that a Javascript command is overriding the text being forwarded and to seek advice from those who know Javascript. I've tried for a day by trial and error to see if I can take this command out but it has got to the hair pulling out stage so I'm calling on those who know best to cast a wise eye over the code and see if there is an easy fix to this. Any help or suggestions as to howe to alter this will be most gratefully received. Thanks in advance, Dave. I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Hey, I'm looking for different JS form validation techniques. I've seen quite a few but nothing that really stands out. I'm particularly interested in finding design techniques...ie: how and where are the errors displayed inside a form? I realize that I can't count on JS for validation, but I'm trying to add an assistive technology to make a web form feel more like a web application. I'd love to see your favorite way of displaying form errors via JS. I've got a few of my own but if you've ever tried to do this you know it's a difficult problem to handle the general case. Thanks! Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed? I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you. Broken down into parts I think I need to do the following: a) Standard HTML form with drop downs etc and submit b) Hidden divs c) Submission process locally to javascript function to determine which product to show/hide d) Javascript function that makes the decision e) Javascript that hides/shows products Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks! cheers frank I am trying to use the LPR command inside a javascript to print a PDF file directly to the printer. Want just a simple webpage with a button which will print test.pdf when clicked. lpr -S xxx.xxx.xxx.xxx -P print -o l C:\Users\xxxxxx\Desktop\test.pdf I know very little when it comes to javascript. If you know of a better way to use the lpr command, please let me know. Hi guys! I have a simple JavaScript stopwatch that displays the time using an html form with start/reset and clear buttons. Basically I'm making a speed calculator that converts seconds into MPH. All I need it to do is divide whatever the amount of seconds are by 40.91. So instead of it displaying the seconds being counted up (i.e. 2 seconds, would displayed as 20.455 MPH). Does that make sense? JavaScript is not my strong suit, and It's got me stumped. JavaScript: Code: var t=[0, 0, 0, 0, 0, 0, 0, 1];
function ss()
{
t[t[2]]=(new Date()).valueOf();
t[2]=1-t[2];
if (0==t[2])
{
clearInterval(t[4]);
t[3]+=t[1]-t[0];
t[4]=t[1]=t[0]=0;
disp();
}
else
{
t[4]=setInterval(disp, 43);
}
}
function r()
{
if (t[2]) ss();
t[4]=t[3]=t[2]=t[1]=t[0]=0;
disp();
t[7]=1;
}
function disp()
{
if (t[2]) t[1]=(new Date()).valueOf();
t[6].value=format(t[3]+t[1]-t[0]);
}
function format(ms)
{
var d=new Date(ms+t[5]).toString()
.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
var x=String(ms%1000);
while (x.length<3) x='0'+x;
d+='.'+x;
return d;
}
function load()
{
t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
t[6]=document.getElementById('disp');
disp();
}
HTML form: Code: <input type='text' id='disp' maxlength=12 readonly /> <button type='button' onclick='ss()' id='butt' data-inline="true">Start/Stop</button> <button type='button' onclick='r()' id='butt2' data-inline="true">Reset</button> Any help is greatly appreciated!!! I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist. Order Form: Code: <td colspan="1" height="120" align="left"> <select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359" onchange="calculateValue(this.form)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> R359</td></tr> New page I called a unction to print: Code: function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");
}
This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page. Hi guys, I am new to this forum and I am sorry if this is not the right section to post this. Please move this to the appropriate section. I am rather new to HTML and Javascripting and am currently developing an Intranet Webpage. On one of the pages, I am required to update the contents of the webpage using a .csv file which will be uploaded to the server on a daily basis. I have learnt that it is possible to update the contents using "Tabular Data Control" to display the contents and update it regularly. I am also reuqired to change an images according to content in the table. However, I am only able to retrieve the first row the the table and therefore would like some assistance to help retrieve the subsequent rows. Here are my codes: Codes for the .csv/.txt files Code: Name,Status Item #1,Completed Item #2,Pending Item #3,Not Started Item #4,Completed Item #5,Completed Item #6,Pending HTML codes: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onLoad="loadStatus()">
<script type="text/javascript">
function loadStatus(){
var textField = document.getElementById("test").innerText
alert(textField);
if(textField == "Completed") {
document.getElementById("pic").src = '/images/completed.jpg'; }
else if (textField == "Pending") {
document.getElementById("pic").src = '/images/on-going.jpg'; }
else if (textField == "Not Started") {
document.getElementById("pic").src = '/images/not_started.jpg'; }
}
</script>
<OBJECT ID="data" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="test.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
<table border="1" bordercolor="#000000" cellpadding="0" datasrc="#data" >
<THEAD><TR>
<TBODY>
<TR>
<TD><img src="" width="14" height="14" id="pic"></TD>
<TD><div datafld="Name"></div></TD>
<TD id="test"><span datafld="Status"></span></TD></TR>
</TBODY>
</TABLE>
</body>
</html>
I have thought of adding 6 different <object> and 6 <span> using filter to filter each object according to their name. But it would be very messy and would make the page bigger in size. I hope you guys can help me. Thanks in advance. Cheers, Jermms Hi guys I'm really stumped on this, and I haven't been able to find a tutorial online anywhere. I'm trying to create an XML news feed for a company's website I am currently building. I have created the XML, and gotten the text to display perfectly in the HTML by using javascript. Now I want to add a thumbnail image for each news story, to make updating simpler, I wanted the url for the thumbnail to be entered into the XML, from which the javascript could read and then display in the corresponding area in the HTML. Is this even possible? Every tutorial I get when I use the terms "Image" and "Javascript" gives me a tutorial for a gallery or a slideshow which is not what I want at all. Below is the javascript code, followed by the XML code; Code: <script type="text/javascript">
var xmlDoc;
<!--
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
var x=xmlDoc.getElementsByTagName("NEWS");
i=0;
function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}
//-->
</script>
XML code Code: <?xml version="1.0" encoding="ISO-8859-1"?> <BULLETIN> <NEWS> <PIC>"/newssmall.jpg"</PIC> <DATE>14/3/2010</DATE> <TITLE>News Story 1</TITLE> <STITLE>This is a short sentence to describe the story in brief</STITLE> <STORY>This is the text of the news story</STORY> </NEWS> </BULLETIN> Thanks to anyone that even reads this, I'm probably making a nooby mistake, I only started using JS and XML on Monday so I'm still learning lol I'm trying to display the elements in an array but doesn't seem to work: Code: var myurl=new Array("google.com", "yahoo.com");
for (i=0;i<=myurl.length-1;i++){
document.writeln("<a href='http://www.' + myurl[i] + target='_blank'>");
}
Not sure why it is not working?? This must be very simple. I want to execute some javascript only if an element is not displayed What is the syntax? if("#element:hidden) { do something like show it } Help much appreciated. how can I display the same Javascript Graph more then once on the same HTML page. Everytime I add another graph using the same code on the same HTML page only one graph will show. Here is the code that I have: <html> <head> <title>Graph</title> <body> <title>Data</title> <p align="center"> </p> <p align="center"><font size="4"><b>test</b></font></p> <center> <script type="text/javascript" src=".\JavaFiles\wz_jsgraphics.js"> </script> <script type="text/javascript" src=".\JavaFiles\line.js"> </script> <div id="lineCanvas" style="overflow: auto; position:center;height:300px;width:800px;"></div> <script type="text/javascript"> var g = new line_graph(); g.add(' 1.0',197); g.add(' 2.0',721); g.add(' 3.0',852); g.render("lineCanvas","test"); </script> <p align="left"><font size="2"><b>Test </b></font></p> </body> What can I do to fix that. Thanks Hello, First, I'm new to the Javascript (and to this forum). I am trying to use a Javascript to display a randomly selected image located in a folder of my site. I need to fit these images (which may have quite diverse dimensions) into a frame of 280x280 px. Here is the code of the current script which does not currently work: Code: // JavaScript Document
<script language="JavaScript"><!--
function random_imglink(){
var myimages=new Array()
var imagetitle=new Array()
urlimage="http://www.mysite.fr/Images/RandomPictures/"
var i=0
//specify here the total number of random images which should be names 1.jpg, 2.jpg etc
nbrandompic=140
for (i=0;i<= nbrandompic;i++)
{
myimages[i]=urlimage + i +".jpg"
imagetitle[i]=urlimage + i +".txt"
}
//Randomly select an image
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
var reduction = 1
var maxWidth=280
var maxHeight=280
//Calculate the reduction that should be applied
if(myimages[ry].width > maxWidth || image.height > maxHeight)
reduction = Math.max(myimages[ry].width/maxWidth,myimages[ry].height/maxHeight)
// New dimensions
iw = Math.round(myimages[ry].width / reduction)
ih = Math.round(myimages[ry].height / reduction)
//Display image
document.write('<a><img src="'myimages[ry]'" title="" border=0 width='+iw+' height='+ih+'></a>')
}
random_imglink()
//-->
</script>
I am sure that you guys can help me solve this problem. Many thanks in advance!! Antonino Doing some forum searching, I found the following code: Code: <div id="someThing" style="display:block" >Put something here.</div>
<script type="text/javascript">
var nowUrl = location.href;
if (nowUrl != "http://jemmakidd.com/categories.php") {
document.getElementById("someThing").style.display="none";
}
</script>
Apparently, this is for use of when you are modifying, for example, a PHP header or footer displayed on every page and you only want something to show up on particular pages. My issue is that I am trying to put something in the header of a Tumblr blog, and I only want it to show on the post pages. The Tumblr main page format is: http://*.tumblr.com/ The Tumblr post page format is: http://*.tumblr.com/post/* Is there any code I can use to do this? Good day to you all, I'm working on a form which would display the result in the same div that the form is. Here is my code so far: PHP Code: <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <textarea name="html"></textarea><br /> <input type="submit" onclick="load('<?php echo $_SERVER['PHP_SELF']; ?>','page');"/><br /> </form> Preview:<br /> <?php if(isset($_POST['html'])) echo stripslashes($_POST['html']); ?> <script type="text/javascript"> function ahah(url, target) { document.getElementById(target).innerHTML = ' Fetching data...'; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } if (req != undefined) { req.onreadystatechange = function() {ahahDone(url, target);}; req.open("GET", url, true); req.send(""); } } function ahahDone(url, target) { if (req.readyState == 4) { // only if req is "loaded" if (req.status == 200) { // only if "OK" document.getElementById(target).innerHTML = req.responseText; } else { document.getElementById(target).innerHTML=" Error:\n"+ req.status + "\n" +req.statusText; } } } function load(name, div) { ahah(name,div); return false; } </script> My problem is when I click on the button , the text in my text area don't show. Can somebody help me. Thanks! I am working on my form. Once user put data in the form, I want to save it as cookie and display it in another page as form processor. In my html file therefore, I have Code: <form id="frmBuyer" method="get" action="FormProcessor_Cookies.html"
enctype="application/x-www-form-urlencoded"
onsubmit="return validate();" onreset="location.reload();">
which is basically validate all the data and once it meets the requirement, it goes to FormProcessor_Cookies.html. So, i put a function in my js file to get all the data as cookie as following. Code:
function createCookie(){
document.cookie = first + "=" + encodeURIComponent(document.forms[0].FirstName.value);
document.cookie = last + "=" + encodeURIComponent(document.forms[0].LastName.value);
document.cookie = phone1 + "=" + encodeURIComponent(document.forms[0].PhoneA.value);
document.cookie = phone2 + "=" + encodeURIComponent(document.forms[0].PhoneB.value);
document.cookie = phone3 + "=" + encodeURIComponent(document.forms[0].PhoneC.value);
document.cookie = email + "=" + encodeURIComponent(document.forms[0].Email.value);
location.href = "cookie.html";
}
and I called this function after it validates. Code: function validate(){
var blnError = false;
var zip = document.getElementById("Zip").value;
var textBoxthree = document.getElementById("third");
var textLengththree = textBoxthree.value.length;
var textBoxtwo = document.getElementById("second");
var textLengthtwo = textBoxtwo.value.length;
var textBoxone = document.getElementById("first");
var textLengthone = textBoxone.value.length;
var patternZip = new RegExp("^([0-9]){5}(([ ]|[-])?([0-9]){4})?$");
if (document.forms[0].Zip.value == ""||!patternZip.test(document.forms[0].Zip.value)){
document.getElementById('E_Zip').style.display="inline";
document.forms[0].Zip.focus();
document.forms[0].Zip.style.backgroundColor="lemonchiffon"
blnError = true;
}
else{
document.getElementById('E_Zip').style.display="none";
document.forms[0].Zip.style.backgroundColor="white"
}
var patternCity = new RegExp("^(?:[a-zA-Z]+(?:[.'\-,])?\s?)+$");
if (document.forms[0].City.value == ""||!patternCity.test(document.forms[0].City.value)){
document.getElementById('E_City').style.display="inline";
document.forms[0].City.focus();
document.forms[0].City.style.backgroundColor="lemonchiffon"
blnError = true;
}
else{
document.getElementById('E_City').style.display="none";
document.forms[0].City.style.backgroundColor="white"
}
var patternAddress = new RegExp("^[a-zA-Z]+.*|.*[a-zA-Z]+|.*[a-zA-Z]+.*$");
if (document.forms[0].Address1.value == ""||!patternAddress.test(document.forms[0].Address1.value)){
document.getElementById('E_Address1').style.display="inline";
document.forms[0].Address1.focus();
document.forms[0].Address1.style.backgroundColor="lemonchiffon"
blnError = true;
}
else{
document.getElementById('E_Address1').style.display="none";
document.forms[0].Address1.style.backgroundColor="white"
}
var patternConfirm = new RegExp("^[_a-zA-Z0-9\\-]+(\.[_a-zA-Z0-9\\-]+)*@[a-zA-Z0-9\\-]+(\.[a-aZ-Z0-9\\-]+)*(\.[a-z]{2,3})$");
if (document.forms[0].ConfirmEmail.value == ""
||!patternConfirm.test(document.forms[0].ConfirmEmail.value)
||document.forms[0].ConfirmEmail.value != document.forms[0].Email.value){
document.getElementById('E_ConfirmEmail').style.display="inline";
document.forms[0].ConfirmEmail.focus();
document.forms[0].ConfirmEmail.style.backgroundColor="lemonchiffon"
blnError = true;
}
else{
document.getElementById('E_ConfirmEmail').style.display="none";
document.forms[0].ConfirmEmail.style.backgroundColor="white"
}
var patternEmail = new RegExp("^[_a-zA-Z0-9\\-]+(\.[_a-zA-Z0-9\\-]+)*@[a-zA-Z0-9\\-]+(\.[a-aZ-Z0-9\\-]+)*(\.[a-z]{2,3})$");
if (document.forms[0].Email.value == ""||!patternEmail.test(document.forms[0].Email.value)){
document.getElementById('E_Email').style.display="inline";
document.forms[0].Email.focus();
document.forms[0].Email.style.backgroundColor="lemonchiffon"
blnError = true;
}
else{
document.getElementById('E_Email').style.display="none";
document.forms[0].Email.style.backgroundColor="white"
}
var patternPhoneA = new RegExp("^\\d{3}$");
var patternPhoneB = new RegExp("^\\d{3}$");
var patternPhoneC = new RegExp("^\\d{4}$");
if(patternPhoneC.test(document.forms[0].PhoneC.value)
&&patternPhoneB.test(document.forms[0].PhoneB.value)
&&patternPhoneA.test(document.forms[0].PhoneA.value)){
document.getElementById('E_Phone').style.display="none";
}
if(patternPhoneC.test(document.forms[0].PhoneC.value)){
document.forms[0].PhoneC.style.backgroundColor="white"}
if(patternPhoneB.test(document.forms[0].PhoneB.value)){
document.forms[0].PhoneB.style.backgroundColor="white"}
if(patternPhoneA.test(document.forms[0].PhoneA.value)){
document.forms[0].PhoneA.style.backgroundColor="white"}
if (!patternPhoneC.test(document.forms[0].PhoneC.value)){
document.getElementById('E_Phone').style.display="inline";
document.forms[0].PhoneC.focus();
document.forms[0].PhoneC.style.backgroundColor="lemonchiffon"
}
if (!patternPhoneB.test(document.forms[0].PhoneB.value)){
document.getElementById('E_Phone').style.display="inline";
document.forms[0].PhoneB.focus();
document.forms[0].PhoneB.style.backgroundColor="lemonchiffon"
}
if (!patternPhoneA.test(document.forms[0].PhoneA.value)){
document.getElementById('E_Phone').style.display="inline";
document.forms[0].PhoneA.focus();
document.forms[0].PhoneA.style.backgroundColor="lemonchiffon"
}
var patternLast = new RegExp("^[a-zA-Z]+.*|.*[a-zA-Z]+|.*[a-zA-Z]+.*$");
if (document.forms[0].LastName.value == ""||!patternLast.test(document.forms[0].LastName.value)){
document.getElementById('E_LastName').style.display="inline";
document.forms[0].LastName.style.backgroundColor="lemonchiffon"
blnError = true;
}
else{
document.getElementById('E_LastName').style.display="none";
document.forms[0].LastName.style.backgroundColor="white"
}
var patternFirst = new RegExp("^[a-zA-Z]+.*|.*[a-zA-Z]+|.*[a-zA-Z]+.*$");
if (document.forms[0].FirstName.value == ""||!patternFirst.test(document.forms[0].FirstName.value)){
document.getElementById('E_FirstName').style.display="inline";
document.forms[0].FirstName.style.backgroundColor="lemonchiffon"
blnError = true;
}
else{
document.getElementById('E_FirstName').style.display="none";
document.forms[0].FirstName.style.backgroundColor="white"
}
if (blnError == true){
document.getElementById('E_Alert').style.display="inline";
return false;
}
else {
document.getElementById('E_Alert').style.display="none";
createCookie();
return true;
}
}
Lastly, I tried to display all the cookies in my "FormProcessor_Cookies.html" page Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="" />
<meta name="description" content="Home" />
<meta name="keywords" content="Client Side Programming, JavaScript, CSS" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" href="javascript.css"/>
<script type="text/javascript" src="shopping.js"></script>
<title>Homepage::Seunghun Jun</title>
</head>
<body>
<div id="container">
<!-- Begin web page -->
<div id="header"><!-- Header and Navigation -->
<!-- Page Heading --><!-- Navigation -->
<script type="text/javascript">
displayHeader();
</script> <br/><br/><br/><br/>
</div>
<div id="content">
<!-- Main Content --><div id="submited">
<script type="text/javascript">
/* <![CDATA[ */
document.write(documetn.cookie;);
/* ]]> */
</script></div>
</div><br/><br/><br/><br/>
<div id="footer">
<!-- Footer -->
<!-- Begin Footer Div-->
<script type="text/javascript">displayFooter();</script>
<!-- End Footer Div -->
</div>
<!--End web page -->
</div>
</body>
</html>
And its not showing any messages...I know I am asking to much...but could any expert can help me what is wrong and how I can fix this? I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html>
<head>
<script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple"
});
</script>
<script language="javascript">
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
function err_check(){
var email = document.getElementById('to_email').value;
if(email.length==0){
alert('Please Enter Email Address');
return false;
}
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
email = document.getElementById('cc_email').value;
if(email.length != 0){
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
}
var answer = confirm ("Send E-Mail?");
if (!answer){
return false;
}
}
</script>
<!-- /TinyMCE -->
<style type="text/css">
body, table, td, th{
background-color:#CCCCCC;
font-family: Arial;
font-size:14px;
}
.que{
font-weight:bold;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<?php
include 'library/database.php';
include 'library/opendb.php';
$query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$from_email = $row[0];
$from_person = $row[1];
$from_mobile = $row[2];
$query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
$row = mysql_fetch_row($query);
$cusid = $row[0];
$query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$toer = $row[0];
include 'library/closedb.php';
?>
<table width="100%" border="0">
<tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
<tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
<tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
<tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
<tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
</tr>
<tr>
<td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
<td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
<tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
<td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
<tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr>
<tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
<?php
echo "<br><br><br>" . $from_person . "<br>" . $from_mobile;
?>
</textarea>
</td></tr>
</table>
</form>
</body>
</html>
I have an xml file: http://greenandtheblue.com/weather/parks.xml I'd like to display on an html page the time this xml document was last modified. I've done this successfully with php, but I'm wondering if I can do this with Javascript? The file will be in the same directory as the website/html page. I've googled for a while now with no success. Thanks for any help, S |
|||||||