|
JavaScript - Form Verification Issue
We are putting together a form for a client who runs a dog park. The users need to register their dogs in order to use the park. They can register upto 6 dogs and there are over 20 questions specific for each dog so instead of displaying all 120+ fields, we went with some javascript code that allowed the user to select how many dogs they are registering and then the form dynamically adjusts to display the fields.
The issue we are running into is how to verify the forms are filled out. We are putting the dog-specific fields into an array so we can use that array to store the info into our database, so a dog-specific field looks like this: <input type='text' name='Dog[1][Name]' /> With 1 being the number that gets changed when dealing with multiple dogs. Any help would be greatly appreciated! Similar Tutorialsi'm trying to build a html form and have a javascript file do RegEx checks on the values once it is submitted. i need some help getting started. is my current javascript correct in checking if there is a value there? eventually, i want it to make sure there are at least 2 alpha characters and no more than 20 in the firstname box. html form Code: <form action="" onsubmit="return fistnameCheck()"> <fieldset> <legend>Personal Information</legend> Firstname*: <input type="text" name="firstname"/><br/> Lastname*: <input type="text" name="lastname"/><br/> <input type="reset" /> <input type="submit" /> </fieldset> </form> Javascript Code: function firstnameCheck() {
var error = "";
if (firstname == "") {
error = "You didn't enter a username.\n";
return window.confirm(error);
}
I already have the html and the php part of my form. My Form already can be verified using only php, but i would also like it to use javascipt so they dont have to load a new page just to say ''this field is blank"" im not very intelligent with javascipt so im just looking that if the user does not have a field that is needed that a red mark comes up around it or next to it saying you need to fill it out. Im using php also for verification just incase someone turns on JavaScript on there browser.. heres my php file 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>Untitled Document</title>
</head>
<?php
$errors = '';
$myemail = 'support@ludemanndistributors.net';//<-----Put Your email address here.
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']))
{
$errors .= "\n Error: all fields are required";
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
if (!eregi(
"^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$",
$email_address))
{
$errors .= "\n Error: Invalid email address";
}
if( empty($errors))
{
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email_address\n Message \n $message";
$headers = "From: $myemail";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
header('Location: contact-form-thank-you.html');
}
?>
<body>
</body>
</html>
and heres the html 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>Form</title>
</head>
<body>
<form action='process.php' method=post>
<table width="506" height="268" border="0">
<tr>
<td width="500"><label>
Name (required)<br />
<br />
<input type="text" size="40" maxlength="40" name="Name">
<br />
</label></td>
</tr>
<tr>
<td><label>
Email Address (required)<br />
<br />
<input type="text" size="40" maxlength="40" name="Email">
</label></td>
</tr>
<tr>
<td><label>
Date of Birth (required)<br />
<br />
<select name='Month'>
<option selected></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name='Day'>
<option selected></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</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='YYYY'>
<option selected></option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>
</label></td>
</tr>
<tr>
<td>
<label>
Comments (required)<br />
<br />
<textarea rows="5" cols="45" name="Comment" wrap="physical"></textarea><br />
</label></td>
</tr>
</table>
<p>
<label>
<input type="submit" name="Submit" id="button" value="Submit" />
<input type="reset" name="Reset" id="button" value="Reset" />
</label>
</p>
</form>
</body>
</html>
</html>
Thanks in advance. Sup gents. Im having problems with the link method. Its tied up to a button in the form. The link method sees the "global" variable and determines if its 1 or 0. If its 1 it gives a certain msg and if its 0 another one. Problem its always reading the variable as 0 and giving me the same message regardless of the fact that im typing the username and password correc Code: <html>
<head>
<script type ="text/JavaScript">
var counter = 0;
var counter2 = 0;
var arraynumb = 0;
var arraynumb2 = 0;
var global;
var array = ['Mohamad', 'Karim', 'Anthony', 'Rami', 'Natalia', 'Sarah', 'Samer', 'Violette', 'Plume', 'Sharshabil'];
var array2 = ["1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009"];
function pass(){
var searchKey = document.searchform.inputVal.value;
for (var i = 0, len = array.length; i < len; i++){
if (array[i] == searchKey){
counter = 1;
arraynumb = i;
}
}
}
function pass1(){
var searchKey2 = document.searchform.inputVal2.value;
for (var i = 0, len = array2.length; i < len; i++){
if (array2[i] == searchKey2){
counter2 = 1;
arraynumb2 = i;
}
}
}
function access(global)
{
if (counter == 1 && counter2 == 1 && arraynumb == arraynumb2)
{
window.alert("You may now access the website");
global = 1;
}
else
window.alert("You may not access the website");
global = 0;
}
function link(global)
{
if (global == 1)
{
window.alert("you may proceed to the link");
}
else
window.alert("you are not signed in, please do so");
}
</script>
</head>
<body>
<form name = "searchform" action = "">
<p>Enter username<br/>
<input name = "inputVal" type = "text" size = "30"/>
<input name = "search2" type = "button" value = "Search" onclick = "pass()"/>
</p>
<p>Enter password<br/>
<input name = "inputVal2" type = "password" size = "30"/>
<input name = "search" type = "button" value = "Search" onclick = "pass1()"/>
<input name = "Access site" type = "button" value = "Access" onclick = "access()"/>
<input name = "link to" type = "button" value = "link" onclick = "link()"/>
<br/>
</p>
<br/>
<p></p>
</form>
</body>
</html>
i'm trying to make a validation page and i am having issues with some of them AGE - i'm not sure where to go from here Code: var age = /^[0-9 ]{3,20}$/; // trying to check age (only 18-25 is valid)
Name - how do i make it so that no spaces are allowed? Code: /^[A-Za-z ]{3,50}$/
street - i have no clue where to even begin on this. i think that RegEx can't be used to validate all addresses, but something simple like 123 main street. maybe something like this Code: preg_match('/.{2,60}$/',$address)
here's an example of my zip code one to give you an idea of what im going for Code: function checkZip(){
var re5digit=/^\d{5}$/ //regular expression defining a 5 digit number
if (document.myform.zip.value.search(re5digit)==-1) //if match failed
alert("Please enter a valid 5 digit number inside form")
}
HTML FORM Code: <form name="myform" onsubmit="return checkZip()"> <fieldset> <legend>Test Form</legend> Firstname*: <input type="text" name="firstname"/><br/> Lastname*: <input type="text" name="lastname"/><br/> Street*: <input type="text" name="street"/><br/> City*: <input type="text" name="city"/><br/> State*: <input type="text" name="state"/><br/> Zip*: <input type="text" name="zip"/><br/> Age*: <input type="text" name="age"/><br/> Gender*: <input type="text" name="gender"/><br/> Major/Program Choice*: <input type="text" name="major"/><br/><br/> <input type="reset" /> <input type="submit" /> what is a good way to combine these into all one function using getElementByID? i could make another function and put all the other functions in it, but i'm not sure where i can incorporate getElementByID when the verification is complete, i want to display all the info using getElementByID and innerHTML. should i make vars that hold all the info and put in after a span somewhere? I'm very new to javascript & would really appreciate any tips or help you guys could give me. Bascially, I have a form which I need to check if certain inputs are empty and send an alert... I also want to be able to send a client-side alert if the formatting of the email is wrong (it's not a valid email). I really don't want to use a jquery plugin or overcomplicate the code. At the moment I'm using the following code (which checks inputs are there) & was hoping someone could explain how I could add the email validation into this: Code: function checkform ( form )
{
if (form.name.value == "") {
alert( "Please add your name." );
form.name.focus();
return false ;
}
if (form.email.value == "") {
alert( "Please enter your email address." );
form.email.focus();
return false ;
}
return true ;
}
Thanks in advance guys & i look forward to contributing on here in future . Also, if anyone has some good places for me to learn javascript, that too would be awesome! I am trying implement some javascript and having a hard time getting it into my form. Might be a silly issue, I am not an advanced programmer. Any help would be greatly appreciated. -Lance form is here... http://forms.infogeniuz.com/igz-test/ Code: <!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>iGz-test | iGz :: Forms</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://forms.infogeniuz.com/wp-content/themes/twentyten/style.css" />
<link rel="pingback" href="http://forms.infogeniuz.com/xmlrpc.php" />
<meta name='robots' content='noindex,nofollow' />
<!-- Form Script for Google Analytics Cookie -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write("<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>" + "</sc" + "ript>");
</script>
<script type='text/javascript'>
var pageTracker = _gat._getTracker("UA-1-1");
pageTracker._trackPageview();
//
// This is a function that I "borrowed" from the urchin.js file.
// It parses a string and returns a value. I used it to get
// data from the __utmz cookie
//
function _uGC(l,n,s) {
if (!l || l=="" || !n || n=="" || !s || s=="") return "-";
var i,i2,i3,c="-";
i=l.indexOf(n);
i3=n.indexOf("=")+1;
if (i > -1) {
i2=l.indexOf(s,i); if (i2 < 0) { i2=l.length; }
c=l.substring((i+i3),i2);
}
return c;
}
//
// Get the __utmz cookie value. This is the cookies that
// stores all campaign information.
//
var z = _uGC(document.cookie, '__utmz=', ';');
//
// The cookie has a number of name-value pairs.
// Each identifies an aspect of the campaign.
//
// utmcsr = campaign source
// utmcmd = campaign medium
// utmctr = campaign term (keyword)
// utmcct = campaign content
// utmccn = campaign name
// utmgclid = unique identifier used when AdWords auto tagging is enabled
//
// This is very basic code. It separates the campaign-tracking cookie
// and populates a variable with each piece of campaign info.
//
var source = _uGC(z, 'utmcsr=', '|');
var medium = _uGC(z, 'utmcmd=', '|');
var term = _uGC(z, 'utmctr=', '|');
var content = _uGC(z, 'utmcct=', '|');
var campaign = _uGC(z, 'utmccn=', '|');
var gclid = _uGC(z, 'utmgclid=', '|');
//
// The gclid is ONLY present when auto tagging has been enabled.
// All other variables, except the term variable, will be '(not set)'.
// Because the gclid is only present for Google AdWords we can
// populate some other variables that would normally
// be left blank.
//
if (gclid !="-") {
source = 'google';
medium = 'cpc';
}
// Data from the custom segmentation cookie can also be passed
// back to your server via a hidden form field
var csegment = _uGC(document.cookie, '__utmv=', ';');
if (csegment != '-') {
var csegmentex = /[1-9]*?\.(.*)/;
csegment = csegment.match(csegmentex);
csegment = csegment[1];
} else {
csegment = '(not set)';
}
//
// One more bonus piece of information.
// We're going to extract the number of visits that the visitor
// has generated. It's also stored in a cookie, the __utma cookis
//
var a = _uGC(document.cookie, '__utma=', ';');
var aParts = a.split(".");
var nVisits = aParts[5];
function populateHiddenFields(f) {
f.source.value = input_10;
f.medium.value = input_11;
f.term.value = input_12;
f.content.value = input_13;
f.campaign.value = input_14;
f.segment.value = input_15;
f.numVisits.value = input_16;
alert('source='+f.source.value);
alert('medium='+f.medium.value);
alert('term='+f.term.value);
alert('content='+f.content.value);
alert('campaign='+f.campaign.value);
alert('custom segment='+f.segment.value);
alert('number of visits='+f.numVisits.value);
return false;
}
</script>
<!-- END Form Script for Google Analytics Cookie --><link rel="alternate" type="application/rss+xml" title="iGz :: Forms » Feed" href="http://forms.infogeniuz.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="iGz :: Forms » Comments Feed" href="http://forms.infogeniuz.com/comments/feed/" />
<link rel='stylesheet' id='gforms_css-css' href='http://forms.infogeniuz.com/wp-content/plugins/gravityforms/css/forms.css?ver=1.5.2.1' type='text/css' media='all' />
<script type='text/javascript' src='http://forms.infogeniuz.com/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='http://forms.infogeniuz.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://forms.infogeniuz.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://forms.infogeniuz.com/wp-includes/wlwmanifest.xml" />
<link rel='index' title='iGz :: Forms' href='http://forms.infogeniuz.com/' />
<link rel='prev' title='infogeniuz' href='http://forms.infogeniuz.com/infogeniuz/' />
<meta name="generator" content="WordPress 3.1.2" />
<link rel='canonical' href='http://forms.infogeniuz.com/igz-test/' />
</head>
<body class="page page-id-42 page-template page-template-default logged-in">
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">
<div id="site-title">
<span>
<a href="http://forms.infogeniuz.com/" title="iGz :: Forms" rel="home">iGz :: Forms</a>
</span>
</div>
<div id="site-description">Just another WordPress site</div>
<img src="http://forms.infogeniuz.com/wp-content/themes/twentyten/images/headers/inkwell.jpg" width="940" height="198" alt="" />
</div><!-- #branding -->
<div id="access" role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="menu"><ul><li ><a href="http://forms.infogeniuz.com/" title="Home">Home</a></li><li class="page_item page-item-42 current_page_item"><a href="http://forms.infogeniuz.com/igz-test/" title="iGz-test">iGz-test</a></li><li class="page_item page-item-5"><a href="http://forms.infogeniuz.com/infogeniuz/" title="infogeniuz">infogeniuz</a></li></ul></div>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
<div id="container">
<div id="content" role="main">
<div id="post-42" class="post-42 page type-page status-publish hentry">
<h1 class="entry-title">iGz-test</h1>
<div class="entry-content">
<div class='gform_wrapper' id='gform_wrapper_1' ><form method='post' enctype='multipart/form-data' id='gform_1' action='http://forms.infogeniuz.com/igz-test/' onsubmit='populateHiddenFields(this);'>
<div class='gform_body'>
<ul id='gform_fields_1' class='gform_fields right_label'><li id='field_1_3' class='gfield' ><label class='gfield_label' for='input_1_3.3'>Name<span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container' id='input_1_3'><span id='input_1_3_3_container' class='ginput_left'><input type='text' name='input_3.3' id='input_1_3.3' value='' tabindex='1' /><label for='input_1_3.3'>First</label></span><span id='input_1_3_6_container' class='ginput_right'><input type='text' name='input_3.6' id='input_1_3.6' value='' tabindex='2' /><label for='input_1_3.6'>Last</label></span></div></li><li id='field_1_2' class='gfield' ><label class='gfield_label' for='input_1_2'>Email<span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container' id='input_1_2_container'><span id='input_1_2_1_container' class='ginput_left'><input type='text' name='input_2' id='input_1_2' value='' tabindex='3' /><label for='input_1_2'>Enter Email</label></span><span id='input_1_2_2_container' class='ginput_right'><input type='text' name='input_2_2' id='input_1_2_2' value='' tabindex='4' /><label for='input_1_2_2'>Confirm Email</label></span></div></li><li id='field_1_4' class='gfield' ><label class='gfield_label' for='input_1_4'>Subject<span class='gfield_required'>*</span></label><div class='ginput_container'><input name='input_4' id='input_1_4' type='text' value='' class='medium' tabindex='5' /></div></li><li id='field_1_5' class='gfield' ><label class='gfield_label' for='input_1_5'>Message<span class='gfield_required'>*</span></label><div class='ginput_container'><textarea name='input_5' id='input_1_5' class='textarea medium' tabindex='6' rows='10' cols='50'></textarea></div></li><li id='field_1_6' class='gfield' ><label class='gfield_label' for='input_1_6'>Captcha</label><script type='text/javascript'>var RecaptchaOptions = {theme : 'red', lang : 'en'}; if(parseInt('7') > 0) {RecaptchaOptions.tabindex = 7;}</script><div class='ginput_container' id='input_1_6'><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Ld4psQSAAAAAKl_xPu4zSh8nUams3f0MptaFRN_"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ld4psQSAAAAAKl_xPu4zSh8nUams3f0MptaFRN_" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript></div></li><li id='field_1_7' class='gfield gform_hidden' ><input name='input_7' id='input_1_7' type='hidden' class='gform_hidden' value='99.117.218.223' /></li><li id='field_1_8' class='gfield gform_hidden' ><input name='input_8' id='input_1_8' type='hidden' class='gform_hidden' value='Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.68 Safari/534.24' /></li><li id='field_1_9' class='gfield gform_hidden' ><input name='input_9' id='input_1_9' type='hidden' class='gform_hidden' value='http://forms.infogeniuz.com/' /></li><li id='field_1_10' class='gfield gform_hidden' ><input name='input_10' id='input_1_10' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_11' class='gfield gform_hidden' ><input name='input_11' id='input_1_11' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_12' class='gfield gform_hidden' ><input name='input_12' id='input_1_12' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_13' class='gfield gform_hidden' ><input name='input_13' id='input_1_13' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_14' class='gfield gform_hidden' ><input name='input_14' id='input_1_14' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_15' class='gfield gform_hidden' ><input name='input_15' id='input_1_15' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_16' class='gfield gform_hidden' ><input name='input_16' id='input_1_16' type='hidden' class='gform_hidden' value='' /></li>
</ul></div>
<div class='gform_footer right_label'> <input type='submit' id='gform_submit_button_1' class='button gform_button' value='Submit' tabindex='8' /><div class='gform_edit_link'><a href='http://forms.infogeniuz.com/wp-admin/admin.php?page=gf_edit_forms&id=1'>Edit this form</a></div>
<input type='hidden' class='gform_hidden' name='is_submit_1' value='1' />
<input type='hidden' class='gform_hidden' name='gform_submit' value='1' />
<input type='hidden' class='gform_hidden' name='gform_unique_id' value='4ddba7c61866a' />
<input type='hidden' class='gform_hidden' name='state_1' value='YToyOntpOjA7czo2OiJhOjA6e30iO2k6MTtzOjMyOiIyYWFmYzdkODRkNWYwMTc2YWVjNGJmNTg2NTE4YTU3OSI7fQ==' />
<input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' />
<input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' />
<input type='hidden' name='gform_field_values' value='' />
</div>
</form>
</div>
<span class="edit-link"><a class="post-edit-link" href="http://forms.infogeniuz.com/wp-admin/post.php?post=42&action=edit" title="Edit Page">Edit</a></span> </div><!-- .entry-content -->
</div><!-- #post-## -->
<div id="comments">
<p class="nocomments">Comments are closed.</p>
</div><!-- #comments -->
</div><!-- #content -->
</div><!-- #container -->
<div id="primary" class="widget-area" role="complementary">
<ul class="xoxo">
<li id="search-2" class="widget-container widget_search"><form role="search" method="get" id="searchform" action="http://forms.infogeniuz.com/" >
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form></li><li id="recent-comments-2" class="widget-container widget_recent_comments"><h3 class="widget-title">Recent Comments</h3><ul id="recentcomments"></ul></li><li id="archives-2" class="widget-container widget_archive"><h3 class="widget-title">Archives</h3> <ul>
</ul>
</li><li id="categories-2" class="widget-container widget_categories"><h3 class="widget-title">Categories</h3> <ul>
<li>No categories</li> </ul>
</li><li id="meta-2" class="widget-container widget_meta"><h3 class="widget-title">Meta</h3> <ul>
<li><a href="http://forms.infogeniuz.com/wp-admin/">Site Admin</a></li> <li><a href="http://forms.infogeniuz.com/wp-login.php?action=logout&_wpnonce=77e10f5046">Log out</a></li>
<li><a href="http://forms.infogeniuz.com/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://forms.infogeniuz.com/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>
</ul>
</li> </ul>
</div><!-- #primary .widget-area -->
</div><!-- #main -->
<div id="footer" role="contentinfo">
<div id="colophon">
<div id="site-info">
<a href="http://forms.infogeniuz.com/" title="iGz :: Forms" rel="home">
iGz :: Forms </a>
</div><!-- #site-info -->
<div id="site-generator">
<a href="http://wordpress.org/" title="Semantic Personal Publishing Platform" rel="generator">Proudly powered by WordPress.</a>
</div><!-- #site-generator -->
</div><!-- #colophon -->
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
hey guys im not quite sure how to explain this but i have a installed something called "hostpay" if any of you are familular with is, its on an client management system which has everything in it using ruby which was created by my provider. in it has a domain search and to use the domain search i use this code Code: <form method='get' action='http://www.nandahosting.co.uk/manage/dac' onsubmit="return check_domain_input()" accept-charset='utf-8'> <input type="text" name="domain" value="Domain Name Search..." onclick="this.value='';"/> <input name="search" type="submit" class="btn" value="" /> </form> but it will only work if you use that code inside the hostpay template files which was created by my provider. the hostpay is installed to a directory called "manage" What i am trying to do is to get a domain search box to work outside the hostpay folder(sent the information accross to the hostpay template, whatever is typed in the domain search box then search for the domain) i know this is possible as i have seen other people do it but not sure how to do it myself. for examlpe: www.pixelinternet.co.uk/domain-names.html (they have a domain box on that page which transferes it over, they have hostpay installed to a directory called "piXel") how do i alter the code i put on here to do what i want it to do? thankyou very much Hi, I have a registration form with the following input field: textbox -name textbox -surname textbox -phone listbox - country listbox - state Am populating my country & state listbox from my database, state depends on the country. However when i select my country&state the page refreshes & all my other values i.e name, surname, phone & others disappears i have to retype all again, any suggestion? thanks Hi I am creating a help page on my website and I am putting a form on there in case users wish to leave any feedback/suggestions. Now, I am using JavaScript to try and solve this. What I want is a form box, which when the submit button is clicked, it creates a new div box underneath the form (or existing comment div) and updates the site this way. At first I would like to just get the functionality of the div being created and updated, then I will imrpove/add my form inputs etc. Here is what code I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>template</title>
<meta name="description" content="Brief description of the page" />
<meta name="author" content="Thomas S. P. Vasey" />
<style type="text/css">
label {width: 7em;
float: left;
text-align: right;
margin-right: 1em;
margin-left: 1em;
display: block;
text-decoration: underline;
font-family: century gothic;
font-size: 10pt;
font-weight: bold;}
fieldset {background-color: gray;
width: 50%;
color: #f7852c;
display: inline;
border: 0pt;}
legend {color: black;
border: 1px solid #000000;
font-size: 14pt;
padding-left: 1em;
padding-right: 1em;}
textarea {border: 1pt solid black;
background-color: #f7852c;}
input {border: 1pt solid black;}
input[type="text"] {background-color: #f7852c;}
input[type="button"] {background-color: #f7852c;
font-family: century gothic;
border: 2px solid black;
padding: 0.5%;
margin: 2%;}
input[type="reset"] {background-color: #f7852c;
font-family: century gothic;
padding: 0.5%;
border: 2px solid black;
margin: 2%;}
input:focus {background-color: #80b7ff;}
textarea:focus {background-color: #80b7ff;}
</style>
<script type="text/javascript">
function printOut() {
var alias = document.form1.username.value;
var comment = document.form1.comments.value;
document.write('<div class="output">' + alias + '</div>');
document.write('<div class="output">' + comment + '</div>');
}
</script>
</head>
<body>
<form action="" name="form1" method="">
<fieldset>
<legend>[A!B]Attitude Brothaz Feedback</legend>
<p>
<label for="username">Name/Alias:</label>
<input type="text" name="username" maxlength="25" size="20" />
</p>
<p>
<label for="comments">Comments:</label>
<textarea name="comments" rows="5" cols="40"></textarea>
</p>
<input type="button" value="Submit Post" onclick="printOut()" />
<input type="reset" value="Reset Form" />
</fieldset>
</form>
</body>
</html>
I hope someone can help me achieve this, I believe I am going in the right direction with it, just need some guidance. Thank you for your time, Regards, LC. Hi guys, I'm having an issue with a my form total, I'm getting the same result no matter what positive number I enter. Every other aspect of the code seems to be working ok apart from this. eg. If I enter the number 4, the factorial number should read 24 but it's reading 1, its reading 1 no matter what number goes in there. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type= "text/javascript">
function calcFactorial(factorialNumber) {
var factorialResult = 1;
for (; factorialNumber > 0; factorialNumber --){
factorialNumber = factorialResult * factorialNumber;
}
return factorialResult;
}
</script>
</head>
<frameset cols="100%,*">
<frame name = "fraCalcFactorial" src="calcFactorial.htm" />
<frame src="UntitledFrame-4"></frameset><noframes></noframes>
</html>
I believe the issue is in here somewhere but I'm not sure where. Ironically I'm learning from a book and this is from the Error handling/Debugging chapter. I'm going well on this book so far and really don't want to have to move forward without fully understanding whats going on. Any help/comments would be greatly received. Sara I'm trying to integrate two different scripts, one being a PHP/CSS form (this part seems to be working fine) with a LightWindow script built by Kevin Miller: http://www.stickmanlabs.com/lightwindow/ I have installed the lightwindow script at: http://www.mikeandzachsbbq.com/Catering/ The Click Here link in the second paragraph opens the lightwindow, which shows the PHP form, located at http://www.mikeandzachsbbq.com/Catering/form.php If you go to form.php directly and fill out the form, it sends with no issues. However, if you fill out the form inside the lightwindow and click send, while it says that it sent successfully, no email is ever received. I've tried different form methods using the lighbox script, neither GET nor POST will make the email send inside the lightwindow. Anyone have any ideas? I'll try anything to get it working, or attach any needed files. Thanks a lot. Chris I have taken lots of programming classes, but am now taking my first web programming class and I am getting sooooo frustrated. I have done lots of looking on the web, but am still unable to figure out why I can not make this simple assignment work. I just need some help with getting something to happen when the user hits submit. What I really want is for a new page to appear with the message using the user inputs, but I would be very happy with just getting the input to appear in the text area that I put in or even for the alert box to pop up with the input. I can work on validation code after I can get some kind of output to work..... I posted everything (due to it's small size), including my attempts to see what is working. Here is the code I have written: Code: <html>
<head>
<title>Name and Age</title>
<script type="text/javascript">
<!--
function Submit()
{
alert("Does this do anything?");
var name = document.forms['NameAge'].elements[0];
var year = document.forms['NameAge'].elements[1];
var date = new Date();
var curr_yr = date.GetFullYear();
var age = (curr_yr - year)
alert("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
/*if (year > curr_yr)
{
alert("You must enter a valid year!");
}
else
{
document.writeln("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
}*/
document.forms['NameAge'].output.value = "<h3>Hello, " + name + ", you are " + age + " years old."</h3>";
}
-->
</script>
</head>
<body>
<h1>Name and Age</h1>
<form name="NameAge" onsubmit="Submit()">
<p align="left">Please Enter Your Name:
<input id="name" maxlength="32" size="24" />
</p>
<p align="left">Please Enter the Year You Were Born:
<input id="year" maxlength="4" size="24" />
</p>
<input type="submit" value="Submit" /><br />
<textarea cols="10" rows="3" name="output"></textarea>
</form>
</body>
</html>
When you go to my site at www.nandahosting.co.uk there is a "customer login" popup at the top right hand corner with a remember me tick box. How can i get it so if they have ticked the remember me tick box, to automatically redirect to the page instead of putting there details in again. the output page for the login button is (www.nandahosting.co.uk/front-page) which u can only access if logged in. the css for the popup is Code: function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-150;//150 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-150;//150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
the html code for the "customer login" link is Code: <ul id="toplinkslilo">
<li>
<p><a class="custloginpu" href="#" onclick="popup('popUpDiv')">Customer Login</a></p>
</li>
<li>
<p><a href="<%= url_prefix %>blog">Blog</a></p>
</li>
<li>
<p><a href="<%= url_prefix %>forum">Forum</a></p>
</li>
</ul>
the form for whats inside the popup Code: <div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<div id="tbright">
<a href="#" onclick="popup('popUpDiv')"><img src="<%= url_prefix %>./theme-images/xclose.png" alt="close" style="float: right; width: 30px; height:26px;" class="close"/></a>
<h4>Customer Login</h4>
<form method='post' action="http://www.nandahosting.co.uk/front-page">
<div id="boxleft">
<p><label for="username2">Username:</label><input name='username' type='text' value='' id='username2'/></p>
<p><label for="password">Password:</label><input type='password' name='password' value='' id='password'/></p>
<p><label for="permanent">Remember me?</label><input type='checkbox' name='permanent' style="margin: 0 0 20px 10px; width: 13px; float: right; height: 13px;" value='1' id='permanent'/></p>
</div>
<div id="boxright">
<input name="" type="submit" class="btn" value="Login" style="position: relative;"/>
<p class="link"><b>New Customer? - </b><a href="<%= url_prefix %>register">Create an account</a></p>
<p class="link"><a href="<%= url_prefix %>password-reminder">Forgotten your Password?</a></p>
</div>
</form>
</div>
</div>
I have literally been searching on google for the past few days, trying new things and everything. i have honestly really tried my hardest but i can't get around it. would really appreciate if someone could help me. Also i will try and give something to the person who gets this to work for me as it will be worth it as i cannot do it myself. thankyou so much Hello, I've been having a maddening issue with a CAPTCHA javascript math problem validation blocking the correct information from going to my contact form. I feel like I am overlooking something obvious. Basically I just want to create a simple javascript function that when the incorrect CAPTCHA code is entered an alert comes up saying "incorrect code" and then the form is not sent. The way it is working now, the form is passing through (due to document.write) but it is NOT allowing the PHP script to execute correctly, probably because document.write is bypassing the fields somehow. When I remove "return false;" the form goes through all the time, even after the alert comes up. When I keep "return false;" it goes through but the message is not sent correctly. Is there an easy way to make this work? Here is the javascript code: Code: <script type="text/javascript">
var a = Math.ceil(Math.random() * 10);
var b = Math.ceil(Math.random() * 10);
var c = a + b;
function DrawBotBoot()
{
document.write("What is "+ a + " + " + b +"? ");
document.write(" <input type='text' id='BotBootInput' name='Math' style='background-image: url(images/main/footer_math_problem_bknd.gif); width: 32px; height: 18px; padding: 5px; border: none; color: #fff;' /> ");
}
function ValidBotBoot(){
var d = document.getElementById('BotBootInput').value;
if (d == c) {
window.location = "sendmail.php";}
else {
alert("Incorrect CAPTCHA code");
}
}
</script>
And here is the HTML form: Code: <form method="POST" action="sendmail.php"> <label for="FirstName"><p style="width: 120px; line-height: 0.4em;">Name:</p> </label> <input type="text" id="FirstName" name="FirstName" style="background-image: url(images/main/footer_text_field.gif); border: none; height: 26px; width: 216px; padding-left: 5px; color: #fff;" /> <label for="Emailaddress"><p style="width: 120px; line-height: 0.4em;">Email:</p></label> <input type="text" id="Emailaddress" name="Emailaddress" style="background-image: url(images/main/footer_text_field.gif); border: none; height: 26px; width: 216px; padding-left: 5px; color: #fff;" /> <legend><p style="line-height: 0.4em;">Your Message:</p></legend> <textarea name="QuestionComment" id="txt" style="background-image: url(images/main/footer_text_area.gif); width: 211px; height: 73px; padding: 5px; color: #fff; border: none;"></textarea><br /> <p style="width: 221px;"><script type="text/javascript">DrawBotBoot()</script> <input type="image" name="submit" id="submit" value="Submit" src="images/main/footer_submit.gif" height="28" align="right" onclick="ValidBotBoot(); return false;" /> </p> </form> Hi, I have a simple bit of HTML / Javascript to validate email addresses entered into a field, split by a comma. Code: <html> <body> <form name="myForm" onsubmit="return chkEmail()" method="post"> e: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> </body> </html> Code: function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function chkEmail(){
var myString = document.forms["myForm"]["fname"].value;
var mySplitResult = myString.split(",");
for(i = 0; i < mySplitResult.length; i++){
emailCheck = validateEmail(mySplitResult[i]);
alert(mySplitResult[i] + " - " + emailCheck);
if (emailCheck = 'false') {
alert(emailCheck);
}
}
}
If I enter e.g. "you@me.com,this@that.com" into the form, the alert debugs show: First: you@me.com - true Second: false Third: this@that.com - true Fourth: false The first debug seems to show that the condition is true, but then the if statement to check for a "false" value is firing, showing the value of "emailCheck" = "false", even though on the preceding alert, the value = "true". I'm not sure what's going wrong. Apologies for any silly mistakes. I also put my code he http://jsfiddle.net/XYyZa/ Thanks Hello, On my client's site: www.twdcycling.com he wanted a place where people could make suggestions for his blog. I accomplished the simple form using a textarea field and even put a little text that clears on clicks and reappears on blur. When you go there--go to the bottom left. It also actually works. The problem is that (besides the fact that so far no one has cared to make a suggestion) somehow the form is (this is what I believe) being submitted automatically. I don't believe a human is clicking submit. When I click submit w/o clicking in the field the default text that I have in the field already gets submitted in the generated email. So I now need to work on my validation in my php file that sends the email. For background I obtained my php file from html-form-guide.com here the file is in its entirety: Code: <?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$message = $_POST['message'];
//Validate first
if(empty($name)||empty($visitor_email))
{
echo "Name and email are mandatory!";
exit;
}
if(IsInjected($visitor_email))
{
echo "Bad email value!";
exit;
}
$email_from = 'tom@amazing-designs.com';//<== update the email address
$email_subject = "New Form submission";
$email_body = "You have received a new message from the user $name.\n".
"Here is the message:\n $message".
$to = "tom@amazing-designs.com";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
It does have some validation code, and it also is set up to handle more parameters than I needed. I tried to just pare it down to the one simple thing (I just need the user to type anything they want into my text area) My reasoning is that I should be able to go get some simple validation snippet to make it so that if there is the possibility something is causing the form to just "fire off" w/o a human clicking, the validation shouldn't allow it to send, cause the text field is empty. But one would think if that is happening my default text would allow it to send, but oddly enough, no! when I get the email (last one at 5:49 am) it was a blank email! So its like some robot is doing two things: clicking in the field to empty it and THEN clicking submit! Weird, I know. But the validation code would fix this if only I knew how. (But on another note, if I try to send an empty box my default text pops back in when I click submit--proving that its happening automatically. I tried all morning yesterday to implement a snippet from several sources. Here's a couple of examples of what I added: Code:
function emptyvalidation(entered, alertbox)
{
// Emptyfield Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}
I didn't modify this code at all....maybe where I went wrong here. Should "value" correspond to text area name "message"? (about the only thing I didn't try) Here's another one --this one from W3 schools: Code: function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
this is how it was on the source site, all I changed was "myForm" and "fname" to "blog_suggestion" But when testing both these snippets separately what happened is that on submit I just go to my php page (which is just blank) I'm assuming code I'm adding is crashing the script somehow. And then of course no thank you page and no email sent. Finally here is my current php page in its entirety, followed by the form code on the home page... Code: <?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
$message = $_POST['message'];
//Validate first
if(empty($message))
{
echo "Please enter a suggestion before clicking submit.";
exit;
}
$email_from = 'f7digitaldesign@gmail.com';//<== update the email address
$email_subject = "SOMEONE HAS SUBMITTED A SUGGESTION FOR THE BLOG!";
$email_body = "\n $message".
$to = "f7digitaldesign@gmail.com";//<== update the email address
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
I tried to modify the validation I got w/ this to produce the "echo" message "Please enter a suggestion before clicking submit." But let's be honest, by now you know I don't know what in the heck I'm doing (it doesn't seem to matter). Form code: Code: <form name="blog_suggetion" method="post" action="send_form_blogidea.php">
<span class="bloginfotext" ><textarea name="message" rows="14" cols="12" onfocus="clearValue(this, 'Please submit ideas for our blog here—we’d love to hear from you!')" onclick="this.value='';" onblur="if (this.value == '') {this.value = 'Please submit ideas for our blog here—we’d love to hear from you!';}" ></textarea></span>
<div style="font-size:6px; color:#FFF;">sdsadfds</div>
<input type="submit" name='submit' value="submit">
</form>
Any time spent and help offered for this is greatly appreciated!! Also if you need to/want to test the field, I don't care--send me a message. I'll know someone cares! Brian Hello everyone, i am having a few problems with my form and i was hoping someone can help me understand what i am doing wrong. I'm new to java and scripting for forms. Usually i use Simfatic Forms to build my forms but this form requires special coding and work. I'm build a 5 table form with a dynamically add and remove function that will allow the user to add more Rows to the form. What i would like the add function to do is allow my users to pick from a Dropdown menu how many rows they would like to add to the form from 1,5,10,15,20,25 rows. I have gotten the form to allow the add function of one row only but i cant get the add function to allow the select from list. when the row repeats it wont repeat the datepicker to a workable map or the number system from 5+ in table ren5 i have the page up on my site for testing purposes so you can see what is going on. Another issue im having is when i submit the form to my formtools it takes all the input info and puts it in one line in the datebase. What im trying to do is have each table submit to its own row in the datebase. What im looking for is help understanding what i need to do to make this work. I have been reading a lot of tutorials and have been searching a lot of help sites but everything i have read and tried so far will not work for what im trying to do. I really need help getting this to work in the next couple of days. Here is the link to the page on my server so you can see what is going on.http://www.poweronlydispatch.com/FastPostLoad.html Any help would be very helpful. Thank you all in-advance for your help and understanding off my problem. Here is the first part of the code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css">
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<script src="development-bundle/jquery-1.6.2.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="development-bundle/demos/demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker1" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker2" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker3" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker4" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
$( "#datepicker5" ).datepicker({
showOn: "button",
buttonImage: "development-bundle/demos/images/calendar.gif",
buttonImageOnly: true
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<form action="http://www.poweronlydispatch.com/transporters/process.php" method="post" id="FastPostLoad" name="FastPostLoad">
<input type="hidden" name="form_tools_initialize_form" value="1" />
<input type="hidden" name="form_tools_form_id" value="36" />
<table width="100%" cellspacing="0" id="info">
<tr>
<th width="20"> </th>
<th width="14"> </th>
<th width="110">Pickup Date</th>
<th width="140">Dispatch Number</th>
<th width="120">Trailer Type</th>
<th width="80">Pickup City</th>
<th width="70">Pickup State</th>
<th width="60">Pickup Zip </th>
<th width="80">Delivery City</th>
<th width="80">Delivery State</th>
<th width="60">Delivery Zip</th>
<th width="80">Pay Ammount</th>
<th width="60">Weight</th>
</tr>
</table>
<table id="ren" width="100%" cellspacing="0">
<tr>
<td width="20"><INPUT type="checkbox" name="chk"/></td>
<td width="16"> 1 </td>
<td width="180"><input type="text" name="datepicker" id="datepicker" size="20"></td>
<td width="123"><input name="DispatchNumber" type="text" id="DispatchNumber" size="20"></td>
<td width="148"><input name="TrailerType" type="text" id="TrailerType" size="25"></td>
<td width="91"><input name="PickupCity" type="text" id="PickupCity" size="15"></td>
<td width="89"><select name="PickupState" id="PickupState" size="1">
<option value="AK">AK</option><option value="AL">AL</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NC">NC</option><option value="ND">ND</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option></select></td>
<td width="90"><input name="PickupZip" type="text" id="PickupZip" size="10"></td>
<td width="86"><input name="DeliveryCity" type="text" id="DeliveryCity" size="15"></td>
<td width="89"><select name="DeliveryState" id="DeliveryState" size="1">
<option value="AK">AK</option><option value="AL">AL</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NC">NC</option><option value="ND">ND</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option></select></td>
<td width="90"><input name="DeliveryZip" type="text" id="DeliveryZip" size="10"></td>
<td width="88"><input name="PayAmount" type="text" id="PayAmount" size="10"></td>
<td width="90"><input name="Weight" type="text" id="Weight" size="10"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
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! 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);
}
}
}
|
|||||||