Input radio bottom width jquery and hiide show div - html

I am trying to use jquery following the documentation but don't work pkease help me
I would that when I click on a specific radio value it display the div relationated
<script>
$(document).ready(function(){
$('input:radio[name=settore]:checked').change(function() {
if($("input[name='settore']").val() == '1');
$("div#pos-animatore").show();
if($("input[name='settore']").val() == '2');
$("div#post-risto").show();
});
});
</script>
<body>
<div>
<input type="radio" name="settore" value="!"><label for"animazione"> Animazione</label>
<input type="radio" name="settore" value="2"><label for"lavoro-an">Ristorante</label>
<input type="radio" name="settore" value="3"><label for"lavoro-an">Hotel</label>
</div>
<p></p>
<div id="pos-animatore" style="display: none;">
contenuto
</div>
<div id="pos-risto" style="display: none;">
contenuto2 </div>
<div id="pos-hotel" style="display: none;">
contenuto3
</div>
</body>

There are a few errors in your code, I'm afraid.
Some incorrect jQuery selectors (notably :checked), a mistyped value (! instead of 1) and a misspelt ID attribute.
Your working code (with comments) is:
//When the DOM document is ready... execute the following...
$(document).ready(function(){
// Select all INPUT elements with name="settore" and bind to the change event
$('input[name=settore]').change(function() {
// Hide all the divs initially, as I'm assuming you only want to display the one relevant one
$("div#pos-animatore,div#pos-risto,div#pos-hotel").hide();
// If the value of the CHANGED (this) element is 1... etc
if($(this).val() == '1'){
$("div#pos-animatore").show();
} else if($(this).val() == '2'){
$("div#pos-risto").show();
} else if($(this).val() == '3'){
$("div#pos-hotel").show();
}
});
});
<div>
<input type="radio" name="settore" value="1" id="animazione"><label for="animazione"> Animazione</label>
<input type="radio" name="settore" value="2" id="lavoro-an1"><label for="lavoro-an1">Ristorante</label>
<input type="radio" name="settore" value="3" id="lavoro-an2"><label for="lavoro-an2">Hotel</label>
</div>
<p></p>
<div id="pos-animatore" style="display: none;">
contenuto
</div>
<div id="pos-risto" style="display: none;">
contenuto2
</div>
<div id="pos-hotel" style="display: none;">
contenuto3
</div>

Related

how to fix jQuery 'previous' button

