I have declared the same structure:
<div class="btn-group" data-toggle="buttons" style="margin-left:50px;">
<label class="btn btn-default">
<input id="past5m" type="radio"> 5m
</label>
<label class="btn btn-default">
<input id="past1h" type="radio"> 1h
</label>
</div>
which, according to this should enable me to attach an onclick event by adding:
$(document).ready(function() {
$('#past5m').click(function() {
alert('hello');
});
});
JQuery is already included in the code.
However, when `#past5m' is pressed, nothing happens.
Can you please help me to spot the error?
Thanks.
You click the label, not the value. Try
$(window).ready(function() {
$('#past5m').closest('label').click(function() {
alert('hello');
});
});
Try it on JSFiddle
Ok, figured it out thanks to this:
$(document).ready(function() {
$('#past5m').change(function() {
alert('hello');
});
});
Related
I've written some jQuery to validate my Bootstrap forms, however I'm having a few issues.
Firstly, I want a red outline to appear if the user clicks off the input field without typing anything in: JSFiddle example here. In this example I'm using the Bootstrap Validator plugin, however I want to imitate this effect without using the plugin.
Second, and linked to the issue I just mentioned, the green outline only appears once the user clicks the submit button, thus the user only sees it for half a second or so before they are redirected, making it a little pointless. Again, this would be solved by having an error/success outline appear once the user clicks off the input. If anyone could help me out it would be greatly appreciated.
This is the code I have so far:
HTML:
<form id="auth_form" action="action.php" method="post">
<div class="form-group has-feedback" name="auth_code" id="auth_code">
<label for="auth_code" class="control-label">
Authorisation Code</label>
<input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
<span class="form-control-feedback glyphicon" id="iconBad"></span>
</div>
<div class="form-group">
<div>
<button class="btn btn-info" name="submit" type="submit" id="submit">Submit</button>
</div>
</div>
</form>
jQuery:
$(document).ready(function() {
$('#auth_form').on('submit', function(e) {
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
e.preventDefault();
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}
})
})
JSFiddle
Try this updated fiddle: jsfiddle.net/xqwsobmo/20/
Need to add input blur event and validate input
$(document).ready(function() {
$('#auth_code_input').blur(function(){
if(!ValidateInput()){
e.preventDefault();
}
});
$('#auth_form').on('submit', function(e) {
if(!ValidateInput()){
e.preventDefault();
}
})
});
function ValidateInput(){
var IsValid=false;
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
IsValid=false;
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
IsValid=true;
}
return IsValid;
}
I have some radio inputs. Please see the code
<div class="radio">
<label class="btn btn-time text-center "> 9.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="9.30PM" />
</label>
</div>
There are many input like this. I want to add selected color when a user clicks on one input. For this I am using this jQuery code
$(document).ready(function() {
$(".btn-time").click(function(){
$(this).css("background", "#DF73AF");
});
});
This code solve the problem but the problem is, it gives all the clicked input same color. I want only the last clicked input the color and other should return to default .
Thanks in advance..
Try this
$(document).ready(function() {
$(".btn-time").click(function(){
$(".btn-time").css('background', 'yourColor');
$(this).css("background", "#DF73AF");
});
});
This is a working example
$(document).ready(function() {
$(".btn-time").click(function(){
$(".btn-time").css('background', '#FFF');
$(this).css("background", "#DF73AF");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label class="btn btn-time text-center "> 9.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="9.30PM" />
</label>
<label class="btn btn-time text-center "> 10.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="10.30PM" />
</label>
<label class="btn btn-time text-center "> 11.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="11.30PM" />
</label>
<label class="btn btn-time text-center "> 12.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="12.30PM" />
</label>
</div>
Just reset everything before you set the click color:
$(document).ready(function() {
$(".btn-time").click(function(){
$(".btn-time").css('background', '#fff'); // or whatever default color
$(this).css("background", "#DF73AF");
});
});
Add a code to change bacground to default before updating current. I'd suggest you to cache the set of elements in a variable (myset in my example for significant performance benefits).
$(document).ready(function() {
var myset = $(".btn-time");
myset.click(function() {
myset.css("background", "default_color");
$(this).css("background", "#DF73AF");
});
});
For the inherit term you can, of course, put any color. The new line resets the background color for every object the class is applied to.
$(document).ready(function() {
$(".btn-time").click(function() {
$(".btn-time").css('background', 'inherit');
$(this).css("background", "#DF73AF");
});
});
Here's a JSFiddle for the solution.
I have a boostrap toggle with the code below. It is visually working right
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="showBuildQuantity" autocomplete="off" checked>Build Quantity
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="showNumberOfScreens" autocomplete="off" onclick="showBuildQuantity()">Number of Screens
</label>
</div>
Below it I have some code to handle click events:
$(document).ready(function () {
$('#showBuildQuantity').on('click', function () {
<code here>
});
$('#showNumberOfScreens').on('click', function () {
<code here>
});
});
The issue I am having is that the click event's are never run when I click the toggle buttons.
I have other buttons on the same page using the same kind of jQuery click event and they do not have an issue.
After some research I found I need to use change instead of click. So the code should look like this:
$('#showBuildQuantity').on('change', function () {
if (myChart != null) {
myChart.destroy();
}
setChart(getBuildQuantityData);
});
$('#showNumberOfScreens').on('change', function () {
if (myChart != null) {
myChart.destroy();
}
setChart(getNumScreensData);
});
I'm having trouble getting the correct value from a segmented control I made with the radio button component of button.js in Twitter Bootstrap 3. When I bind a click event to the segmented control that runs $.serialize() on the parent form, it return the unchecked value of the radio button along with all the other correct values from the other inputs.
I suspect it might be related to the fact that I can't bind this event directly to the segmented control's input. When I tried to bind the event directly to the input I didn't get a response back, so I bound it to the label.
Here's an example of the problem in a fiddle: https://jsfiddle.net/stevekas/9w94pL4o/
<form id="form">
<div id="radios">
<div class="radio">
<label class="major-category">
<input facet="exclusive" type="radio" name="hipsum" value="hashtag" />hashtag</label>
</div>
<div class="radio">
<label class="major-category">
<input facet="exclusive" type="radio" name="hipsum" value="farm-to-table" />farm-to-table</label>
</div>
<div class="radio">
<label class="major-category">
<input facet="exclusive" type="radio" name="hipsum" value="gastropub" />gastropub</label>
</div>
</div>
<!--/ #radios -->
<div id="segmented-control" class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="segmented-control" id="roof" value="roof" autocomplete="off" checked />roof</label>
<label class="btn btn-default">
<input type="radio" name="segmented-control" id="party" value="party" autocomplete="off" />party</label>
</div>
<!--/ #segmented-control -->
</form>
<script>
$('.radio input').on('click', function () {
var data = $('#form').serialize();
});
$('#segmented-control label').on('click', function () {
var data = $('#form').serialize();
});
</script>
It probably happens because the click for the label is processed before the click for the input (the label is higher in the DOM tree).
You can force debug to be called after all the events have been processed using setTimeout() without any delay, like this:
$('#segmented-control label').on('click', function () {
setTimeout(function() {
debug();
}, 0);
});
This works because setTimeout() enqueues a new event, which will be run after all the current pending ones.
I need help for this issue.
I have a list of file and in each one a checkbox input. So i need to check one of that checkboxes and when click on "Insert" button, get the attribute value and insert it to that text input.
I appreciate your help.
here is my html code link:
http://jsfiddle.net/Qd3n5/4/
<div class="download_list">
<div>
<p class="name"> samle-image.gif
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="download_list">
<div>
<p class="name"> favicon.ico
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="download_list">
<div>
<p class="name"> freedown.jpg
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="fileupload">
<button type="button" id="Inser_btn" class="btn btn-primary Inser_btn"> <i class="UpIcon icon-remove"></i>
<span>Insert</span>
</button>
</div>
<div class="test">
<input type="text" name="banners_image_local" value="some-text.png" size="51" maxlength="64">
</div>
You can try this :
$(function(){
$('#Inser_btn').click(function(){
var title='';
$('input[name="delete"]:checked').each(function(){
title+=$(this).closest('.size-text').prev().find('a').attr('title');
});
$('input[name="banners_image_local"]').val(title);
});
});
Demo
Use this piece of Code
$("#Inser_btn").click(function(){
var val = $(".toggle:checked").parent().siblings().eq(0).find("p a").text();
$(".test input").val(val);
});
JSFIDDLE
By doing so:
$(document).ready(function(){
$('#Inser_btn').click(function(){
$('.download_list').each(function(){
var checked = $(this).find('.toggle');
if(checked.is(':checked')){
$('input[name="banners_image_local"]').val($(this).find('a').html());
return false;
}
});
});
});
Here is a demo Fiddle
here is your code , have updated your JSFiddle
used jQuery for doing this click here
$(function(){
$("button").on('click', function(){
var checked = $("input[type='checkbox']:checked");
if(checked.length >0)
{
var value = checked.val();
$("input[name='banners_image_local']").val(value);
}
});
});
I am not sure whether this code works for you. Give it a try. (untested code)
$('#Inser_btn').on('click', function () {
$('input[name="banners_image_local"]').val('');
var ckText = $('input[name="delete"]:checked').val();
var textBox = $('input[name="banners_image_local"]').val();
textBox = textBox + " " + ckText;
$('input[name="banners_image_local"]').val(textBox);
});
If you want to get the checked checkboxes value in the input field this should do with jQuery:
$("#Inser_btn").click(function(){
$("#banners_image_local").val("");
$('input[name="delete"]:checked').each(function() {
$("#banners_image_local").val($("#banners_image_local").val() + ($(this).attr('value')));
});
});
Also set the input text to id="banners_image_local"
Best.
Try this:
$('#Inser_btn').click(function () {
$('input[name=banners_image_local]').val($('.toggle:checked').parent().prev().find('.File_Name').attr('title'));
});
Working Fiddle
Having a class name to input text would be better.