Smarty Form With Various Input Types

Tutorial For Smarty Forms

This Smarty form will contain some of the usual form elements like input text, radio buttons, text boxes, select drop down menus and a submit button. This sample is a mock for a job application form. If you go through both files, you can see how the variables, arrays and code is set in the ‘.php’ file and how to display it with the ‘.tpl’ file.

In addition to outputting the code, this job application form also includes some Jquery usage. So, when someone clicks on a city, it will automatically choose the appropriate state or province and country. This will give a little insight into building a custom form.

The easiest way to see what is going on is to view the page in a browser like Firefox while using Firebug. Then, you can look at these codes and match up each form element with its PHP code. For example, as you can see, the value for a drop down option is the key in the array. Also, the Smarty tag ‘ {$smarty.server.PHP_SELF}‘ is the PHP equivalent of <?php echo $_SERVER[‘PHP_SELF’]; ?>.

.php File

<?php
if(count($_POST) > 0){
// die("Works");
print_r($_POST['skills']);
echo $_POST['email'];
}

include_once("libs/smarty.class.php");
$smarty = new smarty();

$smarty->assign("name", "Add Name Here");
$smarty->assign("email", "");

$smarty->assign("phone", "");

$cities = array("California" => "Los Angeles", "Texas" => "Houston", "New York" => "New York", "BC" => "Vancouver", "Alberta" => "Edmonton");
$smarty->assign("cities", $cities);

$countries = array("United States", "Canada");
$smarty->assign("countries", $countries);

$states_provinces = array("California" =>"California", "Texas" =>"Texas", "New York" =>"New York", "BC" => "BC", "Alberta" => "Alberta");

$smarty->assign("states_provinces", $states_provinces);
$smarty->assign("state_province", NULL);

$ages = array("18-24", "25-30", "30-36", "37-45", "46-50", "50-65");
$smarty->assign("ages", $ages);

$smarty->assign('salaries', array(
1 => '$20000-$30000',
2 => '$30000-$40000',
3 => '$40000-$50000',
4 => '$50000+'));
$smarty->assign('salary_selected', 4);
$smarty->assign('skills', array('Technical / Content Writer', 'Web Designer', 'Web Developer', 'Full Stack Web Developer / Linux Admin'));
$smarty->assign("skill", array(0,3));
$smarty->display("jobs.tpl");
?>

.TPL File

<html>
<head>
<title>Job Application Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
{literal}
body, label {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
{/literal}
</style>

<script src="jquery.js"></script>
</head>

{literal}
<script type="text/javascript">

$(document).ready(function() {
$( "#email" ).click(function() {
  alert("Hey2");
});

    $("#city option").filter(function() {
        return $(this).val() == $("#state option").val();
    }).attr('selected', true);

    $("#city").live("change", function() {
	
	if($(this).val() == 'New York' || $(this).val() == 'Los Angeles' || $(this).val() == 'Houston'){
	$("#country option:selected").val("US").html("USA");
	}else{
	$("#country option:selected").val("CAN").html("CAN");
	}
        $("#state").val($(this).find("option:selected").attr("value"));		
		
    });
});

</script>
{/literal}


<body>
<p><strong>Job Application Form</strong></p>
<form name="job_form" method="post" action="{$smarty.server.PHP_SELF}">
<table>
<tr>
<td width="165">Name: </td>
<td width="158"><input name="name" type="text" id="name" value="{$name}"></td>
</tr>
<tr>
<td>Email: </td>
<td><input name="email" type="text" id="email" value=""></td>
</tr>
<tr>
<td>Phone: </td>
<td><input name="phone" type="text" id="phone" value=""></td>
</tr>
<tr>
<td>City: </td>
<td><select name="city" id="city">
{html_options options=$cities}
</select></td>
</tr>
<tr>

<tr>
<td>State: </td>
<td><select name="state" id = "state">
{html_options options=$states_provinces selected=$state_province}
</select></td>
</tr>

<td>Country: </td>
<td><select name="country" id="country">
{html_options options=$countries}
</select></td>
</tr>


<tr>
<td valign="top">Available Start Date: </td>
<td style="min-width:500px;">{html_select_date}</td>
</tr>

<td>Ages: </td>
<td><select name="age" id="age">
{html_options options=$ages}
</select></td>
</tr>

<tr>
<td valign="top">Salary Expectations: </td>
<td>{html_radios name="salary" options=$salaries selected=$salary_selected separator="<br />"}
</td>
</tr>
<tr>
<td valign="top">Skills: </td>
<td>
<p>{html_checkboxes name="skills" options=$skills selected=$skill separator="<br />"}</p>
</td>
</tr>
<tr>
<td><input type ="submit" name = "submit" value = "Submit" /></td>
</tr>
</table>
</form>

</body>
</html>

Tutorial For Smarty Forms

Our Skills

About

Strict Coding Standards

Service List

Contact Us

SEO Services

Links