When a button is clicked, I am using AJAX to display a PHP modal, with a form inside it. It is an edit form so the fields are filled in with data received from AJAX calling a PHP function via a handler. However I need a way for a select input to know which one is selected but, the data to use for that is in JavaScript. Usually I would use a function such as
$occasionTypes = getPublishedOccasionTypes($connection);
if($occasionTypes != NULL){
foreach ($occasionTypes as $occasionType) {
$selected = (isset($booking['reservation_type']) && ($booking['reservation_type'] == $occasionType['id'])) ? 'selected' : NULL;
$occasionSelect .= '<option value='.$occasionType['id'].' '.$selected.'>'.$occasionType['name'].'</option>';
}
}
But in this case, $booking['reservation_type] is useless because the actual value I need is in an input (a hidden one I created) but being filled by JavaScript. Anyone any ideas? Here is my JavaScript also
$.ajax({
type: 'POST',
url: "/modules/ajax/ajax_handler.php",
data: data
})
.done((result)=>{
result = JSON.parse(result);
console.log(result);
$('#firstName').val(result.customer_first_name);
$('#lastName').val(result.customer_last_name);
$('#email').val(result.customer_email);
$('#number').val(result.customer_mobile);
$('#date').val(result.reservation_date);
$('#time').val(result.reservation_time);
$('#size').val(result.party_size);
$('#occasion').val(result.occasion_type);
$('#comment').val(result.special_requirements);
$('#code').val(pcode);
$('#customerCode').val(result.customer_code);
$('#editModal').modal('show');
})
MODAL
$modalpopup =
'
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Booking</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<form id="editBooking" class="form form-horizontal" method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="" required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="number" id="number" placeholder="" required>
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control" name="date" id="date" placeholder="" required>
</div>
<div class="form-group">
<label>Time</label>
<select id="time" name="time" class="form-control" required>
<option value="">Please select ...</option>
'.$timeSelect.'
</select>
</div>
<div class="form-group">
<label>Party Size</label>
<input type="number" class="form-control" name="size" id="size" placeholder="" required>
</div>
<div class="form-group">
<label>Occasion</label>
<select id="occasion" name="occasion" class="form-control" required>
<option value="" selected>Please select</option>
'.$occasionSelect.'
</select>
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status" id="status" placeholder="">
<option value="accepted">Accepted</option>
<option value="not-accepted">Not Accepted</option>
</select>
</div>
<div class="form-group">
<label>Comment</label>
<textarea type="text" class="form-control" name="comment" id="comment" placeholder=""></textarea>
</div>
<input type="hidden" class="form-control" name="code" id="code" placeholder="">
<input type="hidden" class="form-control" name="customerCode" id="customerCode" placeholder="">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Edit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>';
Related
I solved my issue in snippet but when i using it on my website is not applying means when i click the No radio button the pro div is not closing but here in snippet is working even no errors in console.
Please anyone have other solution to similar like this one. Thanks.
Updated with full code:
now not working here also there are two pro div should be close on No and open on YES
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var pro = document.getElementsByClassName("pro");
for (var i = pro.length - 1; i >= 0; i--) {
pro[i].style.display = chkYes.checked ? "block" : "none";
}
}
$('input[type="radio"]').change(function () {
$(this).nextAll('.pro').toggle(this.value == 'Yes');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" onclick="ShowHideDiv()">
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>
This might be your answer, ShowHideDiv() function because it is a little bit double to make a javascript function and using jQuery to do the same thing.
Also be careful with this
$("input[name='isprocontact']").change(function () {
if(this.value == 'Yes'){
$('.pro').show();
}else{
$('.pro').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" >
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>
your question isn't really clear but if you want ide form when you click no you can process like that e.g:
var $chkNo = $('#chkNo');
var $chkYes = $('#chkYes');
var $proform = $('.pro');
$chkNo.on('click',function(){
$proform.css('display','none') // or you can play with visibility property
});
$chkYes.on('click',function(){
$proform.css('display','block') // or you can play with visibility property
});
Hi I've a form and i'm unable to disable the submit button if the fields are empty. Below is the code can any one help me to understand what might be problem?
<modal title="Add Navigation" visible="showAddModal">
<form id="addform" class="form-horizontal">
<div class="modal-body">
<div ng-classs="form-group">
<label class="col-sm-2 control-label">Client Type</label>
<div class="col-sm-10">
<select name="account" class="form-control m-b w-md" ng-model="navData.clientType" ng-required="true">
<option value="android">Android</option>
<option value="ios">iOs</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Client Version</label>
<div class="col-sm-10">
<input type="text" class="form-control w-md" ng-model="navData.clientVersion" placeholder="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Key Word</label>
<div class="col-sm-10">
<input type="text" class="form-control w-md" ng-model="navData.keyWord" placeholder="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Value </label>
<div class="col-sm-10">
<input type="text" class="form-control w-md" ng-model="navData.value" placeholder="" required>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary" ng-disabled="addform.$invalid" ng-click="addNav()">Add</button>
</div>
</form>
</modal>
From https://docs.angularjs.org/guide/forms#binding-to-form-and-control-state:
A form is an instance of
FormController.
The form instance can optionally be published into the scope using the
name attribute.
You have to use the name attribute to make the form instance available in the $scope, but you're using the id attribute:
<form name="addform" class="form-horizontal">
<!-- ... -->
</form>
I'm trying to add a submit button beside my select option drop down menu. I can't seem to get to align properly above the message box.
It sits in a basic div but didn't think it was needed.
<form id="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<h5>Join us now</h5>
<div class="form-group">
<label for="subject">
Select Option</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
Send Message</button>
</div>
</div>
</form>
I modified the rows and columns in your code, you can find it in this JSFiddle , hope this helps.
<form id="contact-form">
<div class="row">
<div class="col-md-6 col-xs-6">
<h5>Join us now</h5>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="subject">
Select Option
</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs">
Send Message
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Message
</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
</div>
</div>
</div>
I am trying to remove the ajax requested model when I user either hits close or cancel. I have tried the following.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
full code
<div id="registerModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Sign Up</h1>
</div>
<div class="modal-body">
<form name="register" id="register" action="login" method="post" class="col-md-12 center-block">
<div class="row">
<div class="col-md-6">
<h4 class="text-center">Business Info</h4>
<div class="form-group">
<input type="text" name="businessname" class="form-control input-lg login" placeholder="Business Name">
</div>
<div class="form-group">
<input type="text" name="abnacn" class="form-control input-lg login" placeholder="ABN or ACN" >
</div>
<div class="form-group">
<input type="phone" name="phonenumber" class="form-control input-lg login" placeholder="Main Phone Number" >
</div>
<div class="form-group">
<input type="email" name="busiussemail" class="form-control input-lg login" placeholder="Main Email Address" >
</div>
<div class="form-group">
<input type="checkbox" name="TOS" >
<br>By registering and ticking this box for My Staff, you are agreeing to our TOS and Privacy Policy.
</div>
<!--<div class="form-group">
<select name="buildingtype" class="form-control select-lg">
<option value="0">--- none ---</option>
<option value="1">Unit</option>
<option value="2">Floor</option>
</select>
</div>
<div class="form-group">
<input type="unitnumber" name="number" class="form-control input-lg login" placeholder="Unit / Floow Number">
<input type="streetno" name="number" class="form-control input-lg login" placeholder="street number">
</div>
<div class="form-group">
<input type="text" name="streetname" class="form-control input-lg login" placeholder="Street Name">
</div>
<div class="form-group">
<input type="number" name="postcode" class="form-control input-lg login" onkeyup="getLocation()" placeholder="postcode">
</div>
<div class="form-group">
<input type="text" name="postcode" class="form-control input-lg login" placeholder="state" readonly>
</div>
<div class="form-group">
<input type="text" name="postcode" class="form-control input-lg login" placeholder="Country" readonly>
</div>-->
</div>
<div class="col-md-6">
<h4 class="text-center">User login set up</h4>
<div class="form-group">
<input type="text" name="emailadress" class="form-control input-lg login" placeholder="Admin staff Email Address">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control input-lg login" placeholder="Password">
</div>
<div class="form-group">
<input type="text" name="passwordtwo" class="form-control input-lg login" placeholder="Password Repeat">
</div>
<div class="form-group">
<input type="text" name="firstname" class="form-control input-lg login" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" name="sirname" class="form-control input-lg login" placeholder="Last Name">
</div>
<div class="form-group">
</div>
</div>
<button typpe="submit" onclick="signupmore();" class="btn btn-success col-md-12 btn-lg btn-block">Register</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You're manually adding the class 'show' to the modal.
If you remove that, then open the modal in JS you can close it.
http://www.bootply.com/EMWW2UWBtr
$('#registerModal').modal('show');
<div id="registerModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
I've two tabs in my homepage, one for personal registration and another to companies. The validation works fine in the first, but in the second tab, the validation don't work and returns nothing.
First of all, the HTML:
<!-- Fire nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Pessoa Fisica</li>
<li>Pessoa Juridica</li>
</ul>
<!-- Nav tabs -->
<div class="tab-content">
<div class="tab-pane fade in active" id="pf">
<form id="pfRegister" action="" method="post" autocomplete="off">
<div class="form-group">
<input type="text" id="firstName" class="form-control inputSk" placeholder="Name" name="firstName" required>
</div>
<div class="form-group">
<input type="text" id="lastName" class="form-control inputSk" placeholder="Surname" name="lastName" required>
</div>
<div class="form-group">
<input type="text" id="email" class="form-control inputSk" placeholder="Email" name="email" required>
</div>
<div class="form-group">
<input type="password" id="password" class="form-control inputSk" placeholder="Password" name="password" required>
</div>
<div class="form-group">
<input type="password" id="confirm_password" class="form-control inputSk" placeholder="Confirm your password" name="confirm_password" required>
</div>
<div class="form-group">
<select id="gender" name="gender" class="form-control inputSk" required>
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<div class='input-group date'>
<input type='text' class="form-control inputSk input" name="birth" id="birth" required>
</div>
</div>
</div>
<div class="actionForm">
<button type="submit" id="send" class="btn btn-default sk skBtn-primary submit">Sign up</button>
</div>
</form>
</div>
<!-- company register -->
<div class="tab-pane fade" id="pj">
<form id="pjRegister" class="captcha" action="" method="post" autocomplete="off">
<div class="form-group">
<input type="text" class="form-control inputSk" name="cnpj" id="cnpj" placeholder="CNPJ" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="juridicIdentity" id="razaosocial" placeholder="Razao Social" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="companyIdentity" id="company" placeholder="Company Name" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="administrator" id="administrator" placeholder="Administrator Account" required>
</div>
<div class="form-group">
<input type="email" class="form-control inputSk" id="pjEmail" name="pjEmail" placeholder="Email" required>
</div>
<div class="form-group">
<input type="email" class="form-control inputSk" id="pj_confirm_email" name="pj_confirm_email" placeholder="Confirm Email" required>
</div>
<div class="form-group">
<input type="password" id="pjPassword" class="form-control inputSk pwstrength_viewport_progress" placeholder="Password" required>
</div>
<div class="form-group">
<input type="password" id="pjConfirm_password" class="form-control inputSk" placeholder="Confirm Password" required>
</div>
<div class="actionForm">
<button type="button" id="pjSend" class="btn btn-default sk skBtn-primary submit">Sign up</button>
</div>
</form>
</div>
</div> <!-- end of pj panel -->
The JS:
$("#pfRegister").validate({
rules: {rules},
messages: {msgs}
});
//companies validator
$("#pjRegister").validate({
rules: {rules},
messages: {msgs}
});
The defaults and showErrors is set inside $.validator.setDefaults.
I tried to validate one by one with this, but still not working:
var pfreg = $("#pfRegister").validate({
rules: {rules},
messages: {msgs}
});
//companies validator
var pjreg = $("#pjRegister").validate({
rules: {rules},
messages: {msgs}
});
pjreg.element('input');
pfreg.element('input');
Searching the web, I found a possible solution:
$("#pjRegister").each(function(){
$(this).validate();
});
But this way the form don't validate when I click the Submit button.
Your first button is a type="submit", which is captured automatically by the validation plugin, so validation is triggered.
Your second button is a type="button", which is not captured, so the plugin does nothing when you click it.
Working DEMO: http://jsfiddle.net/9o0zd4pt/1/