I have included the form in my website with sliders using the range input html form. Though the range do not show the actual value by default I found a script to show the display for example "bedrooms" and "bathrooms".
P.S. When I submit the form using php the values are different. Which is alright.
Hoping that the display shows individual "range-value" for each bedroom and bathroom sections rather than showing same values while the sliders are moving. Perhaps giving a separate variable for both of them can lead to individual output? How can i do this? Can anyone help with it?
var range = $('.input-range'),
value = $('.range-value');
value.html(range.attr('value'));
range.on('input', function() {
value.html(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form id="form" name="form" method="post" target="formfill" action="form-to-email.php">
<div class="field">
<label for="Bedrooms">Bedrooms</label>
</div>
<div class="range-slider">
<input class="input-range" type="range" value="1" min="0" max="10">
</div>
<span class="range-value"></span>
<div class="field">
<label for="bathrooms">Bathrooms</label>
</div>
<div class="range-slider">
<input class="input-range" type="range" value="1" min="0" max="10">
</div>
<span class="range-value"></span>
</form>
The problem is here:
range.on('input', function() {
// this sets the html content of all elements with class range-value
// to the value of the slider that is being moved
value.html(this.value);
});
The fix that I am showing simply moves the span tag into the div, this is just one way of knowing what .range-value belongs to witch slider.
Also since value="1" is hard coded into the range sliders, you can also just have the span tags start with the same value <span class="range-value">1</span>
$('.input-range').on('input', function() {
$(this).next('.range-value').html(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="range-slider">
<input class="input-range" type="range" value="1" min="0" max="10">
<span class="range-value">1</span>
</div>
<div class="range-slider">
<input class="input-range" type="range" value="1" min="0" max="10">
<span class="range-value">1</span>
</div>
I have removed the CSS and most of the HTML from the answer as it is not relevant to the problem, but to see it working in the full form here is a demo
Related
I have two divs
<div class="maca">
<input type="hidden" value="1">
<div onclick="removeInput(nearest input type hidden)">Remove</div>
</div>
<div class="maca">
<input type="hidden" value="1">
<div onclick="removeInput(nearest input type hidden)">Remove</div>
</div>
I want to send as a parameter the value of nearest input type hidden of that div that we are clicking on
Im not 100% sure what you mean with nearest but with this you get the input hidden inside the div. By the way you could also put the element.parentNode.querySelector into the onclick but personally i like it more to split HTML and JS.
function removeInput(element){
let value = element.parentNode.querySelector("input[type='hidden']").value;
console.log(value);
}
<div class="maca">
<input type="hidden" value="1">
<div onclick="removeInput(this)">Remove</div>
</div>
<div class="maca">
<input type="hidden" value="5">
<div onclick="removeInput(this)">Remove</div>
</div>
You can send the event as a parameter to a javascript function and then find the input via the parentNode. This isn't a literal interpretation of your question since faithfully the "nearest" element is rather complex and probably not what you're looking for.
function removeInput(e) {
const nearestInput = e.target.parentNode.querySelector("input[type='hidden']");
console.log(nearestInput);
}
<div class="maca">
<input type="hidden" value="1" />
<div onclick="javascript:removeInput(event)">Remove</div>
</div>
<div class="maca">
<input type="hidden" value="1" />
<div onclick="javascript:removeInput(event)">Remove</div>
</div>
You should not use inline event listeners, which are widely considered bad practice.
Instead, use addEventListener to add the click listeners, and find the input (given your markup structure is fix like you've shown) using previousElementSibling:
for (const remover of document.querySelectorAll('.remove-input')) {
remover.addEventListener('click', () => remover.previousElementSibling.remove(), { once: true });
}
<div class="maca">
<input type="hidden" value="1" />
<div class="remove-input">Remove</div>
</div>
<div class="maca">
<input type="hidden" value="1" />
<div class="remove-input">Remove</div>
</div>
I have to do a function in a "game of life" that will change a cell to living or dead on click depending on it's previous state. Seems pretty easy and it probably is but sometimes you're stuck and for whatever reason you can't find that easy solution.
The main problem is that I can't access only one clicked img and click() function only works with area div (https://imgur.com/a/k7iY7OV).
Obviously I've searched the internet and tried many different versions of code but nothing is working.
$(document).ready(function(){
simulatorInit();
$("#area").click(function()
{
alert("dasd");
});
});
That is what I have now and it alerts when I click on the "board" but I dunno how to access specific "clicked" img.
Tried something like this but it doesn't work either:
$(this).click(function()
{
if($("div").attr('src','dead.gif')) $(this).attr('src','alive.gif')
});
});
Edit:: html code:
<div id="areaWrapper">
<div id="area" class="ui-corner-all">
Aby rozpocząć wygeneruj plansze
</div>
</div>
<!-- Okienko panelu kontrolnego -->
<div id="controls">
<label for="area-x">Szerokość</label>
<input id="area-x" value="10" type="number" min="3" /><br/>
<label for="area-y">Wysokość</label>
<input id="area-y" value="10" type="number" min="3" /><br/>
<button id="generate-area-button">Generuj plansze</button>
<hr/>
<label for="live-prob">Szansa na losowe życie</label>
<input id="live-prob" value="0.4" type="number" min="0.01" max="1" step="0.01" /><br/>
<button id="random-area-button">Losuj</button>
<hr/>
<label for="speed">Szybkość w ms</label>
<input id="speed" value="600" type="number" min="40" step="10" /><br/>
</div>
<!-- Pasek narzędziowy -->
<div id="bar" class="ui-widget ui-widget-content ui-corner-all">
Krok:<span id="step">0</span>
<button id="play-pause-button">Zatrzymaj/Wznów</button>
<button id="show-panel-button">Pokaż panel</button>
</div>
and generating cells:
function generateArea(){
var x = parseInt($("#area-x").val());
var y = parseInt($("#area-y").val());
$('#area').html('');
for(var i=0;i<y;i++){
for(var j=0;j<x;j++){
var img=$("<img />");
img.attr("src",dead);
img.attr("cell-x",j);
img.attr("cell-y",i);
img.addClass("cell");
$('#area').append(img);
}
$('#area').append($('<br/>'));
}
}
You aren't binding the click handler to the images, only to the parent <div>.
Also if($("div").attr('src','dead.gif')) is not doing what you think. It is actually setting the attribute to dead.gif each time. It should be more like if($("div").attr('src') === 'dead.gif'))
Try
$('#area img').click(function(){
$(this).attr('src', function(i, existingSrc){
return existingSrc === 'dead.gif' ? 'alive.gif' : 'dead.gif';
});
});
The event.target has the specific img info. Refer the jQuery API page: https://api.jquery.com/event.target/
I have a sliderbar that takes input from the textfield and resets its position accordingly; however, I cannot figure out how to do the following:
Make it so that the sliderbar repositions itself for any value within the range, not just non-decimal inputs.
Make it so that the textfield value changes accordingly as the sliderbar is toggled.
The code can be found below.
Any help is appreciated, thank you!
<div>
<input id="slider" type="range" min="0" max="2" step="0.001"/>
<input id="input" type="text" value="1"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#input').change(function(){
slider.value=parseInt(this.value)
});
</script>
I have a sliderbar that takes input from the textfield and resets its
position accordingly;
I don't see how that work with the code given since you're using parseInt and would need parseFloat for that. Anyway, below is what you asked for:
$('#input').change(function() {
$('#slider').val(parseFloat(this.value))
});
$('#slider').on("input change", function() {
$('#input').val(this.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
<input id="slider" type="range" min="0" max="2" step="0.001" />
<input id="input" type="text" value="1" />
</div>
You don't need to use parseInt() since both need to be string.
<div>
<input id="slider" type="range" min="0" max="2" step="0.001"/>
<input id="input" type="text" value="1"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#input').change(function(){
slider.value=this.value
});
</script>
Hi I have an hidden div with a range inside:
<div id="hiddencontainer" style="display:none;">
<input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
This range works fine when it is displayed directly but I need to hidde this range and show it when user click on a specific button.
The problem is that after the user click on the "showing range" button, the range is displayed but impossible to read his value.
The demo and full code on jsbin:
http://jsbin.com/voyilovuya/3/
HTML
<div id="hiddencontainer" style="display:none;"><!-- try without display none -->
<input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
<div id="container">
</div>
<div id="value">
</div>
<input type="button" value="Afficher" onClick="showhiddencontainer()"></input>
JS
function showrangevalue(){
document.getElementById("value").innerHTML=document.getElementById("range1").value;
}
function showhiddencontainer(){
document.getElementById("container").innerHTML=document.getElementById("hiddencontainer").innerHTML;
}
Have you a solution? Thanks for your help!
see this http://jsfiddle.net/g03srawu/1/,
you are duplicating the range element in container, so there are two range inputs with same ids,
This will show the values in the hidden element inside .value div. replace it with class, and then you can use it.
HTML:
<div id="hiddencontainer" style="display:none;"><!-- try without display none -->
<input class="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
<div id="container">
</div>
value:
<div id="value">
</div>
<input type="button" value="Showing range" onClick="showhiddencontainer()"></input>
JS:
function showrangevalue(){
document.getElementById("value").innerHTML=document.querySelectorAll(".range1")[1].value;
}
function showhiddencontainer(){
document.getElementById("container").innerHTML=document.getElementById("hiddencontainer").innerHTML;
}
Try replacing
function showhiddencontainer(){
document.getElementById("container").innerHTML=
document.getElementById("hiddencontainer").innerHTML;
}
with
function showhiddencontainer(){
document.getElementById("hiddencontainer").style.display = "block";
}
unless you have a reason to copy your container over?
i'm developing a star rating system for products using Bootstrap Star Rating in mvc 4 application everything is ok but when a user rate some product i want to disable the start to prevent the user from rating again and i use jquery for to do that from the documentation of Bootstrap Star Rating to disable the stars i need just to add the attribute data-disabled="true" for the star input like that from the documentation
// Set the star rating control to be readonly or disabled
<input id="input-5a" class="rating" data-readonly="true">
<input id="input-5b" class="rating" data-disabled="true">
so in my case i want to disable the star input after the user have rate so i add the attribute data-disabled="true" to the star input using jquery and it added to the star input but is still not disable the user can rate again so help what should i do to disabled
my script is
<script type="text/javascript">
$(function () {
$('.rating').on('rating.change', function (event, value) {
var productRatedID = $(this).attr("id");
console.log(productRatedID);
$.post('#Url.Action("SaveStarRating", "Home")',
{ "starsCount": value, "productID": productRatedID })
.error(function () {
console.log('error');
}).success(function () {
console.log("DONE SAVING");
$('#' + productRatedID).attr("data-disabled", "true");
$('#mes').html("<p>thank you for Rating</p>");
});
});
});
and in my view
<input id="#Model.Product.ProductID" value="0" type="number" class="rating"
min=0 max=5 step=1 data-size="sm" data-show-clear="false"
data-show-caption="false" />
<div id="mes"></div>
and the html code generated before the user rate some product is
<div class="star-rating rating-sm rating-active">
<div class="rating-container rating-gly-star" data-content="">
<div class="rating-stars" data-content="" style="width: 60%;"></div>
<input id="2" value="0" type="number" class="rating form-control" min="0" max="5"
step="1" data-size="sm" data-show-clear="false" data-show-caption="false"
style="display: none;">
</div>
</div>
<div id="mes"></div>
and the html after the user rate is
<div class="star-rating rating-sm rating-active">
<div class="rating-container rating-gly-star" data-content="">
<div class="rating-stars" data-content="" style="width: 60%;"></div>
<input id="2" value="0" type="number" class="rating form-control" min="0" max="5"
step="1" data-size="sm" data-show-clear="false" data-show-caption="false"
data-disabled="true" style="display: none;">
</div>
</div>
<div id="mes"><p>thank you for Rating</p></div>
so please help the jquery work fine and add the attribute data-disabled="true" to the star input and add the text to the div with id = mse so why the star not disabled after the attribute data-disabled is added thanks in advance for any help
I have not tested it, but i think you should change this line :
$('#' + productRatedID).attr("data-disabled", "true");
into
$('#' + productRatedID).rating('refresh', {disabled: true});
The attribute data-disabled will probably only work during initialization.