How to toggle text with a button? - javascript

I want to replace the text not rated with 100% if you press the up arrow button or 0% if you press the down arrow button. I would like to accomplish this with either js or jQuery I just don't know how to go about it.
<div class="votesystem">
<input type="checkbox" class="votes" role="button">
<label for="voteup" onclick=""><span class="voteswitch"> <img src="images/voteup.png" data-value="up"/><br /><br /></span>
<p>Not rated</p>
<span class="voteswitch"><img src="images/votedown.png" data-value="down" /></span> </label>
</div>
UPDATE
Ok, I'm going to elaborate on the question to clear up confusion. I found some code that contains a similar effect of what I want, except it hides the text: Testing when I would like to replace the text testing with another word when clicking the checkbox.
Also I would like to make it a radio button instead of checklist so the text changes depending on the button selected. Thanks for your help so far.
<label>Chanage text</label>
<input type="checkbox" id="test">
<div id="content" class="hide">
<p>testing</p>
</div>
And the jquery
$(document).ready(function(){
$('.hide').hide();
$('#test').click(function(){
$('#content').toggle();
});
});

Try this,
Give your HTML an id or class (some kind of selector) then use jQuery/JavaScript to change your elements HTML based on your keyboard press.
You could also get it by it's <p> tag as Bardyl mentioned but that is a bad idea if you may have multiple <p> tags at some point.
<p id="foo">Not rated</p>
<script>
$("#foo").keypress(function(event) {
if (event.which == 38) {
$("#foo").html("100%");
} else if (event.which == 40) {
$("#foo").html("0%");
}
});
</script>

Related

Disable click in input in <a> element

I would like to have an input text inside a button like this:
<a onclick="reply_click();" class="btn btn-app btn-app-spinner">
<input type="text" disabled class="form-control small-input">
Set Budget
</a>
this is the result:
The problem is that when the user clicks on the input text, the reply_click() is triggered. I would it to be triggered ONLY when he clicks on the a element (Set Bid).
How can I do it?
See jsfiddle
EDITED
As you can see I want to make it look similar to the buttons in the design as you can see in the JSfiddle
Putting an input inside an a element is invalid HTML. From the spec for a:
Content model:
Transparent, but there must be no interactive content descendant.
input is interactive content, so it cannot appear within an a. Browsers may well choose to rewrite your HTML to put the input after the a to try to make it valid.
So the solution here is not to put an input inside an a. Not only because HTML doesn't allow it (you could work around that with a click handler on a div), but because it's extremely unusual UX, which will be unfamiliar and likely uncomfortable to users.
Having said that, if a browser doesn't relocate the input (or if you replace the a with a div with click handler), you can stop the event from propagating to the a by hooking click on the input and using stopPropgation:
$("a input").on("click", function(e) {
e.stopPropagation();
}):
I'm not recommending it, though.
In theory you can achieve the effect you're looking for with something like this
$(".setBid").click(function(e){
var $input = $(this).find("input[type='text']");
if ($input.is(e.target)
{
//do action
}
})
here's the html
<a class="btn btn-app btn-app-spinner setBid">
<input type="text" disabled class="form-control small-input">
Set Budget
</a>
however, as #TJ said this is NOT valid HTML
This is invalid html! don't do that!
If you must, then just stop propagation by handling a click on the input:
function reply_click(e){
alert("clicked!");
}
function input_click(e)
{
e.stopPropagation();
return false;
}
<a onclick="reply_click();" class="btn btn-app btn-app-spinner">
<input type="text" class="form-control small-input" onclick="input_click(event)">
Set Budget
</a>
This snippet is not cross-browser safe (tested in chrome). Use jQuery, or handle the way other browsers deal with events.
you can do this:
<div class="btn btn-app btn-app-spinner">
<input type="text" class="form-control small-input">
<a onclick="reply_click();" >
Set Budget
</a>
</div>
In your fiddle replace your html with the html that I provide on the answer and you will have what you want.
The trick is that adding the same classes that you have in your a to another element they are going to look like similar.
Then if you want your action fired when user clicks on the "set budget", wrap it with the <a>
You can create a div and use the click on that div. That way you have valid HTML.
function bid(){
alert('bid');
}
function stop(e){
e.stopPropagation();
}
div {
width:200px;
height:60px;
background-color:#f93;
text-align:center;
padding-top:20px;
}
<div onclick="bid()">
<input type='text' onclick="stop(event)">
<p>bid</p>
</div>
You should not wrap the input element inside a link.
Instead, the input needs a label (for accessibility, especially screen reader users) and something that functions as a button (a real button element in the code below). Since you don't have a proper label element, I used WAI-ARIA described-by to link the input field with the button.
<form>
<input type="text" class="form-control small-input"
aria-describedby="ses-budget" />
<br />
<button type="submit" onclick="reply_click();"
class="btn btn-app btn-app-spinner" id="set-budget">Set budget</button>
</form>

How to expand/collapse list of information in a webpage using a link

I am new to web programming and wants to create a link that will expand and collapse a list of information. I was able to do this using radio buttons as shown in the following example bellow.
Instead of using a radio button or a regular button, can you please tell me how can I achieve this same feature using a clickable link. Ex: + More
Please show me with an example if possible.
<script type="text/javascript">
function OnChangeCheckbox1 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'none';
document.getElementById(checkbox.id).style.display = 'none';
}
}
function OnChangeCheckbox2 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'block';
document.getElementById(checkbox.value).style.display = 'block';
}
}
</script>
* Some Information about X<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid1" value="lessid1" onclick="OnChangeCheckbox2 (this)" />+ More</label>
<span style="display:none" id="moreid1" ><label for="id_advisor">First some text<br>First more text</label></span>
<label style="display:none" class="radio" id="lessid1"><input id="lessid1" type="radio" name="moreid1" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br>
* Some Information about Y<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid2" value="lessid2" onclick="OnChangeCheckbox2 (this)" > + More</label>
<span style="display:none" id="moreid2" ><label for="id_advisor">Second Some text<br>Second more text</label></span>
<label style="display:none" class="radio" id="lessid2"><input id="lessid2" type="radio" name="moreid2" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br><br>
Aditional Information goes here
Working Code: https://jsfiddle.net/hey4769/owpat8zf/
While it's an idea to use value/name/id attributes, please be aware this does not work for all elements. Also name attribute (at least for some elements) is deprecated in html5.
So I've chosen to use data attributes. And, as I'm spoiled with using jQuery, I decided to test some things in javascript, and included 2 different functions, one using this and another passing the event.
For selecting the elements to show/hide I've used document.querySelector, which works like a css selector.
I'm also changing the text on the a element after clicking it. Last I've added some console logs. Hope it's useful!
https://jsfiddle.net/hamu21gj/
you can you href to add your javascript like this:
href="javascript:MyFunction"
I changed your code a little bit just to make an example.
https://jsfiddle.net/owpat8zf/3/

