jQuery Range Slider

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="post-27770 post type-post status-publish format-standard has-post-thumbnail hentry category-java-script category-jquery-plugins tag-jquery-range-slider" id="post-27770" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/05/rangetouch-range-slider-touch-devices/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="RangeTouch : Range Slider for Touch Devices">RangeTouch : Range Slider for Touch Devices</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">May 23, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/java-script/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Core Java Script</a>, <a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/05/rangetouch-range-slider-touch-devices/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="RangeTouch : Range Slider for Touch Devices"><img alt="RangeTouch : Range Slider for Touch Devices" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/05/javascript-rangetouch.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> A super tiny library to make <code style="background: rgb(248, 248, 248); border: 0px; font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; font-stretch: normal; line-height: 18px; margin: 0px; outline: 0px; padding: 3px; vertical-align: baseline;"><input type="range"></code> sliders work better on touch devices.</div> <ul style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px 0px 20px 30px; outline: 0px; padding: 0px; vertical-align: baseline;"> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">No setup required, just include the script</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Less than 1KB minified and gzipped</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">No dependencies (written in “vanilla” JavaScript)</li> </ul> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="https://github.com/Selz/rangetouch" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?https://rangetouch.com/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> <div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> </div> <div class="post-26799 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-date-time-picker tag-jquery-range-slider" id="post-26799" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/03/jquery-range-picker/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="jQuery Range Picker">jQuery Range Picker</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">March 24, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/03/jquery-range-picker/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="jQuery Range Picker"><img alt="jQuery Range Picker" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/03/jquery-range-picker.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> jQuery range picker let you set a range between two numbers (positive or negative) or even dates and catch a value by dragging a cursor.</div> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="https://github.com/zhangtasdq/range-picker" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?https://jsfiddle.net/cqmyg/me1dmz9e/6/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> <div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> </div> <div class="post-26687 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-php category-jquery-plugins tag-jquery-range-slider" id="post-26687" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/03/price-range-slider-using-jquery-php/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Price Range Slider Using jQuery & PHP">Price Range Slider Using jQuery & PHP</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">March 17, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-php/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">PHP</a>, <a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/03/price-range-slider-using-jquery-php/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Price Range Slider Using jQuery & PHP"><img alt="Price Range Slider Using jQuery & PHP" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/03/jquery-price-range-slider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> Price Range slider is a slider having price on it means instead of entering the price user can also slide the meter to the appropriate price range and submit the price.Price Range Slider is very common in modern websites they are mainly used in eCommerce websites to give easy user experience.In this tutorial we will create a Price Range Slider Using jQuery,CSS and PHP.</div> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="http://talkerscode.com/webtricks/price-range-slider-using-jquery-css-and-php.php" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://talkerscode.com/webtricks/demo/demo_price-range-slider-using-jquery-css-and-php.php" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> <div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> </div> <div class="post-25896 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-range-slider" id="post-25896" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/01/rangeslider-javascript-polyfill-for-html5-range-slider-element/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="rangeSlider : JavaScript polyfill for HTML5 Range Slider Element">rangeSlider : JavaScript polyfill for HTML5 Range Slider Element</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">January 30, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/01/rangeslider-javascript-polyfill-for-html5-range-slider-element/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="rangeSlider : JavaScript polyfill for HTML5 Range Slider Element"><img alt="rangeSlider : JavaScript polyfill for HTML5 Range Slider Element" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/01/jquery-range-slider.jpg" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="repository-meta-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Simple, small and fast vanilla JavaScript polyfill for the HTML5 `<input type=”range”>` slider element.</span></div> <ul style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px 0px 20px 30px; outline: 0px; padding: 0px; vertical-align: baseline;"> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Touchscreen friendly</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Recalculates <code style="background: rgb(248, 248, 248); border: 0px; font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; font-stretch: normal; line-height: 18px; margin: 0px; outline: 0px; padding: 3px; vertical-align: baseline;">onresize</code> so suitable for use within responsive designs</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Small and fast</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Supports all major browsers</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Buffer progressbar (for downloading progress etc.)</li> </ul> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="https://github.com/Stryzhevskyi/rangeSlider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://stryzhevskyi.github.io/rangeSlider/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> <div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> </div> <div class="post-25747 post type-post status-publish format-standard has-post-thumbnail hentry category-bootstrap category-jquery-plugins tag-jquery-range-slider" id="post-25747" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/01/bootstrap-slider-jquery-bootstrap-range-slider/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Bootstrap-Slider : jQuery Bootstrap Range Slider">Bootstrap-Slider : jQuery Bootstrap Range Slider</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">January 24, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/bootstrap/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Bootstrap</a>, <a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2016/01/bootstrap-slider-jquery-bootstrap-range-slider/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Bootstrap-Slider : jQuery Bootstrap Range Slider"><img alt="Bootstrap-Slider : jQuery Bootstrap Range Slider" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/01/jquery-bootstrap-slider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="repository-meta-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">A complete rewrite of the original bootstrap-slider by Stefan Petre</span></div> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="https://github.com/seiyria/bootstrap-slider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://seiyria.com/bootstrap-slider/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> <div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> </div> <div class="post-25144 post type-post status-publish format-standard has-post-thumbnail hentry category-bootstrap category-html5-jquery-tutorial category-jquery-json category-jquery-plugins tag-jquery-range-slider" id="post-25144" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/12/pro-range-data-slider-jquery-plugin/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Pro Range Data Slider : jQuery Plugin">Pro Range Data Slider : jQuery Plugin</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">December 14, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/bootstrap/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Bootstrap</a>, <a href="http://www.jqueryrain.com/example/html5-jquery-tutorial/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">HTML5</a>, <a href="http://www.jqueryrain.com/example/jquery-json/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">jSON</a>, <a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/12/pro-range-data-slider-jquery-plugin/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Pro Range Data Slider : jQuery Plugin"><img alt="Pro Range Data Slider : jQuery Plugin" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/12/jquery-html5-ProRangeSlider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="repository-meta-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Lightweight HTML5 based range data slider for mobile and desktop that creates data objects from user input and formats as JSON for modern web app’s</span>.A substantial improvement over the data range sliders in jQueryUI and Twitter Bootstrap.</div> <ul style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px 0px 20px 30px; outline: 0px; padding: 0px; vertical-align: baseline;"> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">HTML5 ready. Use the new elements with confidence</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">A touch friendly data range slider</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">No code bloat</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Formats input to JSON</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Tallys amounts from each range slider to provide a total</li> <li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Can be re-styled any way you like in CSS</li> </ul> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="https://github.com/joehoeller/ProRangeSlider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://jsfiddle.net/JOEHOELLER/217m94fk/2/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> <div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> </div> <div class="post-23006 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-css category-jquery-ui tag-jquery-range-slider" id="post-23006" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/07/flat-slider-visual-styler-for-jquery-ui-slider/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Flat slider : Visual styler for jQuery UI slider">Flat slider : Visual styler for jQuery UI slider</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">July 8, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-css/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">CSS2 / CSS3.0</a>, <a href="http://www.jqueryrain.com/example/jquery-ui/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">jQuery UI</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/07/flat-slider-visual-styler-for-jquery-ui-slider/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Flat slider : Visual styler for jQuery UI slider"><img alt="Flat slider : Visual styler for jQuery UI slider" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/07/jquery-ui-slider-styler.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> Flat slider is an online tool that allows you to turn the jQuery UI slider into a beautiful flat slider. You can change the color and size of the slider line, handles and range. The tool generates the CSS as you make your changes, so that you can easily copy and paste it into your website stylesheets.</div> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="http://lugolabs.com/flat-slider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://lugolabs.com/flat-slider" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> <div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> </div> <div class="post-22613 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-range-slider" id="post-22613" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/06/roundslider-jquery-circular-range-slider/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="roundSlider : jQuery Circular Range Slider">roundSlider : jQuery Circular Range Slider</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">June 22, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/06/roundslider-jquery-circular-range-slider/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="roundSlider : jQuery Circular Range Slider"><img alt="roundSlider : jQuery Circular Range Slider" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/06/jquery-roundslider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> Round slider (also can call as Circular slider, Radial slider) is a jQuery plugin that allows the user to select a value or range of values.</div> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> Not only a round slider, it supports<strong style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> the quarter, half and pie circle shapes also</strong>.</div> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="https://github.com/soundar24/roundSlider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://roundsliderui.com/demos.html" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> <div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> </div> <div class="post-21982 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-range-slider" id="post-21982" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/05/mb-valueslider-jquery-value-slider-plugin/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="mb.valueSlider : jQuery Value Slider Plugin">mb.valueSlider : jQuery Value Slider Plugin</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">May 20, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/05/mb-valueslider-jquery-value-slider-plugin/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="mb.valueSlider : jQuery Value Slider Plugin"><img alt="mb.valueSlider : jQuery Value Slider Plugin" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/05/jquery-value-slider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> jquery.mb.valueSlider let you set a range between two numbers (positive or negative) and catch a value by dragging a cursor.</div> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="https://github.com/pupunzi/jquery.mb.valueSlider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://pupunzi.com/mb.components/mb.valueSlider/demo/demo.html" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> <div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> </div> <div class="post-22045 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-range-slider" id="post-22045" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;"> <h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/05/jquery-lcn-circle-range-select/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="jQuery Lcn Circle Range Select">jQuery Lcn Circle Range Select</a></h2> <div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">May 9, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div> <div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <a href="http://www.jqueryrain.com/2015/05/jquery-lcn-circle-range-select/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="jQuery Lcn Circle Range Select"><img alt="jQuery Lcn Circle Range Select" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/05/jquery-circle-range-select.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div> <div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;"> <div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> jQuery Lcn is a 360 degree circle range select input widget.</div> <div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;"> <a href="https://github.com/FaiblUG/jQuery-Lcn-Circle-Range-Select" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://cdn.rawgit.com/FaiblUG/jQuery-Lcn-Circle-Range-Select/master/demo.html" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div> </div> </div> </div>

