Develop Reference

Set input value with Javascript on outside click

i want to set a max value to a number input. I used the "max" HTML attribute but the user can write a number over the max value anyway. Is there any way to reset the value of that input to the maximum value I set it, after the user sets it beyond the maximum value? Maybe when the user clicks outside that input?
Here is my code
<input type="number" name="days" id="days" min="1" max="365" value="<?php echo $ipq[0]['valueParam']?>">

You might want to consider using a range control along with the value of the range being shown in a span element next to it. This way only the value range you specify is allowed (which is really what the range control is for).
const output = document.getElementById("output");
document.getElementById("days").addEventListener("input", function(){
output.textContent = this.value;
});
<input type="range" name="days" id="days" min="1" max="365" value="1"><span id="output">1</span>

The max attribute is validated on form submit. AS you can see in the snippet below the user will get a message when he tries to submit the form.
<form>
<input type="number" name="days" id="days" min="1" max="365" value="366">
<input type='submit'>
</form>
If you want to prevent the user for inputting a value over 365 you can use js to do that. The snippet below shows how to prevent values over 365 for all number inputs.
document.querySelectorAll('input[type="number"]').forEach((el) => el.addEventListener('input', (e) => {
let inputEl = e.currentTarget;
if(parseFloat(inputEl.value) > parseFloat(inputEl.max)) {
inputEl.value = inputEl.max;
}
}));
<form>
<input type="number" name="days" id="days" min="1" max="365" value="366">
<input type='submit'>
</form>

Add (or multiply, subtract or divide) one var to another in JS/jQuery

Sincere apologies if this has been asked and answered elsewhere, I struggled with finding accurate search terms for this.
Working in jQuery I have a var called total. I need to add the value of other vars to total. All the vars in question have numerical values.
This is what I've tried:
var total = total+rocketspend;
$(".totalamount").html(total);
and
var newtotal = total+rocketspend;
var total = newtotal;
$(".totalamount").html(total);
Both have resulted in .totalamount being emptied and replaced with nothing. I have theories around why this might be going wrong - it could be that in the first example a var isn't allowed to be self defining, and it could be that in in the second example the browser attempts to define both newtotal and total at the same time, ending in mystery. Or it could be something else entirely. The rocketspend var works fine on its own, as does total before the attempted addition.
Thoughts?

You only need to use var when you first define a variable. It looks like you're trying to access a variable that already exists. Example:
var total = 0;
var rocketspend = 10;
total = total + rocketspend;
$(".totalamount").html(total);
Additionally, try checking your console for any errors. In most browsers, you can right click and inspect an element or click Ctrl + Shift + I and clicking on the Console tab. You can use Ctrl + Shift + K in Firefox.

You are using jQuery and have referenced an element (i.e. .totalamount) so assuming you are using normal webpage (i.e. HTML, CSS, JS/jQ etc..), this Snippet has 2 <forms>. The first one uses only JavaScript and HTML5. The second form uses jQuery and HTML5.
When using form fields such as <input>, the value you type in them will be a string (i.e. text) value. So when "3" is typed in, the <input> will treat it as text not a real number value. So convert the string to a number, use parseFloat(), parseInt(), or Number().
To get <input> values use .val() (jQuery) or .value (JavaScript).
SNIPPET
$('#calc1').on('input', function() {
var rocket1 = $('#rocket1').val();
var sub1 = $('#sub1').val();
var total1 = parseFloat(sub1) + parseFloat(rocket1);
$("#total1").val(total1);
});
input {width: 8ex;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Using only plain JavaScript and HTML5 form fields</p>
<form id="calc" name="calc" oninput="total.value = parseFloat(sub.value, 10) + parseFloat(rocket.value, 10)">
<fieldset>
<legend>Rocket Expenditure</legend>
<label for="sub">
<b>Sub Total:</b>
<input type="number" id="sub" name="sub" value="0">
</label> +
<label for="rocket">
<b>Rocket:</b>
<input type="number" id="rocket" name="rocket" value="0">
</label>
<label>
<b>Total:</b>
<output name="total" for="sub rocket">0</output>
</label>
</fieldset>
</form>
<p>Using jQuery and HTML5 form fields</p>
<form id="calc1" name="calc1">
<fieldset>
<legend>Rocket Expenditure 1</legend>
<label for="sub1">
<b>Sub Total 1:</b>
<input type="number" id="sub1" name="sub1" value="0">
</label> +
<label for="rocket1">
<b>Rocket 1:</b>
<input type="number" id="rocket1" name="rocket1" value="0">
</label>
<label>
<b>Total 1:</b>
<output id="total1" name="total1" for="sub1 rocket1">0</output>
</label>
</fieldset>
</form>

How to use value with placeholder

This code is showing 0 but i want show enter location with back end hidden value 0
<input type="text" name="location" value="0" placeholder="Enter Location" />
How to do this please help me to fix the small issue.
Thanks

The value attribute refers to the value inside the text-field.
The placeholder is only visible if the text-field has no value.
because of this there is no way to set the value attribute and still see the
placeholder.
try using a custom attribute for your back-end code:
data-value

Remove value="0" from your markup and it will work. value="0" is like you typed 0 into it, so it does not show the placeholder

Unfortuntaly, any value added to the input, makes the placeholder dissapear. What you could do is add a value in the forms onsubmit handler if no value was entered
<form id="myForm">
<input type="text" name="location" placeholder="Enter Location" />
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function() {
var input = this.getElementsByName('location')[0];
if (input.value.length === 0) input.value = '0';
})
</script>
That way a zero is sent to the server if no value was inputted.
It would probably be easier to just check serverside if the input is part of the form data.

