Tag Archive for form

Simple ASP form validation

dim strError, msg

for i=1 to request.form.count
if request.form(i) <> "" then
msg=msg & request.form.key(i) & ": " & request.form(i) & vbcrlf
else
strError = strError & request.form.key(i) & ": " & "please complete this field<br>"
end if
next

if strError <> "" then
response.Write("<p><b>The Following Fields Are Required</b></p>" & strError & "<p><a href='javascript:history.back()'>&lt;&lt; Please Go Back</a></p>")
else
Set Mail = CreateObject("CDONTS.NewMail")
with Mail
.From = request.Form("email")
.To = "neal.grosskopf@alliancels.com"
.Subject = "Training IPSO OPL"
.Body = msg
.Send
end with
Set Mail = Nothing
response.Write("<p>" & request.Form("name") & ", thank you for registering!</p>")
response.Write("<p>You will be contacted by a Company Representative to confirm your reservation and provide you with more details regarding the seminar.</p>")
end if

source

Handling element focus with tab

Event.observe($('body'), 'keypress', function(event){
if(event.keyCode == Event.KEY_TAB) {
$('sendMessage').focus();
Event.stop(event);
}});

source

simule z-index to place divs over select objects (explorer bug)

INSIDE THE HEAD
......................................................................
<script type="text/javascript" src="http://brandonaaron.net/jquery/plugins/bgiframe/jquery.bgiframe.js"></script>

<script type="text/javascript">
$(function() {
$('#box').bgiframe();
});
</script>

<style type="text/css" media="screen">
form { position: absolute; top: 0; left: 0; width: 100%; }
select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; }
.box { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; }
</style>

HTML
......................................................................
<form action="#" method="get" accept-charset="utf-8">
<select name="test"><option>valor 1</option></select>
<select name="test"><option>valor 2</option></select>
<select name="test"><option>valor 3</option></select>
</form>
<div id="box" class="box">contenido del box</div>

source

populate object_select_tag with your own objects in symfony

echo object_select_tag($domain, ‘getObjectId’, array (
‘related_class’ => ‘Object’,
‘peer_method’ => ‘getSortedObject’,
‘control_name’ => ‘object_id’,
‘include_blank’ => true,
));

in your ObjectPeer.php:

static public function getSortedObject() {
$c = new Criteria();
$c->addAscendingOrderByColumn(TablePeer::NAME);
$rs = TablePeer::doSelect($c);
return $rs;
}

and in your yml generator:
fields:
departement_id: { params: text_method =getNomCode peer_method =doSelectOrderByCode }

source

form

.hazte-socio.alta-form fieldset { border: 0; margin: 0 0 20px 0; padding: 0 }
.hazte-socio.alta-form legend { margin: 0 0 12px 0; * margin-left: -5px; padding: 0 }

.hazte-socio.alta-form legend span {
display: block;
width: 720px;
border-bottom: 1px solid #ecf0f5;
padding-bottom: 1px;
color: #064598;
font-size: 1.4em;
font-weight: bold;
}

/* Etiquetas */
.hazte-socio.alta-form label {
display: block;
position: relative;
width: 170px;
height: 26px;
position: relative;
color: #333;
font-size: 1.2em;
text-align: right;
}

/* Campos */
.hazte-socio.alta-form label input,
.hazte-socio.alta-form label select {
position: absolute;
top: -2px;
left: 181px;
font-weight: bold;
}

source

Email Form to Send Message on Web Page

<form method="post" action="sendeail.php">

<!-- DO NOT change ANY of the php sections -->
<?php
$ipi = getenv("REMOTE_ADDR");
$httprefi = getenv ("HTTP_REFERER");
$httpagenti = getenv ("HTTP_USER_AGENT");
?>

<input type="hidden" name="ip" value="<?php echo $ipi ?>" />
<input type="hidden" name="httpref" value="<?php echo $httprefi ?>" />
<input type="hidden" name="httpagent" value="<?php echo $httpagenti ?>" />

Your Name: <br />
<input type="text" name="visitor" size="35" />
<br />
Your Email:<br />
<input type="text" name="visitormail" size="35" />
<br /> <br />
<br />
Attention:<br />
<select name="attn" size="1">
<option value=" Sales n Billing ">Sales n Billing </option>
<option value=" General Support ">General Support </option>
<option value=" Technical Support ">Technical Support </option>
<option value=" Webmaster ">Webmaster </option>
</select>
<br /><br />
Mail Message:
<br />
<textarea name="notes" rows="4" cols="40"></textarea>
<br />
<input type="submit" value="Send Mail" />
<br />
Free Code at: <a href="http://www.ibdhost.com/contact/">ibdhost.com/contact/</a>
</form>

source

form validation email

	var x = document.getElementById("p1_email").value;
var filter  = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(x)) {}
else {
alertMsg += " - " + "Invalid Main Presenter Email Address" + "
";
}

source

AJAX Form POST Request – HTML Form POST/Submit with AJAX/Javascript Example/Tutorial

post.html:

<script type="text/javascript" language="javascript">
var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}

http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}

function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}

function get(obj) {
var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
"&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
makePOSTRequest('post.php', poststr);
}
</script>

<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<textarea id="mytextarea1">my test
1
2
3

source

Alert entire contents of form

function showVals() {
theForm = document.getElementById('myform');
theStr = '';
for (i=0; i < theForm.elements.length; i++) {
ele = theForm.elements[i];
theStr += ele.name + ' : ' + ele.value + "
";
}
alert (theStr);
}

source

CSS Form Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>A CSS-based Form Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

/* General styles */
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }

/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; border: #EEE 1px solid; }

p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }

