I am trying to make an interface element where there are three buttons.
Only one or none buttons can be selected. I.e. the buttons are faded out to start with, when the user clicks one it lights up, the other two remain faded.
If the user then clicks another button, any other buttons get faded out and the one the user clicked on highlights. This is not a problem.
The problem comes when I am trying to get a currently highlighted button to go back to a faded state if the user clicks on it, so you are left with no highlighted buttons.
This is where I have got to:
$('.gradeButtons button').click(function() {
if (!$(this).siblings().hasClass('quoteGrading'))
{
$('.gradeButtons button').addClass('quoteGrading')
}
if (!$(this).hasClass('quoteGrading'))
{
$(this).addClass('quoteGrading')
} else {
$(this).removeClass('quoteGrading')
}
})
My HTML:
<div class="control-group gradeButtons">
<button type="button" class="btn btn-danger quoteGrading">H</button>
<button type="button" class="btn btn-warning quoteGrading">W</button>
<button type="button" class="btn btn-info quoteGrading">C</button>
</div>
'quoteGrading' provides the faded out/inactive effect.
How can I make it work properly where only one or none buttons can be highlighted (not have 'quoteGrading' class applied)?
Live Demo
$(function() {
$('.gradeButtons button').on("click",function() {
$(this).siblings().removeClass('quoteGrading');
$(this).toggleClass('quoteGrading');
$("input.inp").hide();
$("#"+this.id+"input").toggle($(this).hasClass("quoteGrading"));
});
});
using
<div class="control-group gradeButtons">
<button type="button" id="H" class="btn btn-danger">H</button>
<button type="button" id="W" class="btn btn-warning">W</button>
<button type="button" id="C" class="btn btn-info">C</button><br />
<input type="text" class="inp" placeholder="H - message" id="Hinput" /><br/>
<input type="text" class="inp" placeholder="W - message" id="Winput" /><br/>
<input type="text" class="inp" placeholder="C - message" id="Cinput" /><br/>
</div>
and
.quoteGrading { color:red }
.inp { display:none }
Related
I have four buttons and three of them have a class called "multiple". the reason for this is they would be worked on by a jquery function.
<input type="submit" id="add" value="Add" <?php set_button_status(1,'is_add') ?>><br/>
<input type="submit" class="multiple" id="publish" name="publish" value="publish"><br/>
<input type="submit" class="multiple" id="unpublish" name="unpublish" value="unpublish"><br/>
<input type="submit" id="trash" class="multiple" name="trash" value="trash" <?php set_button_status(1,'is_delete') ?>><br/>
The set_button_status(1,'is_add') and set_button_status(1,'is_delete') function will return the string "disabled" to disable the add and thrash buttons respectively if the condition is true. However, only the add button is etting disabled.
When I remove the class "multiple" to the other buttons "publish" and "unpublish", the "trash" can now be disabled.
Why can't I disable a button if it has other buttons with the same class? How can I fix this?
I created a fiddle with your code, assuming both .php calls return 'disabled'. It renders both 'Add' and 'trash' buttons as disabled:
<input type="submit" id="add" value="Add" disabled><br/>
<input type="submit" class="multiple" id="publish" name="publish" value="publish"><br/>
<input type="submit" class="multiple" id="unpublish" name="unpublish" value="unpublish"><br/>
<input type="submit" id="trash" class="multiple" name="trash" value="trash" disabled><br/>
I have used the above code in my PC and everything is fine.(Without PHP)
First You put ;(semicolon) at the end of every PHP statement.
And /> instead of just > at the end of every input tag.
Let me know the results after that.
I would like to ask if anyone knows how do you change the color of an input that serves as a submit button, after the form submission. I use twitter bootstrap 3 and any approach would be welcomed. The simplest the better though. In my code I have a form filled with:
<input class="btn btn-default" onclick="document.getElementById('priceform').submit()" name="filter" type="submit" value="Action" style="width:45%;font-size: 12px">
<input class="btn btn-default" onclick="document.getElementById('priceform').submit()" name="filter" type="submit" value="Adventure" style="width:45%;font-size: 12px">
<input class="btn btn-default" onclick="document.getElementById('priceform').submit()" name="filter" type="submit" value="Family" style="width:45%;font-size: 12px">
and many more of the same kind for every game genre there is and they serve as a filter for the results on my product page. Everything works good and I tried to put some color on the button the user applied to filter their results but of course after the form submission the color remains the default. I tried JavaScript, I tried JQuery and still nothing. Thanks in advance.
try adding a id tag to the input. Then you can change the color of the background on the selected input.This is how..
function change(id){
document.getElementById(id).style.background = '#999';
}
To your input add
<input id="action" class="btn btn-default" onclick="document.getElementById('priceform').submit()" onmousedown="change(this.id)" name="filter" type="button" value="Action" style="width:45%;font-size: 12px">
<input id="adventure" class="btn btn-default" onclick="document.getElementById('priceform').submit()"onmousedown="change(this.id)" name="filter" type="button" value="Adventure" style="width:45%;font-size: 12px">
<input id="family" class="btn btn-default" onclick="document.getElementById('priceform').submit()"onmousedown="change(this.id)" name="filter" type="button" value="Family" style="width:45%;font-size: 12px">
Add an ID to the input, then add a function that changes the CSS.Access the function with onmousedown="change(this.id);
I used php super global $_SESSION[ ] to solve this problem. I stored into session the value of the input that was pressed every time and then I applied a style through echoing it.
if (isset($_SESSION['filter'])) {
$_GET['filter'] = $_SESSION['filter'];
$f = $_GET['filter'];
$filter = "AND type = '$f'"; //ignore this part
$bool = true; //and this
echo '<style>input[value="'.$f.'"] {
background-color: #428BCA;
color: white;
font-weight: bold;
}</style>';
}
I have one form on a page with no submit button:
<form id='voteForm' action='xyz' method='post'>
<fieldset>
<input type="hidden" id="task_id" value="{$feature_details['task_id']}" />
<input type="hidden" id="vote_id" value="{$vote['vote_id']}" />
<input type="hidden" id="vote_type" value="{$vote['vote_type']}" />
<input type="hidden" id="vote_rating" value="{$vote['vote_rating']}" />
<input id="btn-update-vote" class="btn btn-sm btn-primary" type='button' disabled="disabled" value="{L('SubmitVote')}">
</fieldset>
</form>
I cannot get jQuery to trap a click event on the 'SubmitVote' button
neither of these appear to work:
$('#btn_update_vote').click(function() {
console.log('Click: #btn_update_vote');
})
$('form#voteForm').on('click', '#btn_update_vote', function() {
console.log('Click: #btn_add_comment');
})
I do not understand what can cause this!
Any help appreciated!
BTW: I CAN set the disabled attribute on the button using jQuery and on 'documentReady' I log the button to the console:
[Log] [ (tracker, line 446)
<input id="btn-update-vote" class="btn btn-sm btn-primary" type="button" disabled="disabled" value="Cast Your Vote">
]
Your button attr disabled="disabled" make it unclickable, even inline onclick listen.
<input id="btn-update-vote"
$('#btn_update_vote').click( //...
You declared your id with dashes (-), not underscores (_), so you need
$('#btn-update-vote').click(
Also #Richer is correct
I want to show a Next button once my checkbox is checked. Below is my jquery code for the checkbox. Once the checkbox is checked the Next button should shows up and the Submit button should hide. If the checkbox is not checked, only the Submit button will be shown. I have created the code accordingly but i dont know why the program is not running as it should.
<input type="checkbox" name="checkrecc" ><label>Check this</label>
<script type="text/javascript">
$(document).ready(function() {
var $submit = $("#indrecc").hide(),
$cbs = $('input[name="checkrecc"]').click(function() {
$submit.toggle( $cbs.is(":checked") );
});
});
</script>
<br>
<input type="nextstep" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
<input type="submit" name="indsubmit" value="Submit" class="btn btn-info btn-block" style="margin-bottom: 5px;">
And the problem with your HTML is type="nextstep", there is no such input type. HTML assign default text type to it.
<input type="nextstep" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
//^ type="button"
Change it to :
<input type="button" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
You need to toggle submit button along with the next element.
This should work for you.
$(document).ready(function () {
var $submit = $("#indrecc").hide(),
$cbs = $('input[name="checkrecc"]').click(function () {
$submit.toggle($cbs.is(":checked"));
$('[name=indsubmit]').toggle(!$cbs.is(":checked"));
});
});
DEMO
I've the following situation:
I have a "next" step button:
<a href="/NL/checkout/selectshippingaddress?addressId=" class="customNextStep">
<input type="button" class="button-1 shipping-adress-next-step-button" value="Next" name="nextstep">
</a>
This buttons should be inactive in first place. It should only be clickable when a user clicks on a other button:
<input type="button" onclick="" class="button-1 select-shipping-address-button" data-itemid="197" value="Send to this address">
I hope someone can help me out with this issue.
You can use attr() and removeAttr() of jQuery
$("input[name='nextstep']").attr('disabled','disabled');
$('.button-1').on('click',function(e){
e.preventDefault();
$("input[name='nextstep']").removeAttr('disabled');
});
Fiddle example
use the following in your code:
<input type="button" id="bt1" value="button 1" />
<input type="button" id="bt2" value="button 2" disabled="disabled" />
now apply any logic you want, like
$(function(){
$("#bt1").click(function(){
$(this).attr("disabled", "disabled");
$("#bt2").removeAttr("disabled");
});
Make use of disabled attribute of button. Like,
<input type="button" onclick="document.getElementById('next_button').disabled=false;" class="button-1 select-shipping-address-button" data-itemid="197" value="Send to this address">
<input type="button" class="button-1 shipping-adress-next-step-button" value="Next" name="nextstep" disabled='true' id='next_button'>
working fiddle here
Use following :
jQuery('input[name=nextstep]').attr('disabled','disabled')
$('.select-shipping-address-button').on('click',function(e){
jQuery('input[name=nextstep]').removeAttr('disabled')
})
Here is the working demo
You can use disabled attribute to switch on and off a button.
//on document.ready, disable your second button
$(selector).prop("disabled", true);
// on the click on first button enable it again
$(selector_first_button).click(function() {
$(selector).prop("disabled", false);
});