number increment button - javascript

I have an existing html form which use array to store multiple row values. So I do not have a specific name for the same field for different row. In the PHP page i match the row according to the index.
In the form below, how do I make the button + and - to increase and decrease the value of the quantity of the specific row?
ROW 1
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>`
ROW 2
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>
ROW 3
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>

In my opinion you first should to numerate items:
<input type="text" name="product[]" />
<input id="price-1" type="text" name="price[]" value="" onChange="updatePrice(1)" /> <!-- row number -->
<input id="qty-1" type="text" name="quantity[]" value="" onChange="updatePrice(1)" />
<input type="button" onclick="inc('qty-1')" value="+"/>
<input type="button" onclick="dec('qty-1')" value="-"/>
Then use javascript to manipulate items:
<script>
function inc(id) {
stepQty(id, +1);
}
function dec(id) {
stepQty(id, -1);
}
function stepQty(id, step) {
var value = $('#'+id).val();
$('#'+id).val(value + step);
}
function updatePrice(id) {
var a = $('#price-'+id).val() || 0;
var b = $('#qty-'+id).val() || 0;
$('#'+id).val(a*b);
}
</script>

Related

How to loop through text fields and concatenate the result using javascript

I need to write a javascript function that will loop through the input boxes and concatenates the text in each field together and displays the result in the result box. I tried multiple solutions and haven't been able to get any to work, I get that it needs an array of text fields but I can't seem to work it out.
<!DOCTYPE html>
<html>
<body>
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
<script>
function myFunction() {
var fields = [];
}
</script>
</body>
</html>
You can use filter and map
NOTE: I gave the button an ID of "btn"
document.getElementById('btn').addEventListener('click', function() {
const conc = [...document.querySelectorAll('#myform [id^=text]')] // id starts with text
.filter(fld => fld.value.trim() !== "") // not empty
.map(fld => fld.value) // store value
document.getElementById('result').value = conc.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
In one pass:
document.getElementById('btn').addEventListener('click', function() {
const res = [];
[...document.querySelectorAll('#myform [id^=text]')]
.forEach(fld => { const val = fld.value.trim(); if (val !== "") res.push(val) })
document.getElementById('result').value = res.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
function myFunction() {
const data = document.querySelectorAll("#myform input[type='text'][id^=text]");
//console.log(data);
var fields = [];
data.forEach(item => {
if (item.value != '') {
fields.push(item.value)
}
})
document.getElementById("result").value = fields.join(",")
}
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>

How to change a input type hidden value of a selected radio button

I have 5 radio buttons in one form and 5 input type hidden values corresponding to each radio button. By default, the value of radio buttons and hidden values are 0. Now, I want to change the selected radio button value and its corresponding hidden value to 1. Also, if I re-change the selected radio button then it should make the old selected radio button value and corresponding hidden value to 0 and make the newly selected radio button value and its corresponding button value to 1. I'm able to change the value of selected to radio button and its corresponding hidden value to 1, but if I re-select to another radio button it's not changing the old hidden value to 0 and new hidden value to 1.
$('input[type=radio][name=correctanswer]').on('change', function() {
if ($(this).prop('checked', true)) {
$(this).val('1');
// $('#correct').val($(this).val());
}
$('input:radio').each(function() {
if($(this).is(':checked')) {
$(this).val('1');
// $('#correct').val($(this).val());
}
else {
$(this).val('0');
// $('#correct').val($(this).val());
}
});
$('input:hidden').each(function() {
if($('input[type=radio][name=correctanswer]').is(':checked')) {
// $(this).val('1');
$('#correct').val('1');
}
else {
$(this).val('0');
$('#correct').val('0');
}
});
});
<form action="#" th:action="#{/saveQuestionAnswer}" th:object="${question}" method="post">
<div class="form-group">
<label for="question" class="control-label">Question</label>
<textarea type="text" name="question" cols="40" rows="5" th:name="question" placeholder="question" class="form-control"></textarea>
</div>
<div class="form-group">
<input class="form-control-input" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="30" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 1" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 2" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 3" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 4" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 5" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
You can loop through your radio buttons using each loop then use .closest() to get the closest div to that radio and if that radio is checked assign value to input-box either1 or 0.
Demo Code :
$('input[type=radio][name=correctanswer]').on('change', function() {
//loop through each radio
$('input:radio').each(function() {
//if checked
if ($(this).is(':checked')) {
//get closest div with class=form-group and add value to input
$(this).closest(".form-group").find("input[name=correct]").val('1');
} else {
//add 0
$(this).closest(".form-group").find("input[name=correct]").val('0');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" th:action="#{/saveQuestionAnswer}" th:object="${question}" method="post">
<div class="form-group">
<label for="question" class="control-label">Question</label>
<textarea type="text" name="question" cols="40" rows="5" th:name="question" placeholder="question" class="form-control"></textarea>
</div>
<div class="form-group">
<input class="form-control-input" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="30" class="form-control" name="options" width="50"
value="" th:name="options" placeholder="Option 1" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 2" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 3" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 4" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 5" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>

How to get data-attribute value of elements which is greater than given value using jquery?

I have few textboxes and data-attrribute for installment number.
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If my installment number is 15. i want to get controls have data-instno>=15. that means last 5 textboxes in this case.
Use jQuery Has Attribute Selector [name] to selecting target elements and use .filter() to filtering element has data-instno great than 15.
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).doSomething();
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).css("background", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If you want to get value of data-instno use this
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
Just plain JavaScript:
console.log(
[].filter.call(document.getElementsByTagName('INPUT'),
function(elem) {
return elem.dataset.instno >= 15;
})
);
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
var arrNumber = new Array();
$('input[type=text]').each(function(){
if($(this).attr('data-instno') >= 15){
arrNumber.push($(this).attr('data-instno'));
}
});
use this you will get this as an array

only first form is checked by jQuery

i have one form on my page. so i want to check each input with corresponding button. so i wrote smth like this and it only checks first input even if i click on second inputs button.
<form target="myFrame" method="post" id="addProduct">
<fieldset>
<input type="hidden" name="iProductAdd" value="6" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[6]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="7" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[7]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="4" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[4]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
</form>
and i have jQuery Code:
$(document).ready(function(){
$("form").submit(function(){
// Get the Login Name value and trim it
var name = $.trim($('.quantity').val());
// Check if empty of not
if (name === '') {
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-red.png')");
return false;
} else {
$('input[type="submit"]').each(function(){
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
});
}
});
});
Your problem is that you are using ids as it were classes. An id should be unique in a document. So defining multiple objects with the same id is an error. And all functions will apply only the first they encounter. To do what you want, you have to use classes, so change your code in this way:
$(".addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
To look for all elements of that class.

jquery function to enable disable button

can anyone help me with my code...i want to do is to to enable disable button if the inputs textbox are not empty but in my current code its not working.
i have a selectbox that if i select from it the textbox will automatically filled but if i select empty the textboxes will be empty.
my problem is my script to enable disable button is not working.
output in my browser:
http://s38.photobucket.com/user/eloginko/media/hey_zps31f4cd60.png.html
html code:
<form method="post" action="index.php">
Caraga Region: <select name="region" id="region" onChange="here()"></select>
Municipalities: <select name="town" id="town" onChange="here()"></select>
Unique ID: <select name="uniq_id" id="uniq_id" onChange="here()"></select>
Position: <select name="position" id="position" onChange="here()"></select> <br />
Salary Grade: <select name="salary_grade" id="salary_grade" onChange="here()"></select>
Salary: <select name="salary" id="salary" onChange="here()"></select> <br />
<br />
<br />
Transfer Selected Text to textbox:<br />
<input id="t_region" name="t_region" type="text" ><br />
<input id="t_town" name="t_town" type="text" ><br />
<input id="t_uniq_id" name="t_uniq_id" type="text" ><br />
<input id="t_position" name="t_position" type="text" ><br />
<input id="t_salary_grade" name="t_salary_grade" type="text" ><br />
<input id="t_salary" name="t_salary" type="text" ><br /><br />
List of Applicants:<br />
<input readonly type="text" class="number" name="aic1" id="aic1" /><input class="number" placeholder=" 1.)" name="name1" type="text" required id="name1" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic2" id="aic2" /><input class="number" placeholder=" 2.)" name="name1" type="text" required id="name2" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic3" id="aic3" /><input class="number" placeholder=" 3.)" name="name1" type="text" required id="name3" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic4" id="aic4" /><input class="number" placeholder=" 4.)" name="name1" type="text" required id="name4" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic5" id="aic5" /><input class="number" placeholder=" 5.)" name="name1" type="text" required id="name5" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic6" id="aic6" /><input class="number" placeholder=" 6.)" name="name1" type="text" required id="name6" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic7" id="aic7" /><input class="number" placeholder=" 7.)" name="name1" type="text" required id="name7" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic8" id="aic8" /><input class="number" placeholder=" 8.)" name="name1" type="text" required id="name8" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic9" id="aic9" /><input class="number" placeholder=" 9.)" name="name1" type="text" required id="name9" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic10" id="aic10" /><input class="number" placeholder="10.)" name="name1" type="text" required id="name10" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic11" id="aic11" /><input class="number" placeholder="11.)" name="name1" type="text" required id="name11" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic12" id="aic12" /><input class="number" placeholder="12.)" name="name1" type="text" required id="name12" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic13" id="aic13" /><input class="number" placeholder="13.)" name="name1" type="text" required id="name13" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic14" id="aic14" /><input class="number" placeholder="14.)" name="name1" type="text" required id="name14" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic15" id="aic15" /><input class="number" placeholder="15.)" name="name1" type="text" required id="name15" readonly style="width:50%" /><br />
<input type="submit" name="send" id="send" disabled />
</form>
script to enable button if textbox is empty: note its not working.
<script type="text/javascript">
$(function() {
$('.number').on('input', function () {
$('#send').prop("disabled", !$.trim(this.value));
});
$('.number').each(function() {
if ($.trim(this.value).length) {
$('#send').prop('disabled', false);
return;
}
});
});
</script>
The input event will not fire if you set the value of the text box with code. In your change event, after you populate a text box, you should check if all the text boxes have a value, and then enable/disable the button.
function here() {
// ... current code that populates the text boxes ...
var disableBtn = false;
// check if all text boxes have a value
$('.number').each(function(i,el) {
if (!$.trim($(el).val()).length) {
disableBtn = true;
}
});
$('#send').prop("disabled", disableBtn);
}
Your .on event won't fire when you populate the text boxes outside of the browser. If you are setting the text boxes with code like this upon drop down selection (can't see that part of your code):
$('.number').val('foo')
Then you need to add a trigger event like this:
$('.number').val('foo').trigger('input');
By adding the trigger when you populate the inputs your existing code should work. See this slightly altered example of your code. Be sure to run it after it loads for the first time.
Try:
$('#send').removeAttr('disabled');
Anyway, you are talking about "unable" the button, but I think you meant "enable" which means the opossite to disabled, am I correct?

Categories

Resources