The code below shows a multi step form, the second page displays two buttons next and previous and for some reason the previous button doesn't work. I tried playing with code a lot but I couldn't figure it out. Please help.
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Details</h3>
<div class="inputlabel">
<label>Exchange</label>
</div>
<input type="text" placeholder="Exchange..">
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Title</h3>
<div class="inputlabel">
<label>Balance</label>
</div>
<input type="text" placeholder="Password" readonly>
<div class="btnpre" onclick="prvbtn()" id="btnprevious">Previous</div>
<input class="submit button" type="submit" value="Finish">
</fieldset>
<fieldset class="section">
<i class="fas fa-check-circle fa-7x"></i>
<h2>Saved</h2>
<p>Your Data has been saved</p>
<div class="button" id="button2">Close</div>
</fieldset>
</form>
This is the jQuery script
<script>
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
function prvbtn(){
if(currentSectionIndex === 1){
currentSectionIndex = 0;
}
if(currentSectionIndex === 2){
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
</script>
Consider the following example.
$(function() {
// Define a Global Index
var sectionIndex = 0;
$(".form-wrapper .button").click(function() {
// Examine the button and determine which button was clicked
if ($(this).hasClass("next")) {
// Use the current Index and them increment it
$(".section").eq(sectionIndex++).toggleClass("is-active");
$(".section").eq(sectionIndex).toggleClass("is-active");
} else {
// Use the current Index and them decrement it
$(".section").eq(sectionIndex--).toggleClass("is-active");
$(".section").eq(sectionIndex).toggleClass("is-active");
}
});
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
});
.section {
display: none;
}
.section.is-active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Details</h3>
<div class="inputlabel">
<label>Exchange</label>
</div>
<input type="text" placeholder="Exchange..">
<div class="next button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Title</h3>
<div class="inputlabel">
<label>Balance</label>
</div>
<input type="text" placeholder="Password" readonly>
<div class="previous button" id="btnprevious">Previous</div>
<input class="submit button" type="submit" value="Finish">
</fieldset>
<fieldset class="section">
<i class="fas fa-check-circle fa-7x"></i>
<h2>Saved</h2>
<p>Your Data has been saved</p>
<div class="button" id="button2">Close</div>
</fieldset>
</form>
This assigns one callback to all button elements. With an if statement, we can easily determine the direction.

Show and hide html elements depending on radio selection

Yes, there are many posts that are kind of similar but not like mine I guess. After struggling for a while I'm not able to come up with a solution. I need help!
I have 4 different criteria:
Resident/Single, Resident/Family, Non-Resident/Single, Non-Resident/Family
For example: if Resident and Single are checked then show that div. The rest goes the same way.
<fieldset>
<ol id="membership">
<li>
<input type="radio" name="resident" value="Resident" checked="checked" /> Resident
<input type="radio" name="resident" value="Non-Resident" /> Non-Resident
</li>
<li>
<input type="radio" name="single" value="Single" checked="checked" /> Single
<input type="radio" name="single" value="Family" /> Family
</li>
</ol>
<div style="display: none;">
<div>Resident/Single</div>
<div>Resident/Family</div>
<div>Non-Resident/Single</div>
<div>Non-Resident/Family</div>
</div>
</fieldset>
This is as far as I was able to go.
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
$('div').show();
} else {
$('div').hide();
}
});
});
This is my repl: https://repl.it/#labanino/Show-based-on-selection#script.js
Instead of using ifs statement to show/hide divs you can simply get the checked values of radio button then just loop through your divs and compare if the .text() is equal to radio values show that divs only .
Demo Code :
$(document).ready(function() {
$(".category div:eq(0)").show() //show 1st div
$('input').change(function() {
//get radio values
var value = $("input[name='resident']:checked").val();
var value1 = $("input[name='single']:checked").val();
console.log(value + "/" + value1)
$(".category div").hide(); //hide all divs
var divss = value + "/" + value1;
//loop through divs
$(".category div").each(function() {
if ($(this).text() === divss) {
$(this).show() //show that div
}
})
});
})
.category > div {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<ol id="membership">
<li>
<input type="radio" name="resident" value="Resident" checked="checked" /> Resident
<input type="radio" name="resident" value="Non-Resident" /> Non-Resident
</li>
<li>
<input type="radio" name="single" value="Single" checked="checked" /> Single
<input type="radio" name="single" value="Family" /> Family
</li>
</ol>
<div class="category">
<div>Resident/Single</div>
<div>Resident/Family</div>
<div>Non-Resident/Single</div>
<div>Non-Resident/Family</div>
</div>
</fieldset>
Try selecting the divs by name or value and show them while hiding the others.
Check this repl -
https://repl.it/#DavidThomas12/Show-based-on-selection
I believe it fits your use case.

Toggle between two different tag contents using checkbox

HTML
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics">
</body>
Please help me with jquery code. By default only pre tag contents are displayed. When checkbox is checked I need to display only the contents of div tag. When box is unchecked, I want the reverse to be happened i.e. only show contents of pre tag.
So,continuing the comment earlier, here's the code that you may want to use.
$(function(){
var chord = $(".chord");
var lyric = $(".lyric");
var event = $("#event");
event.on("change", function(){
chord.toggle();
lyric.toggle();
});
})
by leveraging the data attributes in your HTML, a better way to do it is to update pre content based on checkbox selection
$(function(){
var selection = $(".selection");
var event = $("#event");
event.on("change", function(){
var content = $(this).is(":checked") ? $(this).data("on") : $(this).data("off");
selection.text(content);
});
})
<script
src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<body class="music">
<pre class="selection">Chords</pre>
<input
class="c"
id="event"
type="checkbox"
checked data-toggle="toggle"
data-size="small"
width="5px"
data-onstyle="info"
data-offstyle="info"
data-on="Chords"
data-off="Lyrics" />
</body>
HTML:
<div id="content1">Content 1</div>
<div id="content2">Content 2</div>
<input type="checkbox" checked id="checkbox">
CSS:
#content2 {
display: none;
}
JS (using JQuery):
$(function() {
$('#checkbox').on('click', function() {
if (!$(this).is(':checked')) {
$('#content1').hide();
$('#content2').show();
} else {
$('#content1').show();
$('#content2').hide();
}
});
});
If you have any questions, ask.
you just need to toggle the displays. I replaced the pre tag with a div for spacing
function jsdisplay(){
$(".chord").eq(0).toggle();
$(".lyric").eq(0).toggle();
}
pre{
margin:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics" onchange="jsdisplay()">
</body>

How would I add range slider mockups in bootstrap 4?

I have been playing with Bootstrap 4 for a bit. I have created a range form with a slider. I would like to add mockups (little lines or numbers on top of the slider to know what you are selecting) or even a number left or right of the slider, but I am not sure how. Here is the code:
<div class="form-group">
<label for="range">How many flags would you like?</label>
<input class="form-control-range" type="range" name="flag_number" id="range" list="range">`
</div>
I have tried using the datalist tag, but it doesn´t seem to work... How would one do it?
Bootstrap 4 real input type range will be like this
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="ex6" value="0">
and add some text for the display the value with this code :
<span>Current Slider Value: <span id="ex6Val"></span></span>
finally add the javascript function (use jQuery)
$(document).ready(function(){
$('#ex6').on('change', function(e){
var id = e.target.value;
document.getElementById("ex6Val").innerHTML = id;
});
$('#ex6').change();
});
Check the snippet
$('#ex6').on('change', function(e) {
var id = e.target.value;
document.getElementById("ex6Val").innerHTML = id;
});
$('#ex6').change();
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="form-group">
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="ex6" value="0">
<span>Current Slider Value: <span id="ex6Val"></span></span>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
// With JQuery
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
// Without JQuery
var slider = new Slider("#ex6");
slider.on("slide", function(sliderValue) {
document.getElementById("ex6SliderVal").textContent = sliderValue;
});

knockout does not change the radio button view

I have a working panel with radio buttons a label and a textfield. Everything works good except if i click on radio buttons explicitly the radio button does not change the radio button view.
Here the plnkr link to it:
https://embed.plnkr.co/auD0sMEL88EsuaQqvt7E/
As #user3297291 mention that the checked and click binding get in confict.
Add this binding:
ko.bindingHandlers.stopBubble = {
init: function(element) {
ko.utils.registerEventHandler(element, "click", function(event) {
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
});
}
};
You have to add in every radio element this binding like this:
<input data-bind="checked: discountValue, stopBubble: true" id="discountArbitrary" name="discount" type="radio" value="arbitrary" />
I created one jsfiddle that works as you expected.
https://jsfiddle.net/astrapi69/s3r60uLu/
I guess the click binding is conflicting with checked binding.
You can use computeds to calculate enabled/focused flags.
You can check modified code (I've omitted focused flags in favor of simplicity):
// Code goes here
var DiscountViewModel = function() {
var self = this;
self.arbitrary = ko.observable();
self.percent = ko.observable();
self.permanent = ko.observable();
self.discountValue = ko.observable('arbitrary');
self.enableArbitrary = ko.computed(() => self.discountValue() === 'arbitrary');
self.enablePercent = ko.computed(() => self.discountValue() === 'percent');
self.enablePermanent = ko.computed(() => self.discountValue() === 'permanent');
self.onArbitrary = onArbitrary;
self.onPercent = onPercent;
self.onPermanent = onPermanent;
function onArbitrary() {
self.discountValue('arbitrary');
}
function onPercent() {
self.discountValue('percent');
}
function onPermanent() {
self.discountValue('permanent');
}
};
var vm = new DiscountViewModel();
ko.applyBindings(vm);
/* Styles go here */
.header-line {
margin-bottom:20px;
margin-top:20px;
margin-left:20px;
}
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.js"></script>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js" type="text/javascript" defer="defer"></script>
<h1 class="header-line">
KO binding hasFocus over boolean values
</h1>
<div class="form-group row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
<input name="discount" type="radio" value="arbitrary" data-bind="checked: discountValue" />
</div>
<div class="col-xs-4">
<label for="arbitrary" data-bind="click: onArbitrary">Discount arbitrary</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="arbitrary" placeholder="Enter arbitrary discount" data-bind="enable: enableArbitrary, value: arbitrary, hasFocus: enableArbitrary">
</div>
</div>
<div class="form-group row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
<input name="discount" type="radio" value="percent" data-bind="checked: discountValue" />
</div>
<div class="col-xs-4">
<label for="percent" data-bind="click: onPercent">Discount percent</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="percent" placeholder="Enter percent of discount" data-bind="enable: enablePercent, value: percent, hasFocus: enablePercent">
</div>
</div>
<div class="form-group row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
<input name="discount" type="radio" value="permanent" data-bind="checked: discountValue" />
</div>
<div class="col-xs-4">
<label for="permanent" data-bind="click: onPermanent">Discount permanent</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="permanent" placeholder="Enter permanent discount" data-bind="enable: enablePermanent, value: permanent, hasFocus: enablePermanent">
</div>
</div>
The problem is that by clicking the radio button, two things happen:
The checked binding does its thing
The event bubbles up to the parent element, and the click binding also does its thing.
You'll have to make sure clicking the input element stops the click binding from firing.
There's a great answer by R.P. Niemeyer here: https://stackoverflow.com/a/14321399/3297291