Posts

Showing posts with the label jQuery

Adding a new row in a textfile using PHP

Image
   How to append a new row in a text file using PHP        Manipulating text files is a common task when we are storing data in text files.   This tutorial shows how to add or append a new line to an existing text file.  There is a text file name: states.txt. In this file, each row is delimited with a semicolon. There is another form.html file, take data from users and submits to PHP file. PHP file receives submitted data and writes at the bottom of the states.txt file.    States.txt file looks as follows: form.html <html> <head> <title> Codingzon Tutorials </title> </head> <body> <h3> Please fill following details </h3> <form action= "demo.php" method= "POST" > State Name: <input type= "text" name= "statename" /><br /> <br /> Capital City : <input type= "text" name= "capitalcity" /><br />   ...
Post a Comment
Read more

Disable Cut,Copy and Paste using jQuery

Image
 How to prevent cut, copy, paste in text box.       Generally while registering in website, user forced to type manually some data. Ex: confirm email/confirm password. It is because to ensure user entered correct data. This tutorial shows how to stop cut, copy, pasting data in a text field while entering his details such as email/password. The below example shows how to prevent cut, copy, and pasting in confirm email input field. This is implemented using jQuery. With the help of jQuery bind() function, it can be achieved. In the bind() function, you have to specify the cut, copy, and paste events that are fired when a user attempts to cut, copy, or paste in a text field. When it occurs, it shows an alert message to the user.   TOP   index.php <html> <head> < title >Codingzon Tutorials< /title> <head> < script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" >< /script> < script ...
Post a Comment
Read more

Count Characters in Textarea with jQuery

Image
 Counting characters in textarea with jQuery     In web applications, when designing forms for receiving data from users, such as product feedback, etc., it is necessary to allow users to input a limited amount of text. It can help to prevent spam and avoid reading unnecessary long messages. It also saves resources. So In this blog, you are going to learn  shows how to limit number of characters and display characters left in textarea while user entering text in the textarea component. It also includes, how to count characters in a text that is entered in a text box using jQuery .   Here is an example.  MOVETOP↑   countcharacters.php <html> <head> <title> Codingzon Tutorials http://localhost/phpuseful/countchars.php# </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" ></script> <body bgcolor= "" > <center> <br /><br /><br /><br ...
Post a Comment
Read more

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim....
Post a Comment
Read more

Searchable Select with Select2 Plugin

Image
  Searchable Dropdown Demo   Select2 plugin is a jQuery based plugin and replacement for select boxes. It supports searching in the list, finding remote data sets, and pagination (infinite scrolling) of results. Select2 supports the ability to add options dynamically as the user is typing into the search field. It also supports multi-value select boxes. In this tutorial, You are going to learn how to create a basic version of dropdown with a search box using the select2 plugin and read the selected option and print it in PHP.   Step-1 First, create a PHP page withe name index.php with a basic HTML code and add the following links in head section.: <!-- jQuery --> <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script> <!-- Select2 plugin --> <link href= "https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel= "stylesheet" /> <script src= "https...
Post a Comment
Read more

Simple jQuery Slideshow tutorial

Image
How to Create a simple Image Slider using jQuery   In this tutorial, we are going to learn how to add a simple slide show to an HTML Page. This works with a basic jQuery fade-in and fade-out functions. No plugin is used. To add this, just follow the given instructions.  1 . Create HTML file 2. Add jQuery  CDN link 3. Add some images 4. Add style code. 5. Add  jQuery snippet . 6. Run File . 1. So first,  create a file with the name  index.html and paste  the given code below, and save it.    index.html <!DOCTYPE html>    <html> <head> <title>   Image Slider Demo </script> <script type= "text/javascript" src= "" ></script> <style> </style> <script type= "text/javascript" > ...   </script> </head>     <body>   <div id= "slider" > <div> <img src= "" > </div> <div...
Post a Comment
Read more

Form Validation using jQuery plugin

Image
Form validation using jQuery validate.js plugin   In this article, you are going to learn how to use a jQuery validate.js plugin to validate HTML form fields. Before  working on form validations, you need to add these files to your program. One is validate.js  and the other one is core jQuery core library. In this, we are using only CDN links. If you are working in project, then directly download  from here and add to the project. https:// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.3/jquery.validate.min.js   Add the above links in a script. Just copy above link and paste  in  a script tag's src="" attribute. In this example, just validating name and email. This example gives you how to use plug in and validate form fields. jQuery's script calling the plugin method validate(). This method taking an array as an  argument, which is having  two array elements, one is rules and...
Post a Comment
Read more