If certain radio buttons checked, display div else display different div?

:) So I'm trying to create a user questionaire type form, it doesnt have to send to anyone just display a div once certain radio buttons are checked and if them certain radio buttons arent checked then display a different div, but also when the webpage opens/refreshes none of the div's I want to display to be displayed (if that makes sense?). I found some code on here to try but it didnt work for me, I'm a noob with JS & Jquery but was hoping anyone could shed some light on my problem. please find my code below.
Jquery?
if($('input[value=yes1]:checked,
input[value=yes2]:checked,
input[value=yes3]:checked,
input[value=yes4]:checked').length == 4){
$("#correct").show();
}else{
$("#correct").hide();
HTML
<div class="row">
<div class="left">
<div class="right answer">
<div class="leftradio">
<input type="radio" id="yes1" value="yes1" name="iCheck1">
<label>Yes</label>
</input>
</div>
<div class="rightradio">
<input type="radio" id="no1" name="iCheck1">
<label>No</label>
</input>
</div>
</div>
</div>
<div class="right">
<div class="right answer">
<div class="leftradio">
<input type="radio" id="yes2" value="yes2" name="iCheck2">
<label>Yes</label>
</input>
</div>
<div class="rightradio">
<input type="radio" id="no2" name="iCheck2">
<label>No</label>
</input>
</div>
</div>
</div>
Yes
No
Yes
No
CSS
#correct{width:100%; height:50px; background:green; display:none;}
#incorrect{width:100%; height:50px; background:red; display:none;}
I think this is what you're looking for. I had to change the number of "correct" answers to two because that's all the html you have.
JS:
$( "input" ).on( "click", function() {
if($('input[value=yes1]:checked, input[value=yes2]:checked').length === 2){
$("#correct").show();
}else{
$("#correct").hide();
}
});
Working JS Fiddle: http://jsfiddle.net/akj84vrq/12/
A little something like this would probably get you what you want.
http://jsfiddle.net/uu512erm/
Listen for change event on the radio inputs by $('input:radio').change(function(){}
and then just add the logic inside.
I'm not sure that this can be accomplished via CSS.
Now, you are checking against some values/elements that don't exist in your code (ie input[value=yes3]:checked, you don't have input with that value, check it for yourself).
I don't understand what exactly you want to accomplish, but I will still try to help and since you're new let's keep it very basic:
if ($('input[value=yes1]').is(':checked') && $('input[value=yes2]').is(':checked')) {
// this will fire only if input with values yes1 and yes2 is checked
$('div_to_show').show(); // put your own selectors here
$('div_to_hide').hide(); // put your own selectors here
}
if ($('input[value=no1]').is(':checked') && $('input[value=no2]').is(':checked')) {
// this will fire only if input with values no1 and no2 is checked
$('some_other_div_to_show').show(); // put your own selectors here
$('some_other_div_to_hide').hide(); // put your own selectors here
}
if ($('input[value=yes1]').is(':checked') && $('input[value=no1]').is(':checked')) {
# this will fire only if both input with values yes1 and no1 is checked
$('some_other_div_to_show').show(); # put your own selectors here
$('some_other_div_to_hide').hide(); # put your own selectors here
}
# and so on... just type in your conditions and that's it.
If you need some other cases, just add them using this pattern or construct one complex else if statement with all your scenarios.

Focus on first form element inside span when span is clicked

I can't figure out how to focus on the first form element inside a span when the span is clicked. I've included my code, I had also messed around with 'closest' but had no luck.
<form>
<span>
<input id="content" type="text">
<label for="content">Content</label>
</span>
</form>
$('span').click(function() {
$(this).find('input').focus()
});
Any help is appreciated.
Before answering your actual question: there is a way to achieve what you're trying to do which doesn't even require any JavaScript.
If you wrap your input field in the label tag, clicking the label will automatically give focus to the field.
<form>
<label>
Content
<input id="content" name="content" type="text">
</label>
</form>
If you insist on doing it through JavaScript/jQuery, you'll have to make sure you only attach the click handler after the DOM is ready:
$(document).ready(function () { // Or equivalent: $(function() { ... });
$('span').click(function () {
$(this).find('input:first').focus(); // :first makes sure only the first input found is selected
});
});
why not use the label to trigger this functionality
the span will only cover the label and input so if i understand correctly you want the focus to be set on the input even when the user clicks the lable which can be achieved like so:
<form>
<span>
<input name="content" id="content" type="text">
<label for="content">Content</label>
</span>
</form>
But if you are trying to do something else then:
$(document).ready(function(){
$('span').click(function() {
$(this).find('input:first').focus();
});
});
Make sure your js is called after the DOM is loaded
<script type="text/javascript">
$(function(){
$('span').click(function() {
$(this).find('input').focus()
});
});
</script>

jquery grouped buttons change appearance after click

i made 3 buttons in jquery mobile lets say (coffee, cola, water) grouped horizontally, I want them to behave like when I click one of them (coffee) the clicked button will change its appearance to clicked state and I wont be able to click it again (take note that when I disable a button it changes its color to gray also). then when i click cola, coffee returns to normal and cola turns to clicked state.
<div id="ui-26">
<div class="ui-segment" data-role="controlgroup" data-type="horizontal" >
<input type="button" name="segment-coffee" id="segment-coffee" class="custom" value="coffee" />
<input type="button" name="segment-cola" id="segment-cola" class="custom" value="cola" />
<input type="button" name="segment-water" id="segment-water" class="custom" value="water" />
</div>
</div>
i tried using the radio button but i cant assign a background image on it so i decided to use grouped buttons. how should this be done on jquery? thanks in advance!
I think http://jsfiddle.net/rcNfJ/2/ is what you are looking for? I just used attr("disabled") but you can do whatever you want to them (change their css, manipulate data, etc).
http://jqueryui.com/demos/button/#radio
I think this is what you are searching for :)
You can use icons option to set icons for them.
EDIT:
Here is alternative solution then :)
$(function() {
$('#ui-26 > .ui-segment > input').click(function(){
if($(this).is(':disabled')) return;
$('#ui-26 > .ui-segment > input').prop('disabled',false);
$(this).prop('disabled',true);
});
});

Categories

Resources