I have a event that's triggered when the number value changes in the <input type="number"> one below:
<input type="number" inputmode="numeric" pattern="[0-9]*" size="4" class="lorem" value="0" step="1">
<input type="button" class="minus" value="-">
<input type="button" class="plus" value="+">
It works fine.
However, I have plus/minus buttons below it. These buttons increase/decrease the value but when that happens, the event is never triggered. Why?
How can I make it so that the event is triggered?
I think you need below code for update value in input box by clicking on plus and minus button.
$(".minus,.plus").on('click',function(){
if($(this).val()=="-")
{
var incr=-1;
}
else
{
var incr=1;
}
$(".lorem").val(parseInt($(".lorem").val())+incr);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="number" inputmode="numeric" pattern="[0-9]*" size="4" class="lorem" value="0" step="1">
<input type="button" class="minus" value="-">
<input type="button" class="plus" value="+">
After you change a value with plus/minus buttons, you need to fire a change event on that numeric field. It would look something like this:
$(".minus").click(function() {
var $numberField = $("input[type=number]");
// Assign a new value to the field and fire change event
$numberField.val("1").change();
})
If you need some more help, please upload your JavaScript code.
Related
So I'm trying to make the first input = the same as the second input on change, the arrows accomplish this, but the buttons which also change the second input doesn't pass on the value to the first input
working jsfiddle - https://jsfiddle.net/ryoLvedx/1/
function passonvalue(value) {
return (value);
}
$('[name="quantity2"]').on('change', function() {
value = $(this).val();
$('[name="quantity"]').val(passonvalue(value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1">
<input type="button" class="QuantitySelector__Button Link Link--secondary second-quantity" value="-" onclick="this.parentNode.querySelector('input[type=number]').stepDown()" />
<input class="quantity" min="10" step="10" name="quantity2" value="10" type="number" />
<input type="button" class="QuantitySelector__Button Link Link--secondary second-quantity" value="+" onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"/>
is it possible to still display the placeholder text IF the value is equal to the minimum value?
For this code
<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated"/>
Can this be done with just html5? Or would this manipulation really have to be done with javascript?
Thanks!
I believe some manipulation is needed here is a javascript solution
If the user clicks on the input box and the min value is current, then it adds the placeholder.
If the user key in the value, it triggers a click
function func(e) {
if(e.target.value==e.target.getAttribute("min")){
e.target.value="";
}
}
document.getElementById("spreadThisTotal").addEventListener('click', func);
document.getElementById("spreadThisTotal").addEventListener('keyup', function(e){e.target.click()})
<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated" />
Try with below solution:
document.getElementById('spreadThisTotal').addEventListener('keyup', checkValue);
function checkValue(event){
if(event.target.value == 0){
document.getElementById('spreadThisTotal').value = null;
}
}
<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated"/>
I would like to save in code space. Is there a short code I can enter in the 'onchange' inline to have the two range elements affect each other by moving just one of them?
<form onchange="">
<input type="range" value="0" id="rangeA" name="rangeA" min="-10" max="10">
</form>
<form onchange="">
<input type="range" value="0" id="rangeB" name="rangeB" min="-10" max="10">
</form>
You simply attach the same event handler to both forms. the event handler will simply check which form's range has changed, and will change the other form's range accordingly. you could theoretically have hundreds of those forms with ranges, and one of them will change the rest using this same event handler:
//on dom ready
$(function() {
//attach a change event listener to all forms
$("form").on("change", function() {
//for each of those forms do the following on change:
//assign a $currForm to point at the current form
$currForm = $(this);
//get a list of all other forms and change their range
//when the range of the current form changes
$("form").filter(function() {
//compares all forms with the current one and returns the others
return $(this) != $currForm;
}).children("input[type=range]").val($currForm.children("input[type=range]").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="range" value="0" id="rangeA" name="rangeA" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeB" name="rangeB" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeC" name="rangeC" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeD" name="rangeD" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeE" name="rangeE" min="-10" max="10">
</form>
I have a html block as follows with an input textfield that updates the entire application when it is manually edited.
How can I dynamically target and change this input text field? In the following this would be value="2"
<my-attribute param="Count" min="0" max="100" step="1">
<span id="label">Count</span><span id="input">
<dat-input-number id="input" value="2" step="1" min="0" max="100">
<div id="blocker" on-dblclick="" style="width: 152px; height: 15px;"></div>
<input id="number" type="text" on-keydown="">
</dat-input-number></span>
</my-attribute>
<script>
document.getElementById('number').value = "yourValueHere";
</script>
Oh, and don't forget to close your <input id="number" type="text" on-keydown=""> with an </input>
<script>
var theInput = document.getElementById('input');
theInput.value = '5';
</script>
Working demo here
Note: This is super trivial and I have no doubt that you could have found enough knowledge through a Google search to attempt this on your own. :)
I don't want to pass the value to the function, I want it to find the value itself.
<script type="text/javascript">
function add(buttonNum)
{
var elements = document.getElementsByTagName("button");
alert(document.myform.elements[buttonNum].value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(0)"/>
<input type="button" value="w" onclick="add(1)"/>
<input type="button" value="e" onclick="add(2)"/>
<input type="button" value="r" onclick="add(3)"/>
<input type="button" value="t" onclick="add(4)"/>
<input type="button" value="y" onclick="add(5)"/>
</form>
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
What approaches do I need to take? Something tells me that I need to get the length, run a for loop, and attach a handler. I'm just not sure on where to start.
simply pass this as parameter so that you can access all the attributes of the element but here only value:
<script type="text/javascript">
function add(elem)
{
alert(elem.value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(this)"/>
<input type="button" value="w" onclick="add(this)"/>
<input type="button" value="e" onclick="add(this)"/>
<input type="button" value="r" onclick="add(this)"/>
<input type="button" value="t" onclick="add(this)"/>
<input type="button" value="y" onclick="add(this)"/>
</form>
Compare:
getElementsByTagName("button");
<input>
You are getting the wrong element type.
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
Use addEventListener. You can identify the element clicked with event.target
e.g.
addEventListener('click', function (evt) {
if (evt.target.type == "button") {
alert(evt.target.value);
}
});