K vytvoreniu sme využili JavaScript knižnicu jQuery a plugin jQuery Validation. Názorná ukážka ťahá js súbory priamo z internetu a mimo HTML kódu obsahuje i PHP kód pomocou, ktorého posielame mail. Demo ukážku nájdete na http://www.nevillewebdesign.com/demos/jquery_select_mail_form.php.
HTML hlavička obsahuje nasledovné riadky, ktoré ťahaju jQuery a ostatné potrebné záležitosti.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
Ďalej obsahuje funkciu, ktorá rieši udalosť so select elementom a dodatočnú validáciu.
<script type="text/javascript">
//<![CDATA[
jQuery("#selectList").change(onSelectChange);
function onSelectChange() {
var selectedAttrib = jQuery("#selectList option:selected").text();
// Ak Iné, tak zobraz formular s validaciou
if(selectedAttrib == 'Iné') {
var attribForm = "";
attribForm = '<form id="formular" action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']) ?>" method="post"><input type="hidden" name="action" value="send_mail" /><table cellspacing="2" cellpadding="0"><tr><td><label for="cname">Meno</label></td><td><input id="cname" name="cname" size="25" class="required" /></td></tr><tr><td><label for="cemail">E-mail</label></td><td><input id="cemail" name="email" size="25" class="required email" /></td></tr><tr><td><label for="desc">Popis požiadavky</label></td><td><textarea id="desc" name="desc" class="required"></textarea></td></tr><tr><td></td><td><input class="button" type="submit" value="Poslať" /></td></tr></table></form>';
jQuery("#output").html(attribForm);
jQuery("#formular").validate({
messages: {
email: "Prosím zadajte platnú e-mailovu adresu (meno@domena.sk)."
}
});
};
};
//]]>
</script>
Potom nasleduje PHP kód s funkciou, ktorá má za úlohu odoslanie mailu.
<?php
if ($_POST['action'] == 'send_mail') {
$fromemail = 'neville@neville.sk';
$toemail = preg_replace('/[\r\n]/', '', strip_tags($_POST['email']));
$subject = 'jQuery onchange select formulár s odoslaním';
$content = '';
// send mail
function smail($fromaddress, $toaddress, $subject, $message) {
$charset='utf-8';
// Zalomenie textu po 70 znakoch, vyzaduje mail()
$message = wordwrap($message, 70);
$headers = 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-Type: text/html; charset=utf-8' . "\n";
$headers .= "From: ".$fromaddress."\n";
$headers .= "Reply-To: ".$fromaddress."\n";
//echo "from adress: $fromaddress<br> to address: $toaddress,<br> $subject <br>$message <br>$headers";
if(mail($toaddress, $subject, $message, $headers)) {
return true;
} else {
return false;
}
};
$res = smail($fromemail, $toemail, $subject, $content);
// $res=true;
// Check if there is a send mail error, otherwise say successful
if(!$res) {
echo '<p class="marker">Nepodarilo sa poslať mail.</p>';
} else {
echo '<p class="marker">Mail úspešne odoslaný.</p><br />';
};
};
?>
Element body obsahuje samotný select element s jeho opciami a div element, kam sa samotný formulár zobrazí.
<p>Typ služby <select name="selectList" id="selectList" onchange="onSelectChange();">
<option selected="selected" value="opt1">Webdesign</option>
<option value="opt2">Redesign</option>
<option value="opt3">Iné</option>
</select>
</p>
<div id="output"></div>
