How to use JS components in PHP?
Introduction
Using Syncfusion Essential JavaScript components in a PHP application is simple. It is similar like using the components in a normal HTML page. This section explains you about how to use JS components in a simple PHP form with validation.
Refer the script and theme files in <head> section:
Refer to the necessary scripts and theme files required by the Syncfusion EJ components in the <head> section as follows.
HTML
<head> <!--Contains the necessary theme for our componets--> <link href="default-theme/ej.widgets.all.min.css" rel="stylesheet" /> <!--dependency script files--> <script src="scripts/jquery-1.10.2.min.js"></script> <script src="scripts/jquery.easing.1.3.js"></script> <script src="scripts/jquery.globalize.js"></script> <!--contains the necessary scripts to render all the web components--> <script src="scripts/ej.web.all.min.js"></script> </head>
In the above code example, scripts refers to the folder that contains the script files. Make sure that the above mentioned script files are loaded properly.
You can also use the CDN links, instead of referring the scripts and theme files locally. Refer to the following code example.
HTML
<head> <!--Contains the necessary theme for our componets--> <link href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" /> <!--dependency script files--> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery- easing/1.3/jquery.easing.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script> <!--contains the necessary scripts to render all the web components--> <script src="http://cdn.syncfusion.com/js/web/ej.web.all-latest.min.js"></script> </head>
You can refer to the following link to know more about the necessary scripts files and dependencies script files.
Declare the elements in the <body> section
Specify the necessary tag in the <body> section that you are going to convert as EJ components. In this form validation example, the following three EJ components are used
- Numeric textbox, in which user needs to specify the age.
- RichTextEditor(RTE) is used to specify the comments by the user.
- Button is used to submit the form.
Refer to the following code example to render the form elements in the page.
HTML
<h2>PHP Form Validation Example</h2> <p><span class="error">* required field.</span></p> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> Name: <input type="text" name="name" value="<?php echo $name;?>"> <span class="error">* <?php echo $nameErr;?></span> <br><br> E-mail: <input type="text" name="email" value="<?php echo $email;?>"> <span class="error">* <?php echo $emailErr;?></span> <br><br> Specify Age: <input type="text" id="age" name="age" value="<?php echo $age;?>"> <span class="error">* <?php echo $ageErr;?></span> <br><br> Gender: <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male <span class="error">* <?php echo $genderErr;?></span> <br><br> Comment: <textarea name="comment" id="comment"><?php echo $comment;?></textarea> <br><br> <input type="submit" name="submit" value="Submit"> </form>
Initialize the components in the <script> section
The EJ components are initialized in the Script section as follows. During initialization, you can also specify the necessary API’s, and bind events for the components.
JavaScript
<script>
var numObj;
$(function () {
//RTE component is declared here
$("#comment").ejRTE();
//Button component is declared here, with necessary API
$("#submit").ejButton({
showRoundedCorner: true,
size: "medium",
text: "Submit Form",
type: "submit"
});
//Numeric textbox component is declared here
$("#age").ejNumericTextbox(
{
name: "currency"
});
//Object for Numeric Textbox created
numObj = $("#age").data("ejNumericTextbox");
});
</script>
Refer to the following code example for the validation is written in PHP.
PHP
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $ageErr = "";
$name = $email = $gender = $comment = $age = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["age"])) {
$ageErr = "Age is required";
} else {
$age = test_input($_POST["age"]);
if ($age < 20 || $age > 30)
$ageErr = "Enter Age between 20 and 30";
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
Output
You can download the sample from the following location.
https://www.syncfusion.com/downloads/support/directtrac/133166/index-397695855.zip
You can refer to the following common user guide for JavaScript to know more about getting started with the components. Under each components, Concepts and features section is provided that explains about the features of the particular component.
You can also refer to the following class reference link for JavaScript that provides all the properties, methods and events supported by each component.
