I have a textarea field in a form where I can copy paste mobile numbers. It will have one number per line, like this I can copy paste hundreds of mobile numbers to submit in that form.
I want to trim that field, I only want 10 digit numbers to remain in that field after copy paste.
Only valid 10 digit numbers should remain and all other invalid numbers should automatically remove from that field. Not only copy paste I can type some numbers after paste few.
Example:
If I paste this numbers in this textarea field,
9848012345
9949123450
9949 123456
99491234
99491234561
+1236547890
9848098765
From this only 10 digit numbers should remain in field, like this:
9848012345
9949123450
9848098765
And Using this script (onKeyUp="countline()") to count total numbers (lines) in that field.
When I tried some solutions, but losing number count functionality.
Any solution to do this without losing count function?
<form class="form" method="post" action="" enctype="multipart/form-data">
<div class="form-group row">
<label for="title" class="col-lg-2 col-form-label">Mobile Numbers </label>
<div class="col-lg-10">
<textarea onKeyUp="countline()" type="text" class="form-control required" required
cols="10" rows="7" id="mobileno" name="mobileno"> </textarea>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 control-label " for="userName">Number Count </label>
<div class="col-lg-10">
<input type="text" class="form-control " readonly id="numbercount" required name="numbercount" value="">
</div>
</div>
<div class="form-group row">
<div class="col-lg-12 text-center">
<button type="submit" name="submit" class="btn btn-success btn-lg waves-effect waves-light m-r-10">SUBMIT </button>
</div>
</div>
</form>
<script>
function countline() {
var length = $('#mobileno').val().split("\n").length;
document.getElementById("numbercount").value = length;
}
</script>
Any help please. Thanks in advance.
Try to check this one. I have updated your HTML a little bit. so both HTML and javascript. Hope that will work.
<form class="form" method="post" enctype="multipart/form-data">
<div class="form-group row">
<label for="title" class="col-lg-2 col-form-label">Mobile Numbers </label>
<div class="col-lg-10">
<textarea require type="text" class="form-control required" required
cols="10" rows="7" id="mobileno" name="mobileno"> </textarea>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 control-label " for="userName">Number Count </label>
<div class="col-lg-10">
<input type="text" class="form-control " readonly id="numbercount" required name="numbercount" value="">
</div>
</div>
<div class="form-group row">
<div class="col-lg-12 text-center">
<button id="btn" type="submit" name="submit" class="btn btn-success btn-lg waves-effect waves-light m-r-10">SUBMIT </button>
</div>
</div>
</form>
This is javaScript:
<script>
let numbers =document.querySelector('#mobileno');
let numbercount =document.querySelector('#numbercount');
addEventListener('mouseout',getNumbers);
function getNumbers(event){
event.preventDefault();
let getnums = numbers.value.trim();
getnums = getnums.split("\n");
let result = "";
let totalNum = 0;
getnums.forEach(num => {
if(num.length ==10 && num.indexOf("+")){
result += num.substring(0, 10) + "\n";
totalNum++;
}
});
numbers.value = result;
numbercount.value = totalNum;
}
</script>