Develop Reference

Input value jQuery check length and value?

I'm still stuck here when validating the value of the input. If the value is between 0.4 and 0.9 the input n2 will remove the read-only. On another hand where if value less than 0.4 or more than 0.9 it will show up modal dialog. My question here is to validate the value/length if the value key in by the user is not in decimal value? let say user insert value 1, then my jquery
won't firing out because my length is >=3.. if I put the length check > 1, then when user key the decimal value for example 0.5, the modal dialog
will pop out 3 times.. since my length value is >= 3.. if I remove the length checking, it will keep pop out the modal dialog whenever user key in value length that more than one.
My question is how to control such a situation if the valid range value is between 0.4 to 0.9, at the same time can checking value that not in decimal number as well? Is it possible?
<input type="text" class="form-control input-sm da" name="da" id="da" value="" autocomplete="off" />
<div class="form-group actionDiv" style="display:none">
<label for="cdaaction">Action </label>
<input type="text" class="form-control input-sm cdaaction" name="cdaaction" id="cdaaction" value="" />
</div>
<input type="text" class="form-control input-sm n2" name="n2" id="n2" value="" autocomplete="off" readonly />
$(document).ready(function() {
$(".da").keyup(function() {
var dInput = $(this).val();
if ($('.da').val().length >= 3)
{
if(dInput < 0.4 || dInput > 0.9)
{
var mymodal = $('#mi-modal');
mymodal.find('.modal-body').html('Is the value correct: '+ $('.da').val() +' ?');
mymodal.find('.modal-footer').html('<button type="button" class="btn btn-default" id="modal-btn-si">Yes</button><button type="button" class="btn btn-primary" id="modal-btn-no">No</button>');
$("#mi-modal").modal('show');
$("#modal-btn-si").on("click", function(){
$("#mi-modal").modal('hide');
$('.actionDiv').show();
});
$("#modal-btn-no").on("click", function(){
$("#mi-modal").modal('hide');
$('.actionDiv').hide();
$("#da").focus();
});
$(".n2").attr('readonly', true);
}
else
{
$(".n2").removeAttr("readonly");
$('.actionDiv').hide();
}
}
});
});

Use parseFloat()
$(document).ready(function() {
$(".da").keyup(function() {
//var dInput = $(this).val();
var val = parseFloat($(this).val());
if (!isNaN(val) && (val < 0.4 || val > 0.9))
//if(dInput < 0.4 || dInput > 0.9)
{
var mymodal = $('#mi-modal');
mymodal.find('.modal-body').html('Is the value correct: '+ $('.da').val() +' ?');
mymodal.find('.modal-footer').html('<button type="button" class="btn btn-default" id="modal-btn-si">Yes</button><button type="button" class="btn btn-primary" id="modal-btn-no">No</button>');
$("#mi-modal").modal('show');
$("#modal-btn-si").on("click", function(){
$("#mi-modal").modal('hide');
$('.actionDiv').show();
});
$("#modal-btn-no").on("click", function(){
$("#mi-modal").modal('hide');
$('.actionDiv').hide();
$("#da").focus();
});
$(".n2").attr('readonly', true);
}
else
{
$(".n2").removeAttr("readonly");
$('.actionDiv').hide();
}
}
});
});

You could consider triggering your code on blur(). When the user focusses out of the input box, you can check whether the inputted value is correct or not.
Furthermore, what Carsten said is true: Use type=number for your input and you won't need the check on the input length, just on the value.

How can i create progress bar based on buttons on my page?

I have more than 23 buttons on my page and they can be decreased or increased.
how can i count all buttons and create progress bar according to status change of button. There are only two status one will increase percentage and another will decrease.
Click here to see the image of the buttons and progress bar that i created
Here is my code
$(document).ready(function() {
var form_count = 1;
setProgressBar(form_count);
function setProgressBar(curStep) {
var i = 0;
$.each($('input[type=submit]'), function() {
if ($(this).val() == 'Revisit') {
i++;
}
});
var total = i * 4;
var percent = total;
percent = Math.floor(percent);
if (percent > 100) {
percent = 100;
}
$(".progress-bar")
.css("width", percent + "%")
.html(percent + "%");
}
});
This code work fine, but i need it dynamically.
Here is HTML code for all buttons i do same code
<div class="col-md-6">
<div class="frmWrp">
<form method="post" action="">
<div class="heading">Quality Assurance</div>
<div class="btn pull-right">
<?php if ($feature_enable[0]['qa_mod'] == 1) { ?>
<input type="submit" class="btn btn-default" name="user_configration1" value="<?php echo ($checkExist[0]['quality_assurance'] == 1) ? 'Revisit' : 'Visit'; ?>">
<?php } else { ?>
<button class="btn btn-default" disabled>Feature Not Enabled</button>
<?php } ?>
</div>
</form>
</div>
</div>
For example now i have 25 buttons and i do var total = i * 4; for getting 100%, if buttons are less than i have to change 4 manually. but i need this dynamically.
Any solution appreciated!

