#Dynamic Dependent Dropdown using jQuery Ajax

[phpgurukul1]

jQuery Dependent DropDown List – States and Districts Using PHP-PDO

In this tutorial, we are going to learn how to change the district dropdown list option based on the selected state name using PHP-PDO.

In this example, we have two dropdowns for listing states and districts. On changing states drop-down values, the corresponding district dropdown values will be loaded dynamically using jQuery AJAX.

Click: https://phpgurukul.com/jquery-dependent-dropdown-list-states-and-districts-using-php-pdo/

File structure for this tutorial

config.php — Database connection file.

index.php — Main file having drop down

get_district.php — used to retrieve the district based on the selected state name.

MySQL Database structure for this tutorial

In this tutorial two MySQL Database table is used.

state

district

state table structure

CREATE TABLE `state` (

`StCode` int(11) NOT NULL,

`StateName` varchar(150) DEFAULT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

district table structure

CREATE TABLE `district` (

`DistCode` int(11) NOT NULL,

`StCode` int(11) DEFAULT NULL,

`DistrictName` varchar(200) DEFAULT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Step 1: Create a database connection file (config.php)

<?php

// DB credentials.

error_reporting(0);

define(‘DB_HOST’,’localhost’);

define(‘DB_USER’,’root’);

define(‘DB_PASS’,’’);

define(‘DB_NAME’,’demos’);

// Establish database connection.

try

{

$dbh = new PDO(“mysql:host=”.DB_HOST.”;dbname=”.DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => “SET NAMES ‘utf8’”));

}

catch (PDOException $e)

{

exit(“Error: “ . $e->getMessage());

}

?>

Step2: Create a HTML form with two fields . One is for state and another one is for district.

<form name=”insert” action=”” method=”post”>

<table width=”100%” height=”117" border=”0">

<tr>

<th width=”27%” height=”63" scope=”row”>Sate :</th>

<td width=”73%”><select onChange=”getdistrict(this.value);” name=”state” id=”state” class=”form-control” >

<option value=””>Select</option>

<! — — Fetching States — ->

<?php

$sql=”SELECT * FROM state”;

$stmt=$dbh->query($sql);

$stmt->setFetchMode(PDO::FETCH_ASSOC);

while($row =$stmt->fetch()) {

?>

<option value=”<?php echo $row[‘StCode’];?>”><?php echo $row[‘StateName’];?></option>

<?php }?>

</select></td>

</tr>

<tr>

<th scope=”row”>District :</th>

<td><select name=”district” id=”district-list” class=”form-control”>

<option value=””>Select</option>

</select></td>

</tr>

</table>

</form>

Step3: Getting States using jQuery AJAX

This script contains a function that will be called on changing state dropdown values. It will send AJAX request to a PHP page to get corresponding district dropdown options.

<script>

function getdistrict(val) {

$.ajax({

type: “POST”,

url: “get_district.php”,

data:’state_id=’+val,

success: function(data){

$(“#district-list”).html(data);

}

});

}

</script>

Step 4: Read the district table using PHP based on the selected state name.

This PHP code connects the database to retrieve district table values based on the state id passed by jQuery AJAX call.

<?php

require_once(“config.php”);

if(!empty($_POST[“state_id”]))

{

$stateid=$_POST[“state_id”];

$sql=$dbh->prepare(“SELECT * FROM district WHERE StCode=:stateid”);

$sql->execute(array(‘:stateid’ => $stateid));

?>

<option value=””>Select District</option>

<?php

while($row =$sql->fetch())

{

?>

<option value=”<?php echo $row[“DistrictName”]; ?>”><?php echo $row[“DistrictName”]; ?></option>

<?php

}

}

?>

How to run this script

1.Download the zip file

2.Extract the file and copy statedistdropdown-pdo folder

3.Paste inside root directory(for xampp xampp/htdocs, for wamp wamp/www, for lamp var/www/html)

4.Open PHPMyAdmin (http://localhost/phpmyadmin)

5.Create a database with name demos

6.Import regdb.sql file(given inside the zip package )

7.Run the script http://localhost/statedistdropdown-pdo

PHP Gurukul

Welcome to PHPGurukul. We are a web development team striving our best to provide you with an unusual experience with PHP. Some technologies never fade, and PHP is one of them. From the time it has been introduced, the demand for PHP Projects and PHP developers is growing since 1994. We are here to make your PHP journey more exciting and useful.

Website : https://phpgurukul.com

[digitalwebtutor]

CodeIgniter 4 Dynamic Dependent Dropdown using jQuery Ajax

Inside this article we will see the concept of CodeIgniter 4 Dynamic Dependent Dropdown Using jQuery Ajax. We will have dropdowns which is connected with the previous selected value.

This tutorial will help you to understand to handle dynamic dependent dropdowns using jquery ajax in CodeIgniter 4. Also it will be super easy to implement in your code as well.

[aburayhan7]

Now we’ are Create Dynamic dependent select box using jQuery Ajax, , PHP and SQL. Typically, this is using for automatically add dependent data to a dropdown list without page load.

It is very common feature of website that is used in the selection of country according to the list of drop-down. if you Select any country you can see state of this country ,and after select state you can see city of this state

[codingspoint]

How to Show Dynamic Dependent Dropdown in Laravel?

How to Show Dynamic Dependent Dropdown in Laravel?

Here in this tutorial, I am talking about how to create a simple laravel dependent dropdown by using jquery ajax. Now here by this simple example we can understand how to work with dependent dropdown in laravel even if any one is beginner. We are able to create the dynamic dependent dropdown in any version laravel 6, laravel 7 and laravel 8 application. Sometimes we may need to make the…

[itsmetacentric]

laravel dynamic dependent dropdown using ajax,laravel jquery ajax categories and subcategories select dropdown, laravel dependent dropdown, dynamic dropdown in laravel, laravel dropdown from database, dependent drop down list in laravel example code,laravel dependent dropdown example with demo

[php-sp]

WP Ultimate BAN Users

New Post has been published on https://intramate.com/wordpress-plugins/wp-ultimate-ban-users/

WP Ultimate BAN Users

LIVE PREVIEWGet it now for only $19

Plugin Overview – version 1.5.7

The Ultimate BAN Users WordPress Plugin is the last plugin you’ll ever need for managing access to your WordPress site and moderating/removing users’ content. Ban existing users indefinitely or by date / time, deny registrations based on banned ips/emails/countries. Catpure IP/Geodata/Browser/Device data and much, much more….

Recent Reviews based on Ultimate & Lite Versions Lite version of the plugin is available on WordPress.ORG – Click to Download

“One of the finest in paid user access manager WordPress plugins”

“Does exactly what I need, and customer support is very responsive!”

“The best plugin I’ve ever used for banning accounts!”

“At last I found plugin that truly bans..”

“OUTSTANDING plugin / support / developer”

If you like this plugin, please don’t forget to rate it

Summary of Ultimate BAN Users Features:

Ban existing WordPress users from logging in

Option to ban user’s last known IP address whilst banning login account

View insightful data about users’ devices, browsers, and activity

Identify potentially shared accounts (accessed from multiple sources)

Ban users indefinitely, by day, week, month or until a specified date / time

Deny visitors from registering based on email/ip address/country code

Quickly turn off WordPress features such as commenting, or registering accounts

Dashboard with graphs showing related stats

Audit log showing comprehensive event data.

Option to temporarily/or permanently disable non-admin logins

Option to restrict admin logins to set days/hours of the week

View user’s last login data from the default WordPress users table

Enhanced security with option to hide failed login error messages

Awesome UI with comprehensive settings

Bulk change the status of banned users’ posts (i.e. to draft)

Capture and view reason for banning users

Spam prevention settings for blocking unwanted logins/registrations

Include snippets of custom css/js in header/footer

Automated notifications for logins when accessed from new ip address

Send notification when someone logs in with an administrative account

Send custom email notifications, including CC, BCC fields

TAG support in custom emails to embed dynamic data.

Force banned users to logout, or redirect them

Capture IP/Geodata during logins, inc. Mobile Detection

View IP/Geodata/banned status/activity/browser & device details

Prevent users publishing content with banned keywords/phrases

Easily manage banned users/ips/emails/country codes

View banned users in a separate table for easy management

Monitoring new posts, by sending notification when user publishes first post

Display front end notifications to users when banned

Enhanced security to restrict Ban User privilege access

Send WARNING emails to users with custom messages

Awesome flat icons as alternatives to text based links

Modal popup for sending custom messages, with textarea instead of text field

For developers, we include Shortcodes

Supports Ultimate Member Plugin

Support for Accessibility / Screen Readers

How is it useful; why do I need it? There are multiple reasons why an administrator of a WordPress website may need to block users. One of the most popular reasons is the security of the site. Indeed, most blogs face security issues. Once your site is online and growing in popularity, it can become the target of individuals whose only goal is to destroy your work and to discredit your blog. The BAN Users Plugin enables administrators to deny access to unwanted individuals, and inform those users of the actions taken against them.

You want to ban malicious users from logging in.

You want to temporarily suspend a users login access.

You want to ban users who have breached terms of use or another policy.

You want to temporarily control access to admin.

You want to restrict a registered user from making any changes during development.

You have a client/user who has an unpaid invoice.

Ideal solution for moderators who monitor WordPress forums/posts.

Changelog

Version 1.5.7 [Fixed] Banning Avatar caused WP get error. [Added] Support for WP User Avatar [Added] Introduced https://banusers.com Version 1.5.6 [Fixed] Request API Key not working [Fixed] Remote IP location data not working [Added] New IP Resolution (auto or using ipify API) Version 1.5.5 [Fixed] Problem with some database queries affecting stats tables Version 1.5.4 [Fixed] - Issue when getting avatar WP ID (caused delays/warnings) [Fixed] - Moved chartjs library to load when WP hook = settings page (thanks MBlyth!). [Fixed] - Moved notifyjs library to load locally due to CDN delays (thanks MBlyth!).. [Updated] - A number of library files to latest released [Updated] - Tested with WordPress 5.x Version 1.5.3 [Fixed] - Removed beta 'whoisoline' function due to reported issues Version 1.5.2 [Fixed] - Display date user last seen not saving [Fixed] - PHP Fatal error: Cannot redeclare file_get_contents_request_method() [Fixed] - WordPress database error Table 'db.wp_w3dev_banned_logins' doesn't exist for query [Fixed] - Added function_exists check for 'curl_request_method' [Fixed] - Closing popup modal causes screen to scroll to top [Fixed] - Ban reason added to banned users table in plugin settings. [Fixed] - Last Seen column in users table shows when option not checked [Fixed] - Last seen date not updating [Fixed] - IP Lookup not working [Added] - BAN Email addresses by wildcard [Added] - User registration country check [Added] - Move 'Set registration options' into settings tab, and a new section [Added] - Add help link to all settings sections which links to relevant banusers.wpress-plugins.com url Version 1.5.1 [Fixed] Invalid user ID variable accessed when logging a failed login event [Fixed] Login history if device unknown show empty, changed to Unknown [Fixed] Prevent banning of your own IP Address [Fixed] Event logging options not saving [Fixed] Bug when opening hidden sections / clicking quick links section blank [Fixed] Notice: wpdb::prepare was called incorrectly Shared acccounts query [Added] Material theme applied to jquery confirm [Added] When unbanning user, option to always unban last known ip [Added] Misc animation css effects [Added] Add plugin settings quick link to top bar of wordpress [Added] Add option to always ban ip when banning a user [Added] Switch warn modal over to ajax content [Added] Add moderator and moderated roles dropdown [Added] Add new multi select dropdown js code [Added] Add restrict access by role [Added] Change banned users' role upon banning [Added] Change banned users' role when unbanned [Added] Disable password reset function for banned users [Added] Option to set spammer status for banned users [Added] Option to remove spammer status when unbanning users [Added] Option to scramble banned users' passwords [Added] Disable reset password function for banned users [Added] Hide banned users comments from frontend [Added] Banned usernames function [Added] CSS visual changes to settings page Version 1.4.9 [Added] Ban user's last known ip address whilst banning login account [Fixed] Selectrix replacement dropdown not working in modals [Fixed] JQuery Confirm content not opening in safari until modal clicked [Fixed] Device detection not working [Fixed] Banned email error showing on registration page [Fixed] Ban by date picker not displaying correctly with new modal [Fixed] Quick unban on banned users table not working Version 1.4.8 [Added] Ban new/edit posts which contain banned keywords/phrases [Added] Shared login data now available in users table via a modal popup [Added] Now you can ban users (login/registration) by country code [Added] Option to disable registrations [Added] Toggle ban user settings' contents (hide/show) by clicking header [Added] Set default ban and warning reasons that appear in popup modal [Added] Labels added to quick link icons on settings page, along with animation [Added] Created new dashboard stats graphs and tab [Added] Option to close all accordions by default [Added] Minimised closed accordions to reduce space [Added] Last seen (i.e. date last logged in) displayed in users table [Added] Ability to turn off comments (& hide previous comments) [Added] Option to disable non-admin account logins [Added] Restrict admin logins to set hours each day. [Added] Event log added [Added] Device Information modal added to users table [Added] Browser icon added users table [Updated] Updated Mobidetect library [Added] New user login history modal [Added] New banned history modal [Added] Banned users tab shows count of banned users [Added] Added option to disable device detection [Updated] Updated balloon tooltip Version: 1.4.7 [Updated] Minor UI changes to plugin's settings page [Added] Email templates now support additional TAGS [Added] Updated depenancy libraries [Added] Send email notification when an Admin Logs In [Added] Enhanced security with option to hide failed login errors [Added] Additional WP Shortcodes [Added] New icons to illustrate device type (desktop, mobile, tablet) [Added] New save changes notification [Added] Added BCC and CC fields to Email Templates [Added] Support for multiple email addresses in Email Template To,Cc,Bcc fields. [Fixed] Invalid markup causing php warning [Fixed] Misc CSS [Fixed] Broken country flag IMG src causing outline Version: 1.4.2 [Fixed] Issue with enqueue dependancy (thank you e-watchman) [Fixed] Compatibility issue with ARMember (thank you vortexvt) [Fixed] Misc CSS issues Version: 1.4.1 [Added] New IP lookup service (w3-ip.com) [Added] Ability to include custom css/js in the header/footer [Added] Spam prevention settings (deny login/registration) [Added] Automated notifications for logins when access from new ip address Version 1.3.9 [Fixed] Missing default values causing warning on Settings page. [Fixed] Problem with Warning email template values not saving. [Added] Enhanced security to restrict Ban User privilage access [Added] Overhauled settings page. Simplified & organised layout [Added] Option to enable/disable support for 3rd Party plugins [Added] Option to disable plugin's enqueued files to allow them to be manually included [Fixed] Force Logout bug when on front end [Fixed] Logic mistakes on settings page [Fixed] Optimised code; refactored & bug fixes [Fixed] Improved options page layout, including misc fixes [Added] Ban user by duration (1 day, 1 week etc) using new dropdown select [Added] Improvements to date picker; moved to new modal popup [Fixed] Issue where Unban Cron not executed correctly [Fixed] PHP Compatibility issue (Thank you alfredopacino) [Added] Added accessibility option to choose text links instead of icons [Fixed] Improved accessibility, misc amends [Fixed] Accessibility SR issue fixed affecting fontawesoome icons Version: 1.3.1 [Added] New feature to BAN users by date & TIME! [Fixed] Corrected database prefix when querying banned users by ip/email. Version: 1.3.0 [Added] Message in plugin settings to warn when required MySQL tables are missing [Fixed] Removed http links from enqueue to support SSL. Version: 1.2.9 [Added] Ability to set front end notifications to users when banned [Added] Ability to force logout &/or redirect on acknowledging front end notification [Fixed] Force logout not working when custom logout url set Version: 1.2.8 [Added] Capture users' IP/Geodata during login [Added] Display IP/Geodata in users table [Added] Send notifications to specified email addresses when user publishes first post [Added] Prevent users with banned email address from registering [Added] Prevent users with banned email address from logging in [Added] Prevent users with banned ip address from registering [Added] Prevent users with banned ip address from logging in [Added] Easily manage add/remove/search banned email/ip addresses [Added] Option to capture reason for ban without needing to send email notification [Fixed] Default reason for BAN not working in all conditions [Added] Set preferred date format (i.e. dd-mm-yyyy) [Added] New email template tag for including ban lift date [Fixed] Minor amends [Fixed] Email charset switched to UTF8 [Fixed] BAN reason function updated to support accented characters [Fixed] Updated options save function to support accented characters [Fixed] Turned display/log PHP error debug off Version: 1.2.3 [Fixed] Undefined index error accessing default login message [Fixed] Undefined index error accessing default reason message Version: 1.2.2 [Added] Set message to display when a BANned user attempts to login. [Added] Users table includes tooltip to show reason user banned. [Added] Users table includes tooltip to show date user banned. [Added] Users table includes tooltip to show date user reinstated. Version: 1.2.1 [Added] Toggle BANned column in users table on/off [Added] Toggle BANned highlighted red row in users table [Added] Minor security enhancements Version: 1.2.0 [Added] Set duration of BAN using date picker [Fixed] Move PHP functions into class structure [Added] Custom UnBAN email template for user notification [Fixed] Secured plugin files by preventing direct access Version: 1.1.1 [Fixed] Fatal error: Can't use function return value in write context Version: 1.1.0 [Added] BAN user email notification [Added] Custom BAN email template for user notification [Fixed] Corrected force logout bug<br /> [Added] Ability to capture reason for BANning user [Added] WordPress Uninstall configuration Version: 1.0.1 Initial release

LIVE PREVIEWGet it now for only $19

[suzanneshannon]

Taming Data with JavaScript

I love data. I also love JavaScript. Yet, data and client-side JavaScript are often considered mutually exclusive. The industry typically sees data processing and aggregation as a back-end function, while JavaScript is just for displaying the pre-aggregated data. Bandwidth and processing time are seen as huge bottlenecks for dealing with data on the client side. And, for the most part, I agree. But there are situations where processing data in the the browser makes perfect sense. In those use cases, how can we be successful?

Think about the data

Working with data in JavaScript requires both complete data and an understanding of the tools available without having to make unnecessary server calls. It helps to draw a distinction between trilateral data and summarized data.

Trilateral data consists of raw, transactional data. This is the low-level detail that, by itself, is nearly impossible to analyze. On the other side of the spectrum you have your summarized data. This is the data that can be presented in a meaningful and thoughtful manner. We’ll call this our composed data. Most important to developers are the data structures that reside between our transactional details and our fully composed data. This is our “sweet spot.” These datasets are aggregated but contain more than what we need for the final presentation. They are multidimensional in that they have two or more different dimensions (and multiple measures) that provide flexibility for how the data can be presented. These datasets allow your end users to shape the data and extract information for further analysis. They are small and performant, but offer enough detail to allow for insights that you, as the author, may not have anticipated.

Getting your data into perfect form so you can avoid any and all manipulation in the front end doesn’t need to be the goal. Instead, get the data reduced to a multidimensional dataset. Define several key dimensions (e.g., people, products, places, and time) and measures (e.g., sum, count, average, minimum, and maximum) that your client would be interested in. Finally, present the data on the page with form elements that can slice the data in a way that allows for deeper analysis.

Creating datasets is a delicate balance. You’ll want to have enough data to make your analytics meaningful without putting too much stress on the client machine. This means coming up with clear, concise requirements. Depending on how wide your dataset is, you might need to include a lot of different dimensions and metrics. A few things to keep in mind:

Is the variety of content an edge case or something that will be used frequently? Go with the 80/20 rule: 80% of users generally need 20% of what’s available.

Is each dimension finite? Dimensions should always have a predetermined set of values. For example, an ever-increasing product inventory might be too overwhelming, whereas product categories might work nicely.

When possible, aggregate the data—dates especially. If you can get away with aggregating by years, do it. If you need to go down to quarters or months, you can, but avoid anything deeper.

Less is more. A dimension that has fewer values is better for performance. For instance, take a dataset with 200 rows. If you add another dimension that has four possible values, the most it will grow is 200 * 4 = 800 rows. If you add a dimension that has 50 values, it’ll grow 200 * 50 = 10,000 rows. This will be compounded with each dimension you add.

In multidimensional datasets, avoid summarizing measures that need to be recalculated every time the dataset changes. For instance, if you plan to show averages, you should include the total and the count. Calculate averages dynamically. This way, if you are summarizing the data, you can recalculate averages using the summarized values.

Make sure you understand the data you’re working with before attempting any of the above. You could make some wrong assumptions that lead to misinformed decisions. Data quality is always a top priority. This applies to the data you are both querying and manufacturing.

Never take a dataset and make assumptions about a dimension or a measure. Don’t be afraid to ask for data dictionaries or other documentation about the data to help you understand what you are looking at. Data analysis is not something that you guess. There could be business rules applied, or data could be filtered out beforehand. If you don’t have this information in front of you, you can easily end up composing datasets and visualizations that are meaningless or—even worse—completely misleading.

The following code example will help explain this further. Full code for this example can be found on GitHub.

Our use case

For our example we will use BuzzFeed’s dataset from “Where U.S. Refugees Come From—and Go—in Charts.” We’ll build a small app that shows us the number of refugees arriving in a selected state for a selected year. Specifically, we will show one of the following depending on the user’s request:

total arrivals for a state in a given year;

total arrivals for all years for a given state;

and total arrivals for all states in a given year.

The UI for selecting your state and year would be a simple form:

The code will:

Send a request for the data.

Convert the results to JSON.

Process the data.

Log any errors to the console. (Note: To ensure that step 3 does not execute until after the complete dataset is retrieved, we use the then method and do all of our data processing within that block.)

Display results back to the user.

We do not want to pass excessively large datasets over the wire to browsers for two main reasons: bandwidth and CPU considerations. Instead, we’ll aggregate the data on the server with Node.js.

Source data:

[{"year":2005,"origin":"Afghanistan","dest_state":"Alabama","dest_city":"Mobile","arrivals":0}, {"year":2006,"origin":"Afghanistan","dest_state":"Alabama","dest_city":"Mobile","arrivals":0}, ... ]

Multidimensional Data:

[{"year": 2005, "state": "Alabama","total": 1386}, {"year": 2005, "state": "Alaska", "total": 989}, ... ]

How to get your data structure into place

AJAX and the Fetch API

There are a number of ways with JavaScript to retrieve data from an external source. Historically you would use an XHR request. XHR is widely supported but is also fairly complex and requires several different methods. There are also libraries like Axios or jQuery’s AJAX API. These can be helpful to reduce complexity and provide cross-browser support. These might be an option if you are already using these libraries, but we want to opt for native solutions whenever possible. Lastly, there is the more recent Fetch API. This is less widely supported, but it is straightforward and chainable. And if you are using a transpiler (e.g., Babel), it will convert your code to a more widely supported equivalent.

For our use case, we’ll use the Fetch API to pull the data into our application:

window.fetchData = window.fetchData || {}; fetch('./data/aggregate.json') .then(response => { // when the fetch executes we will convert the response // to json format and pass it to .then() return response.json(); }).then(jsonData => { // take the resulting dataset and assign to a global object window.fetchData.jsonData = jsonData; }).catch(err => { console.log("Fetch process failed", err); });

This code is a snippet from the main.js in the GitHub repo

The fetch() method sends a request for the data, and we convert the results to JSON. To ensure that the next statement doesn’t execute until after the complete dataset is retrieved, we use the then() method and do all our data processing within that block. Lastly, we console.log() any errors.

Our goal here is to identify the key dimensions we need for reporting—year and state—before we aggregate the number of arrivals for those dimensions, removing country of origin and destination city. You can refer to the Node.js script /preprocess/index.js from the GitHub repo for more details on how we accomplished this. It generates the aggregate.json file loaded by fetch() above.

Multidimensional data

The goal of multidimensional formatting is flexibility: data detailed enough that the user doesn’t need to send a query back to the server every time they want to answer a different question, but summarized so that your application isn’t churning through the entire dataset with every new slice of data. You need to anticipate the questions and provide data that formulates the answers. Clients want to be able to do some analysis without feeling constrained or completely overwhelmed.

As with most APIs, we’ll be working with JSON data. JSON is a standard that is used by most APIs to send data to applications as objects consisting of name and value pairs. Before we get back to our use case, let’s look at a sample multidimensional dataset:

const ds = [{ "year": 2005, "state": "Alabama", "total": 1386, "priorYear": 1201 }, { "year": 2005, "state": "Alaska", "total": 811, "priorYear": 1541 }, { "year": 2006, "state": "Alabama", "total": 989, "priorYear": 1386 }];

With your dataset properly aggregated, we can use JavaScript to further analyze it. Let’s take a look at some of JavaScript’s native array methods for composing data.

How to work effectively with your data via JavaScript

Array.filter()

The filter() method of the Array prototype (Array.prototype.filter()) takes a function that tests every item in the array, returning another array containing only the values that passed the test. It allows you to create meaningful subsets of the data based on select dropdown or text filters. Provided you included meaningful, discrete dimensions for your multidimensional dataset, your user will be able to gain insight by viewing individual slices of data.

ds.filter(d => d.state === "Alabama"); // Result [{ state: "Alabama", total: 1386, year: 2005, priorYear: 1201 },{ state: "Alabama", total: 989, year: 2006, priorYear: 1386 }]

Array.map()

The map() method of the Array prototype (Array.prototype.map()) takes a function and runs every array item through it, returning a new array with an equal number of elements. Mapping data gives you the ability to create related datasets. One use case for this is to map ambiguous data to more meaningful, descriptive data. Another is to take metrics and perform calculations on them to allow for more in-depth analysis.

Use case #1—map data to more meaningful data:

ds.map(d => (d.state.indexOf("Alaska")) ? "Contiguous US" : "Continental US"); // Result [ "Contiguous US", "Continental US", "Contiguous US" ]

Use case #2—map data to calculated results:

ds.map(d => Math.round(((d.priorYear - d.total) / d.total) * 100)); // Result [-13, 56, 40]

Array.reduce()

The reduce() method of the Array prototype (Array.prototype.reduce()) takes a function and runs every array item through it, returning an aggregated result. It’s most commonly used to do math, like to add or multiply every number in an array, although it can also be used to concatenate strings or do many other things. I have always found this one tricky; it’s best learned through example.

When presenting data, you want to make sure it is summarized in a way that gives insight to your users. Even though you have done some general-level summarizing of the data server-side, this is where you allow for further aggregation based on the specific needs of the consumer. For our app we want to add up the total for every entry and show the aggregated result. We’ll do this by using reduce() to iterate through every record and add the current value to the accumulator. The final result will be the sum of all values (total) for the array.

ds.reduce((accumulator, currentValue) => accumulator + currentValue.total, 0); // Result 3364

Applying these functions to our use case

Once we have our data, we will assign an event to the “Get the Data” button that will present the appropriate subset of our data. Remember that we have several hundred items in our JSON data. The code for binding data via our button is in our main.js:

document.getElementById("submitBtn").onclick = function(e){ e.preventDefault(); let state = document.getElementById("stateInput").value || "All" let year = document.getElementById("yearInput").value || "All" let subset = window.fetchData.filterData(year, state); if (subset.length == 0 ) subset.push({'state': 'N/A', 'year': 'N/A', 'total': 'N/A'}) document.getElementById("output").innerHTML = `<table class="table"> <thead> <tr> <th scope="col">State</th> <th scope="col">Year</th> <th scope="col">Arrivals</th> </tr> </thead> <tbody> <tr> <td>${subset[0].state}</td> <td>${subset[0].year}</td> <td>${subset[0].total}</td> </tr> </tbody> </table>` }

If you leave either the state or year blank, that field will default to “All.” The following code is available in /js/main.js. You’ll want to look at the filterData() function, which is where we keep the lion’s share of the functionality for aggregation and filtering.

// with our data returned from our fetch call, we are going to // filter the data on the values entered in the text boxes fetchData.filterData = function(yr, state) { // if "All" is entered for the year, we will filter on state // and reduce the years to get a total of all years if (yr === "All") { let total = this.jsonData.filter( // return all the data where state // is equal to the input box dState => (dState.state === state) .reduce((accumulator, currentValue) => { // aggregate the totals for every row that has // the matched value return accumulator + currentValue.total; }, 0); return [{'year': 'All', 'state': state, 'total': total}]; } ... // if a specific year and state are supplied, simply // return the filtered subset for year and state based // on the supplied values by chaining the two function // calls together let subset = this.jsonData.filter(dYr => dYr.year === yr) .filter(dSt => dSt.state === state); return subset; }; // code that displays the data in the HTML table follows this. See main.js.

When a state or a year is blank, it will default to “All” and we will filter down our dataset to that particular dimension, and summarize the metric for all rows in that dimension. When both a year and a state are entered, we simply filter on the values.

We now have a working example where we:

Start with a raw, transactional dataset;

Create a semi-aggregated, multidimensional dataset;

And dynamically build a fully composed result.

Note that once the data is pulled down by the client, we can manipulate the data in a number of different ways without having to make subsequent calls to the server. This is especially useful because if the user loses connectivity, they do not lose the ability to manipulate the data. This is useful if you are creating a progressive web app (PWA) that needs to be available offline. (If you are not sure if your web app should be a PWA, this article can help.)

Once you get a firm handle on these three methods, you can create just about any analysis that you want on a dataset. Map a dimension in your dataset to a broader category and summarize using reduce. Combined with a library like D3, you can map this data into charts and graphs to allow a fully customizable data visualization.

Conclusion

This article gives a better sense of what is possible in JavaScript when working with data. As I mentioned, client-side JavaScript is in no way a substitute for translating and transforming data on the server, where the heavy lifting should be done. But by the same token, it also shouldn’t be completely ruled out when datasets are treated properly.

Taming Data with JavaScript published first on https://deskbysnafu.tumblr.com/

[mbaljeetsingh]

Bootstrap UI Libraries for Angular, React and Vue.js

These days, the web is populated with single page applications (SPA) which feel fast and responsive to user interaction. Often, they are powered by JavaScript frameworks like Angular, React, and Vue.js, to mention just a few of the most popular ones.

These libraries are great tools that help keep the JavaScript code needed to build SPAs more organized and maintainable, while using clever techniques to update the DOM without slowing down the web page.

When it comes to styling the components you can create with these libraries, you're spoilt for choice: you can write your own global CSS document as you normally would on regular websites, you can write inline styles, or use UI frameworks.

This article lists a number of resources for styling your Angular, React, and Vue.js apps the Bootstrap way.

Bootstrap Interface Elements for Angular Developers

Angular is the oldest of the frameworks I deal with in this article. Its maturity and long life in the brutal life-cycle of JavaScript frameworks is a sign of its robust and reliable foundation for web projects.

What tools are out there if you want to use Bootstrap to style your Angular app?

ng-bootstrap

ng-bootstrap offers a set of Bootstrap-styled components that makes building Bootstrap apps with Angular a breeze.

More specifically, this resource contains a set of Angular directives based on Bootstrap's markup and styles. To use it, it's important that you don't include any Bootstrap JavaScript files. You only need Angular and Bootstrap CSS files.

ng-bootstrap is a free and open-source project. Feel free to contribute to it or ask for new features on GitHub.

ngx-bootstrap

This is another great, open source modular library of Bootstrap components powered by Angular. You don't need to use jQuery or any Bootstrap JS code, although the markup and CSS are provided by Bootstrap.

To install the library using npm, type this line into the command line:

[code language="bash"] npm install ngx-bootstrap --save [/code]

Then include the link to Bootstrap's stylesheet in index.html document:

[code language="html"] <link href="https://ift.tt/2I6Cug5" rel="stylesheet"> [/code]

You can refer to the awesome docs pages on the ngx-bootstrap website for detailed explanations and tutorials.

Bootstrap Interface Elements for React Developers

React was created by the Facebook devs and is one of the trendiest JavaScript libraries for building modern user interfaces.

If you're looking to give your React app a Bootstrap makeover, here are some of the options available to you out there.

reactstrap

reactstrap is a fast and convenient library that lets you add a Bootstrap 4 look and feel to your React app.

The styling is provided by Bootstrap, while the JavaScript functionality is built into reactstrap components. This means that you don't need to include any jQuery or Bootstrap JS code. However, you need to include react-popper, since some dynamic Bootstrap components like dropdowns depend on Popper.js to work properly.

You can install reactstrap via a CDN:

[code language="html"] <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js"> [/code]

In this case, you need to include the React library and ReactTransitionGroup before reactstrap.

You can also install the library and all dependencies with NPM:

[code language="bash"] npm install --save reactstrap@next react react-dom [/code]

If you're curious, hop over to the docs and learn more about each component and how to integrate reactstrap with the Create React App setup.

React-Bootstrap

React-Bootstrap is an open source project which is still under active development to reach the 1.0.0 release.

Since this library doesn't support any specific Bootstrap version, you're free to include any Bootstrap stylesheet you think best suits your project. Generally speaking, including the latest Bootstrap release will ensure that you enjoy the benefits of improvements and bug fixes, therefore it should be your preferred option.

The most straightforward way of including Bootstrap in your React app is via a CDN:

[code language="html"] <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> [/code]

On the JavaScript front, you just need React, no jQuery or Bootstrap JS is required for Rect-Bootstrap to work. You can install this Bootstrap UI library using NPM:

[code language="bash"] npm install --save react react-dom npm install --save react-bootstrap [/code]

Installing the library this way, will allow you to import individual components from react-bootstrap/lib rather than the entire library. Doing so pulls in only the individual components you need rather than the entire package, which is great for keeping the file size under control.

Alternatively, you can include React-Bootstrap and the React libray as a a bundle using CDNJS and reference the files in your <script> tags:

[code language="html"] <script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js"></script> [/code]

Material Design for Bootstrap React Version

Material Design for Bootstrap (also available for Angular and Vue) is a UI library for React that combines the look & feel of Bootstrap and Google Material Design.

Among its advantages are:

Being up to date with the latest release of Bootstrap

Awesome documentation and tutorials

Compatible with the latest release of React

Use of JSX

Easy installation

Free for personal and commercial projects

To get started with Material Design for Bootstrap just download it straight from the project's website, or:

use NPM: [code language="bash"] npm install mdbreact [/code]

or yarn: [code language="bash"] yarn add mdbreact [/code]

Once you've got the files, everything is linked appropriately and ready to go. Run npm install then npm start and get coding.

Continue reading %Bootstrap UI Libraries for Angular, React and Vue.js%

via SitePoint https://ift.tt/2GkQEbc

[lailaalysiace15-blog]

The 3 Most Important Web Languages to Learn

I have often been asked which web languages someone with no prior experience in coding, scripting, or programming should learn, and in what order. So I'll start by giving the three most important web languages in use today, and then go on and introduce other languages that would be helpful to know once you have the basics down.

 1. (X)HTML. HTML (Hypertext Markup Language) is the primary markup language of the web, and is used to build and structure web pages. Everything you see that is not styling or animation is primarily built using HTML. I'm referring here specifically to text, tables, and forms.

 There are several forms HTML can commonly take: HTML 4.01 Strict or Transitional, XHTML 1.0 Strict or Transitional, and HTML 5. XHTML (Extensible Hypertext Markup Language) is really just the union of HTML and XML, and is very similar in its markup to HTML, but is designed with XML's extensibility (and strictness) in mind. As a small example, while an HTML 4.01 image or break tag would not need a trailing slash, an XHTML image or break tag would need a space and trailing slash before the tag is closed. This is because in XHTML, every tag that is opened must be closed, even if it is an empty tag.Visit https://www.manzoorthetrainer.com/

 The difference between using Transitional or Strict for both HTML and XHTML depends largely on how well you write your code. If it is written using strict rules (and no legacy HTML from the olden days) and validates under this configuration, then it can be Strict, and will be more compliant and standardized. Otherwise, if it's imperfect or contains some legacy HTML, it would be Transitional, so it can still be validated and the browser can know how to handle it.

 At some point in the evolution of these web markup languages, there was a question of what form the future would take: XHTML 2.0 or HTML5. HTML5 was being developed by individuals from Apple, Opera, and Mozilla, while XHTML 2.0 was being developed by the World Wide Web Consortium (W3C). Somewhere along the way, HTML5 won out on being the next standard for the web. Today, HTML5 is not yet fully compliant (not until about 2014), but it is where the web is heading.

 So with all these choices for HTML, what should you choose to learn first? I would suggest learning either (or both) HTML 4.01 or XHTML 1.0 first, and then go on to HTML5 if you want all the exciting new features it has. Be warned, however, that HTML5 is not fully compliant, and older browsers, especially Internet Explorer, don't like it.

 2. CSS. CSS (cascading style sheet) is a style sheet language that gives an HTML document good looks. It defines the presentation of a web page. When we refer to CSS, we're referring to colors, background images, text fonts and sizes, and element positioning and size. Well-written web pages use HTML for structure and content only, and CSS for presentation. It allows different stylesheets to be used on the same web page for different reasons: accessibility (screenreaders), mobile devices, print media, and many other reasons. One web page can look very different depending on which stylesheet is used. Have a look at CSS Zen Garden to see this aspect of CSS in action; the HTML remains the same but the design changes depending on the stylesheet selected.

Learn html5

Like HTML, there are a couple of different forms (called levels) CSS can take: CSS2 (and 2.1) and CSS3. Both are very similar at the core, but CSS3 goes hand-in-hand with HTML5. Thus, though it has some great new features (like rounded corners, gradients, and shadows), some of these features are not fully compliant. Therefore, choosing what to learn in CSS is less about choosing a level and more about choosing rules and properties that are compliant to the browsers of your target audience, and Internet Explorer or older browsers are usually a large part of that audience.

 3. And now we get to #3, where I must ask you why you want to learn these web languages. The third web language to learn depends on whether you want to build dynamic web pages and web applications (and become a web developer) or whether you want to design web sites (and become a web designer). Whichever path you choose, you'll need HTML and CSS. If you wish to be a designer, and put web development on the back burner for now, I would suggest moving on to JavaScript/jQuery. But if you wish to develop dynamic sites, I would suggest going on to PHP and catching up with JavaScript/jQuery later; just know that if you go the PHP route, you will probably want to get around to JavaScript/JQuery at some point. So on to #3.

 3a. JavaScript/jQuery. JavaScript is a client-side scripting language that allows animations and user interaction with the web page. Think gallery slideshows, form validation, annoying popups, tabs, tooltips, etc. You need HTML and CSS for all this, of course, but JavaScript gives it life.

 JQuery, on the other hand, is not a language, but rather a JavaScript library. It's simply a way to simplify client-side scripting. What would take JavaScript lines and lines of code,jQuery does in a few lines of code. Their motto, "Write Less, Do More", is very true. Depending on how much you want to do or how thoroughly you want to understand JavaScript, you could easily learn just jQuery and forget all about JavaScript. There are also many tools and plugins for jQuery that simplifies the process even more, and makes learning a whole new language a less daunting experience.

 3b. PHP/MySQL. When you get into PHP (PHP: Hypertext Preprocessor, originally stood for Personal Home Page), you're no longer writing client-side code; you are now writing server-side code. PHP is a server-side scripting language that allows a user to no longer just interact with the web page, but now allows him or her to interact with the server. Coupled with MySQL, PHP allows communication with a database, where records can be created, stored, and retrieved. PHP is embedded in documents with a.php extension, but is used within HTML. So even though a file may have a.php extension, it could still work like an HTML page without PHP, or it could be used as an HTML page with embedded PHP.

 Like HTML and CSS, there are different versions of PHP. Which version you choose to use depends mostly on which version the server supports. PHP5 is currently the best version, though some code that was allowed in older versions is not allowed in PHP4 or PHP5, though it's just as well since most of these codes were security weaknesses.

 There are also a couple of different ways of programming PHP: OOP (object-oriented programming) and procedural. OOP programming (introduced in PHP3 and improved in PHP4 and further changed in PHP5) borrows object-oriented methods used by other programming languages (like Java, Perl, and C++) and uses them in PHP, and helps to cut down on the amount of code used (by making code reusable). Procedural programming is mostly old-school since it is less efficient, but it may be a little easier for beginners to understand.

 And what's next? If you took the route of JavaScript/jQuery, the next language to learn would be PHP; and if you took the route of PHP, the next language to learn would be JavaScript/jQuery. After you have all of these languages under your belt, then it would be time to fuse JavaScript/jQuery and PHP with AJAX (Asynchonous JavaScript and XML). AJAX is not a language, but rather a set of technologies or methods that use JavaScript to interact with PHP, allowing a user to interact with a web server without using page reloads. AJAX is used in searching (such as when a list of suggestions appear when you're typing), forms (again, suggestions, or checking with the server if a username is taken, or populating a dropdown list depending on previous user choices), and many other applications. It's simply a really cool way to bring all of these languages together to create a dynamic, user-friendly application.

 So those are my suggestions as to which web languages to learn when starting out, and in which order. It may seem like a lot, and for some people it may seem like too much, but I have found that learning a web language is just like learning a foreign language. Fluency comes with practice and usage, and the more languages you know, the easier it is to learn another one.

Resource

[chrissyrholmes]

Top 15 JavaScript Plugins for Extending Your Web Forms

You can add tons of cool features onto your site with JavaScript. But there are so many libraries and plugins to choose from, it can be a drag finding the best options.

If you’re designing custom forms like user signups/logins, contact pages, or settings pages, these plugins can add some extra dynamic features to jazz up your static input fields.

JCF Forms

One of my favorite JS form plugins is JCF Forms created by the team at PSD2HTML. The cryptic JCF acronym stands for JavaScript Custom Forms and it lives up to its name.

You’re able to customize default select menus, range sliders, input fields, upload forms, pretty much everything you’d need in a form.

This is totally free and built on jQuery so it should be no trouble to setup. You can also find more docs and info on the official GitHub repo if you want to learn more.

iCheck

Checkboxes and radio buttons are a staple of web forms. But they’re also the toughest to customize, and the default styles look very bland.

Thankfully the iCheck plugin is super easy to setup and customize without much JS knowledge. This works on jQuery and comes with a handful of pre-designed themes you can edit with ease.

But aside from looks, this plugin also supports keyboard inputs, 32 custom options and almost a dozen callback methods to handle user behaviors.

Parsley.js

If you prefer vanilla JS then you might like Parsley, a free JS-based form validation library. This is totally free to download and it’s one of the most complete plugins made for data validation.

Parsley is unique in that it doesn’t require complex regular expressions to get it working. It comes with built-in validators for all types of inputs like phone numbers, credit cards, addresses, and emails.

Check out the examples page to see if Parsley could be right for you.

FloatLabel.js

I don’t mind placeholder text but I vastly prefer the FloatLabel.js technique over anything else. This creates a placeholder for default fields but moves the text just above the field once it’s focused & filled in.

This way you can add information to the field with ease and still keep the form label in clear view.

Note that this is a jQuery plugin so it does require a copy of that library. But setup is pretty simple and you can follow the instructions from GitHub to get this running smoothly.

Tooltipster

Complex forms do well with tooltips guiding the user along the way. That’s the beauty of Tooltipster, a free jQuery plugin that lets you add tooltips anywhere on the screen.

You can define these tooltips based on user behaviors like hover, click, focus, or while entering text into a field. You can also customize their styles and animations while connecting these tooltips into Ajax requests or callback methods.

Flexselect

If you don’t like the default HTML select menu style then take a look at Flexselect. This free jQuery plugin restyles all select menus into dropdown panels tied to input fields.

These can blend much nicer into a typical layout, and they do feel easier to use.

Note the setup is a little tricky because this plugin has a couple of dependencies, but it’s also flexible enough to customize and restyle to your liking.

Fort.js

Some web sites display progress bars at the top of the screen to show completion of a form. This is more useful on lengthy forms where the user might want to know how soon they’ll be done.

With Fort.js you can quickly add this effect to your site with just a few lines of code. The plugin is totally free and works with any number of input fields.

Also check out the live demo to see how this would look on a real page.

Switchery

The classic iOS-style switch redefined toggle inputs. Those original on/off switches got a redesign in iOS 7 which led to libraries like Switchery.

This free open source plugin lets you create on/off toggles in the same style as iOS 7 inputs. Each switch works on a checkbox where the user clicks to either check(on) or uncheck(off) a setting.

You can spice up any settings page or profile page by swapping out simple checkboxes for these on/off toggles.

jQuery CC Validator

Ecommerce shops have to deal with credit card validation and handling sensitive inputs. Data security is a whole separate topic but this jQuery CC Validator is by far the best plugin for validation.

It’s totally free, and open source, running on top of the jQuery library. It’s super easy to setup, and the live demo shows just how much you can do with this incredible plugin.

Rangeslider.js

One of the newer features in HTML5 is the range input. This lets the user slide an input bar and select a range of numeric data.

But the default style is pretty basic so plugins like Rangeslider.js have grown in popularity.

This free jQuery plugin works as a polyfill of the HTML5 range slider. For browsers which don’t support it, you’ll still get the classic range input, so this is perfect for all web & mobile browsers.

BS3 Datepicker

You can find tons of free Bootstrap frameworks out there for awesome web templates. And the same goes for plugins that add functionality onto the Bootstrap library.

One such example is the BS3 Datepicker made for custom web forms.

There is rarely a one-size-fits-all solution for date picking. But this plugin offers a genuine interface that most people will understand how to use even at a glance. Plus it’s fully designed around the Bootstrap styles, so it blends right in.

Flatpickr

If you want a datepicker that’s a little easier to setup check out Flatpickr. This free plugin uses pure JavaScript to create a full date/time picker with tons of optional features.

The demo page is a great place to check out and see what this thing can do. It uses a simple JavaScript animation along with a basic drop shadow effect to blend into any layout.

Anyone who needs a date/time picker with lots of room for customization will get a lot out of this plugin.

jQuery File Uploads

Handling user file uploads is by far the most complex form task. You need to create an input that works on all devices, but also accepts specific types of files and knows how to process them on the backend.

This plugin fits nicely with other libraries like jQuery and Angular so it’s really the best choice for anything related to file uploads.

Just note this does take some effort to configure so you’ll need to know your way around JavaScript.

Ideal Forms

In the newest version of Ideal Forms 3 you’ll find a host of great features like auto-form validation and custom form designs.

These designs include checkboxes, radio buttons, input fields, calendar UIs, and even support for 3rd party plugins.

The setup process is very lengthy but gives you dozens of extra form features with one library. Take a look at the GitHub setup guide for more details.

jQuery Autotab

Last but certainly not least is the jQuery Autotab plugin by Matthew Miller. This lets you define a certain length for any form input so it’ll auto-tab onto the next form once completed.

It works best for fields that require a set number of characters like phone numbers or birthdays. Check out the live demo to see how this works and if it could help to extend your web forms.

from Web Designing https://1stwebdesigner.com/javascript-plugins-web-forms/

[aburayhan7]

Dynamic Dependent Select Box Using JQuery, Ajax, And PHP

Now we’ are Create Dynamic dependent select box using jQuery Ajax, , PHP and SQL. Typically, this is using for automatically add dependent data to a dropdown list without page load.

It is very common feature of website that is used in the selection of country according to the list of drop-down. if you Select any country you can see state of this country ,and after select state you can see city of this state .

link

[codexworldblog]

Dynamic Dependent Dropdown in CodeIgniter using jQuery and Ajax

Dynamic Dependent Dropdown in CodeIgniter using jQuery and Ajax

The dynamic dependent select box auto-populates dependent data in the dropdown based on the selection. Dynamic dependent dropdown commonly used in country-state-city and category-subcategory selection. Load dynamic data in select boxes without page refresh makes the web application user-friendly. Using jQuery and Ajax, you can easily implement dynamic dependent dropdown functionality without page…

[jamiekturner]

jQuery Form Plugins To Use In Your Websites (46 Options)

Have you tried creating the forms from scratch on your website? Why not use jQuery form plugins?

Having forms on your website just doesn’t really cut it. You need those forms to be validated to receive the appropriate data from the sender.

This way you don’t only stave off unwanted submissions, but you also guide your senders to fill out the forms.

Validating the date is just as important as having the forms themselves.

There are a few ways to create flawless forms, and the good news is that if you use some of the jQuery Form Plugins available, things get much easier.

jQuery form plugins to check out

Fileuploader

Fileuploader is a beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.

File preview with image thumbnail or icon

File image thumbnail can be generated in canvas to resize it perfectly for given with and height

Render synchron the file preview

File icon background is generated from file extension

Customize your own input and thumbnail elements

Responsive and fancy animations

Choose multiple files from different folders

Drag&Drop feature

Upload each file with Ajax

Upload synchron the files

Upload progressbar with many data available

Start, retry and cancel upload actions

Paste images from clipboard (only in Chrome)

Validate the file’s limit, size and extension. You can also use your own function

Edit mode for already uploaded files

All files are in one list in a hidden input

Use input HTML attributes to configurate it

HTML template renderer using Text variables

CSS file icon

PHP upload helper

PHP generates an array with many file informations

PHP can create a custom file name

API and more than 24 Callbacks to manipulate freely the appearance and functionality of your file input

Conditionize.js

A small jQuery plugin for handling showing and hiding things conditionally based on input – typically groups of form fields. It works using data attributes to keep all of the name/values for inputs directly in the markup and saves you the trouble of having to manually show/hide a bunch of stuff through JS, as well as improving maintenance if you need to change the name or value of an input you were listening to.

Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

Credit card number formatting

Phone number formatting (i18n js lib separated for each country to reduce size)

Date formatting

Numeral formatting

Custom delimiter, prefix and blocks pattern

CommonJS / AMD mode

AttrValidate

A lightweight jQuery plugin for basic form validation using HTML5 form attributes. Recommended as a polyfill for older browsers which do not provide built-in validation.

Mobiscroll Forms

Mobiscroll Forms supports multiple themes for different platforms and the web – iOS, Android, Windows Phone.

Shipping with 13 elements for:

Single line and multiline text

Select styling

Buttons

Segmented control

Checkbox and checklist

Radio buttons

Switch

Stepper

Page styling & Typography

Slider

Progress

Alert, confirm and prompt

Toast and snackbar

Multipicker

Multipicker is jQuery plugin for selecting days, numbers or other elements, it supports multi selecting (like checkboxes) or single element selection (like radio buttons).

SmartWizard

Smart Wizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support. It is easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps etc. Based on the feedback from our users over the past years we have come up with the best ever built jQuery wizard plugin of all time.

Features:

Bootstrap support

Responsive themes

Heavily customizable toolbar, option to add extra buttons

Theme support with various themes included

Customizable css styles

Url navigation and step selection

Public methods for external function call

Enhanced event support

In-built wizard reset method

Ajax content loading with option to specify individual url for steps

Keyboard navigation

Contact Form to Google Spreadsheet

Create Contact Form in HTML and submit the data to Google Spreadsheet. Google re-captcha has been integrated to protect forms to be submitted by robots. Check the demo and documentation for more details.

Features:

Google Spreadsheet as database: Uses Google Spreadsheet to capture form responses. New responses can be appended at the top.

Simple Form: Designed with simple HTML5, CSS3 and bootstrap.

Protection: Google re-captcha to prevent spamming.

Customization: You can customize the form according to your own requirement.

Look and feel: Bootstrap two column layout, responsive. Shows status loader when the form is being submitted.

Notification: Can send notification email to the admin with submitted form data.

Hierarchy Select

A jQuery hierarchy select plugin used for selecting hierarchy structures in a selectbox format with autocomplete search.

SmartMenu

SmartMenu is a user-friendly, highly customizable and responsive jQuery mega menu plugin. It allows you to use multiple menus with different submenus.

Features:

Responsive design

Supports multiple instances

Horizontal (top, bottom) or Vertical (left, right) menu layouts

Mega / Flyout submenus

Pure CSS3 animations (fade, slide)

3 ways of dropdown (hover, click, toggle)

7 color skins which can be changed easily

Custom mega dropdowns, forms, search bar, social icons or HTML

12 columns fluid grid

You can add images, maps or videos

BunnyJS

BunnyJS is a modern Vanilla JS and ES6 library and next-generation front-end framework, package of small stand-alone components without dependencies.

No dependencies – can be used in any project anywhere anytime

0 learning curve – you can start right now, just plain JavaScript with simple architecture easy to maintain and extend

Designed in mind to build modern, complicated, real world business apps

Faster, simpler, enjoyable than any frontend framework

Large set of ready components, custom UI elements and utils

Dirrty

Dirrty lightweight jquery plugin to detect if the fields of a form had been modified.

If a field has been modified then the form is dirrty

Detect the moment when the form gets dirty, and trigger a custom event, for example enable a “save changes” button

Detect the moment when the form gets clean again, and trigger a custom event, for example disable the “save changes” button, cause is not necesary

Prompt the user to save changes before leaving if the form is dirty

Inputmask

jQuery inputmask is a jquery plugin which create an input mask.

An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers, …

Features:

easy to use

optional parts anywere in the mask

possibility to define aliases which hide complexity

date / datetime masks

numeric masks

lots of callbacks

non-greedy masks

many features can be enabled/disabled/configured by options

supports readonly/disabled/dir=”rtl” attributes

support data-inputmask attribute

multi-mask support

Formbase

Formbase is a better default styles for common input elements.Formbase eliminates cross browser bugs, inconsistencies across systems and applies a beautiful default styling to several input elements.

Works in all modern browsers (and IE11)

No JavaScript, just CSS

Works with inputs, textareas, checkboxes and radio buttons

Zero dependencies

File Input

File input fields look differently in all browsers. It’s a pain in the arse to design something that looks nice in all browsers and it sucks that support for this is not available in Twitter Bootstrap. This jQuery plugin is designed to make all file input fields look like standard Twitter Bootstrap buttons.

Form Designer

FORM-DESIGNER is a jQuery form builder tool which will help you to build an interactive form to use in your website template. This is mainly a HTML developer’s tool, but anyone who have a little knowledge about CSS and HTML structure and use of them, can use this tool.

I try to keep this jquery application very simple and user-friendly so that anyone can understand it within one or two tries.In this tool you will get total 7 option to create form from 7 different template and one option to create a custom form. As a final output, you will get the HTML,CSS and jQuery code here.

Choices.js

A vanilla, lightweight (~15kb gzipped), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

Lightweight

No jQuery dependency

Configurable sorting

Flexible styling

Fast search/filtering

Clean API

Right-to-left support

JSON Manager

JSON manager: jQuery plug-in that converts JS & JSON objects to HTML forms and back again.

Medea loves JSON. Give Medea a JSON object, even one with nested objects, and it will be converted into an HTML form. The form allows fields in the object to be edited, or deleted, or for new ones to be created. The modified object is returned via the submit event.

Spider

Mailgun API for mail validation online

50+ Form templates

Ajax form

Remote/server validation

Php ready form

Dynamic field

Credit card validator

Zip/Pin code validator

Semantic ui integrated

Custom error container

custom error handler

Multiple input validator As one

button style included

60+ button style included in package

TextArea

One of the most used, but under featured HTML controls, is the humble TEXTAREA control. This control is designed to accept large blocks of text from the user. A wide variety of plugins exist for the TEXTAREA that layer it with toolbars, auto-resizing, rich-text editing and the works.

More jQuery form plugins?

Keep scrolling.

There are more.

Character and Word Counter

This jQuery Word and character counter plug-in allows you to count characters or words, up or down. You can set a minimum or maximum goal for the counter to reach.

Create a custom message for your counter’s message

Force character/word limit on user to prevent typing

Works against copy/paster’s!

Addel

Addel is a simple & lightweight jQuery form plugin for powering UIs that enable dynamic addition & deletion of HTML elements, conceived with form elements in mind.

PopSelect

A jQuery plugin to replace the traditional <select> box with a sleek Popover with options pre-populated. Better User interface than any other multiselects.

Timon

With Timon – Step Form Wizard you will have power combo of 21 different styles, 8 different transition effects, validation in your step form, titles and subtitles with multiple step. , also Timon – Step Form Wizard has predefined set of form sizes from tiny to large. You can easily create and customize any form to fit your needs.

Features:

Step navigation

Fully responsive

Many options for design and function

Can be used for tabs

Step navigation

21 Style

8 transition effect

Select.js

Another one of these jQuery form plugins is Select.js. It is a Javascript and CSS library for creating styleable select elements. It aims to reproduce the behavior of native controls as much as is possible, while allowing for complete styling with CSS.

Tagger Widget

jQuery plugin to turn a HTML select into an auto-suggesting, tagging widget. It was written from the ground up and has support for hierachical data, searching for data that isn’t displayed, displaying arbitrary HTML in the suggestion list, running the original onChange actions, displaying tags for items previously selected but no longer in the list, keyboard accessibility and many other features.

formBuilder

A jQuery plugin for drag and drop form creation. To start building forms with this plugin call formBuilder() on the textarea you would like to make your editor. FormBuilder takes a number of options and is translatable.

OrderNow

PHP Order Form will helps to get project orders from the clients for the people like web developers, corporates and freelancers easily. This form is PayPal integrated and admin functionalities are integrated.

Features:

Responsive design layout

PHP order form with MySql database

Multitab features

Cross-browser platform

Contents are organized in a user-friendly format

Admin can manage all contents and order management

Mail Templates are available in admin side

Easy Forms

Easy Forms is one of the jQuery form plugins in this article that will help you design and develop web forms quickly and easily. Actually, you will not need programming skills to make your forms work in minutes.

Build any type of online forms: Contact forms, Order forms, Registration forms, Online surveys, Trivias and more.

Drag & Drop Fields. No coding skills required.

HTML5 Fields Support

Create Multi-Step Forms

Bootstrap CSS Support

Theme & Template Managers

Advanced CSS Editor with Form Live Preview

Parsley

Parsley.js is a lightweight and feature-rich library that instead of validating forms with Javascript, it uses data attributes embedded in the DOM to achieve the same function. The surprisingly easy to configure plugin also allows you to override almost every default behavior so that it will fit in with your form requirements.

jQuery Validation Engine

When it comes to the jQuery Validation Engine, you don’t need to worry about the structure of your form as the plugin will create an error DIV and position it in the top right corner of the specified input, keeping both the forms code and validations seperate. Phis is probably the easiest validation solution in this article.

Validatr

Validatr uses HTML5 input attributes to perform validation, with support for color, date, email, number and range. The input types text, checkbox, radio…. are supported, but do not require the same level of validation.

Where possible, Validatr will use native validation, using Modernizr to test for support. If an input type is not supported it will use it’s own ruleset to supplement native validation. In both cases case, the validation message is shown.

Smoke

Smoke is a collection of components for Bootstrap – including a form validator. In comparison to the other Bootstrap validator (#4), it doesn’t use native browser validation – therefore error messages aren’t automatically localized and validation rules have to be specified using HTML5 and data attributes, as well as JavaScript.

Validetta

This plugin offers validation using a data attribute, with quite limited options. It comes with just the basic validation rules, everything else can be added with custom regular expressions – but there is no example demonstrating it. Compared to the other plugins, the only unique feature is that error messages are displayed in a bubble (see demo below).

jQuery.validity

A plugin to control validation with JavaScript only – no HTML5 or data attributes. While this may be helpful for dynamic validation rules, the plugin doesn’t offer enough options to make writing efficient. It even doesn’t allow using new HTML5 type attributes like email, nor does it provide a function to check if a form is valid – necessary in order to show a success message.

h5Validate

  This plugin has unfortunately been abandoned by its creator (Eric Elliott). Consequently, the demo/documentation website returns a 404 and there are two dozen open issues. The plugin doesn’t automatically validate inputs by type and the following example even doesn’t show error messages. We’ve included it in the list, as Eric is looking for a new maintainer for the project, so there’s a chance that at some point in the future, it might get some life breathed back into it.

SkipOnTab

A jQuery plugin to exempt selected shape fields from the ahead tab order.This library is maximum beneficial while the customers are familiar with the shape, and makes use of it frequently.

Contact Tabs

A jQuery shape generator for creating limitless slide-out or static touch tabs containing AJAX powered customised bureaucracy. Plugin consists of 12 one-of-a-kind form factors and consumer-aspect validation.

Simple Contact Form

With jQuery Simple Contact Form, you could installation an ajax touch form for your website, writing only the form html code and one js code line. Email is generated and ship by using the plugin (php report blanketed) .

Form Recover

By installing this plugin you’ll permit your users to have a draft of their shape saved and restored automatically in cases of unintended refresh or browser crash.

Forms Plus

Forms Plus is a form framework. JS version includes everything CSS has, plus date/time pickers, shade pickers, sliders, captcha fields, spinners, area groups (for code, credit card number, and many others.)

Prosto Forms

Prosto Forms is a responsive Form Framework and set of beautiful shape factors with large quantity of javascript capabilities: validation, protecting, modals, ajax put up, datepickers.

Simple Subscription Popup

Simple Signup jQuery Form Plugins will gather the visitor’s electronic mail deal with in your internet site with an attention-grabber, effective manner. It has a number of elective customization alternatives and you may setup truely in mins.

Foggle

jQuery Foggle is a plugin that helps you to interact with various shape factors primarily based on consumer-enter. It helps you to pick which elements to allow (or disable) whilst the person fills out the shape.

WizardPro

WizardPro lets in you to create website wizards in only a few mins. You can use this plugin for nearly some thing that requires some steps, like a utility installer, a signup or touch form.

Virtual Phone Number Selling Form

Virtual Phone Number Selling Form is a selling form for those voip commercial enterprise who’re promoting virtual telephone numbers designed for All styles of VOIP Business. It’s an jQuery Plugin based totally on present day Bootstrap 3.3.7.

If you liked this article with jQuery form plugins, you should check out these as well:

jQuery Bootstrap Plugins (51 Great Examples)

Charts And Graphs Javascript Libraries

jQuery Lightbox Plugins (19 Examples)

jQuery Gallery Plugins For Showcasing Images Better

The post jQuery Form Plugins To Use In Your Websites (46 Options) appeared first on Design your way.

from Web Development & Designing http://www.designyourway.net/blog/resources/jquery-form-plugins/

[laravelvuejs]

Dynamic dependent dropdown using jquery ajax Example In this post, we will learn how to populate dynamic dependent drop down select box using jquery ajax in our codeigniter application.

[noahdnicholus]

Top 15 JavaScript Plugins for Extending Your Web Forms

You can add tons of cool features onto your site with JavaScript. But there are so many libraries and plugins to choose from, it can be a drag finding the best options.

If you’re designing custom forms like user signups/logins, contact pages, or settings pages, these plugins can add some extra dynamic features to jazz up your static input fields.

JCF Forms

One of my favorite JS form plugins is JCF Forms created by the team at PSD2HTML. The cryptic JCF acronym stands for JavaScript Custom Forms and it lives up to its name.

You’re able to customize default select menus, range sliders, input fields, upload forms, pretty much everything you’d need in a form.

This is totally free and built on jQuery so it should be no trouble to setup. You can also find more docs and info on the official GitHub repo if you want to learn more.

iCheck

Checkboxes and radio buttons are a staple of web forms. But they’re also the toughest to customize, and the default styles look very bland.

Thankfully the iCheck plugin is super easy to setup and customize without much JS knowledge. This works on jQuery and comes with a handful of pre-designed themes you can edit with ease.

But aside from looks, this plugin also supports keyboard inputs, 32 custom options and almost a dozen callback methods to handle user behaviors.

Parsley.js

If you prefer vanilla JS then you might like Parsley, a free JS-based form validation library. This is totally free to download and it’s one of the most complete plugins made for data validation.

Parsley is unique in that it doesn’t require complex regular expressions to get it working. It comes with built-in validators for all types of inputs like phone numbers, credit cards, addresses, and emails.

Check out the examples page to see if Parsley could be right for you.

FloatLabel.js

I don’t mind placeholder text but I vastly prefer the FloatLabel.js technique over anything else. This creates a placeholder for default fields but moves the text just above the field once it’s focused & filled in.

This way you can add information to the field with ease and still keep the form label in clear view.

Note that this is a jQuery plugin so it does require a copy of that library. But setup is pretty simple and you can follow the instructions from GitHub to get this running smoothly.

Tooltipster

Complex forms do well with tooltips guiding the user along the way. That’s the beauty of Tooltipster, a free jQuery plugin that lets you add tooltips anywhere on the screen.

You can define these tooltips based on user behaviors like hover, click, focus, or while entering text into a field. You can also customize their styles and animations while connecting these tooltips into Ajax requests or callback methods.

Flexselect

If you don’t like the default HTML select menu style then take a look at Flexselect. This free jQuery plugin restyles all select menus into dropdown panels tied to input fields.

These can blend much nicer into a typical layout, and they do feel easier to use.

Note the setup is a little tricky because this plugin has a couple of dependencies, but it’s also flexible enough to customize and restyle to your liking.

Fort.js

Some web sites display progress bars at the top of the screen to show completion of a form. This is more useful on lengthy forms where the user might want to know how soon they’ll be done.

With Fort.js you can quickly add this effect to your site with just a few lines of code. The plugin is totally free and works with any number of input fields.

Also check out the live demo to see how this would look on a real page.

Switchery

The classic iOS-style switch redefined toggle inputs. Those original on/off switches got a redesign in iOS 7 which led to libraries like Switchery.

This free open source plugin lets you create on/off toggles in the same style as iOS 7 inputs. Each switch works on a checkbox where the user clicks to either check(on) or uncheck(off) a setting.

You can spice up any settings page or profile page by swapping out simple checkboxes for these on/off toggles.

jQuery CC Validator

Ecommerce shops have to deal with credit card validation and handling sensitive inputs. Data security is a whole separate topic but this jQuery CC Validator is by far the best plugin for validation.

It’s totally free, and open source, running on top of the jQuery library. It’s super easy to setup, and the live demo shows just how much you can do with this incredible plugin.

Rangeslider.js

One of the newer features in HTML5 is the range input. This lets the user slide an input bar and select a range of numeric data.

But the default style is pretty basic so plugins like Rangeslider.js have grown in popularity.

This free jQuery plugin works as a polyfill of the HTML5 range slider. For browsers which don’t support it, you’ll still get the classic range input, so this is perfect for all web & mobile browsers.

BS3 Datepicker

You can find tons of free Bootstrap frameworks out there for awesome web templates. And the same goes for plugins that add functionality onto the Bootstrap library.

One such example is the BS3 Datepicker made for custom web forms.

There is rarely a one-size-fits-all solution for date picking. But this plugin offers a genuine interface that most people will understand how to use even at a glance. Plus it’s fully designed around the Bootstrap styles, so it blends right in.

Flatpickr

If you want a datepicker that’s a little easier to setup check out Flatpickr. This free plugin uses pure JavaScript to create a full date/time picker with tons of optional features.

The demo page is a great place to check out and see what this thing can do. It uses a simple JavaScript animation along with a basic drop shadow effect to blend into any layout.

Anyone who needs a date/time picker with lots of room for customization will get a lot out of this plugin.

jQuery File Uploads

Handling user file uploads is by far the most complex form task. You need to create an input that works on all devices, but also accepts specific types of files and knows how to process them on the backend.

This plugin fits nicely with other libraries like jQuery and Angular so it’s really the best choice for anything related to file uploads.

Just note this does take some effort to configure so you’ll need to know your way around JavaScript.

Ideal Forms

In the newest version of Ideal Forms 3 you’ll find a host of great features like auto-form validation and custom form designs.

These designs include checkboxes, radio buttons, input fields, calendar UIs, and even support for 3rd party plugins.

The setup process is very lengthy but gives you dozens of extra form features with one library. Take a look at the GitHub setup guide for more details.

jQuery Autotab

Last but certainly not least is the jQuery Autotab plugin by Matthew Miller. This lets you define a certain length for any form input so it’ll auto-tab onto the next form once completed.

It works best for fields that require a set number of characters like phone numbers or birthdays. Check out the live demo to see how this works and if it could help to extend your web forms.

from Web Designing Tips https://1stwebdesigner.com/javascript-plugins-web-forms/