Develop Reference

Retain value in a disabled input when reset button is pressed

I am using a project code input in my form as
<input type="text" id="txtProjectCode" name="Project Code" class="form-control" maxlength="15" disabled="disabled" />
When I reset my form using my reset function
function resetRequestForm() {
$("#txtProjectCode").val(userProject);
}
I am trying to add value again through global variable, but still it is not reflecting in the form.
Please help on this

Please see this example. It is not exactly what you are doing.
But I am only showing the way how to do it.
Here It is working with disabled also, but please note that disabled fields value will not post on the server end.
var userProject = 'My Project';
function resetRequestForm() {
$("#txtProjectCode").val(userProject);
}
function getValueAgain(){
console.log($("#txtProjectCode").val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtProjectCode" name="Project Code" class="form-control" maxlength="15" readonly />
<button onClick="resetRequestForm()"; >resetRequestForm</button>
<button onClick="getValueAgain()"; >getValueAgain</button>

Disabled input text
<input type="text" id="txtProjectCode" name="Project Code" class="form-control" maxlength="15" disabled="disabled" />
Clear Button
<button class="clear_button" onclick ="return resetForm();" id="clearRequest">Clear</button>
This will retain the data in the disabled input, when
the form is cleared using a button with custom resetForm() function
the button type is set as `reset'
Note:
Data will not be retained if readonly="readonly" is used instead of disabled="disabled" (in both the cases)
no need to feed the data again as $("#txtProjectCode").val(userProject); - userProject is a global variable.

Output Contents of Input in div

I am creating a contact form that creates something like a cart view depending on the inputs.
I managed to get all the checkboxes to output when they are checked; I am having trouble getting the same to work with text and number inputs. So input type text, number and textarea.
<input id="form_name" type="text" name="name" class="form-control"
placeholder="Please enter your firstname *" required="required"
data-error="Pflichtfeld" data-validate="true">
<input type="number" id="age" name="age" min="16" max="99"
class="form-control" required="required"
data-error="Pflichtfeld" data-validate="true">
<div id="descript11" style="display:none;">Vorname:
<b id="vorname"></b>
</div>
<div id="descript12" style="display:none;">Alter:
<b id="alter"></b>
</div>
So I tried the method with $(document).change() but that did not work. I want to grab the contents of the input or textarea and output it to the div with the corresponding id. So "age" should output to "alter" and so on. I'm not sure how to achieve this and w3schools or other sites don't offer an answer.

You can do this by adding an input event listener to your input text boxes. In the example below, I loop through all your input text boxes (as I gave them a class of text-input) using a forEach loop. You can then grab the text from the textbox using this.value and place it into its associated div. To help with this I created a mapping object which is used to map the id of the input to the id of where the text should be placed into.
See example below:
const input_map = {
form_name: "vorname",
age: "alter"
}
document.querySelectorAll(".text-input").forEach(elem => {
elem.addEventListener('input', function() {
const textbox_value = this.value; // get text from input bpx
const target = input_map[this.id]; // get location (ie: the id) of where the text should be placed
document.getElementById(target).innerText = textbox_value; // place the text in that location
});
});
<input id="form_name" type="text" name="name" class="form-control text-input" placeholder="Please enter your firstname *" required="required" data-error="Pflichtfeld" data-validate="true">
<input type="number" id="age" name="age" min="16" max="99" class="form-control text-input" required="required" data-error="Pflichtfeld" data-validate="true">
<div id="descript11">Vorname:<b id="vorname"></b></div>
<div id="descript12">Alter: <b id="alter"></b></div>
Note: In the example above I removed the style="display: none;" from your divs so that you can see the output

You can do it like this:
$('input').on('input',function(){
let text = $(this).val();
let id = $(this).attr('id');
$('div.'+id).text(text)
});
This snippet checks changes on inputs and sets their value to the div with class that matches each input's id .

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" />