Select 2 basic remote data set integration

Select 2 is a jQuery plugin for select boxes. Using Select 2 we can search in a select box’s option values and connect with remote data set in json format.

Here we look how to inegrate select 2 with a remote data set( or simply from a json response url from our own web application).

The format of json response need to be like this (View http://www.appunitz.com/json/usa.php)


{
"results": [{
"text": "New York",
"id": "1"
}, {
"text": "California",
"id": "2"
}, {
"text": "Los Angels",
"id": "3"
}],
"more": false
}

The key value of ‘text’ will be shown in option text and key value of ‘id’ will be shown in option id.

View the fiddle to look how this works.

Including Select 2


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

HTML

<select></select>

CSS


.select2-container{
width:200px !important;
}

JAVASCRIPT



$('select').select2({
    placeholder: "Search",
    minimumInputLength: 1,
    ajax: {
        url: "http://www.appunitz.com/json/usa.php",
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term,
                page_limit: 10,
            };
        }
    }
});

PHP



<?php
$usa_states = array( 
               array('text'=>'Texas','id'=>1), 
               array('text'=>'New Jersey','id'=>2), 
               array('text'=>'New York','id'=>3), 
               array('text'=>'Washington','id'=>4), 
               array('text'=>'California','id'=>5), 
               array('text'=>'Los Angels','id'=>6), 
               array('text'=>'Florida','id'=>7), 
               array('text'=>'Alaska','id'=>8), 
               array('text'=>'Massachusetts','id'=>9), 
               array('text'=>'Arizona','id'=>10) 
              );
$array['results'] = $usa_states;
$array['more'] = false;
header("Content-type:application/json; charset=utf-8");
echo json_encode($array);

Multiple handle range slider using limitslider

jQueryUi’s Slider can be used for creating a  range slider with multiple handle.
But one of the problem of jQueryUi slider I faced is the crossing of slider handle. I tried using many slider plugins till I found the solution using Limitslider, an extension of jQuery UI slider itself created by Martijn van der Lee – https://github.com/vanderlee/limitslider.

The below features of limitslider really helped me

  • Allows or blocks crossing of sliders.
  • Minimum distance between sliders.
  • Label on the sliders.
  • Use all of jQueryUI’s slider functionality.

 

Limit slider jquery ui example

Including required stylesheet and scripts
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.limitslider.js"></script>
Html element on which limitslider is initialized
 <div class="example-basic"></div>
Initializing Limitslider

$('.example-basic').limitslider({
values: [ 1,5,15,20 ] ,
max: 30,
gap: 1,
label:function(position, handle){
return '<span>'+ (position) +'</span>Handle ' + (handle+1);
},
stop:function(event, ui){
$('#values').val(ui.values.join(","));
},
slide:function(event, ui){
// for making first handle not movable
if(ui.handleIndex==0)
{
alert('Cannot move this handle');
return false;
}
}
});
Styling handle bar and label

.example-basic{
margin: 30px 0px;
}
.ui-slider-horizontal > span > div
{
position: absolute;
top: 30px;
color: #000 !important;
width: 50px;
left: -14px;
background: #f7f7f7;
border: 1px solid #ccc;
border-radius: 5px;
padding: 3px;
}
.ui-slider-horizontal > span > div::before
{
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #cccccc;
position: absolute;
top: -6px;
left: 18px;
}
.ui-slider-horizontal > span > div > span
{
position: absolute;
top: -58px;
color: #000 !important;
left: 15px;
background: #f7f7f7;
padding: 3px;
}
.ui-slider-horizontal > span {
outline: none !important;
}

Download

Contact Form using PHP

HTML


<form action="" method="post">
<label>Name</label>
<input name="name" type="text" />
<label>Email</label>
<input name="email" type="text" />
<label>Phone</label>
<input name="phone" type="text" />
<label>Message</label>
<textarea name="message"></textarea>
<input name="submit" type="submit" value="Send" />
</form>

Some key things to remember here,

  • action – Action attribute inside the <form> element tell the browser to which page the form is submitted. When left empty the form will be submitted to the current page itself.
  • method – Method can be either POST or GET. It is better to use POST. know more
  • name=’submit’ – This is used in our PHP code to check whether the form is submitted or not.

PHP


<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
if(isset($_POST['submit']))
{
require 'PHPMailer.php';
require 'Exception.php';
$mail = new PHPMailer(true);
try {
$mail->setFrom('info@appunitz.com', 'Appunitz');
$mail->addAddress('deffrin@gmail.com');
$mail->addReplyTo('info@appunitz.com', 'Appunitz');
$mail->addBCC('deffrin@gmail.com'); // Your email address for receiving a copy of the message
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'Enquiry Message';
$body = "<label>Name</label><p>".$_POST['name']."</p>".
"<label>Email</label><p>".$_POST['email']."</p>".
"<label>Phone</label><p>".$_POST['phone']."</p>".
"<label>Message</label><p>".$_POST['message']."</p>";
$mail->Body = $body;
$mail->AltBody = $body;
$mail->send();
echo 'Message has been sent';
} catch (Exception $e) {
echo 'Message could not be sent.';
echo 'Mailer Error: ' . $mail->ErrorInfo;
}
}
?>

We are using PHPMailer for sending mail.

$_POST['name'] // variable has the name field's value submitted by the user.

All the working code is available for download.

Download