Here is a general idea of how to use an eventListener to update the width property of a div's style attribute when a user clicks a "Submit" or "Revisit" button:
// Identifies the progress bar
const progressBar = document.getElementsByClassName("progressBar")[0];
// Calls the `setProgressBar` function when the user clicks something
document.addEventListener("click", setProgressBar);
// Defines the `setProgressBar` function
function setProgressBar(event) {
// Makes sure the click was on an `input` element with the `submit` type before proceeding
if(
event.target.tagName == "INPUT" &&
event.target.getAttribute("type") == "submit"
){
// Toggles the value of the clicked input element
if(event.target.value == "Revisit"){ event.target.value = "Submit"; }
else{ event.target.value = "Revisit"; }
// Bascially the same as your original code -- updates the progressBar
let i = 0;
$.each($('input[type=submit]'), function() {
if ($(this).val() == 'Revisit') { i++; }
});
const percent = Math.min(i * 25, 100);
$(".progressBar").css("width", percent + "%").html(percent + "%");
}
}
#container{ width: 10ch; }
input[type=submit]{ margin-bottom: 0.2em; }
.progressBar{ height: 20px; background-color: yellow; width: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<input type="submit" value="Submit" />
<input type="submit" value="Submit" />
<input type="submit" value="Submit" />
<input type="submit" value="Submit" />
</div>
<div class = "progressBar"></div>

How to set minimum Increment ++ and Decrement -- value (can't go bellow 1) + how to decrease or increase button added value

I am working on a web store which offers 2 pre-assigned options (buy two for XX and buy 3 for XY). I also added a normal - 0 + system whith which the customer can select a different number of products.
I wrote a little code which works fine for +- or 2,3 alone, but if i wanna decrease a number added by 2,3 buttons, it doesn't go from 3 to 2 but to 0 or -1.
So, i want to be able to select pre-defined option 2 or 3 but i also want it to be editable by +- buttons.
Any suggestions?
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="0"></input>
<button class="plus" onclick="buttonClicDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
var i = 0;
function buttonClickUP() {
i++;
document.getElementById('gumb2').value = i;
if (i <= 0) {
i = 0;
display(i);
}
}
var i = 0;
function buttonClickDOWN() {
i--;
document.getElementById('gumb2').value = i;
if (i <= 0) {
i = 0;
display(i);
}
}
</script>

As I already mention in the comment, you have a typo in buttonClicDOWN .......missing k. You directly increment/decrement the value of the element. Please see the modified functions:
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>

I'd have this added as a comment, but was not able to for missing rep. So an answer:
In simple terms: you are not updating your global variable i when pressing the 2 or 3 button, so when you in/decrease i and assign it to the value property, you do override the old value.
I would recommend to drop the i (global) variable and just to work with the value property, e.g.
function buttonClickDOWN() {
var elm = document.getElementById('gumb2');
if (elm.value > 0)
elm.value--;
else
elm.value = 0;
}
P.S.: as you are using a text type input, you might also want to consider non-numbers the user might have entered.

Why not simply use input type="number"?
<button class="gumb_shop2" onclick="gumb2.value=2">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="gumb2.value=3">3 for 8,99 €</button>
<input type="number" id="gumb2" value="1" step="1" min="1" />
<input type="button" id="order" value="ORDER NOW" />

Here's a simple example that that meets your specs:
<button onclick="setAbs(event)" data-val="2">2 for 10,99 €</button>
<button onclick="setAbs(event)" data-val="3">3 for 8,99 €</button><br/><br/>
<button onclick="down()">-</button>
<input size="2" id="counter" value="0" />
<button onclick="up()">+</button><br/><br/>
<input type="submit" value="Submit" />
<script>
let counter = document.getElementById("counter");
function setAbs(event){
counter.value = event.target.dataset.val;
}
function up(){
counter.value = parseInt(counter.value) + 1;
}
function down(){
if(counter.value > 0){
counter.value = parseInt(counter.value) - 1;
}
}
</script>

this is the answer i was looking for.
Thank you #Mamun for quick response.
<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>

Get the value of incremented input

I have two buttons which either increment or decrement an input value. I don't know how to retrieve the value later on submit of the result. My current attempts have either resulted in 'undefined' or '0'.
Thanks in advance for any advice
$('.plus').click(function(e){
e.preventDefault();
fieldName = $(this).attr('field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal)) {
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
$(".minus").click(function(e) {
e.preventDefault();
fieldName = $(this).attr('field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
//attempting to get value
var value = document.getElementById( 'inputval' ).val();
$('#submitscore').click(function() {
alert(value);
});
My HTML
<span class="input-group-btn">
<button class="btn btn-secondary btn-success minus" field='minusfield' id ="minus" type="button">-</button>
</span>
<input type="text" name="inputval" id="inputval" value="0" class="gh form-control" />
<span class="input-group-btn">
<button class="btn btn-secondary btn-success plus" id="plus" field='plusfield' type="button">+</button>
</span>
<button type="button" id="submitscore" class="btn btn-md btn-orange">Submit</button>

You are attempting to get already assigned value.
Change your code to this
$('#submitscore').click(function() {
alert($('#inputval').val());
});
and it should work.

You're mixing standard Javascript usage with jQuery usage when you try to call it like this:
//attempting to get value
var value = document.getElementById( 'inputval' ).val();
Use one or the other:
Standard Javascript:
document.getElementById('inputval').value
jQuery:
$('#inputval').val()

Setting function decrement in variable onclick function

Please.. i need a help with this thing..
I wanna use a variable ID in HTML, to call a function in javascript page.
Example:
html
(MINUS BUTTON DONT WORK)
<button class="minus-button quantity-button button" type="button" name="subtract" onclick="javascript: subtractDiv2(document.getElementById('<ccom:field id='Code' />'));" value="-"> </button>
(THIS INPUT QUANTITY WORKS NORMAL)
<input class="quantity-input" value="<ccom:field id="Qtd"/>" maxlength="3" id='<ccom:field id="Code" />' name="div2" onkeypress="return somenteNumerico(event);"/>
(PLUS BUTTON WORKS NORMAL)
<button class="plus-button quantity-button button" type="button" name="add" onclick="javascript:document.getElementById('<ccom:field id='Code' />').value++;" value="+"></button>
javapage
function subtractDiv2(){
if(value - 1 < 0)
return;
else
value--;
};

You're not using the argument to the function. It should be:
function subtractDiv2(div) {
var value = parseInt(div.value, 10);
if (value < 1) {
return;
} else {
div.value = value - 1;
}
}