jQuery Range Slider

RangeTouch : Range Slider for Touch Devices May 23, 2016   |  Core Java Script ,  Plugins A super tiny library to make  <input ...

+ Read more »

Do you want to implement ajax features but you don’t know how?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> <strong>Ajax </strong>is always more and more diffused and common in various websites, at times even when it’s not necessary, but after all this happens somehow with everything.  If you are attracted by this technology but you don’t know where to start from, this article is for you. In two extremely simple examples you <strong>will learn the basics</strong> and you will see how thanks to the use of modern frameworks <strong>it is not as difficult as it might look</strong>. You don’t believe me?<span id="more-1513" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></div> <h3 style="border: 0px; color: #939191; font-family: 'ITC Franklin Condensed', FranklinDemi, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.4em; font-weight: normal; line-height: 1.25; margin: 1.5em 0px 1em; padding: 0px; vertical-align: baseline;"> What is a asynchronous call?</h3> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> If we don’t use Ajax, every data exchange between the server and the client requires a traditional request which entails the refreshing or the loading of a new page.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> When we fill a form and click on “<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">send</em>“, for example, the elaboration page is requested to the server which will deal with intercepting the data we inserted into the form, elaborating them, and finally show a result.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> This page is loaded as a new document which is completely going to substitute the previous page (the one of the form) in our browser.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> Thanks to ajax instead, <strong>the server and the client can communicate “<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">in background</em>“</strong> at <strong>time intervals</strong> or at the <strong>occurrence of a certain event</strong>.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> We can thus for example foresee that by clicking on the<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> “send”</em> button of a form (thus at the occurrence of the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">submit</em>event<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</em>, a request is sent that is going to be elaborated by the server which is going to send the result to the browser which in turn is going to show it, everything without the page having to reload.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> This is exactly what we are going to do together in a little bit. We are going to use <strong>jQuery</strong>, the powerful javascript library which has already been the subject of several articles and thanks to which the creation of a asynchronous call will result<strong>extremely simplified</strong>.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> If you don’t have jQuery yet (wrong), <a href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery" id="d5_3" style="border-bottom-style: solid; border-color: initial; border-width: 0px 0px 1px; color: #ac4603; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="scaricala dal sito ufficiale">download it from the official website</a>.</div> <h3 style="border: 0px; color: #939191; font-family: 'ITC Franklin Condensed', FranklinDemi, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.4em; font-weight: normal; line-height: 1.25; margin: 1.5em 0px 1em; padding: 0px; vertical-align: baseline;"> Preparation of the form</h3> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> We create the page <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ajax.html</em> and insert a simple form which requires <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">“name”</em> and <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">“last name”</em>.</div> <div style="border: 0px; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; vertical-align: baseline;"> <div class="syntaxhighlighter nogutter xml" id="highlighter_994430" style="background-color: white !important; border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 1em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px; position: relative !important; vertical-align: baseline; width: 760px;"> <div class="toolbar" style="background: rgb(108, 226, 108) !important; border-radius: 0px !important; border: none !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: 11px !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: 11px !important; z-index: 10 !important;"> <span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="toolbar_item command_help help" href="http://www.yourinspirationweb.com/en/do-you-want-to-implement-ajax-features-but-you-dont-know-how/#" style="background: none !important; border-bottom-style: solid; border-bottom-width: 1px; border-left-width: 0px !important; border-radius: 0px !important; border-right-width: 0px !important; border-top-width: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; display: block !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 1px 0px 0px !important; position: static !important; right: auto !important; text-align: center !important; text-decoration: none; top: auto !important; vertical-align: baseline !important; width: auto !important;">?</a></span></div> <table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-radius: 0px !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; table-layout: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><!</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">DOCTYPE</code> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd" style="background: none !important; border-bottom-style: solid; border-bottom-width: 1px; border-left-width: 0px !important; border-radius: 0px !important; border-right-width: 0px !important; border-top-width: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-decoration: none; top: auto !important; vertical-align: baseline !important; width: auto !important;">http://www.w3.org/TR/html4/loose.dtd</a>"></code></div> <div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">html</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">head</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">head</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">body</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> </div> <div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">form</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">id</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"input_form"</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">action</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"?"</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">Insert name:<</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">br</code> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></div> <div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">input</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">type</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"text"</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">name</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"name"</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">id</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"name"</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">br</code> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></div> <div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">Insert last name:<</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">br</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">input</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">type</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"text"</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">name</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"lastname"</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">id</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"lastname"</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">br</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/ ><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">br</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/ ></code></div> <div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">input</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">type</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"submit"</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">value</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"send"</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">form</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> </div> <div class="line number15 index14 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">div</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">id</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"result"</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">div</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number16 index15 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> </div> <div class="line number17 index16 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">body</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number18 index17 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">html</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> In this HTML markup we have added the “<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">result</em>” element which represents the point in which the results of the elaboration from the server are going to be inserted.</div> <h3 style="border: 0px; color: #939191; font-family: 'ITC Franklin Condensed', FranklinDemi, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.4em; font-weight: normal; line-height: 1.25; margin: 1.5em 0px 1em; padding: 0px; vertical-align: baseline;"> Preparation of the elaboration page on the server</h3> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> Let’s create now the page result.php which will provide for the reception and elaboration of data passed from the form:</div> <div style="border: 0px; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; vertical-align: baseline;"> <div class="syntaxhighlighter nogutter php" id="highlighter_443727" style="background-color: white !important; border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 1em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px; position: relative !important; vertical-align: baseline; width: 760px;"> <div class="toolbar" style="background: rgb(108, 226, 108) !important; border-radius: 0px !important; border: none !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: 11px !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: 11px !important; z-index: 10 !important;"> <span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">?</span></div> <table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-radius: 0px !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; table-layout: auto !important; top: auto !important; vertical-align: baseline !important; width: 1141px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 1141px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><?php</code></div> <div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="php functions" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(255, 20, 147) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">echo</code> <code class="php string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"You have inserted the following data: Name-><strong>$_POST[name]</strong> and Last name-><strong>$_POST[lastname]</strong>. You have executed an asynchronous call!"</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div> <div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">?></code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> As you can see it’s simply about  printing on video the data passed from the form inside a phrase.</div> <h3 style="border: 0px; color: #939191; font-family: 'ITC Franklin Condensed', FranklinDemi, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.4em; font-weight: normal; line-height: 1.25; margin: 1.5em 0px 1em; padding: 0px; vertical-align: baseline;"> Inclusion of jQuery and preparation of function</h3> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> Let’s turn now to the file <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ajax.html</em>. We include the jQuery library and arrange for the function necessary for our scope modifying the head in this way:</div> <div style="border: 0px; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; vertical-align: baseline;"> <div class="syntaxhighlighter nogutter xml" id="highlighter_280172" style="background-color: white !important; border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 1em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px; position: relative !important; vertical-align: baseline; width: 760px;"> <div class="toolbar" style="background: rgb(108, 226, 108) !important; border-radius: 0px !important; border: none !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: 11px !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: 11px !important; z-index: 10 !important;"> <span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">?</span></div> <table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-radius: 0px !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; table-layout: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">head</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">script</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">type</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"text/javascript"</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">src</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"jquery-1.4.1.js"</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">script</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">> </code><code class="xml comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><!-- The version could be different --></code></div> <div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">script</code> <code class="xml color1" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: grey; direction: ltr; display: inline; float: none; font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace "important"; font-size: 1em; font-stretch: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">type</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="xml string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"text/javascript"</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$(document).ready(function() {</code></div> <div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//Here we will write the necessary code</code></div> <div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div> <div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">script</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> <div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="xml keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">head</code><code class="xml plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> Let’s create now the necessary jQuery code which I am going to explain in detail below.</div> <div style="border: 0px; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; vertical-align: baseline;"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_991953" style="background-color: white !important; border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 1em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px; position: relative !important; vertical-align: baseline; width: 760px;"> <div class="toolbar" style="background: rgb(108, 226, 108) !important; border-radius: 0px !important; border: none !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: 11px !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: 11px !important; z-index: 10 !important;"> <span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">?</span></div> <table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-radius: 0px !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; table-layout: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"#input_form"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).submit(</code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(){</code></div> <div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">name = $(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"#name"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).attr(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'value'</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">);</code></div> <div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">lastname = $(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"#lastname"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).attr(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'value'</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">);</code></div> <div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$.post(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"result.php"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, {name:name,lastname:lastname}, </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(data){</code></div> <div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"div#result"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).html(data);</code></div> <div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div> <div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">return</code> <code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">false</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div> <div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> So, in the first line we state:</div> <div style="border: 0px; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; vertical-align: baseline;"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_794017" style="background-color: white !important; border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 1em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px; position: relative !important; vertical-align: baseline; width: 760px;"> <div class="toolbar" style="background: rgb(108, 226, 108) !important; border-radius: 0px !important; border: none !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: 11px !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: 11px !important; z-index: 10 !important;"> <span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">?</span></div> <table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-radius: 0px !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; table-layout: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"#input_form"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).submit(</code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(){</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> In the element with id “<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">input_form</em>“, at the occurrence of “<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">submit</em>” event, execute this function.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> In the second and third line:</div> <div style="border: 0px; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; vertical-align: baseline;"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_638571" style="background-color: white !important; border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 1em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px; position: relative !important; vertical-align: baseline; width: 760px;"> <div class="toolbar" style="background: rgb(108, 226, 108) !important; border-radius: 0px !important; border: none !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: 11px !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: 11px !important; z-index: 10 !important;"> <span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">?</span></div> <table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-radius: 0px !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; table-layout: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">name = $(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"#name"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).attr(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'value'</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">);</code></div> <div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">lastname = $(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"#lastname"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).attr(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'value'</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">);</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> we emphasize the variables <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</em> and <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">last name</em> withdrawing the “<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">value</em>” attribute from the elements with id “<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</em>” and “<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">last name</em>” (which are the relative fields of the form).</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> At this point we proceed with the ajax call. jQuery has mainly three methods for the management of asynchronous calls, $.post, $.get, ed $.ajax. In this first example we are going to use <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$.post</em> which as it’s obvious will send the data to the server through the POST method.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> The syntax is simple:</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> $.post(“name_of_file”, {name1:value1,name2:value2( passed parameters)}, function(data){</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> — what we want to do with the answer sent to us by the server is that it will be contained in the “<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data</em>” parameter<span style="border: 0px; font-family: inherit; font-size: xx-small; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span></div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> });</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> In our case, we send the request to <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">result.php</em> passing as <strong>parameter</strong> <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</em> the <strong>variable</strong> <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</em> (previously enhanced with the content of the field name of form) and as l<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ast name </em><strong>parameter</strong> the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">last name </em><strong>variable</strong>.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> We insert the result in the element <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">“result</em>“.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> Finally, if we use the forms, we should always bear in mind to <strong>interrupt the execution of submit with return false.</strong></div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> By trying out this code (<a href="http://www.yourinspirationweb.com/example/maurizio/ajax/ajax_en.html" id="u_ny" style="border-bottom-style: solid; border-color: initial; border-width: 0px 0px 1px; color: #ac4603; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="vedi l'esempio">see example</a>) under the form you will display the phrase without a refresh or the loading request of a new page. The data have been sent in asynchronous way to the server which has executed the php page. The output of the page has been thus sent to the client and inserted in DOM.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> If I wanted to use <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$.ajax</em> to do exactly the same thing, I have to rewrite the function like this:</div> <div style="border: 0px; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; vertical-align: baseline;"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_693373" style="background-color: white !important; border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 1em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px; position: relative !important; vertical-align: baseline; width: 760px;"> <div class="toolbar" style="background: rgb(108, 226, 108) !important; border-radius: 0px !important; border: none !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: 11px !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: 11px !important; z-index: 10 !important;"> <span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="toolbar_item command_help help" href="http://www.yourinspirationweb.com/en/do-you-want-to-implement-ajax-features-but-you-dont-know-how/#" style="background: none !important; border-bottom-style: solid; border-bottom-width: 1px; border-left-width: 0px !important; border-radius: 0px !important; border-right-width: 0px !important; border-top-width: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; display: block !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 1px 0px 0px !important; position: static !important; right: auto !important; text-align: center !important; text-decoration: none; top: auto !important; vertical-align: baseline !important; width: auto !important;">?</a></span></div> <table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-radius: 0px !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; table-layout: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 760px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$.ajax({</code></div> <div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">url: </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'result.php'</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">,</code></div> <div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">type: </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"POST"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">,</code></div> <div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">data: </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"name="</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">+name+</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"&lastname="</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">+lastname,</code></div> <div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">success: </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(data) {</code></div> <div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$(</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"div#result"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).html(data);</code></div> <div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div> <div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;"> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-stretch: normal; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> As you can see <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$.ajax</em> has a different and slightly more complex syntax. This as it allows us to pass a long series of parameters (and in fact more configurable than <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$.post</em> and <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$.get</em>); you will find the complete list of parameters in the<a href="http://api.jquery.com/jQuery.ajax/" id="f4b5" style="border-bottom-style: solid; border-color: initial; border-width: 0px 0px 1px; color: #ac4603; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="documentazione">documentation</a>.</div> <div style="border: 0px; color: #393939; font-family: Calibri, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; font-size: 15px; line-height: 24px; padding: 0.267em 0px 0.933em; vertical-align: baseline;"> <br /></div> </div>

Do you want to implement ajax features but you don’t know how?

Ajax  is always more and more diffused and common in various websites, at times even when it’s not necessary, but after all this happens s...

+ Read more »