I think one of the solutions would be to put only the place-holder in the html & assign the default value in JS(if null).
$('form').submit(function(){
var input = $('#test').val();
if(input == ''){
$('#test').val('empty');
}
alert($('#test').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<input id="test" type="text" placeholder="Type here" />
<input type="submit" />
</form>

Automatically Move Cursor from One Textbox to Another

I am making a Web application that validates passkeys and displays some values there are four passkeys for a file to be entered Validate it, I am entering the passkeys just like we enter the Credit Card Number in the Payment gateway. In my present application I have enter one Passkey then have to press Tab or using the Mouse I have to select the Next Textbox to enter next Passkey, How do I Make the mouse Cursor to Jump automatically from one Textbox to Another Textbox after its maximum value filled like in Payment gateways

You can do pure javascript like this:
<script type="text/javascript">
function ValidatePassKey(tb) {
if (tb.TextLength >= 4)
document.getElementById(tb.id + 1).focus();
}
}
</script>
<input id="1" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="2" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="3" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="4" type="text" maxlength="4">

In my present application I have enter one Passkey then have to press Tab or using the Mouse I have to select the Next Textbox to enter next Passkey
Don't do that. Just use the Control.Focus() method.
When in HTML, you can use jQuery's focus():
$("#textbox").focus();

You can use JavaScript's Onchange Event (or JQuery may be) on the Textbox which calls a method, where You can check the value of the Textbox if it equals the Maximum value , then setFocus on the next Textbox.

Use the TextBox.Focus() method on the next TextBox.
Use the first TextBox's TextBox.TextChanged event to test if focus should be changed and to call the Focus method on the next TextBox.

you can create a directive also to get the position move
directive 1
directive 2

<script type="text/javascript">
$(document).ready(function(){
$("#1").keyup(function(){
var text_lenght = $('#1').val().length;
if (text_lenght == 3) {
$('#2').focus();
}
});
$("#2").keyup(function(){
var text_lenght = $('#2').val().length;
if (text_lenght == 3) {
$('#3').focus();
}
});
});
</script>
<input id="1" type="text" class="form-control" name="phone1" maxlength="3" >
<input id="2" type="text" class="form-control" name="phone2" maxlength="3" >
<input id="3" type="text" class="form-control" name="phone3" maxlength="4">

Replicating the values to another textbox

I have a question regarding JSP. I have two textboxes. When I type the value in the first text box, it should replicate automatically in the second text box.
<input type="text"
class="formtext"
name="List.lItemList<c:out value='[${status.index}]'/>.value1"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxValue','float')">
<input type="text"
class="formtext"
name="List.clItemList<c:out value='[${status.index}]'/>.value2"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxvalue','float')">

Assuming that the first box has ID input1 and the second input2 (so you'll have to add those IDs), you can do it like this:
document.getElementById('input1').onkeyup = function () {
document.getElementById('input2').value = this.value;
};

You can do this using JavaScript. Attach an keyup event handler on the first textbox which should copy its value to the second one.
<input type="text" id="t1" onkeyup="document.getElementById('t2').value=this.value" />
<input type="text" id="t2" />