Paste multiple text lines into multiple html input boxes - javascript

I am looking for a way to let the users copy e.g. a multi-line address paste it into a webpage where there is one input field for each address line in such a way that not only the first line is pasted, but instead the program automatically jumps to the next field and put line 2 in there and so on.
Below is the code I managed to find, But it's limited to word counts.. In the below code it's 1.. Is there any way which won't limit by word count but by line count
<input type="text" class="text-input" name="box1">
<input type="text" class="text-input" name="box2">
function handleCharacter(event) {
var $input = $(this),
index = getIndex($input),
digit = $input.val().slice(0,1),
rest = $input.val().slice(1),
$next;
if (rest.length > 0) {
$input.val(digit); // trim input value to just one character
$next = $('.text-input[name="chars['+ (index + 1) +']"]');
if ($next.length > 0) {
$next.val(rest); // push the rest of the value into the next input
$next.focus();
handleCharacter.call($next, event); // run the same code on the next input
}
}
}
function handleBackspace(event) {
var $input = $(this),
index = getIndex($input),
$prev;
// if the user pressed backspace and the input is empty
if (event.which === 8 && !$(this).val()) {
$prev = $('.def-txt-input[name="chars['+ (index - 1) +']"]');
$prev.focus();
}
}
function getIndex($input) {
return parseInt($input.attr('name').split(/[\[\]]/)[1], 10);
}
$('.def-txt-input')
.on('keyup', handleCharacter)
.on('keydown', handleBackspace);
Thanks in advance for your help!!!!

I provided a textarea to paste stuff and then split the lines and pasted in other boxes.
<textarea class="def-txt-input" id="mainbox">
</textarea>
<br/>
<input type="text" class="text-input" name="box1">
<input type="text" class="text-input" name="box2">
<input type="text" class="text-input" name="box3">
<input type="text" class="text-input" name="box4">
<input type="text" class="text-input" name="box5">
<input type="text" class="text-input" name="box6">
<script>
function handleCharacter(event) {
var longString = $("#mainbox").val();
var ks = $('#mainbox').val().split("\n");
//e.preventDefault();
var inputs = $(".text-input");
$.each(ks, function(k){
//alert(ks[k]);
//alert(inputs[k].name);
var thisName = inputs[k].name;
//$("[name='box1']").val('hi');
$('[name="' + thisName + '"]').val(ks[k]);
});
console.log(longString);
}
$('.def-txt-input')
.on('keyup', handleCharacter);
// .on('keydown', handleBackspace);
</script>

Related

(Javascript) oninput with numbercheck

I'm trying to make a simple inventory systems. But I'm having problem with my oninput event.
I want to make TOTAL GOODS to be "Please input number in GOODS IN " whenever every non number value inserted into GOODS IN. But it seems I can't make it so.
/*MAKE EVERY TABLE CLICKABLE AND SHOW ROW DATA IN INPUT TEXT*/
var tbGoods = document.getElementById('tbGoods');
for (var i = 0; i < tbGoods.rows.length; i++) {
tbGoods.rows[i].onclick = function() {
document.getElementById("idTxt").value = this.cells[1].innerHTML;
document.getElementById("gdTxt").value = this.cells[2].innerHTML;
document.getElementById("qtyTXT").value = this.cells[3].innerHTML;
var qty = parseInt(document.getElementById('qtyTXT').value);
var x = parseInt(document.getElementById('gdin').value);
var result = qty - x;
document.getElementById('totalgd').value = result;
};
}
/*MAKE EVERY NUMBER I PUT IN GOODS IN, TO BE CALCULATED WITHOUT SUBMIT BUTTON (ONINPUT)*/
function testmin() {
var qty = parseInt(document.getElementById('qtyTXT').value);
var x = parseInt(document.getElementById('gdin').value);
var result = qty - x;
if (document.getElementById('gdin').value === '') {
document.getElementById('totalgd').value = '0';
} else if (document.getElementById('qtyTXT').value === '') {
document.getElementById('totalgd').value = '0';
} else if (Number.isNaN(document.getElementById('gdin').value)) {
document.getElementById('totalgd').value = 'Please Input Number in Goods In';
} else {
document.getElementById('totalgd').value = result;
}
}
<form method="post">
<label>ID</label>
<input type="text" name="id" id="idTxt" disabled>
<label>GOODS</label>
<input type="text" name="goods" id="gdTxt" disabled>
<label>AVAILABLE QTY</label>
<input type="text" name="qty" id="qtyTXT" disabled>
<label>GOODS IN</label>
<input type="text" name="gdin" id="gdin" oninput="testmin()">
<br>
<br>
<label>Total Goods</label>
<input type="text" name="totalgd" id="totalgd" value="0" disabled>
<br>
<input type="submit" name="submit" value="submit">
</form>
You don't need to code that manually. You can simply set the input type as "number" and your browser will not allow any non-numeric characters to be entered into the field.
Demo (run the snippet and try typing in the box):
<input type="number" id="gdin" name="gdin"/>
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
Just add type = "number" in the input label for TOTAL GOODS. It should prevent user from entering any alphabet. Except "e"
<input type="number" name="totalgd" id="totalgd" value="0" disabled>
As pointed out, if you want to show an alert or something when an input of alphabet is there in TOTAL GOODS, you can just add
<input type="text" name="totalgd" id="totalgd" value="0" oninput = "checkFunction()" disabled>
and in the function you can check the input for :
function checkFunction() {
let totalGoodsIn = document.getElementById("totalgd").value;
let regExp = /[a-zA-Z]/g;
if(regExp.test(totalGoodsIn))
{
//logic if alphabet is present in TOTAL GOODS
}
else
{
//logic if alphabet is not present in TOTAL GOODS
}
}
if you want GOODS IN to be numeric just change the type of the label accordingly
function validateNumberField() {
var value = $("#numberField").val();
var pattern = /^\d+$/;
var isValid = pattern.test(value);
if(!isValid){
document.getElementById('totalgd').value = 'Please Input Number in Goods In';
}
}
<p>Please enter number :</p>
<input type="number" id="numberField" name="numberField"
oninput="validateNumberField()" />

showing the length of a input

How do I enable input2 if enable 1 has input within it (basically re-enabling it), I'm still a beginner and have no idea to do this.
<form id="form1">
<input type="text" id="text1" onkeyup="valid()">
<input type="text" id="text2" disabled="disabled">
<script language="javascript">
function valid() {
var firstTag = document.getElementById("text1").length;
var min = 1;
if (firstTag > min)
//if the text entered is longer than 1 alert to screen
{
//enable the text2 tag
}
}
//once input from text1 is entered launch this function
</script>
</form>
if i understand your question correctly, you want to enable the second input as long as the first input have value in it?
then use dom to change the disabled state of that input
if(firstTag > min)
//if the text entered is longer than 1 alert to screen
{
//enable the text2 tag
document.getElementById("text2").disabled = false;
}
Please try this code :
var text1 = document.getElementById("text1");
text1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("text2").disabled = false;
} else {
document.getElementById("text2").disabled = true;
}
}
<input type="text" id="text1">
<input type="text" id="text2" disabled="disabled">
I think you should use .value to get the value. And, then test its .length. That is firstTag should be:
var firstTag = document.getElementById("text1").value.length;
And, the complete function should be:
function valid() {
var min = 1;
var firstTag = document.getElementById("text1");
var secondTag = document.getElementById("text2");
if (firstTag.length > min) {
secondTag.disabled = false
} else {
secondTag.disabled = true
}
}
Let me know if that works.
You can use the .disabled property of the second element. It is a boolean property (true/false).
Also note that you need to use .value to retrieve the text of an input element.
Demo:
function valid() {
var text = document.getElementById("text1").value;
var minLength = 1;
document.getElementById("text2").disabled = text.length < minLength;
}
valid(); // run it at least once on start
<input type="text" id="text1" onkeyup="valid()">
<input type="text" id="text2">
I would just change #Korat code event to keyup like this:
<div>
<input type="text" id="in1" onkeyup="enablesecond()";/>
<input type="text" id="in2" disabled="true"/>
</div>
<script>
var text1 = document.getElementById("in1");
text1.onkeyup = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("in2").disabled = false;
} else {
document.getElementById("in2").disabled = true;
}
}
</script>
I tried to create my own so that I could automate this for more than just two inputs although the output is always set to null, is it that I cannot give text2's id from text1?
<div id="content">
<form id="form1">
<input type="text" id="text1" onkeyup="valid(this.id,text2)">
<input type="text" id="text2" disabled="disabled">
<script language ="javascript">
function valid(firstID,secondID){
var firstTag = document.getElementById(firstID).value.length;
var min = 0;
if(firstTag > min)
//if the text entered is longer than 1 alert to screen
{
document.getElementById(secondID).disabled = false;
}
if(firstTag == 0){
document.getElementById(secondID).disabled = true;
}
}
//once input from text1 is entered launch this function
</script>
</form>
First, you have to correct your code "document.getElementById("text1").length" to "document.getElementById("text1").value.length".
Second, there are two ways you can remove disabled property.
1) Jquery - $('#text2').prop('disabled', false);
2) Javascript - document.getElementById("text2").disabled = false;
Below is the example using javascript,
function valid() {
var firstTag = document.getElementById("text1").value.length;
var min = 1;
if (firstTag > min) {
document.getElementById("text2").disabled = false;
}
else
{
document.getElementById("text2").disabled = true;
}
}
<input type="text" id="text1" onkeyup="valid()">
<input type="text" id="text2" disabled="disabled">
If I understand you correctly, what you are asking is how to remove the disabled attribute (enable) from the second input when more than 1 character has been entered into the first input field.
You can to use the oninput event. This will call your function every time a new character is added to the first input field. Then you just need to set the second input field's disabled attribute to false.
Here is a working example.
Run this example at Repl.it
<!DOCTYPE html>
<html>
<body>
<!-- Call enableInput2 on input event -->
<input id="input1" oninput="enableInput2()">
<input id="input2" disabled>
<script>
function enableInput2() {
// get the text from the input1 field
var input1 = document.getElementById("input1").value;
if (input1.length > 1) {
// enable input2 by setting disabled attribute to 'false'
document.getElementById("input2").disabled = false;
} else {
// disable input2 once there is 1 or less characters in input1
document.getElementById("input2").disabled = true;
}
}
</script>
</body>
</html>
NOTE: It is better practice to use addEventListener instead of putting event handlers (e.g. onclick, oninput, etc.) directly into HTML.

Disabling a array of textbox when any one textbox have a value

how can i disable all textbox if any one of textbox have a value?? I have array of cost_type and its cost, if any of the cost enterd.. all the other textboxes for cost_type should be disable.if no cost entered.. all text field should be editable. I already try this code but its not working.
function stoppedTyping(iVal){
var costs=document.getElementsByName("cost")[iVal].value;
if(costs > 0) {
document.getElementById("cost_" + iVal).disabled=true;
} else {
document.getElementById("cost_" + iVal).disabled=false;
}
}
<td colspan="4">
<input type="text" size="10" maxlength="8" name="cost" id="cost_<c:out value="${y}"/>" value="<c:out value="${costDto.cost}"/>"
onBlur=" stoppedTyping(<c:out value="${y}"/>)"; "/>
</td>
Try checking the length of the value:
var costs = document.getElementsByName("cost")[iVal].value;
if(costs.length > 0) {
}
or a little more compact:
var costs = document.getElementsByName("cost")[iVal].value;
document.getElementById("cost_" + iVal).disabled = costs.length > 0;
Add this to your script.
$('.enableToggle').on('keyup paste', function(){
var curVal = $(this).val().replace(/\s+/g,'').length > 0;
$(this).siblings('.enableToggle').prop('disabled', curVal);
});
and add class="enableToggle" to all your input fields.

jquery each loop check if at least one field has been filled

Let's say that I have an HTML structure like this:
<input type="text" name="input_1" class="required" value="" />
<input type="text" name="input_2" class="required" value="" />
<input type="text" name="input_3" class="required one" value="" />
<input type="text" name="input_4" class="required one" value="" />
<input type="text" name="input_5" class="required" value="" />
As you can see each text field above has the class required but there are two of them that also have the class one. What I wanna do is to iterate over these text fields and check if they are not empty but for the ones that have the class one, at least one of them is required (not both at the same time). If I iterate over the input with class required, how do I check if at least one of the inputs with class one has been filled (within the same loop)? Thank you
You can do:
var oneIsFilled = false;
$(":text.required").each(function() {
if ($(this).hasClass("one") {
if (this.value.length > 0)
oneIsFilled = true;
}
});
These here will additionally cover the checking of the required fields:
Working example see my fiddle: http://jsfiddle.net/Florian_Loch/A3C5C/1/
function click() {
var bool = check();
if (bool) {
alert("OK!");
} else {
alert("NOOOO!");
}
}
function check() {
var one = false;
var res = true;
$(".required").each(function () {
if ($(this).hasClass("one") && this.value.length > 0) {
one = true;
}
if ($(this).hasClass("required") && $(this).hasClass("one") == false && this.value.length == 0) {
res = false;
return; //We can leave here already
}
});
if (!res) {
return false;
}
else {
return one;
}
}
Cheers,
Florian

Check all fields together?

There are three field. i want check each a of field if have value, show class .koko. if on all field not have value, hide class .koko.
How is it?
in the this code, each field is check separate but i want check all fields together:
<input type="text" name="ok" class="ko" value="">
<input type="text" name="ok" class="ko" value="">
<input type="text" name="ok" class="ko" value="">
<div class="koko" style="display: none;">Hello, how are you?</div>
$('.ko').live("keyup", function () {
var $val = $(this).val();
$('.koko').show();
if ($val == '') {
$('.koko').hide()
}
});
DEMO
You could do it this way:
$('.ko').live("keyup", function () {
var $val = $(this).val();
$('.koko').show();
var collectiveValue = '';
$('.ko').each(function(){collectiveValue += this.value})
if(collectiveValue.length == 0)
$('.koko').hide();
});
http://jsfiddle.net/abdQc/
$('.ko').live("keyup", function () {
var showOrHide = $(".ko[value^='']").length >= 0;
$('.koko').toggle(showOrHide);
});

Categories