|
JavaScript - Form Mailto Entry On Selection List
I have created this form. I would like to use javascript to mail the form to the selected email from the selection list when the submit button is pressed.
could anyone help with this? <form name="Contact Us" id="contact" action="mailto:" method="post"> <fieldset id="selection"> Who would you like to email: <select> <option value="email1" >email1</option> <option value="email2" >email2</option> <option value="email3">email3</option> </select> <fieldset id="Name" > Name <input type="text" id="firstname" name="firstname"> <input type="text" id="email" name="email"> </fieldset> <fieldset id="question"> Comments and Questions <input type="text" id="comment" name="comment" style="width: 500; height: 300"> </fieldset> </form> Similar TutorialsHi there, I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button) I have 2 drop down lists: Starting date (June 5th, 6th 7th) Ending date (June 5th, 6th 7th) I want to write a script that would NOT ALLOW one to choose: - Starting date June 6th and Ending date June 5th - Starting date June 7th and Ending date June 6th - Starting date June 7th and Ending date June 5th I appreciate your help Hi all, I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County). I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database. This piece of code is working well . . . . Code: <?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}
</script>
<form name="theForm" method="get">
<!-- County SELECTION BASED ON city VALUE -->
<?php
?>
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
What follows is my form where the javascript is not working - edited quite a bit to save on space! Code:
<head>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit();
}
</script>
</head>
<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />
<label for="Business_name">Business Name</label>
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />
<label for="StreetAddress">Address</label>
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />
<label for="Town">Town</label> <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br />
<?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<form name = "subform" method="get">
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />
<br/>
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>
</form>
</body>
</html>
It's probably obvious to you guys!! Thanks in advance for your help. Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe I have a question and I'm hoping someone may have some suggestions on how to solve. I found a script on this forum that does almost what I want from this thread: http://codingforums.com/showthread.php?t=184011 (thank you Philip M!) Instead of a dropdown, I'd like to have a list of names using check boxes, so that you have the option to send an email to one or all of the people. When you choose your selections and click submit, an outlook email will pop up with your selections in the to: field. Is this possible? Here's the solutuin using a drop down, this works (and works well), but doesn't quite do what I need : <form name="Contact_Us" id="contact" method="post" enctype="text/plain" onsubmit = "getEml()"> <fieldset id="selection"> Who would you would like to email: <select name = "sel"> <option value="email1@email.com" >email 1</option> <option value="email2@email.com" >email 2</option> <option value="email3@email.com" >email 3</option> </select> <input type = "submit" value = "Submit the form"> </form> <script type = "text/javascript"> function getEml() { var emailaddress = document.Contact_Us.sel.value; window.location = "mailto:" + emailaddress; } </script> Is there a way to use checkboxes but to do the same thing? <INPUT TYPE=CHECKBOX NAME="name1@email.com">name 1<BR> <INPUT TYPE=CHECKBOX NAME="name2@email.com">name 2<BR> <INPUT TYPE=CHECKBOX NAME="name3@email.com">name 3<BR> Attached is the code. It does open the email but does not send any information. Can someone please assist. Code: <!-- Table 2 for the Content -->
<form name="orders" onsubmit="return confirmSubmit()" onreset="return window.confirm('Are you sure you want to reset your Orders.'); " action="mailto:lynette@sayorkies.co.za" method="post" enctype="text/plain">
Code: // Function to Confirm certain conditions and confirm to proceed with order
function confirmSubmit() {
var itemsOrdered = true;
if (document.forms[2].totalExcl.value == 0 || document.forms[2].delivery.value == 0) {
itemsOrdered = false;
}
if(itemsOrdered != true) {
window.alert("You have not chosen any products to purchase or No Delivery Option selected.");
return false;
}
var submitOrder = window.confirm("Are you sure you want to place the order?");
if(submitOrder == true)
return true;
return false;
}
// Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
// Get the current field
var formField = orders.elements[i];
// Get the fields name
var formName = formField.name;
// Is it a "product" field?
if (formName.substring(0,4) == "prod") {
// Items price extracted from name
var itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1));
// Get the Quantity
var itemQuantity = parseInt(formField.value);
// Update the OrderValue
if(itemQuantity >= 0) {
orderValue += itemQuantity * itemPrice;
}
}
}
// Display the totals
orders.totalExcl.value = "R " + orderValue.toLocaleString();
// function to calculate VAT at 15% as required and total inclusive.
function calcTotals(oValue) {
var vat = oValue * .15;
var totalIncluding = oValue + vat;
var tDelivery = Number( orders.delivery.value.substring(2) );
var theTotalOrder = totalIncluding + tDelivery;
orders.vat.value = "R " + vat.toLocaleString();
orders.totalIncl.value = "R " + totalIncluding.toLocaleString();
orders.totalOrder.value = "R " + theTotalOrder.toLocaleString();
}
return calcTotals(orderValue);
}
hello, i am more a designer than a developer so i need your help. i want to create a form containing : 1. drop down list of countries (that i managed to create) 2. action on selection (redirect to a link on country selection) 3. post the selected option into a text box below and remeber (if possible) The remeber part is optional . I want a form where user will select country , based on the selection to be redirected to a link and message display , you selected : [textarea]Option[/textarea] can it be done? How can I open a selection from this drop down list in a new window? Code:
<html>
<!-- Stop Underline script available from http://www.themssforum.com/FontpageProgramming/Hyperlink-underline/ -->
<style type="text/css">
a { text-decoration: none;color: #003366; } /*makes the underline disappear for
all links*/
a:visited { color: #003366; }
a:hover { color: red; text-decoration: underline; } /*underlines links
when hovered over */
a:active { color: #003366; }
</style>
<head>
<TITLE>Travel</TITLE>
<META name="description" content="Premier online guide to leisurely travel">
<META name="keywords" content="English Lake District">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: webreference.com -->
<!-- Web Site: http://webreference.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
if(v){a=new Array();aln=0;}
function getFormNum (formName) {
formNum =-1;
for (i=0;i<document.forms.length;i++){
tempForm = document.forms[i];
if (formName == tempForm) {
formNum = i;
correctForm = tempForm;
break;
}
}
return formNum;
}
function jmp(formName,elementNum) {
getFormNum(formName);
if (formNum>=0) {
with (document.forms[formNum].elements[elementNum]) {
i=selectedIndex;
if (i>=0) location=options[i].value;
}
}
}
function O(txt,url) {
a[k]=new Option(txt,url);k++;
}
function relate(formName,elementNum,j) {
if(v) {
k=1;
if(j==0) { // default category item
a=new Array();
O(">","");
}
<!-- Alston -->
if(j==1) { // 1st category items
a=new Array();
O("Local Directory : ->","");
O("South Tynedale Railway","http://www.lakesandcumbria.com/view/travel/index.htm#South Tynedale Railway");
}
<!-- Ambleside -->
if(j==2) { // 2nd category items
a=new Array();
O("Local Directory : ->","");
O("Lakeland Safari Tours","http://www.lakesandcumbria.com/view/travel/p2.htm#Lakeland Safari Tours");
}
<!-- Bowness-on-Windermere -->
if(j==3) { // 3rd category items
a=new Array();
O("Local Directory : ->","");
O("Adaptours","http://www.lakesandcumbria.com/view/travel/p2.htm#Adaptours");
O("Windermere Lake Cruises","http://www.lakesandcumbria.com/view/travel/index.htm#Windermere Lake Cruises");
}
<!-- Carlisle -->
if(j==4) { // 4th category items
a=new Array();
O("Local Directory : ->","");
O("Settle-Carlisle Railway","http://www.lakesandcumbria.com/view/travel/index.htm#Settle-Carlisle Railway");
}
<!-- Coniston -->
if(j==5) { // 5th category items
a=new Array();
O("Local Directory : ->","");
O("Coniston Launch","http://www.lakesandcumbria.com/view/travel/index.htm#Coniston Launch");
O("Steam Yacht Gondola","http://www.lakesandcumbria.com/view/travel/index.htm#Steam Yacht Gondola");
}
<!-- Glenridding -->
if(j==6) { // 6th category items
a=new Array();
O("Local Directory : ->","");
O("Ullswater Steamers","http://www.lakesandcumbria.com/view/travel/index.htm#Ullswater Steamers");
}
<!-- Keswick -->
if(j==7) { // 7th category items
a=new Array();
O("Local Directory : ->","");
O("Keswick launch","http://www.lakesandcumbria.com/view/travel/index.htm#Keswick Launch");
O("Landscape Minibus Tours","http://www.lakesandcumbria.com/view/travel/p2.htm#Landscape Minibus Tours");
}
<!-- Lakeside -->
if(j==8) { // 8th category items
a=new Array();
O("Local Directory : ->","");
O("Lakeside & Haverthwaite Railway","http://www.lakesandcumbria.com/view/travel/index.htm#Lakeside & Haverthwaite Railway");
}
<!-- Penrith -->
if(j==9) { // 9th category items
a=new Array();
O("Local Directory : ->","");
O("Cumbrian Discoveries","http://www.lakesandcumbria.com/view/travel/index.htm#Cumbrian Discoveries");
}
<!-- Ravenglass -->
if(j==10) { // 10th category items
a=new Array();
O("Local Directory : ->","");
O("Ravenglass & Eskdale Railway","http://www.lakesandcumbria.com/view/travel/index.htm#Ravenglass & Eskdale Railway");
}
<!-- Windermere -->
if(j==11) { // 11th category items
a=new Array();
O("Local Directory : ->","");
O("Alistairs of Windermere","http://www.lakesandcumbria.com/view/travel/p2.htm#Alistairs of Windermere");
O("Lakes Supertours","http://www.lakesandcumbria.com/view/travel/p2.htm#Lakes Supertours");
O("Mountain Goat","http://www.lakesandcumbria.com/view/travel/p2.htm#Mountain Goat");
O("Park Tours and Travel","http://www.lakesandcumbria.com/view/travel/p2.htm#Park Tours and Travel");
}
aln2=a.length;
getFormNum(formName);
if (formNum>=0) {
formNum = formNum + 1;
with (document.forms[formNum].elements[elementNum]) {
for (var i=options.length-1;i>0;i--) options[i]=null;
for (var i=1;i<aln2;i++) options[i-1]=a[i];
options[0].selected=true;
}
}
} else {
jmp(formName,elementNum);
}
}
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
// End -->
</SCRIPT>
<meta name="Microsoft Border" content="none">
</head>
<body link="#003366" onload="FP_preloadImgs(/*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/about/about_h.jpg', /*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/a-z/a-z_h.jpg', /*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/join/join_h.jpg', /*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/privacy/privacy_h.jpg', /*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/terms/terms_h.jpg', /*url*/'navigation/utils/contact/contact_h.jpg', /*url*/'navigation/utils/copyright/copyright_h.jpg', /*url*/'navigation/utils/sitemap/sitemap_h.jpg', /*url*/'navigation/utils/suggest/suggest_h.jpg')">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="975">
<tr>
<td width="25%" align="center" rowspan="2" valign="top">
</td>
<td height="25">
<p align="center"><font face="Comic Sans MS" color="#FF0000"><b>TRAVEL</b></font>
</td>
<td width="25%" align="center" rowspan="2" valign="top">
<p> </p>
<p> </p>
<p> </td>
</tr>
<tr>
</center>
<td valign="top" align="center">
<table border=0 cellspacing="0" cellpadding="0">
<tr valign=top>
<TD align=center bgcolor="#FFFFFF"><form name=f1 method=post action="" onSubmit="return false;">
<select name=m1 onChange="relate(this.form,0,this.selectedIndex); document.f2.m2.focus();" style="background-color: #FFE0C1" size="1">
<option value="/">Location...
<option value="/">Alston,
<option value="/">Ambleside,
<option value="/">Bowness-on-Windermere,
<option value="/">Carlisle,
<option value="/">Coniston,
<option value="/">Glenridding,
<option value="/">Keswick,
<option value="/">Lakeside,
<option value="/">Penrith,
<option value="/">Ravenglass,
<option value="/">Windermere,
</select><br>
<br>
<br>
</form></td>
<td align=center valign="top"> </td>
<td bgcolor="#FFFFFF" valign="top"><form name=f2 method=post action="" onsubmit="return false;">
<select name="m2" onchange="jmp(this.form,0)" style="background-color: #FFE0C1" size="1">
<option value="/">>
<option value="/">
</select></form></td>
</tr>
</table>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" valign="top" align="center">
</td>
<td width="50%" valign="top" align="center">
</td>
</tr>
</center>
</table>
</div>
</td>
</tr>
</table>
</div>
<p></p>
</body>
</html>
Hello Folks, Here is my dropdown menu: Code: <select name="peeps"> <option value="Frank Tompson">Frank Tompson</option> <option value="Henry Wilson">Henry Wilson</option> <option value="Bill Kent">Bill Kent</option> <option value="Jessi McDonald"> Jessi McDonald</option> <option value="John Hays">John Hays</option> How can i make it so if i click on John Hays a JavaScript pop up will say Hello John Hays, and if i click on Bill Kent a popup will say hello Bill Kent and if i click on any other name nothing happens? Hi guys, I'm looking for a way i can set some of the mailto form data - mainly the full name and holiday start date into the subject line of the email. this is the code for my form: Code: <html> <head> <body bgcolor="#DCDCDC"> <font size="3" face="tahoma" color="#000000"> <form action="MAILTO:email@email.co.uk?subject=Holiday Request" method="post" enctype="text/plain" font-weight: bold; size="10" maxlength="30"> <u><b>Holiday Request Form</b></u> <br /><br /> First Name: <input type="text" name="first-name" /> <br /><br /> Last Name: <input type="text" name="last-name" /> <br /><br /> Holiday Type: <select name = "Holiday Type"> <option value="new holiday">New Holiday</option> <option value="amend holiday">Amend Holiday</option> <option value="delete holiday">Delete Holiday</option> </select> <br /><br /> Start Holiday: <select name = "Start Day"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> / <select name = "Start Month"> <option value="january">Jan</option> <option value="febuary">Feb</option> <option value="march">Mar</option> <option value="april">Apr</option> <option value="may">May</option> <option value="june">Jun</option> <option value="july">Jul</option> <option value="august">Aug</option> <option value="september">Sep</option> <option value="october">Oct</option> <option value="november">Nov</option> <option value="december">Dec</option> </select> / <select name = "Start Year"> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> </select> <br /><br /> End Holiday: <select name "End Day"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> / <select name = "End Month"> <option value="january">Jan</option> <option value="febuary">Feb</option> <option value="march">Mar</option> <option value="april">Apr</option> <option value="may">May</option> <option value="june">Jun</option> <option value="july">Jul</option> <option value="august">Aug</option> <option value="september">Sep</option> <option value="october">Oct</option> <option value="november">Nov</option> <option value="december">Dec</option> </select> / <select name = "End Year"> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> </select> <br /><br /> Total Hours Required: <input type="text" name="total-hours" size="6"/> <br /><br /> Notes Box: <br /> <textarea name="Additional Info" rows="5" cols="40"> Enter here any additional information that may be required. </textarea> <br /><br /> Half Day Tickbox: <input type="checkbox" name="half-day" value="half-day"/> <br /><br /> Start Shift: <select name = "Start Shift Hours"> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> </select> : <select name = "Start Shift Minutes"> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <br /><br /> End Shift: <select name = "End Shift Hours"> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> </select> : <select name = "End Shift Minutes"> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <br /><br /> Lunch Start: <select name = "Lunch Start Hours"> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> </select> : <select name = "Lunch Start Minutes"> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <br /><br /> Lunch End: <select name = "Lunch End Hours"> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> </select> : <select name = "Lunch End Minutes"> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <br /><br /> Holiday Start Time: <select name = "Holiday Start Hours"> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> </select> : <select name = "Holiday Start Minutes"> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <br /><br /> Holiday End Time: <select name = "Holiday End Hours"> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> </select> : <select name = "Holiday End Minutes"> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <br /><br /> <input type="submit" value="Send"> </form> </font> </body> </head> </html> Any help will be appreciated. Thanks, Craig Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! Dear all, attached is a page for my website to allow visitors to purchase photos. It is made from 2 Paypal example scripts - one for the form and another for an additional text box. It works fine apart from one detail, the text being entered does not get sent - instead, the information it forwards is "6x4 Colour Prints. Item Number id10" The "6x4 Colour prints" bit is good - the "Item number id10" is where I'd ideally like to see the custom text being entered and the guys at Paypal developer forums have said that a Javascript command is overriding the text being forwarded and to seek advice from those who know Javascript. I've tried for a day by trial and error to see if I can take this command out but it has got to the hair pulling out stage so I'm calling on those who know best to cast a wise eye over the code and see if there is an easy fix to this. Any help or suggestions as to howe to alter this will be most gratefully received. Thanks in advance, Dave. Hi Everyone, I'm encountering errors with a form I have created. I feel confident that the issue is with my JS validation form because when I allow the form to submit without validating any of the fields, my php processor correctly uploads all the content into my database (but, I will need the form validation to prevent the user from skipping fields). The issue (I believe) is with IE. In IE, both drop-downs seem to populate correctly but when I submit the form, I get a prompt to make a selection for the first drop-down menu. The form does submit properly in FireFox and Safari but with some testing I noticed that I was getting a prompt to make a selection in the first drop-down in instances where a selection was already made but I just had not yet populated the second country/state drop-down. Still, in Firefox and Safari, the form does pass validation upon submit.. So, I am hoping it's just IE specific issue. I'm thinking the issue is with IE not recognizing my selection. The form had a drop-down menu where the user selects a letter, then that selection triggers (in JS using a function to process the selection) another drop-down to populate with all the countries or states that begin with the letter from the first selection. Here is the code from my form: Code: <p><span class="title">Sign Up</span></p>
<br />
<form id = "signupForm" action="signup_process.php" method = "post" onsubmit="return validateSignupForm();">
<p>All required fields are marked with ( <span class = "requiredStar">*</span> )</p>
<br />
<p><label for="first_name">First Name: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="first_name" id="first_name" style="height: 20px;" size="30" tabindex="1" maxlength="30" /></div>
<br />
<p><label for="last_name">Last Name: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="last_name" id="last_name" style="height: 20px;" size="30" tabindex="2" maxlength="30" /></div>
<br />
<p><label for="countryLtr">Select the first letter of your country: <span class = "requiredStar">*</span></label></p>
<select id="countryLtr" name="countryLtr" id="countryLtr" size="1" tabindex="3" onchange="processSelection()">
<option value=""></option>
<option value="USA">USA</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>
<br />
<br />
<p><label for="countryState">Select your country/ state (if USA): <span class = "requiredStar">*</span></label></p>
<select id="countryState" name="countryState" id="countryState" size="1" tabindex="4">
</select>
<br />
<br />
<p><label for="username">Create a username: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="username" id="username" style="height: 20px;" size="30" tabindex="5" maxlength="30" /></div>
<br />
<p><label for="email">Email: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="email" id="email" style="height: 20px;" size="30" tabindex="6" maxlength="30" /></div>
<br />
<p><label for="password">Create a password: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="password" name="password" id="password" style="height: 20px;" size="30" tabindex="7" maxlength="30" /></div>
<br />
<br />
<input type="hidden" name="source" value="12345">
<input type="image" name="submit" value="Submit" class="submitButton" src="images/submit-button.png" />
<input type="image" name="reset" value="Reset" class="resetButton" src="images/reset-button.png" />
<br />
</form>
and here is the code for processing the selection of the first drop-down and populating the second drop-down (I reduced the number of options for the countries to save on characters for this post): Code: function processSelection() {
choice1 = document.getElementById("countryLtr");
choice2 = document.getElementById("countryState");
choice2.length = 0;
if (choice1.value == "USA") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Alaska");
choice2[choice2.length] = new Option("American Samoa");
choice2[choice2.length] = new Option("Arizona");
choice2[choice2.length] = new Option("Arkansas");
choice2[choice2.length] = new Option("California");
choice2[choice2.length] = new Option("Colorado");
choice2[choice2.length] = new Option("Connecticut");
choice2[choice2.length] = new Option("Delaware");
choice2[choice2.length] = new Option("District of Columbia");
choice2[choice2.length] = new Option("Florida");
choice2[choice2.length] = new Option("Georgia");
choice2[choice2.length] = new Option("Guam");
choice2[choice2.length] = new Option("Hawaii");
choice2[choice2.length] = new Option("Idaho");
choice2[choice2.length] = new Option("Illinois");
choice2[choice2.length] = new Option("Indiana");
choice2[choice2.length] = new Option("Iowa");
choice2[choice2.length] = new Option("Kansas");
choice2[choice2.length] = new Option("Kentucky");
choice2[choice2.length] = new Option("Louisiana");
choice2[choice2.length] = new Option("Maine");
choice2[choice2.length] = new Option("Maryland");
choice2[choice2.length] = new Option("Massachusetts");
choice2[choice2.length] = new Option("Michigan");
choice2[choice2.length] = new Option("Minnesota");
choice2[choice2.length] = new Option("Mississippi");
choice2[choice2.length] = new Option("Missouri");
choice2[choice2.length] = new Option("Montana");
choice2[choice2.length] = new Option("Nebraska");
choice2[choice2.length] = new Option("Nevada");
choice2[choice2.length] = new Option("New Hampshire");
choice2[choice2.length] = new Option("New Jersey");
choice2[choice2.length] = new Option("New Mexico");
choice2[choice2.length] = new Option("New York");
choice2[choice2.length] = new Option("North Carolina");
choice2[choice2.length] = new Option("North Dakota");
choice2[choice2.length] = new Option("Northern Marianas Islands");
choice2[choice2.length] = new Option("Ohio");
choice2[choice2.length] = new Option("Oklahoma");
choice2[choice2.length] = new Option("Oregon");
choice2[choice2.length] = new Option("Pennsylvania");
choice2[choice2.length] = new Option("Puerto Rico");
choice2[choice2.length] = new Option("Rhode Island");
choice2[choice2.length] = new Option("South Carolina");
choice2[choice2.length] = new Option("South Dakota");
choice2[choice2.length] = new Option("Tennessee");
choice2[choice2.length] = new Option("Texas");
choice2[choice2.length] = new Option("Utah");
choice2[choice2.length] = new Option("Vermont");
choice2[choice2.length] = new Option("Virginia");
choice2[choice2.length] = new Option("Virgin Islands");
choice2[choice2.length] = new Option("Washington");
choice2[choice2.length] = new Option("West Virginia");
choice2[choice2.length] = new Option("Wisconsin");
choice2[choice2.length] = new Option("Wyoming");
} else if (choice1.value == "A") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Azerbaijan");
} else if (choice1.value == "B") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("The Bahamas");
} else if (choice1.value == "C") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Czech Republic");
} else if (choice1.value == "D") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Denmark");
} else if (choice1.value == "E") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Ecuador");
} else if (choice1.value == "G") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Gabon");
} else if (choice1.value == "H") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Haiti");
} else if (choice1.value == "I") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Iceland");
} else if (choice1.value == "J") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Jamaica");
} else if (choice1.value == "K") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Kazakhstan");
} else if (choice1.value == "L") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Laos");
} else if (choice1.value == "M") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Macau");
} else if (choice1.value == "N") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Namibia");
} else if (choice1.value == "O") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Oman");
} else if (choice1.value == "P") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Pakistan");
} else if (choice1.value == "Q") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Qatar");
} else if (choice1.value == "R") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Reunion");
} else if (choice1.value == "S") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Saint Helena");
} else if (choice1.value == "T") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Taiwan");
} else if (choice1.value == "U") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Uganda");
} else if (choice1.value == "V") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Vanuatu");
} else if (choice1.value == "W") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Wake Island");
} else if (choice1.value == "Y") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Yemen");
} else if (choice1.value == "Z") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Zambia");
}
}
Here is the code for validating the form upon submission: Code:
function validateRequestForm() {
var theForm = document.getElementById("requestForm"); //form reference
var valid = true; //flag, must be true to proceed
if (theForm.name.value == "") {
alert ("Please enter a name");
valid = false;
theForm.username.focus();
} else if (theForm.countryLtr.value == "") {
alert ("Please select the first letter of your country");
valid = false;
theForm.countryLtr.focus();
} else if (theForm.countryState.value == "") {
alert ("Please select your country. If USA, please select your state");
valid = false;
theForm.countryState.focus();
} else if (theForm.email.value == "") {
alert ("Please enter your email address");
valid = false;
theForm.email.focus();
} else if (theForm.title.value == "") {
alert ("Please enter a title for your request");
valid = false;
theForm.title.focus();
} else if (theForm.request.value == "") {
alert ("Please enter your request");
valid = false;
theForm.request.focus();
} if (valid == true) {
alert ("Thank you for your prayer request. Your request has been submitted for review. Please check your account to see the status of your prayer request. You may also check recent requests to view your request after it has been posted.");
return true; //submit form
} else {
return false; //form invalid
}
}
I'm totally stumped as to what could be going on in IE that is not allowing the form to pass JS validation.. Any help would be greatly appreciated!! Thanks! I have rough ideas on how to achieve this but I dont know how to start. I want to use a drop-down menu selection option to submit a form. But the form's contents change depending on the option. This is the basic form: Code: <FORM ID="go1" METHOD="POST" TARGET="_self"> <INPUT TYPE=HIDDEN NAME=UserID VALUE="<%UserID%>"> <INPUT TYPE=HIDDEN NAME=Password VALUE="<%Password%>"> <INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266"> <INPUT TYPE=HIDDEN NAME=PageID VALUE="1"> <INPUT TYPE="IMAGE" class="hand" border="0" src="/images/my.gif" width="45" height="26" vspace="5"> </FORM> At the moment, it's an image which gets clicked on but it needs to be the option chosen. I think I can do that with: Code: function gotoPage(s){
var v = s.selectedIndex;
var select = document.forms.form.elements.input; // selects question
if (v == 1){...}
if (v == 2){...} etc.
However, as I said, the form's contents must change depending on the option chosen: The form's values which change a Code: <INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266"> <INPUT TYPE=HIDDEN NAME=PageID VALUE="1"> Can someone point me in the right direction? I want to make a search form where inputs only appear if a certain selection has been made. For example the user selects "Green" then the input "X" appears, and if the user clicks "Black" then input "Y" appears. How can this be done? If so, can someone give me a basic example in code that I can use to copy off?
Hi, I'm looking for help, please. I am trying to setup a donation form for a friend, where someone can click radio buttons for set donation amounts, or click the "other" radio buttons and enter a different amount. The donation amount is then passed over to a secure credit card entry page, hosted by a 3rd party merchant. I can set up all the pre-defined radio buttons to correctly pass on the donation amount to the credit card page, but I cannot figure out how to work the "other" radio button amount. Any help would be very much appreciated! Thanks! I'm trying to write a progressively enhanced web application. I have an index page and a form with some select boxes and some radio buttons on a different php page. Before enhancement occurs, the form is accessible via regular links and everything works as expected. No issues. In the enhanced version of the application, the form is AJAXed into the index page. When this occurs, the select boxes in the form work perfectly. The radio buttons are initially unchecked and I can check one option as usual. However, once one is checked, clicking the other radio options does nothing. I am unable to check a different option. Anybody got a clue what the problem is? Using Chrome by the way. Firefox is the same as Chrome. In IE I can't even check a radio button the first time. Here's the code that's ajaxed in: Code: <label>First Time Buyer Status <!--These values can't be 1/0 because 0 stands for not set--> <input type="radio" name="FTB" id="FTBYes" value="1" <?php $M->checkFTBValue(1); ?> title=""/>First Time Buyer <input type="radio" name="FTB" id="FTBNo" value="2" <?php $M->checkFTBValue(2); ?> title=""/>Not First Time Buyer </label> The PHP script you see there checks if the value on the server matches the value of the radio button and echo's checked="checked" if true. I thought this could be causing the problem initially but the exact same code is used in the non-enhanced version and it works fine. I tried commenting it out anyway but it makes no difference. The only thing I can think of is that some javascript is preventing me from selecting a different radio option. That would explain why it works ok in the non-enhanced version because there is no JS there. I can't find anything that I've written that might cause this effect I'm using jQuerys form plugin on my pages. I'm going to try writing it out and see if that fixes anything. Any body ever experience a similar problem with this? In the mean time, is there a way I can check if any JS functions when I click on the radio button? Sorry if this is in the wrong forum, there's so many different languages involved, I hadn't a clue where to put it. Ok I am very very new to java to the point where I only know how to use pre-made javascripts in my php code so be gentle. First, here is part of a form I have: Code: <select name = "pulmonologist" >
<option selected="" value="">---Select---
<option value="none">None</option>
<?php
while ($row2 = mysql_fetch_assoc ($results2)) {
?><option value = "<?php echo $row2['staff_name'];?>"><?php echo $row2['staff_name'];?></option>
<?php }
?>
</select>
Ok now I want to echo the value that the user selects on the SAME page (i.e. before the submit button is pressed) (so I can't do it with php, I need javascript) like this: Code: <input type="submit" value = "Contact <?php echo $pulmonologist;?>" /> Can you tell me how to do this? Thanks! Please help with the code details as to how this would be possible. Thanks. <form method="post" name="validate" action="internet_marketing_and_email_blasting_signup.php" enctype="multipart/form-data" onmouseover="change(event,'../images/submit1.png')" onmouseout="change(event,'../images/submit.png')" onkeyup="highlight(event)" onclick="highlight(event)"> The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks! <head> <script type="text/javascript" language="javascript"> function showInfo() { var typeOne = document.getElementById('bmp'); var typeTwo = document.getElementById('junction'); var typeThree = document.getElementById('mile'); if(document.basicform01.Location_Type.value == "BMP to EMP") { typeOne.style.display="inline"; typeTwo.style.display="none"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Junction to Junction") { typeOne.style.display="none"; typeTwo.style.display="inline"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Milepost") { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="inline"; } else { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="none"; } } </script> <style>*[style] {outline:none}</style> </head> <body> <fieldset> <dl> <dt><label for="Location_Type">Location Type *</label></dt> <dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()"> <option value="" selected="selected">Select One...</option> <option value="BMP to EMP">BMP to EMP</option> <option value="Junction to Junction">Junction to Junction</option> <option value="Milepost">Milepost</option> </select></dd> <div id="bmp" style="display:none;"> <dt><label for="bmpDetails">BMP</label></dt> <dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd> <dt><label for="empDetails">EMP</label></dt> <dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd> </div> <div id="junction" style="display:none;"> <dt><label for="fromJunction">From Junction:</label></dt> <dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd> <dt><label for="toJunction">To Junction:</label></dt> <dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd> </div> <div id="mile" style="display:none;"> <dt><label for="milepostNum">Milepost</label></dt> <dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd> </div> <p> </dl> <p> </fieldset> </body> |
|||||||