I have a simple range slider that allows a user to select an age
<div>
<label for="age">Age: </label><label id="ageOutput"></label><br><br>
<input type="range" id="age" name="vol" min="0" max="99" value="16">
<br>
<span class="error">* <?php echo $ageErr;?></span>
</div>
And I use JavaScript update a label with the value of the slider
<script>
var slider = document.getElementById("age");
var output = document.getElementById("ageOutput");
output.innerHTML = slider.value; // Display the default slider value
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
I'm trying to use PHP to check the value of the slider and validate whether it's between 16 and 90 but I keep getting an error that "age" doesn't exist.
This is the PHP:
if (($_POST["age"]) < 16 || ($_POST["age"]) > 90)
{
$ageErr = "Customers must be aged 16-90";
}
else
{
$rangeSlider = test_input($_POST["ageOutput"]);
}
Not really sure where to go from here because this method has been working for other values in the form.
You have to make change some portion in HTML Code.
<input type="range" id="age" name="vol" min="0" max="99" value="16">
hear you have to replace name="vol" to name="age".
I think after this kind of change in code your code works fine.
For your problem, the second solution is you have to make a hidden input field.
when you change in range javascript code automatically change the hidden input value.
<div>
<label for="age">Age: </label><label id="ageOutput"></label><br><br>
<input type="range" id="age" name="vol" min="0" max="99" value="16">
<input type="hidden" id="setage" name="age"/>
<br>
<span class="error">* <?php echo $ageErr;?></span>
</div>
Hear is you js code:
<script>
var slider = document.getElementById("age");
var output = document.getElementById("ageOutput");
var setage = document.getElementById("setage");
output.innerHTML = slider.value; // Display the default slider value
setage.value=slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
setage.value = this.value;
}
</script>
Related
I have a form where the inputs values are controlled by range sliders. There's a calculation every time there's a new entry on each input which operates on focusout.
Though, the calculation doesn't work when only the range sliders are used. Is there a way to focus the inputs while using the range sliders? I can't change the way of calculation, because, it's on all the inputs. So, it has to be this way.
My form is bigger, but, here's an example of what I have:
<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>
<label class="va2">Option a price 2:<input id="a2" type="number"/></label>
<input type="range" id="slider-a2" min="0" max="100" step="1" value="0"><br>
<label>Result:</label><input id="a5" type="text" name="total_amt"/>
And here's the JS:
var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
document.getElementById("a1").value = opt_1.value;}
var opt_2 = document.getElementById("slider-a2");
opt_2.oninput = function() {
document.getElementById("a2").value = opt_2.value;}
calculate = function(){
var optiona1, optiona2, resultss;
optiona1 = Number(document.getElementById("a1").value);
optiona2 = Number(document.getElementById("a2").value);
resultss = parseInt(optiona1)+parseInt(optiona2);
document.getElementById('a5').value = resultss;}
$('input[type=number]').on('focusout', calculate);
Inputs are invisible to jQuery when they are appended.
THere are 3 inputs
<input class="bul-order-info__input bul-order-info__price" type="text" name="price" value="500" readonly>
<input class="bul-order-info__input bul-order-info__qnt" type="number" name="quantity" min="1" value="1">
<input class="bul-order-info__input bul-order-info__total" type="text" name="totalPrice" value="" readonly>
with this code
let $output = $("#output-value");
let $price = $(".bul-order-info__price");
$(document).on('change', ".bul-order-info__qnt", function () {
let value = parseFloat($(this).val());
$output.val(value * $price.val());
});
If I have these inputs in my html created manually, I can multiply the inputs value and add the result into the total price input.
But I need these inputs to appear after the click event, so I append them. After that they become invisible to jQuery, hence nothing works.
How can I make these inputs appear on the page, in the form, and then manipulate their values?
You did only one mistake while assigning the value to the input field which displays the multiplication result
let $output = $("#output-value");
let $price = $(".bul-order-info__price");
$(document).on('change', ".bul-order-info__qnt", function () {
let value = parseFloat($(this).val());
let tot=value * $price.val();
$(".bul-order-info__total").val(tot);
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input class="bul-order-info__input bul-order-info__price" type="text" name="price" value="500" readonly>
<input class="bul-order-info__input bul-order-info__qnt" type="number" name="quantity" min="1" value="1">
<input class="bul-order-info__input bul-order-info__total" type="text" name="totalPrice" value="" readonly>
</body>
</html>
Jquery can't find dynamically generated elements directly.
You can access them using it's parent which is not appended dynamically.
$(document).on('change', "body .bul-order-info__qnt", function () {
let value = parseFloat($(this).val());
$output.val(value * $price.val());
});
Hi i want to calculate two input field values and result will show in third input field so i want to write code in ajax page
<input id="a1" type="text" />
<input id="a2" type="text" onblur="Calculate();" />
<input id="a3" type="text" name="total_amt" value="" />
here javascript function
<script>
function Calculate()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value=parseInt(resources) * parseInt(minutes);
document.form1.submit();
}
</script>
starting its working but nw its not working please help me
Thanks in Advance
Look this! Work it.
http://jsfiddle.net/op1u4ht7/2/
<input id="a1" type="text" />
<input id="a2" type="text" onblur="calculate()" />
<input id="a3" type="text" name="total_amt" />
calculate = function()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)*parseInt(minutes);
}
Try AutoCalculator https://github.com/JavscriptLab/autocalculate Calculate Inputs value and Output By using selector expressions
Just add an attribute for your output input like data-ac="(#firstinput+#secondinput)"
No Need of any initialization just add data-ac attribute only. It will find out dynamically added elements automatically
FOr add 'Rs' with Output just add inside curly bracket data-ac="{Rs}(#firstinput+#secondinput)"
My code is from an answer above. Special thank for you!
calculate = function (a, p, t) {
var amount = document.getElementById(a).value;
var price = document.getElementById(p).value;
document.getElementById(t).value = parseInt(amount)*parseInt(price);}
<input type="number" id="a0" onblur="calculate('a0', 'p0', 't0')">
<input type="number" id="p0" onblur="calculate('a0', 'p0', 't0')">
<input type="number" id="t0" >
<hr>
<input type="number" id="a1" onblur="calculate('a1', 'p1', 't1')">
<input type="number" id="p1" onblur="calculate('a1', 'p1', 't1')">
<input type="number" id="t1" >
put in you form id="form1"
the JavaScript is look like this.
calculate = function()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)*parseInt(minutes);
document.form1.submit();
}
I'm learning JS by making a character sheet (rpg), I got a form set up like this
<fieldset id="char-int">
<label for="int">INT</label>
<input id="int" name="int" placeholder="40" type="number" min="0" max="100">
<input id="int-hard" name="int-hard" placeholder="20" type="number" min="0" max="100">
<input id="int-extr" name="int-extr" placeholder="6" type="number" min="0" max="100">
</fieldset>
I need to change the value in int-hard and int-extr with simple rounded down division.
window.onchange = changevalue;
function changevalue() {
var hardRoll = document.getElementById("int").value / 2;
var extrRoll = document.getElementById("int").value / 5;
var setStat = document.getElementById("str-hard").value = Math.floor(hardRoll);
var setStat = document.getElementById("str-extr").value = Math.floor(extrRoll);
This works, but there must be a smarter way to do this as I got multiple IDs I want to do the same stuff to like STR, DEX etc..
You can remove the ids from your inputs and work within the context of your fieldset, like this:
<fieldset id="char-int">
<label>
INT
<input name="int" placeholder="40" type="number" min="0" max="100">
</label>
<input name="int-hard" placeholder="20" type="number" min="0" max="100">
<input name="int-extr" placeholder="6" type="number" min="0" max="100">
</fieldset>
function changevalue() {
var fieldset = document.getElementById("char-int");
var intField = fieldset.querySelector('["name=int"]');
var intHardField = fieldset.querySelector('["name=int-hard"]');
var intExtrField = fieldset.querySelector('["name=int-extr"]');
// ...
}
(Note that I also moved your name="int" field into the label so we don't have to use an id to link them.)
querySelector finds the first element within the element you call it on that matches the given CSS selector. (There's also querySelectorAll, which finds a list of all matching elements.)
Depending on how much you can parameterize the actual logic of the changevalue function, you could change the names to not have int- in them (or add classes), and then pass in the id of the fieldset (or the fieldset instance itself).
<fieldset id="char-int">
<label>
INT
<input id="int-main" name="main" placeholder="40" type="number" min="0" max="100">
</label>
<input name="hard" placeholder="20" type="number" min="0" max="100">
<input name="extr" placeholder="6" type="number" min="0" max="100">
</fieldset>
function changevalue(fieldSetId) {
var fieldset = document.getElementById(fieldSetId);
var mainField = fieldset.querySelector('["name=main"]');
var hardField = fieldset.querySelector('["name=hard"]');
var extrField = fieldset.querySelector('["name=extr"]');
// ...
}
QS and QSA are supported by all modern browsers, and also IE8.
I got multiple IDs I want to do the same stuff ...
When you here such a phrase, it can be a sign that you need to use classes. They are used exactly for this: to denote group of similar elements.
So what you should do is to add the same class to all elements, then select all necessary elements, and then use for loop to process all of them.
For example, HTML:
<input class="int" name="int" placeholder="40" type="number" min="0" max="100">
<input class="int-hard" name="int-hard" placeholder="20" type="number" min="0" max="100">
<input class="int-extr" name="int-extr" placeholder="6" type="number" min="0" max="100">
and then javascript:
var int = document.querySelectorAll('.int');
for (var i = 0; i < int; i++) {
var hardRoll = int[i].value / 2;
var extrRoll = int[i].value / 5;
}
Try this solution:
// Your inputs, selected by ID
var inputs = document.querySelectorAll("#int-hard, #int-extr");
// Apply onchange to selected input fields
for(var i = 0, length = inputs.length; i < length; i++) {
inputs[i].onchange = function() {
this.value = Math.floor(this.value);
};
}
And please don't use window.onchange as this fires off to every change in your document.
I have 2 textboxes with a type="number".
1 textbox is my 'master' textbox, then I have another subsequent textbox that I would like that IF the 'master' textbox is filled in with a number, the subsequent textbox would get the same value.
I thought about using the data- attribute but I am not sure how to target if the 'master' textbox is filled then, then subsequently put the same value in the sub textbox(es) with the same data- attribute.
In my example below I also use spans to create plus and minus buttons that adjust the value based on the value. This is in the JS section.
My current HTML is as follow:
<div id="masterTextboxes">
<span class="minusBtn AddMinusButton">-</span>
<input type="number" value="" placeholder="0" data-attendees="Adult" />
<span class="addBtn AddMinusButton">+</span>
<span class="minusBtn AddMinusButton">-</span>
<input type="number" value="" placeholder="0" data-attendees="Child" />
<span class="addBtn AddMinusButton">+</span>
</div>
<!--Values from Master Textboxes should populate into these textboxes as well.-->
<div id="subTextboxes">
<span class="minusBtn AddMinusButton">-</span>
<input type="number" value="" placeholder="0" data-attendees="Adult" />
<span class="addBtn AddMinusButton">+</span>
<span class="minusBtn AddMinusButton">-</span>
<input type="number" value="" placeholder="0" data-attendees="Child" />
<span class="addBtn AddMinusButton">+</span>
</div>
Javascript
<script>
$(document).ready(function () {
/*Add an minus buttons for variants*/
$(".AddMinusButton").on('click touchstart', function (event) {
event.preventDefault();
//Add button active style for touch.
var $button = $(this);
var oldValue = $button.parent().find("input").val();
var newVal = oldValue;
//Hide .decButton for oldValue
if (newVal == 0 || oldValue == 0 ) {
oldValue = 0;
}
else { $button.parent().find(".minusBtn").show(); }
if ($button.text() == "+") {
newVal = parseFloat(oldValue) + 1;
// Don't allow decrementing below zero
if (oldValue >= 1) {
newVal = parseFloat(oldValue) - 1;
}
}
$button.parent().find("input.attendeeQuantityInput").val(newVal);
//Sub textboxes should take value of master textboxes. Is this correct syntax?
//This is probably wrong.
$('#subTextboxes input').data("attendee").val(newVal);
});//End button click
});
</script>
I hope this makes sense on what I am trying to get out of this.
Thanks in advance.
I would like that IF the 'master' textbox is filled in with a number,
the subsequent textbox would get the same value.
You can do it like this:
<p>
<label>Master 1: <input type="number" id="master1" placeholder="0" /></label><br>
<label>Dependant 1: <input type="number" class="dependant1" placeholder="0" /></label>
</p>
<p>
<label>Master 2: <input type="number" id="master2" placeholder="0" /></label><br>
<label>Dependant 2: <input type="number" class="dependant2" placeholder="0" /></label><br>
<label>Dependant 2: <input type="number" class="dependant2" placeholder="0" /></label>
</p>
And in the JS:
$("input[id^='master']").on("change", function(){
var no = this.id.replace("master", "");
var selector = ".dependant" + no
$(selector).val(this.value);
});
This makes use of jQuery's attribute starts with selector and will work for any number of inputs provided the class names match.
Demo
You could do this:
HTML:
<div id="masterTextboxes">
<p>Master</p>
<input type="number" value="" placeholder="0" data-attendees="Adult" />
<input type="number" value="" placeholder="0" data-attendees="Child" />
</div>
<div id="subTextboxes">
<p>Sub</p>
<input type="number" value="" placeholder="0" data-attendees="Adult" />
<input type="number" value="" placeholder="0" data-attendees="Child" />
</div>
JS:
// On change in master inputs...
$("#masterTextboxes input", this).on("change", function() {
// Store Master inputs in master variable and Sub inputs in sub variable.
var master = $("#masterTextboxes input"),
sub = $("#subTextboxes input");
// Match master and sub values by using the master array key as reference.
$(sub[$.inArray($(this)[0], master)]).val( $(this).val() );
});
The jQuery code relies on the condition that the Sub inputs follow the same order as the Master's inside each respective div.
JSFiddle:
Here's a working JSFiddle for reference.