We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to use JS components in PHP?

Platform: jQuery |
Control: General |
Product Version: 12.1.0.43
Tags: general

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

PHP Form Validation

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.

https://help.syncfusion.com

You can also refer to the following class reference link for JavaScript that provides all the properties, methods and events supported by each component.

http://help.syncfusion.com/cr/js

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile