|
JavaScript - Help With Javascript On Xhtml Form
Hi guys
I am trying to make my first xhtml form using javascript but am having some problems. I have 4 text boxes on the form and two buttons: Car Year Password Re-enter Password *Buttons* Reset and Submit query I want an alert to pop up when the submit button is pressed if any of the fields are not filled in. I have written the javascript for the events but for some reason it is not picking up the car or year fields. When the submit button is pressed it only prompts for a password (if not filled in). I have looked over the code but I cant see where i'm going wrong. I have added the xhtml code with the external javascript pages at the bottom. Any help would be much appreciated. Fatbot Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>Test</title>
<!--Scripts for submit button event handlers-->
<script type="text/javascript" src="submit_car.js"></script>
<script type="text/javascript" src="submit_year.js"></script>
<script type="text/javascript" src="submit_pass.js"></script>
</head>
<body>
<form id="myForm" action="">
<p>
<!--Input car name-->
<label>Car<br />
<input type="text" id="car" size="30" />
</label>
<br />
<br />
<!--Register car name event handlers-->
<script type="text/javascript" src="car_check.js"></script>
<!--Input year-->
<label>Year<br />
<input type="text" id="year" size="4" />
</label>
<br />
<br />
<!--Register year event handlers-->
<script type="text/javascript" src="year_check.js"></script>
<!-- Password entry and re-entry -->
<label>Password<br />
<input type="password" id="first" size="10" />
</label>
<br />
<br />
<label>Re-enter Password<br />
<input type="password" id="second" size="10" />
</label>
<br />
<br />
<!--Register password event handlers-->
<script type="text/javascript" src="password_check.js"></script>
<input type="reset" name="reset" />
<input type="submit" name="submit" />
</p>
</form>
</body>
</html>
//submit_car.js
//Event handler function for entering car name
function carCheck() {
var car = document.getElementById("car");
if (car.value== "") {
alert ("Please enter a car name");
return false;
} else
return true;
}
//car_check.js
//Registers the event handlers for submit_car.js
document.getElementById("car").onsubmit = carCheck;
document.getElementById("myForm").onsubmit = carCheck;
//submit_year.js
//Event handler function for entering year
function yearCheck() {
var year = document.getElementById("year");
if (year.value== "") {
alert ("Please enter a year");
return false;
} else
return true;
}
//year_check.js
//Registers the event handlers for submit_year.js
document.getElementById("year").onsubmit = yearCheck;
document.getElementById("myForm").onsubmit = yearCheck;
//Submit_pass.js
//Event handler function for ensuring password entry is correct
function passwordCheck() {
var first = document.getElementById("first");
var second = document.getElementById("second");
if (first.value== "") {
alert ("Please enter a password");
return false;
}
if (first.value !== second.value) {
alert ("The two passwords you entered did not match. \n" +
"Please ensure both passwords are identical.");
return false;
} else
return true;
}
//password_check.js
//Registers the event handlers for submit_pass.js
document.getElementById("second").onblur = passwordCheck;
document.getElementById("myForm").onsubmit = passwordCheck;
Similar TutorialsHi, I have been attempting to transition to use of xhtml strict doctype and my text editor, BBEdit (on Mac) tells me, when I ask it to check syntax, that the attribute 'name' is not allowed in form object, as in any other form element that I tried to use it in. This begs the question, how do I script forms with javascript in the context of this doctype? None of the javascript texts I have address this issue (O'Reilly Rhino book and others). I could figure it out, but it appears to be a complicated process, just doing getElementById() and sorting it out. Does anyone have a reference to material that deals with this issue? Or do I just abandon xhtml strict doctypes? Thanks for time and attention JK I have an XML document, styled by an xslt to make it into a table, placed inside an xhtml document. my code is as follows: Code: <head>
<script language="javascript" type="text/javascript">
function loadXMLDoc(dname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", dname, false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult() {
xml = loadXMLDoc("conference.xml");
xsl = loadXMLDoc("conference.xslt");
// code for IE
if (window.ActiveXObject) {
ex = xml.transformNode(xsl);
document.getElementById("falctable").innerHTML = ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("falctable").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="falctable"> <!--falcons conference table space div-->
</div> <!--end falcons table space div-->
The falctable <div> is placed absolutely with CSS. The XML table shows up locally in Firefox, Opera, Safari and Chrome, but not in Internet Explorer. Also, it only appears locally, and not in the live version. Any help? Been annoying me for hours. I'm having a problem validating this script in w3c its the last one to make the page valid xhtml transitional. here are the errors w3c gives me for the code.the website in question is http://www.orgdesignz.com Error Line 2722, Column 31: document type does not allow element "p" here Code: document.write('<p class="no">We\'ve detected that you\'re using <strong>AdBlock Plus</strong> or some other adblocking software. Please be aware that this is only contributing to the demise of the site. We need money to operate the site, and almost all of that comes from our online advertising. To read more about why you should disable ABP, please <a href="#">click here</a>.<!-- end .content --></p>');
the error was detected on the > after "no" The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error). Thanks, Mike@orgdesignz So I'm trying to dynamically generate MathML code. I can get this to work on Internet Explorer 8 + MathPlayer, Firefox 3.6, and Opera 11: test1.xht: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title></title></head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mrow>
<mi>x</mi>
<mo>−</mo>
<mn>4</mn>
</mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mn>3</mn>
<mi>x</mi>
<mo>−</mo>
<mn>4</mn>
</mrow>
</mfrac>
</math>
</body>
</html>
But this only works on Firefox: test2.xht: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="test2.js"></script>
<title></title>
</head>
<body></body>
</html>
test2.js: Code: window.onload = test;
function test()
{
var math = "<math xmlns=\"http://www.w3.org/1998/Math/MathML\">"
math += "<mfrac>";
math += "<mrow>";
math += "<mi>x</mi>";
math += "<mo>−</mo>";
math += "<mn>4</mn>";
math += "</mrow>";
math += "<mrow>";
math += "<msup>";
math += "<mi>x</mi>";
math += "<mn>2</mn>";
math += "</msup>";
math += "<mo>−</mo>";
math += "<mn>3</mn>";
math += "<mi>x</mi>";
math += "<mo>−</mo>";
math += "<mn>4</mn>";
math += "</mrow>";
math += "</mfrac>";
math += "</math>";
document.getElementsByTagName("body")[0].innerHTML = math;
}
Sorry for the code dump and for being such a n00b and thanks for any help. Hello, I am trying to figure out how to "Include an xhtml tag for a new line within the output"... wording is a bit confusing, but this is probably easy to solve. Thanks! 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'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!="");
That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()">
</body>
<div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;">
<img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/>
Loading...
</div>
</html>
formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> Is there a way to make it so JavaScript can pre-set a FORM value? Something like this: Code: <?php $country = $_SESSION['country']; ?>
<SCRIPT type="text/javascript">
function SomeFunctionForm() {
document.forms["form"]["country"].value=="<?php echo $country; ?>) {
}
}
</SCRIPT>
<FORM>
<SELECT name="country">
<OPTION>Afghanistan</OPTION>
<OPTION>Albania</OPTION>
<OPTION>Algeria</OPTION>
</SELECT>
</FORM>
I can't just drop the PHP Code: <?php $country = $_SESSION['country']; ?> into the SELECT value because it will brake the alphabetical listing, which is why I am wondering if JavaScript can do it this way, as this way wouldn't brake the alphabetical listing? I have the following form function goto(form) { var index=form.select.selectedIndex if (form.select.options[index].value != "0") { location=form.select.options[index].value;}} //--> </script> </p> <form name="form1"> <p><select onchange="goto(this.form)" name="select" style="font-size: 10pt;"> <option>----- Choose Wholesaler ------ </option><option value="travl.com.au/social-passport-profiles.html">A1 Classic Holidays </option><option value="web_development.htm">AAT Kings </option><option value="html_codes.htm">Abercrombie & Kent </option><option value="html_codes_chart.htm">Adventure Associates </option><option value="javascript_codes.htm">Adventure Destinations </option><option value="index.htm">Adventure World </option><option value="web_development.htm">African Wildlife Safaris </option><option value="html_codes.htm">Albatross Travel Group </option><option value="html_codes_chart.htm">Amazing Vacations </option><option value="javascript_codes.htm">Asiaquest Tours </option><option value="216_color_chart.htm">ATI Tours </option><option value="index.htm">Australian Pacific Tours </option><option value="web_development.htm">Beachcomber Tours </option><option value="html_codes.htm">Bench International </option><option value="html_codes_chart.htm">Bentours </option><option value="javascript_codes.htm">Beyond Travel Group </option><option value="216_color_chart.htm">Broome & The Kimberley Holidays </option><option value="index.htm">Bunnik Tours </option><option value="web_development.htm">Cathay Pacific Holidays </option><option value="html_codes.htm">CBT Holidays </option><option value="html_codes_chart.htm">Chat Tours </option><option value="javascript_codes.htm">CIT Holidays </option><option value="216_color_chart.htm">Club Med Australia </option><option value="216_color_chart.htm">Contiki Holidays for 18-35's </option><option value="216_color_chart.htm">Contours Travel </option><option value="index.htm">Cosmos </option><option value="web_development.htm">Creative Holidays </option><option value="html_codes.htm">Destination Canada </option><option value="html_codes_chart.htm">Eastern Europe Travel </option><option value="javascript_codes.htm">Elegant Resorts & Villas </option><option value="216_color_chart.htm">Explore Holidays </option><option value="index.htm">Freestyle Holidays </option><option value="web_development.htm">French Travel Connection </option><option value="html_codes.htm">Garuda Orient Holidays </option><option value="html_codes_chart.htm">Global Getaway </option><option value="javascript_codes.htm">Globus </option><option value="216_color_chart.htm">Go See Touring </option><option value="216_color_chart.htm">Greece & Mediterranean Travel </option><option value="216_color_chart.htm">Handpicked Holidays </option><option value="index.htm">Helen Wong's Tours </option><option value="web_development.htm">HIS Travel </option><option value="html_codes.htm">Holidays On Location </option><option value="html_codes_chart.htm">Honeymoon Worldwide Holidays </option><option value="javascript_codes.htm">Ibertours </option><option value="216_color_chart.htm">Icon Holidays </option><option value="index.htm">Inca Tours </option><option value="web_development.htm">Insight Vacations </option><option value="html_codes.htm">Intrepid Travel </option><option value="html_codes_chart.htm">Japan Experience Tours </option><option value="javascript_codes.htm">JTB Australia </option><option value="216_color_chart.htm">Kumuka Worldwide </option><option value="216_color_chart.htm">Made Easy Tours </option><option value="216_color_chart.htm">Nordic Travel </option><option value="index.htm">Northern Gateway </option><option value="web_development.htm">Orient Pacific Holidays </option><option value="html_codes.htm">Peregrine Adventures </option><option value="html_codes_chart.htm">Qantas Holidays </option><option value="javascript_codes.htm">Rosie Holidays </option><option value="216_color_chart.htm">Royal Orchid Holidays </option><option value="index.htm">Sachi Tours </option><option value="web_development.htm">Scenic Tours </option><option value="html_codes.htm">Selective Tours </option><option value="html_codes_chart.htm">Singapore Airlines Holidays </option><option value="javascript_codes.htm">Southern Italian Tours </option><option value="216_color_chart.htm">Sportsnet Holidays </option><option value="216_color_chart.htm">Sun Island Tours </option><option value="216_color_chart.htm">Sundowners Overland </option><option value="index.htm">Talpacific Holidays </option><option value="web_development.htm">Tasmania's Temptation Holidays </option><option value="html_codes.htm">Tempo Holidays </option><option value="html_codes_chart.htm">Temptation Tours </option><option value="javascript_codes.htm">Territory Discoveries </option><option value="216_color_chart.htm">The Imaginative Traveller </option><option value="index.htm">Trafalgar Tours </option><option value="web_development.htm">Travel IndoChina </option><option value="html_codes.htm">Travel Makers </option><option value="html_codes_chart.htm">United Vacations </option><option value="javascript_codes.htm">Venture Holidays </option><option value="216_color_chart.htm">Wendy Wu Tours </option><option value="216_color_chart.htm">Wildlife Safari Australia </option></select> </p></form> and i would like to make some of the option values auto redirect to an external website address. It seems this form code I have only allows for page redirects within my own website. I would be grateful if anybody could assist with how I can make some changes to this form to allow me to do this. Thank you in advance. Hi there I have created a php form (which i inserted into wordpress site) www.lookinside.co.za/wp - under "Conferences" tab... This form is working well, I just have a couple of changes which I would like to make, and am not sure how. if someone could perhaps maybe even help with one of the items on here I would be extremely grateful please :-) Changes: 1. is it possible to have a "print" button to appear on the page that comes up after submitting the quote? 2. Can we insert a "date" field possibly with a calendar popup to select a date for the conference? 3. Can images and other text appear on the "after submission" page? that will then also print, ie: info about the conference rooms, images? 4. Can the no. of people box be shorter in length? (the outline of the box) 5. when the submitted form is emailed through / and viewed, is it possible to include the title of the duration? ie at the moment it shows as: "Duration: R200", can we make it "Duration: Full Day - R200" or something? THe same for the "menu selection" php: PHP Code: <?php if(isset($_POST['action']) && $_POST['action'] == "submit_post"): ?> <?php $string = "Customer Name: ". $_POST['name']. "\n"; $string .= "Company: ". $_POST['company']. "\n"; $string .= "Conference Name: ". $_POST['field-36b58f8c5142ff3']. "\n"; $string .= "Telephone Number: ". $_POST['field-7c496d0fb21abfd']. "\n"; $string .= "Duration: ". $_POST['field-385963a5c9a4ef9']. "\n"; $string .= "Number of People: ". $_POST['field-5af722f60ee2f9b']. "\n"; $string .= "Menu: ". $_POST['menu']. "\n"; $string .= "Overhead Projector: ". $_POST['field-73cf21adf8b52d5']. "\n"; $string .= "Email: ". $_POST['field-3f92f5a7876cd50']. "\n"; $string .= "Sub Total: ". $_POST['totalcost']. "\n"; print "<p>". nl2br($string) ."</p>"; $to = $_POST['field-3f92f5a7876cd50'] . ", "; //This is the users email address $to .= "melissafleetwood@yahoo.com" . ", "; //Put your first email here $to .= "melissa@run-time.co.za"; //Put your second email here $subject = "Reciept confirmation"; $headers = "From: melissa@lookinside.co.za"; mail($to, $subject, $string, $headers); ?> <?php else: ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Contact Form Test</title> </head> <body> <form action="" method="post"> <div> <input type="hidden" name="action" id="acctid" value="submit_post" /> </div> <table cellspacing="5" cellpadding="5" border="0"> <td valign="top"> <strong>Name of Contact Person:</strong> </td> <td valign="top"> <input type="text" name="name" id="name" size="40" value="" /> </td> </tr> <tr> <td valign="top"> <strong>Company:</strong> </td> <td valign="top"> <input type="text" name="company" id="company" size="40" value="" /> </td> </tr> <tr> <td valign="top"> <strong>Official Name Of Conference</strong> </td> <td valign="top"> <input type="text" name="field-36b58f8c5142ff3" id="field-36b58f8c5142ff3" size="40" value="" /> </td> </tr> <tr> <td valign="top"> <strong>Tel No Of Contact Person:</strong> </td> <td valign="top"> <input type="text" name="field-7c496d0fb21abfd" id="field-7c496d0fb21abfd" size="40" value="" /> </td> </tr> <tr> <td valign="top"> <strong>Duration:</strong> </td> <td valign="top"> <input type="radio" name="field-385963a5c9a4ef9" id="game4" value="220.00" onclick="UpdateCost()"> Full Day R220.00<br/> <input type="radio" name="field-385963a5c9a4ef9" id="game5" value="200.00" onclick="UpdateCost()"> Half Day R200.00<br/> </td> </tr> <tr> <td valign="top"> <strong>No Of People</strong> </td> <td valign="top"> <input type="text" name="field-5af722f60ee2f9b" id="field-5af722f60ee2f9b" size="40" value="" onchange="UpdateCost()"/> </td> </tr> <tr> <td valign="top"> <strong>Please select a menu:</strong> </td> <td valign="top"> <input type="radio" name="menu" id='game0' value="60.00" onclick="UpdateCost()">Menu A (60.00)<br> <input type="radio" name="menu" id='game1' value="90.00" onclick="UpdateCost()">Menu B (90.00)<br> <input type="radio" name="menu" id='game2' value="120.00" onclick="UpdateCost()">Menu C (120.00)<br> <input type="radio" name="menu" id='game3' value="150.00" onclick="UpdateCost()">Braai/Barbeque (150.00)<br> </td> </tr> <tr> <td valign="top"> <strong>Overhead Projector</strong> </td> <td valign="top"> <input type="checkbox" name="field-73cf21adf8b52d5" id="game6" value="650.00" onclick="UpdateCost()">R650.00 <br/> </td> </tr> <tr> <td valign="top"> <strong>Email of Contact Person: </strong> </td> <td valign="top"> <input type="text" name="field-3f92f5a7876cd50" id="field-3f92f5a7876cd50" size="40" value="" /> </td> <tr> <td valign="top"> <strong>Sub Total: </strong> </td> <td valigh="top"> <input type="text" id="totalcost" name="totalcost" size="40" value=""> </td> <tr> <td colspan="2" align="center"> <input type="submit" value=" Submit Form " /> </td> </tr> </form> JAVASCRIPT Code: <script type="text/javascript">
function UpdateCost() {
var sum = 0;
var gn, elem, totalAmmount, peopleNum;
for (i=0; i<7; i++) {
gn = 'game'+i;
if(gn != 'game6'){
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
peopleNum = document.getElementById('field-5af722f60ee2f9b').value;
if(isNaN(peopleNum ) || peopleNum==''){
totalAmmount = sum;
}
else{
totalAmmount = sum * peopleNum;
}
}
if(document.getElementById('game6').checked == true)
{
totalAmmount += Number(document.getElementById('game6').value);
}
document.getElementById('totalcost').value = totalAmmount.toFixed(2);
}
</script>
<script type="text/javascript">
var value="";
var numPeople=document.getElementById("field-5af722f60ee2f9b")
numPeople.onkeydown=function(e){
value = this.value + e;
}
numPeople.onkeyup=function(e) {
this.value=this.value.replace(/[^\d]/,'');
if(this.value != value) {
UpdateCost();
}
}
</script>
</body>
</html>
<?php endif; ?>
Javascript:
/* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Jay Rumsey | http://www.nova.edu/~rumsey/ */
function UpdateCost() {
var sum = 0;
var gn, elem, totalAmmount, peopleNum;
for (i=0; i<7; i++) {
gn = 'game'+i;
if(gn != 'game6'){
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
peopleNum = document.getElementById('field-5af722f60ee2f9b').value;
if(isNaN(peopleNum ) || peopleNum==''){
totalAmmount = sum;
}
else{
totalAmmount = sum * peopleNum;
}
}
if(document.getElementById('game6').checked == true)
{
totalAmmount += Number(document.getElementById('game6').value);
}
document.getElementById('totalcost').value = totalAmmount.toFixed(2);
}
Thank you so much Okay so I created a registration form and it doesn't do any validation. I want it to check the input and if the input is invalid then change the color of the label of the text next to it red. It isn't doing it properly. I purposely left the action part out on the form because it was redirecting to the php page which connects to the database which I do not want it to do until it is validated. Here is the link: http://sci.tamucc.edu/~cmircovich/registrationPg.html Here is the full code (JavaScript is included on the page until I fix the problem. 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" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- CSS Codes -->
<link href="./STYLES/main.css" type="text/css" rel="stylesheet" />
<link href="./STYLES/form.css" type="text/css" rel="stylesheet" />
<title>Main Page</title>
<!--JavaScript -->
<!-- document.getElementsByTagName('label') -->
<script type="text/javascript">
//<![CDATA[
function validate(form) {
var valid = true;
valid = validateEmail(form.user_email, form.conf_email);
valid = validatePassword(form.user_pass, form.conf_pass);
valid = validateFirst(form.user_first);
valid = validateLast(form.user_last);
valid = validateAddress1(form.user_add1);
if(form.user_add2.value.length !=0)
valid = validateAddress2(form.user_add2);
valid = validateCity(form.user_city);
valid = validateZip(form.user_zip);
if (!valid) {
return false;
}
return true;
}
function validateEmail(fld, fld2) {
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
var emailPattern = [\w\+\-\._]+@[\w\-\._]+\.\w{2,};
if (fld.value != fld2.value) {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
}
else if (fld.value == "") {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else if (fld.value.match(illegalChars)) {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else if (!emailPattern.test(fld.value) {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else
document.getElementById("idEmail").style.color='black';
document.getElementById("idConfEmail").style.color='black';
}
}
function validatePassword(fld, fld2) {
var illegalChars = ^[A-Za-z0-9]*[A-Za-z0-9][A-Za-z0-9]*$; // allow only letters and numbers
if (fld.value != fld2.value) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if (fld.value == "") {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if ((fld.value.length < 8) || (fld.value.length > 25)) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else {
document.getElementById("idPass").style.color='black';
document.getElementById("idConfPass").style.color='black';
}
}
function validateFirst(fld) {
var illegalChars = ^[A-Za-z]*[A-Za-z ][A-Za-z]*$; //Alow letters and spaces
if (fld.value.length == 0) {
document.getElementById("idFirst").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idFirst").style.color='red';
return false;
} else {
document.getElementById("idFirst").style.color='black';
}
}
function validateLast(fld) {
var illegalChars = ^[A-Za-z]*[A-Za-z ][A-Za-z]*$; //Alow letters and spaces
if (fld.value.length == 0) {
document.getElementById("idLast").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idLast").style.color='red';
return false;
} else {
document.getElementById("idLast").style.color='black';
}
}
function validateAddress1(fld) {
var illegalChars = ^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$; // allow letters, numbers, and spaces
if (fld.value == "") {
document.getElementById("idAdd1").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idAdd1").style.color='red';
return false;
} else {
document.getElementById("idAdd1").style.color='black';
}
}
function validateAddress2(fld) {
var illegalChars = ^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$; // allow letters, numbers, and spaces
if (fld.value == "") {
document.getElementById("idAdd2").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idAdd2").style.color='red';
return false;
} else {
document.getElementById("idAdd2").style.color='black';
}
}
function validateCity(fld) {
var illegalChars = ^[A-Za-z]*[A-Za-z ][A-Za-z]*$; //Alow letters and spaces
if (fld.value == "") {
document.getElementById("idCity").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idCity").style.color='red';
return false;
} else {
document.getElementById("idCity").style.color='black';
}
}
function validateZip(fld){
var illegalChars = /^\d{5}$|^\d{5}-\d{4}$/;
if(fld.value =="") {
document.getElementById("idZip").style.color='red';
return false;
} else if(illegalChars.test(fld.value){
document.getElementById("idZip").style.color='red';
return false;
} else {
document.getElementById("idZip").style.color='black';
}
}
//]]>
</script>
</head>
<body>
<!-- MAIN DIV -->
<div id="main">
<!-- LOGO -->
<a href="index.html">
<img id="logo" src="./media/main-logo.gif"
alt="Video Game Distribution Project" /></a>
<!-- NAVIGATION BAR DIV -->
<div id="tabs">
<div id="session_div">
<!-- DISPLAY USER -->
<div id="session">
<?php
session_start();
if(session_is_registered('user_email'))
{
echo "Welcome, ".$_SESSION['user_email']."!";
}
else
echo "Welcome, Guest.";
?>
</div>
<!-- LOGIN/LOGOUT/REGISTER -->
<div id="session_action">
<?php
if(session_is_registered('user_email'))
{
echo "<a href='logout.php'>Logout</a>";
}
else
{
echo "<a href='loginPg.html'>Login</a>/
<a href='registrationPg.html'>Register</a>";
}
?>
</div>
</div>
<!-- NAVIGATION BAR DISPLAY -->
<ul id="navbar">
<li><a href="#">Xbox 360</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">PS3</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Wii</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">3DS</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">DS</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">PSP</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">PC</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
</ul>
</div> <!-- END tabs DIV -->
<div id="reg_box">
<h1>Register me.</h1>
<div id="info_box">
<div id="label_box">
<p>
<label id="idEmail">Email:</label><br />
<label id="idConfEmail">Confirm Email:</label><br />
<label id="idPass">New Password:</label><br />
<label id="idConfPass">Confirm Password:</label><br />
<label id="idFirst">First Name:</label><br />
<label id="idLast">Last Name:</label><br />
<label id="idAdd1">Address Line 1:</label><br />
<label id="idAdd2">(Optional) Address Line 2:</label><br />
<label id="idCity">City:</label><br />
<label>State:</label><br />
<label id="idZip">Zip code:</label><br />
</p>
</div> <!-- END lebel_box DIV -->
<div id="input_box">
<!--action="registration.php"-->
<form method="post" onsubmit="return validate(this)" >
<p>
<input type="text" name="user_email" maxlength="50" /><br />
<input type="text" name="conf_email" maxlength="50" /><br />
<input type="password" name="user_pass" maxlength="50" /><br />
<input type="password" name="conf_pass" maxlength="50" /><br />
<input type="text" name="user_first" maxlength="30" /><br />
<input type="text" name="user_last" maxlength="40" /><br />
<input type="text" name="user_add1" maxlength="50" /><br />
<input type="text" name="user_add2" maxlength="50" /><br />
<input type="text" name="user_city" maxlength="50" /><br />
<select name="user_state" size="1">
<option value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VA">VA</option>
<option value="VT">VT</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select><br />
<input type="text" name="user_zip" maxlength="10" /><br />
<input type="submit" value="Register" />
</p>
</form>
</div> <!-- END input_box DIV -->
</div> <!-- END info_box DIV -->
</div> <!-- END reg_box DIV -->
</div> <!-- END MAIN DIV -->
</body>
</html>
So I am trying to validate many input fields inside a form before I send it off to mysql. The page link is: http://penguin.tamucc.edu/~cmircovic...strationPg.php I am 99% sure it a JavaScript issue and I am a beginner with JS. My JS code is as follows: Code: function validate(form)
{
//Pull values from form
var email = form.user_email.value;
var confEmail = form.conf_email.value;
var password = form.user_pass.value;
var confpassword = form.conf_pass.value;
var firstName = form.user_first.value;
var lastName = form.user_last.value;
var add1 = form.user_add1.value;
var add2 = form.user_add2.value;
var city = form.user_city.value;
var zip = form.user_zip.value;
var isValid = true;
var atpos = email.indexOf("@"); //Find @ sign in email
var dotpos = email.lastIndexOf("."); //Fine . in email
var index = document.getElementsByTagName("label");
for(var i = 0; i < index.length; i++)
index[i].style.color='black';
//Validate Email
if(email != confEmail || atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.length)
{ //If invalid
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
isValid = false;
}
//Validate password
if(password != confPassword || password.length === 0)
{ //If invalid
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
isValid = false;
}
//Validate first name
if(firstName.length < 2)
{ //If invalid
document.getElementById("idFirst").style.color='red';
isValid = false;
}
//Validate last name
if(lastName.length < 2)
{ //If invalid
document.getElementById("idLast").style.color='red';
isValid = false;
}
//Validate address
if(add1.length === 0)
{ //If invalid
document.getElementById("idAdd1").style.color='red';
isValid = false;
}
//Validate city
if(city.length === 0)
{ //If invalid
document.getElementById("idCity").style.color='red';
isValid = false;
}
//Validate zip code
if(zip.length != 5 || zip.length != 10)
{ //If invalid
document.getElementById("idZip").style.color='red';
isValid = false;
}
if(isValid == false)
return false;
return true;
document.reg_form.action = "registration.php";
}
and my form starts like this... Code: <form name="reg_form" method="post" onSubmit="return validate(this)"> I'm trying to change the color of the labels according to what input field is wrong. It seems to loop through and keep my labels black. It shows the email red for a millisecond though. Any help would be appreciated. Hello, I've used the concept from this website to build a form. http://www.enviromark.ca/english/quoteform.html Notice how the second drop down options change depending on what option is selected in the first drop down. Here's the Javascript Code:
var Option1_Array = new Array("Choose a version", "1", "2");
var Option2_Array = new Array("Choose a version", "3", "4");
function program(objProgram) {
var objVersion = objProgram.form.Version;
var selectedArray = window[objProgram.options[objProgram.selectedIndex].value.replace(/\s/g,'') + "_Array"];
objVersion.options.length = 0;
for (var i=0; i < selectedArray.length; i++) {
objVersion.options[i]=new Option(selectedArray[i], selectedArray[i].replace(/->\s/g, ""));
}
}
Here's the HTML Code: <form>
<select name="Program" onChange="program(this)">
<option value="Start">Please choose a program</option>
<option value=Null>---------------------------------------></option>
<option value="Option1">1</option>
<option value="Option2">2</option>
</select>
<select name="Version" onChange="">
</select>
</form>
Now, this code works perfectly, and does exactly what I want it to. BUT I'd like to add more fields that accomplish the same thing. For example choose option1 --> version 2 --> type 3 --> thing 5 Now, in order to do this I believe you need to generate a 'value = "a_value"' in the generated html option and select fields. That way, all you need to do is make separate functions for each level and the function can call the 'value' html attribute to handle each <select> depending on its declared value. If this is the best way (it sounds a little sketchy to me) then any help would be great. Or, if you can add on more child selection options within one function. Thanks, -Matthew Can any of you nice people out there help I am writing a from with user details input E.G. House Number Street City user can input the house number and the street but the city is restricted to only the city I live in How do I make the input address1 equal house number + a space + street + a space + city, I am a beginner wrote this to learn but have got stuck! The code Code: <form action="#" onsubmit="showLocation(); return false;"> <table width=780 border=0 align=center summary=""> <tr> <td colspan=3><font size="+1"><b><div style="text-align: center">just some test here</div></b></font></td> </tr> <tr> <td><b>Pick Up Address</b></td> <td>House Number</td> <td><input type="text" name="punum" size="40" maxlength="5" /></td> </tr> <tr> <td><!-- --></td> <td>Street</td> <td><input type="text" name="pustreet" size="40" maxlength="20" /></td> </tr> <tr> <td><!-- --></td> <td>City</td> <td><select name="pucity" size="1"><option value="Cardiff" selected> Cardiff</option></select></td> </tr> <tr> <td><!-- --></td> <td>Post Code</td> <td><input type="text" name="pupostcode" size="40" maxlength="10"></td> </tr> <tr> <td><b>ADDRESS 1</b></td> <td>Pick Up Address</td> <td><input type="text" name="address1" value="Contents of punum and pustreet in here" /></td> </tr> <tr> <td></td> <td>Pick Up Time</td> <td><select name="putime" size="1"> <option value="00:00"> 00:00</option> <option value="00:15"> 00:15</option> <option value="00:30"> 00:30</option> <option value="00:45"> 00:45</option> <option value="01:00"> 01:00</option> <option value="01:15"> 01:15</option> <option value="01:30"> 01:30</option> <option value="01:45"> 01:45</option> <option value="02:00"> 02:00</option> <option value="02:15"> 02:15</option> <option value="02:30"> 02:30</option> <option value="02:45"> 02:45</option> <option value="03:00"> 03:00</option> <option value="03:15"> 03:15</option> <option value="03:30"> 03:30</option> <option value="03:45"> 03:45</option> <option value="04:00"> 04:00</option> <option value="04:15"> 04:15</option> <option value="04:30"> 04:30</option> <option value="04:45"> 04:45</option> <option value="05:00"> 05:00</option> <option value="05:15"> 05:15</option> <option value="05:30"> 05:30</option> <option value="05:45"> 05:45</option> <option value="06:00"> 06:00</option> <option value="06:15"> 06:15</option> <option value="06:30"> 06:30</option> <option value="06:45"> 06:45</option> <option value="07:00"> 07:00</option> <option value="07:15"> 07:15</option> <option value="07:30"> 07:30</option> <option value="07:45"> 07:45</option> <option value="08:00"> 08:00</option> <option value="08:15"> 08:15</option> <option value="08:30"> 08:30</option> <option value="08:45"> 08:45</option> <option value="09:00"> 09:00</option> <option value="09:15"> 09:15</option> <option value="09:30"> 09:30</option> <option value="09:45"> 09:45</option> <option value="10:00"> 10:00</option> <option value="10:15"> 10:15</option> <option value="10:30"> 10:30</option> <option value="10:45"> 10:45</option> <option value="11:00"> 11:00</option> <option value="11:15"> 11:15</option> <option value="11:30"> 11:30</option> <option value="11:45"> 11:45</option> <option value="12:00"> 12:00</option> <option value="12:15"> 12:15</option> <option value="12:30"> 12:30</option> <option value="12:45"> 12:45</option> <option value="13:00"> 13:00</option> <option value="13:15"> 13:15</option> <option value="13:30"> 13:30</option> <option value="13:45"> 13:45</option> <option value="14:00"> 14:00</option> <option value="14:15"> 14:15</option> <option value="14:30"> 14:30</option> <option value="14:45"> 14:45</option> <option value="15:00"> 15:00</option> <option value="15:15"> 15:15</option> <option value="15:30"> 15:30</option> <option value="15:45"> 15:45</option> <option value="16:00"> 16:00</option> <option value="16:15"> 16:15</option> <option value="16:30"> 16:30</option> <option value="16:45"> 16:45</option> <option value="17:00"> 17:00</option> <option value="17:15"> 17:15</option> <option value="17:30"> 17:30</option> <option value="17:45"> 17:45</option> <option value="18:00"> 18:00</option> <option value="18:15"> 18:15</option> <option value="18:30"> 18:30</option> <option value="18:45"> 18:45</option> <option value="19:00"> 19:00</option> <option value="19:15"> 19:15</option> <option value="19:30"> 19:30</option> <option value="19:45"> 19:45</option> <option value="20:00"> 20:00</option> <option value="20:15"> 20:15</option> <option value="20:30"> 20:30</option> <option value="20:45"> 20:45</option> <option value="21:00"> 21:00</option> <option value="21:15"> 21:15</option> <option value="21:30"> 21:30</option> <option value="21:45"> 21:45</option> <option value="22:00"> 22:00</option> <option value="22:15"> 22:15</option> <option value="22:30"> 22:30</option> <option value="22:45"> 22:45</option> <option value="23:00"> 23:00</option> <option value="23:15"> 23:15</option> <option value="23:30"> 23:30</option> <option value="23:45"> 23:45</option> </select> <font color="#FF0000">24 Hr</font> </td> </tr> <tr> <td><b>Customer Details</b></td> <td>First Name</td> <td><input type="text" name="fname" size="40" maxlength="20"></td> </tr> <tr> <td><!-- --></td> <td>Last Name</td> <td><input type="text" name="lname" size="40" maxlength="20"></td> </tr> <tr> <td><!-- --></td> <td>Telephone Number</td> <td><input type="text" name="tel1" size="40" maxlength="20"></td> </tr> <tr> <td><b>Destination Address</b></td> <td>House Number</td> <td><input type="text" name="dnum" size="40" maxlength="5"></td> </tr> <tr> <td><!-- --></td> <td>Street</td> <td><input type="text" name="dstreet" size="40" maxlength="20"></td> </tr> <tr> <td><!-- --></td> <td>City</td> <td><select name="dcity" size="1"> <option value="Barry"> Barry</option> <option value="Bridgend"> Bridgend</option> <option value="Caerphilly"> Caerphilly</option> <option value="Cardiff"> Cardiff</option> <option value="Newport"> Newport</option> <option value="Pontypridd"> Pontypridd</option> </select></td> </tr> <tr> <td><!-- --></td> <td>Post Code</td> <td><input type="text" name="dpostcode" size="40" maxlength="10"> <br></td> </tr> <tr> <td><b>ADDRESS 2</b></td> <td>Destination</td> <td><input type="text" name="address2" value="Birmingham Airport UK" /></td> </tr> <tr> <td><!-- --></td> <td><!-- --></td> <td><input type="submit" value="Get Tariff" /></td> </tr> </table> <!-- END OF FORM TABLE --> </form> Hi all. I have a form that I am writing which needs to send information contained inside a textbox when the user presses the "Post Comment" button. I want it be sent as a parameter to the addComment() function. How can you do this??? I have been trying to figure it out for a while now but can't seem to get the syntax right. This is what my code looks like currently. If possible I would like this to work without referencing the name of this form. Code: <form method="post" name="form" action="" style="padding:0px; margin:0px;"> <textarea name="content" id="content" style="width:600px; height:114px; font-family:Verdana,Arial,Tahoma,Times New Roman; font-size:12px; border:1px #666 solid;" onFocus="this.value=''; this.onfocus=null;">Enter your comment...</textarea><br /> <input type="submit" value="Post Comment" id="v" name="submit" onclick="addComment(this.content.value);" /> <span id="wait"></span><span id="flash"></span> </form> I have problem with my javascript form validation... Validation works only on last question and I can't understand why it doesn't work on other questions.. Html code : 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>
<script type="text/javascript" src="script.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Questionaire</title>
<link href="oneColLiqCtrHdr19.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #FFF;
background-image: url(images/aa.jpg);
}
-->
</style></head>
<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
<h1> </h1></div>
<!-- forms -->
<form action="http://projects.knord.dk/interaction/saveforminfo.aspx" method="post" onsubmit="return checkform(this);" >
<input type="hidden" name="surveyid" value="knjuku2" />
<input type="hidden" name="usecookie" value="true" />
<input type="hidden" name="landingpage" value="h---.html" />
<p align="center"><b>This survey was made for Business Academy Copenhagen North project not for FDIM.</b></p>
<p>
<b>Please enter your personal information</b>
</p>
<p><b>Your Occupation:</b>
<input type="text" name="occupation" />
</p>
<p><b>Age Group:</b>
<select name="age">
<option value="under 18">less then 18</option>
<option value="18-25">18-25</option>
<option value="26-35">26-35</option>
<option value="over 35">more then 35</option>
</select>
</p>
<p><b>Status:</b>
<select name="status">
<option value="single">Single</option>
<option value="single with children">Single with children</option>
<option value="in relationship">In relationship</option>
<option value="married">Married</option>
<option value="divorced">Divorced</option>
</select>
</p>
<p><b>Gender:</b>
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female
</p>
<p><b>Do you have a job?</b>
<input type="radio" name="job" value="yes" />Yes
<input type="radio" name="job" value="no" />No
</p>
<p> </p>
<p>
<!-- 1 vopros -->
</p>
<p><b>1. Why do You use online social media?</b>
</p>
<p>
<input type="radio" name="bla" value="To chat with friends" />
To chat with friends<br></br>
<input type="radio" name="bla" value="To read news" /> To read news<br></br>
<input type="radio" name="bla" value="To write blogs" /> To write blogs<br></br>
<input type="radio" name="bla" value="Other" /> Other<br></br>
</p>
<p>
<!-- 2 vopros -->
<b>2. What online social media do You use more often?</b>
</p>
<p> </p>
<p>
<select name="more">
<option value="MySpace">MySpace</option>
<option value="Twitter">Twitter</option>
<option value="Facebook">Facebook</option>
<option value="LinkedIn">LinkedIn</option>
</select>
</p>
<p> </p>
<!-- 3 vopros -->
<b>3. When do You use it?</b>
<p>
<input type="radio" name="use" value="1" /> At home<br></br>
<input type="radio" name="use" value="2" /> At work<br></br>
<input type="radio" name="use" value="3" /> At school<br></br>
<input type="radio" name="iuse" value="4" /> In the bus/train<br></br>
<input type="radio" name="use" value="5" /> Other<br></br>
</p>
<p><b>4. How much hours approximately do You spend on social media?</b>
</p>
<select name="hours">
<option value="less than 2 hours">less than 2 hours a day</option>
<option value="2-4 hours">2-4 hours a day</option>
<option value="4-8 hours">4-8 hours a day</option>
<option value="8-12 hours">8-12 hours a day</option>
<option value="more than 12 hours">more than 12 hours a day</option>
</select>
<p> </p>
<p>
<!-- 5 vopros -->
<b>5. Do You use social media often?</b></p>
<p>
<input type="radio" name="often" value="Yes" />
Yes
<input type="radio" name="often" value="No" /> No
<!-- 6 vopros -->
</p>
<p><b>6. Social Media website to which You usually upload</b></p>
<p>
<input type="radio" name="upload" value="Youtube" /> Youtube<br></br>
<input type="radio" name="upload" value="Flickr" /> Flickr<br></br>
<input type="radio" name="upload" value="Photobucket" /> Photobucket<br></br>
<input type="radio" name="upload" value="Slideshare" /> Slideshare<br></br>
<input type="radio" name="upload" value="Other" /> Other
</p>
<!-- 7 vopros -->
<b>7. Where do You chat with Your friends</b>
<select name="chatting">
<option value="Msn">Msn</option>
<option value="Skype">Skype</option>
<option value="Yahoo!">Yahoo!</option>
<option value="Other">Other</option>
</select>
<p> </p>
<!-- 8 vopros -->
<b>8. You use social media for</b>
<select name="using">
<option value="Personal reasons">Personal reasons</option>
<option value="Professional reasons">Professional reasons</option>
<option value="Don't use it">Don't use it</option>
</select>
<p> </p>
<p>
<!-- 9 vopros -->
<b>9. You prefer to obtain the information You need at</b>
<select name="information">
<option value="Yahoo!">Yahoo!</option>
<option value="Google">Google</option>
<option value="Wikipedia">Wikipedia</option>
<option value="Ask">Ask</option>
<option value="Other">Other</option>
</select>
</p>
<!-- 10 vopros -->
<b>10. What do You prefer to do being online</b>?
<select id="drop" name="online">
<option value="Read blogs">Read blogs</option>
<option value="Chat with friends">Chat with friends</option>
<option value="Watch videos">Watch videos</option>
<option value="Read news">Read news</option>
<option value="Other">Other</option>
</select>
<!-- konec voprosov -->
<!-- button-submit -->
<p align="center">
<input type="submit" value="Submit" />
</p>
</form>
<!-- end #container -->
</div>
</body>
</html>
Javascript validation Code:
//Javascript Document
function checkform ( form )
{
if (form.occupation.value == "") {
alert( "Please enter your occupation." );
form.occupation.focus();
return false ;
}
return true ;
}
function checkform(f) {
for (var i=0; i<f.elements("gender").length;
i++) {
var radio = f.elements("gender")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Choose your gender!");
f.elements("gender")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("job").length;
i++) {
var radio = f.elements("job")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Choose if you have a job!");
f.elements("job")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("bla").length;
i++) {
var radio = f.elements("bla")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Answer question number 1");
f.elements("bla")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("use").length;
i++) {
var radio = f.elements("use")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Answer question number 3!");
f.elements("use")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("often").length;
i++) {
var radio = f.elements("often")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Answer question number 5!");
f.elements("often")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("upload").length;
i++) {
var radio = f.elements("upload")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Answer question number 6!");
f.elements("upload")[0].focus();
return false;
}
Where is my mistake? And how to solve it to make javascript validation work properly? I will be completely up front about this, its school work. At the end of a basic html class I missed several classes for family reasons and missed just about everything on Javascript. The book we used basically didnt cover anything over it, was all in class learning I missed. Anyone who could help would be so helpful. One function is partial, one is blank, thats what is supposed to be added/corrected to the following code Code: <html>
<head>
<script language="javascript" type="text/javascript">
function processScore()
{
var score = 0;
if ( ...checked)
{score = score + 1;}
if (...checked)
{score = score + 1;}
document.answerForm.score.value = score;
// Display the correct answers
document.answerForm.answer1.value = " "; // put the correct value here
document.answerForm.answer2.value = " "; // put the correct value here
} //End of function processScore
function clearForm()
{
// using the a javascript method clear all forms
}
</script>
</head>
<body style="font-family:tahoma; font-size:15px; line-height:200%; width:80%; margin-left:auto; margin-right:auto;">
<hr color="red" width="60%" size="5">
<form name="question1" id="question1">
1. Which of the following is the document considered to be?<br/>
<input type = "radio" name="choiceRB">
a. object<br />
<input type = "radio" name="choiceRB">
b. property<br />
<input type = "radio" name="choiceRB">
c. method<br />
</form>
<hr color="green" width="60%" size="5">
<form name="question2" id="question2">
2. Which method of the window can be used to display a message to the user?<br/>
<input type = "radio" name="choiceRB">
a. display()<br />
<input type = "radio" name="choiceRB">
b. message()<br />
<input type = "radio" name="choiceRB">
c. alert()<br />
</form>
<hr color="red" width="60%" size="5">
<input type="button" value="Grade the Quiz" onclick=?> <input type="button" value="Start Over" onclick=?>
<form name="answerForm" id="answerForm">
<p><strong>Correct Answers:</strong><br/></p>
Question 1: <input type="text" name="answer1" size="1"><br />
Question 2: <input type="text" name="answer2" size="1"><br />
<p>You scored <input type="text" name="score" size = "1"> out of 2</p>
</form>
<br />
</body>
</html>
thnx in advance to anyone who can help Any suggestions on how the javascript below should be changed so it will work with checkboxes that have brackets in the name? (I'm using foreach in php, and can't seem to get the php to work/work correctly without using them.) Thanks! Code: function chktotal(j) {
var total=0;
for (var i=0; i < document.form1.ckbx.length; i++){
if(document.form1.ckbx[i].checked){
total=total+1;
}
if(total>8){
alert("Please only select 8");
document.form1.ckbx[i].checked = false;
total = total -1;
return false;
}
}
document.form1.totalval.value = total;
}
<input onclick="chktotal(2)" value ="Sample Item 1" type="checkbox" name="ckbx[]">
|
|||||||