|
JavaScript - Need Help With Triggering A Form With Javascript
I'm a real Newbie,
I've just started with coding html and css. Need javascript that does the following: 1. In a "Submit" form a customer adds a password and username that I've preassigned 2.Clicking on "Submit" causes the script to read the pass and username and see that it's correct. If correct it then triggers another form to appear which was hidden by CSS. Is this possible? How? Thanks for any help. T. Similar TutorialsI've got a flash music player (audioplay) on a site (yeah, I know, I hate music on websites too, but the client wants it). I'm using javascript to trigger "stop" and "play" and it works on every browser except IE 9+. The error in IE's developer says: SCRIPT438: Object doesn't support property or method 'stopMusic' Here's the javascript: Code: <script language="JavaScript" type="text/javascript">
function getPlayer(movieName)
{
if (navigator.appName.indexOf("Microsoft") != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
}
function play2()
{
getPlayer('player2').playMusic();
}
function stop2()
{
getPlayer('player2').stopMusic();
}
</script>
Here's the working example: EXAMPLE I don't know Jquery/Javascript too well at all but I can look at this code and see its pretty simple.. jQuery Panel: Code: $(document).ready(function() {
// Expand Panel
$(".open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$(".close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
and to trigger it from any link on the page it would need somethin like Code: $(".contact").click(function(){contactPanel()});
but I dont know how to give Panel code the name "contactPanel".. so this is where I'm stuck. how do i do this? also I have a "Open Contact Form" at the top of the page but I want to put a contact link at the very bottom and after the link is clicked i would like for the website to scroll up before the panel drops down.. is that possible? I am trying to create a simple HTML table with the squares of numbers and for some reason the loop is not triggering. Code: Code: <table border="1">
<tr><td><h2>Table of Squares</h2></td></tr>
<tr><td>
Number
</td>
<td>
Square
</td></tr>
<tr>
<script language="JavaScript">
for(i = 1, fact = 1; i < 10; i++, fact = i*i) {
document.write("<td>" + i + " </td><td> " + fact + "</td>);
document.write("</tr><tr>");
}
document.write("</tr></table>");
</script>
When I run the page all that comes up is the start of the table that is written before the script executes. Also is there any way I could use a debugger to catch this on my own? I tried the firefox debugger but it didn't catch anything when I ran it through, maybe I was just doing it wrong. Any help is appreciated 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 Hi i need help with an assignment that validates forms using javascript. Using my instructors example as a guide, i wrote this if you click submit on the example it properly returns false and displays an error message, in my assignment it does nothing but submit to the echo while im trying to get an error message. The assignment is unfinished but i wanted to test out the first bit of code and its not working. I'm just learning javascript and am editing a calculator form that will calculate square footage and write to a form text field. I have another form filed that I would like to display a number based a series of if else statements. ex: if square footage > 2761 then display 5.0., if square footage > 2521 then display 4.5. etc. Any help would be appreciated. I have posted my the code below. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<HTML>
<HEAD>
<TITLE>Size Calculator</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Footage.value = A * B;
form.Size.value = 21;
}
/* ClearForm: this function has 1 argument: form.
It clears the input and answer fields on the form.
It needs to know the names of the INPUT elements in order
to do this. */
function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Footage.value = "";
form.Size.value = "";
}
// end of JavaScript functions -->
</SCRIPT>
</HEAD>
<BODY>
<P><FONT SIZE="+2">Sizing Calculator</FONT></P>
<FORM NAME="Calculator" METHOD="post">
<P>House width (ft): <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P>
<P>House length (ft): <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P>
<P><INPUT TYPE="button" VALUE="Calculate" name="Calculate" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P>
<P>Square footage = <INPUT TYPE=TEXT NAME="Footage" SIZE=12></P>
<P>Size = <INPUT TYPE=TEXT NAME="Size" SIZE=12></P>
</FORM>
</BODY>
</HTML>
Okay this is part of an ajax driven shopping cart. the problem is i need to check for 2 different selections that would be for the same payment method. here is the code as it sits now Code: if ( typeof document.checkout.payment[3] != 'undefined'){
if (document.checkout.payment[3].checked == true)
{
if (document.checkout.cc_owner.value == "" )
{errMsg += 'Please complete or verify the information in the Name on the card field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_number.value == "")
{
errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_cvv2.value == "")
{
errMsg += 'Please complete or verify the information in the CVC/CVV code field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_phone.value == "")
{
errMsg += 'Please complete or verify the information in the Card company\'s telephone number field in the \'Payment Method\' section.' + "\n";
}
else
{
myCardNo = document.checkout.cc_number.value;
myCardType = document.checkout.surcharge.value;
if (!checkCreditCard (myCardNo,myCardType))
{
errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n";
}
}
}
}
}
}}
}
the problem is in the first 2 lines i basically need it to do this, but when i do it like how i need it to be it will not work. it looks like i am doing it incorrectly maybe. firebug gives me an undefined error on the first checked value because it does not exist when i need it to check for the 2 value. Code: if ( typeof document.checkout.payment[3] != 'undefined' || typeof document.checkout.payment[2] != 'undefined'){
if (document.checkout.payment[3].checked == true || document.checkout.payment[2].checked == true)
{
if (document.checkout.cc_owner.value == "" )
{errMsg += 'Please complete or verify the information in the Name on the card field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_number.value == "")
{
errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_cvv2.value == "")
{
errMsg += 'Please complete or verify the information in the CVC/CVV code field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_phone.value == "")
{
errMsg += 'Please complete or verify the information in the Card company\'s telephone number field in the \'Payment Method\' section.' + "\n";
}
else
{
myCardNo = document.checkout.cc_number.value;
myCardType = document.checkout.surcharge.value;
if (!checkCreditCard (myCardNo,myCardType))
{
errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n";
}
}
}
}
}
}}
}
I have a form developed in Dreamweaver CS5 using Spry Assets, I have 2 required fields in the form. One is email the other is phone. I want the user to only have to fill in one or the other, but one or the other needs to be filled out. Here is the form code: [code]<form id="form1" name="form1" method="post" action="http://www.greenhousegraphix.com/GatewayVentures/sendmail.php"> <span id="sprytextfield1"><label>Name</label> <input name="Name" type="text" id="Name" size="45" /> <span class="textfieldRequiredMsg">A value is required.</span></span><br /> <span id="sprytextfield3"><label>Title</label> <input name="Title" type="text" id="Title" size="45" /> </span><br /> <span id="sprytextfield2"><label>Company</label> <input name="Company" type="text" id="Company" size="45" /> </span><br /> <span id="sprytextarea1"><label>Address</label> <textarea name="Address" id="Address" cols="39" rows="2"></textarea> </span><br /> <span id="sprytextfield4"><label>City</label> <input name="City" type="text" id="City" size="45" /> </span><br /> <span id="sprytextfield5"><label>State</label> <input name="State" type="text" id="State" size="45" /> </span><br /> <span id="sprytextfield6"><label>Zip</label> <input name="Zip" type="text" id="Zip" size="45" /> <span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMinValueMsg">The entered value is less than the minimum required.</span></span><br /> <span id="sprytextfield7"><label>Phone</label> <input name="Phone" type="text" id="Phone" size="45" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br /> <span id="sprytextfield8"><label>Email</label> <input name="Email" type="text" id="Email" size="45" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br /> <span id="sprytextarea2"><label>Message</label> <textarea name="Message" id="Message" cols="39" rows="6"></textarea> </span><br /> <input name="SUBMIT" type="image" class="marginleft95px" src="images/submit.jpg" /> </form> </div> <div id="apDiv2"><img src="images/contact-us-keyboard.jpg" width="318" height="230" alt="contact us" /></div> <div id="apDiv3"><img src="images/contact-us.jpg" width="318" height="230" alt="contact us" /></div> </div></div> <script type="text/javascript"> var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"]}); var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {isRequired:false}); var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {isRequired:false}); var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {isRequired:false}); var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "none", {isRequired:false}); var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "zip_code", {isRequired:false}); var sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7", "phone_number", {validateOn:["blur"], hint:"(999) 999-9999"}); var sprytextfield8 = new Spry.Widget.ValidationTextField("sprytextfield8", "email", {validateOn:["blur"]}); var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {isRequired:false}); var sprytextarea2 = new Spry.Widget.ValidationTextarea("sprytextarea2", {isRequired:false}); </script>[code] Please help!! Hi and hope someone can help. I have a form with various input fields and, on submission, I'd like some validation done and if that's OK, for it to load another page in the parent directory. Trouble is I end up with Error 404 when I test it, the page actually exists but when I look at the URL within the Error 404 page it looks like this... Code: http://localhost/my_sites/webmaestro/assignments/Lesson06/pages/register()?First_Name=&Initials=&Last_Name=&Address_Line_1=&Address_Line_2=&City=&County=&Post_Code=&Email=&submit=Register The URL with the form on it is... Code: http://localhost/my_sites/webmaestro/assignments/Lesson06/pages/wm6ex1_register.html and the page I'm trying to call is... Code: http://localhost/my_sites/webmaestro/assignments/Lesson06/wm6ex1_home.html Is the problem to do with the fact that the form is actually trying to pass all those variables from the input fields? My form looks like this... Code: <form method="get" name="register" action="register()" onreset="return confirm('This will remove all your entries so far.\nIs that O.K?')" >
Various input fields here.
<input type="reset" name="reset" value="Reset" />
<input type="submit" name="submit" value="Register" />
</form>
My function currently has no validation and simply looks like this... Code: function register()
{
window.open("../wm6ex1_home.html", "_self")
}
My thanks R 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> I have been working on this code for a few days now. It is suppose to: 1. Remove the default values placed in the textarea. 2. Enter only numbers in the Phone Number field. 3. Verify that the passwords entered in the password fields are the same. 4. Verify everything is filled out, one of the radio buttons is selected and at least one of the check boxes are checked using a Submit() function as well as clear the fields using a Reset() function. I have the first two figured out and was able to get the password to verify once but can not get it to work again with any code. I am also unable to figure out a code that will call all these funtions together in the end to verify everything is filled out and not have the default words count as the field being filled. The idea of a default text is also kind of strange to me. I figured out how to remove the text entered as the value, but how do you get JavaScript to know that is the default and not an option to be used? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration</title>
<!--Create a registration form, similar to what you may encounter when registering for an
online Web site.
Include three sections: Personal Information, Security Information, and Preferences.
In the Personal Information section, add name, e-mail address, and telephone fields.
Include default text in the name and e-mail text boxes, but write some code that
removes the default text from each text box when a user clicks it.
Write code for the telephone field that prevents users from entering any values except for numbers.
In the Security Information section, add password and password confirmation fields. Write code that
ensures that the same value was entered into both fields.
Also add a security challenge question selection list and a security answer text box that the Web site will use to help
identify a user in the event that he or she loses his or her password.
The security challenge selection list should contain questions such as What is your mother's maiden name?,
What is the name of your pet?, and What is your favorite color?.
In the Preferences section, add radio buttons that confirm whether a user wants special offers sent to his
or her e-mail address.
Also, include check boxes with special interests the user may be interested in, such as
entertainment, business, and shopping.
Add submit and reset buttons that call submit() and reset() event handler functions when they are clicked.
The submit() event handler function should ensure that the user has entered values into
each text box, and that the values submitted are not the same as the default text.
The submit() event handler function should also ensure that the user selects a security
challenge question, selects a radio button to confirm whether he or she wants special offers
sent to his or her e-mail address, and selects at least one interest check box. Submit
the form to the FormProcessor.html script (there is a copy in your Cases folder for
Chapter 5). Save the document as Registration.html.
-->
<script language="javascript" type="text/javascript">
// This JavaScript removes default values form field
function doClear(theText) {
if (theText.value == theText.defaultValue) {
theText.value = ""
}
}
// This JavaScript allows characters exept numbers
function AcceptLetters(objtextbox)
{
var exp = /[^\D]/g;
objtextbox.value = objtextbox.value.replace(exp,'');
}
// This JavaScript allows numbers only
function AcceptDigits(objtextbox)
{
var exp = /[^\d]/g;
objtextbox.value = objtextbox.value.replace(exp,'');
}
//This JavaScript confirms everything is filled out
function confirmSubmit() {
var submitForm = window.confirm("Are you sure you want to submit the form?");
if (document.registar[0].name.value == "Name"
|| document.registar[0].name.value == ""
|| document.registar[0].e_mail.value == "E-Mail Address"
|| document.registar[0].e_mail.value == ""
|| document.registar[0].phone.value == ""
|| document.registar[0].phone.value == ""
|| document.registar[0].password1.value == ""
|| document.registar[0].password2.value == ""
|| document.registar[0].sq_answer.value == "Question Answer") {
window.alert("You must enter all fields above.");
return false;
}
else
return true;
}
</script>
</head>
<body>
<h1>Registration Page</h1>
<form name="registar " method="post" onsubmit="return confirmSubmit()">
<h3>Personal Information</h3>
Name:<br />
<input type="text" name="name" value="Name" maxlength=10 id="letters" onFocus="doClear(this)" onkeyup="AcceptLetters(this)" />
<br />
E-Mail:<br />
<input type="text" name="email" value="E-mail Address" onFocus="doClear(this)" />
<br />
Phone Number:<br />
<input type="text" name="phoneNumber" maxlength=10 id="txttest" onFocus="doClear(this)" onkeyup="AcceptDigits(this)" />
<br />
<h3>Security Information</h3>
Password:<br />
<input type="password" name="password1" /><br />
Confirm Password:<br />
<input type="password" name="password2" /><br />
<DIV ID="password_result"> </DIV>
Security Question:<br />
<select id="selection"><br />
<option value=0>Please Choose One</option>
<option value=1>What is your favorite food?</option>
<option value=2>What is your Mother's maiden name?</option><br />
<option calue=3>What is your pets name?</option><br />
<option value=4>What is the name of your High School?</option><br />
</select><br />
Answer<br />
<input type="text" name="sq_answer" value="Question Answer" onFocus="doClear(this)" /><br />
<h3>Preferences</h3>
Yes<input type="radio" name="confirmAnswer" value="Yes"/>No<input type="radio" name="answer" value="No" />Would you like any special offers sent to your E-mail address?<br />
<h5>Interests</h5>
<input type="checkbox" name="interest" value="check"/>Entertainment<br />
<input type="checkbox" name="interest" value="check"/>Shopping<br />
<input type="checkbox" name="interest" value="check"/>Business<br />
<input type="checkbox" name="interest" value="check"/>Exercise<br />
<br />
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</form>
</body>
</html>
ok, so I have a code where it takes documents and uploads them as soon as selected. I want to know how I can put in my genRandomString() in so that not only will the doc upload, but this random string will submit to database, but I need this string to be the same for all documents that are uploaded on a single page load.....when page refreshes, new string, else it stays the same. I am going to link this number as an id in the database so that it can be identified. does this make any sense at all?????? Code: <?php
function genRandomString($length = 20) {
$characters = '0123456789';
$string ='';
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters))];
}
return $string;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple File Upload With Progress Bar - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="js/jquery.swfupload.js"></script>
<script type="text/javascript">
$(function(){
$('#swfupload-control').swfupload({
upload_url: "upload-file.php",
file_post_name: 'uploadfile',
file_size_limit : "9999999999999999999999999999999999",
file_types : "*",
file_types_description : "Image files",
file_upload_limit : 1000,
flash_url : "js/swfupload/swfupload.swf",
button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
button_width : 114,
button_height : 29,
button_placeholder : $('#button')[0],
debug: false
})
.bind('fileQueued', function(event, file){
var listitem='<li id="'+file.id+'" >'+
'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
'<div class="progressbar" ><div class="progress" ></div></div>'+
'<p class="status" >Pending</p>'+
'<span class="cancel" > </span>'+
'</li>';
$('#log').append(listitem);
$('li#'+file.id+' .cancel').bind('click', function(){ //Remove from queue on cancel click
var swfu = $.swfupload.getInstance('#swfupload-control');
swfu.cancelUpload(file.id);
$('li#'+file.id).slideUp('fast');
});
// start the upload since it's queued
$(this).swfupload('startUpload');
})
.bind('fileQueueError', function(event, file, errorCode, message){
alert('Size of the file '+file.name+' is greater than limit');
})
.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
})
.bind('uploadStart', function(event, file){
$('#log li#'+file.id).find('p.status').text('Uploading...');
$('#log li#'+file.id).find('span.progressvalue').text('0%');
$('#log li#'+file.id).find('span.cancel').hide();
})
.bind('uploadProgress', function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
})
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id);
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
var pathtofile='<a href="uploads/'+file.name+'" rel="nofollow" target="_blank" >view »</a>';
item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
})
.bind('uploadComplete', function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload('startUpload');
})
});
</script>
<style type="text/css" >
#swfupload-control p{ margin:10px 5px; font-size:0.9em; }
#log{ margin:0; padding:0; width:500px;}
#log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px;
font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}
#log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }
#log li .progress{ background:#999; width:0%; height:5px; }
#log li p{ margin:0; line-height:18px; }
#log li.success{ border:1px solid #339933; background:#ccf9b9; }
#log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px;
background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; }
</style>
</head>
<body>
<div id="swfupload-control">
<p>Upload upto 5 image files(jpg, png, gif), each having maximum size of 1MB(Use Ctrl/Shift to select multiple files)</p>
<input type="button" id="button" />
<p id="queuestatus" ></p>
<ol id="log"></ol>
</div>
</body>
</html>
|
|||||||