div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: #FC6 1px solid; background-color: #FFC; }
div.errors p { margin: 0; }
div.errors p em { color: #C00; font-style: normal; font-weight: bold; }

div.form-container form p { margin: 0; }
div.form-container form p.note { margin-left: 170px; font-size: 90%; color: #333; }
div.form-container form fieldset { margin: 10px 0; padding: 10px; border: #DDD 1px solid; }
div.form-container form legend { font-weight: bold; color: #666; }
div.form-container form fieldset div { padding: 0.25em 0; }
div.form-container label,
div.form-container span.label { margin-right: 10px; padding-right: 10px; width: 150px; display: block; float: left; text-align: right; position: relative; }
div.form-container label.error,
div.form-container span.error { color: #C00; }
div.form-container label em,
div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
div.form-container input.error { border-color: #C00; background-color: #FEF; }
div.form-container input:focus,
div.form-container input.error:focus,
div.form-container textarea:focus {	background-color: #FFC; border-color: #FC6; }
div.form-container div.controlset label,
div.form-container div.controlset input { display: inline; float: none; }
div.form-container div.controlset div { margin-left: 170px; }
div.form-container div.buttonrow { margin-left: 180px; }

</style>

</head>

<body>

<div id="wrapper">

<h2>A CSS-based Form Template</h2>

<div class="form-container">

<p>More information about this template could be found in <a href="http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/" title="Nidahas: Forms markup and CSS - Revisited">this blog article</a>.</p>

<div class="errors">
<p><em>Oops... the following errors were encountered:</em></p>

<ul>
<li>Username cannot be empty</li>
<li>Country cannot be empty</li>
</ul>
<p>Data has <strong>not</strong> been saved.</p>
</div>

<form action="#" method="post">

<p class="legend"><strong>Note:</strong> Required fields are marked with an asterisk (<em>*</em>)</p>

<fieldset>
<legend>User Details</legend>
<div><label for="uname" class="error">Username <em>*</em></label> <input id="uname" type="text" name="uname" value="" class="error" /></div>

<div><label for="email">Email Address </label> <input id="email" type="text" name="email" value="" />
<p class="note">We will never sell or disclose your email address to anyone. <strong>This is an example of a note for an input field.</strong></p>
</div>

<div><label for="fname">First Name <em>*</em></label> <input id="fname" type="text" name="fname" value="" size="50" /></div>
<div><label for="lname">Last Name </label> <input id="lname" type="text" name="lname" value="" size="50" /></div>

</fieldset>

<fieldset>
<legend>Contact Information</legend>
<div><label for="address1">Address 1 <em>*</em></label> <input id="address1" type="text" size="50" /></div>
<div><label for="address2">Address 2</label> <input id="address2" type="text" size="50" /></div>
<div><label for="country" class="error">Country <em>*</em></label> <input id="country" type="text" name="country" value="" class="error" size="12" />

<p class="note">Errors could be highlighted by giving an <code>error</code> class to the input field, as seen here.</p>
</div>
<div><label for="telephone">Telephone</label> <input id="telephone" type="text" size="3" /> - <input type="text" size="3" /> - <input type="text" size="4" />
<p class="note">(###) - ### - ####</p>

</div>
</fieldset>

<fieldset>
<legend>Submission</legend>
<div><label for="year">Year (YYYY) <em>*</em></label> <input id="year" type="text" name="year" value="" size="4" maxlength="4" /></div>
<div><label for="date">Month (MM)</label> <input id="date" type="text" name="date" value="" size="4" maxlength="2" /></div>

</fieldset>

<fieldset>
<legend>Preferences</legend>
<div>
<label for="type">Type <em>*</em></label>
<select id="type">
<optgroup label="Type of Whatever">

<option>Corporate</option>
<option>Individual</option>
</optgroup>
</select>
</div>
<div class="controlset">
<span class="label">User Status <em>*</em></span>

<input name="approved" id="approved" value="1" type="checkbox" /> <label for="approved">Approved</label>
<input name="pending" id="pending" value="1" type="checkbox" /> <label for="pending">Pending Applications</label>
<input name="actives" id="actives" value="1" type="checkbox" /> <label for="actives">Active Service</label>
</div>

<div class="controlset">
<span class="label">Preferred Location</span>

<input name="radio1" id="radio1" value="1" type="radio" /> <label for="radio1">Option 1</label>
<input name="radio1" id="radio2" value="1" type="radio" /> <label for="radio2">Option 2</label>
<input name="radio1" id="radio3" value="1" type="radio" /> <label for="radio3">Option 3</label>
</div>

<div class="controlset">
<span class="label">Something Else <em>*</em></span>

<div>
<input name="approved" id="check1" value="1" type="checkbox" /> <label for="check1">Some Option 1</label> <br />
<input name="pending" id="check2" value="1" type="checkbox" /> <label for="check2">Some Option 2</label> <br />
<input name="actives" id="check3" value="1" type="checkbox" /> <label for="check3">Some Option 3</label> <br />

</div>
</div>
</fieldset>

<fieldset>
<legend>Profile</legend>
<div>
<label for="desc">Description <em>*</em></label>
<textarea id="desc" name="desc" cols="30" rows="4"></textarea>

</div>
<div>
<label for="info">Additional Info </label>
<textarea id="info" name="info" cols="40" rows="5"></textarea>
</div>
</fieldset>

<div class="buttonrow">
<input type="submit" value="Save" class="button" />

<input type="button" value="Discard" class="button" />
</div>

</form>

</div><!-- /form-container -->

<p id="copyright">Created by <a href="http://nidahas.com/">Prabhath Sirisena</a>. This stuff is in public domain.</p>

</div><!-- /wrapper -->

</body>
</html>

source