Is there anyway to clear a textarea without using an onclick function?

Is there anyway to clear a textarea without using an onclick function? - javascript

I want to achieve an automatic clear and display another value corresponds to new inputted data
This is my html code for input data and text area
function getInputValue(){
var integer = document.getElementById("integer").value;
var text = document.getElementById("answer");
for (var i = 1; i <= integer; i++) {
if (i % 15 == 0){
text.append( i, "= ","fizzbuzz\n")
}
else if (i % 3 == 0){
text.append( i, "= ","fizz \n")
}
else if (i % 5 == 0){
text.append( i, "= ","buzz \n")
}
else{
text.append(i, "= \n")
}
}
}
<div class="form-floating mb-3">
<input class="form-control" id="integer" onChange="getInputValue()" type="text" placeholder="Input an Integer for N" data-sb-validations="required" />
<label for="integer">Input an Integer for N</label>
</div>
<div class="col-lg-6 form-floating answer mb-3">
<textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea>
</div>
If you will try to run the snippet you can see that if you will change the value in the input tag the textarea will just stack all the outputs

Because you are using append() always it is always adding to content. Just clear it everytime onChange is triggered so it resets. You can use :
text.innerHTML = '';
function getInputValue(){
var integer = document.getElementById("integer").value;
var text = document.getElementById("answer");
text.innerHTML = '';
for (var i = 1; i <= integer; i++) {
if (i % 15 == 0){
msg = i + "fizzbuzz";
text.append( i, "= ","fizzbuzz\n")
}
else if (i % 3 == 0){
text.append( i, "= ","fizz \n")
}
else if (i % 5 == 0){
text.append( i, "= ","buzz \n")
}
else{
text.append(i, "= \n")
}
}
}
<div class="form-floating mb-3">
<input class="form-control" id="integer" onChange="getInputValue()" type="text" placeholder="Input an Integer for N" data-sb-validations="required" />
<label for="integer">Input an Integer for N</label>
</div>
<div class="col-lg-6 form-floating answer mb-3">
<textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea>
</div>

Here is the solution:
let inputEl = document.querySelector('#integer')
let answerEl = document.querySelector('#answer')
inputEl.addEventListener('input', () => {
answerEl.value = ''
if (inputEl.value !== '') {
answerEl.value = getInputValue()
}
})
function getInputValue() {
var integer = inputEl.value;
var text = '';
for (var i = 1; i <= integer; i++) {
if (i % 15 == 0) {
text += i +"= fizzbuzz\n"
} else if (i % 3 == 0) {
text += i +" = fizz \n"
} else if (i % 5 == 0) {
text += i +" = buzz \n"
} else {
text += i +" = \n"
}
}
return text
}
<div class="form-floating mb-3">
<input class="form-control" id="integer" type="text" placeholder="Input an Integer for N" data-sb-validations="required" />
<label for="integer">Input an Integer for N</label>
</div>
<div class="col-lg-6 form-floating answer mb-3">
<textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea>
</div>
For context.
Remove the inline onChange="getInputValue()"
Setup getInputValue as a return type
Check if input is empty else run function

As far as I can see here, there isn't a way to clear a textarea without using an onclick function.

Try using the oninput event instead of the onchange event.

Related

how to change value inside input id by if statement at javascript

in my JavaScript
$("#inputDatabaseName").on("keyup", function(e) {
alert("Changed!");
console.info(this.value);
var nilaicli = this.value,
skorcli = document.getElementById("skorclis");
var cli1 = parseFloat(nilaicli.value) || 2;
var x = cli1.toFixed(2);
if (x <= 39.99 && x >= 0) {
skorcli.value = 1; //its the only come out and dont want change again if i input another number in inputid="inputDatabaseName". :(
} else if (x >= 40.0 && x <= 59.99) {
skorcli.value = 2;
} else if (x >= 60.0 && x <= 79.99) {
skorcli.value = 3;
} else if (x >= 80.0 && x <= 89.99) {
skorcli.value = 4;
} else if (x >= 90.0 && x <= 100) {
skorcli.value = 5;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3">
<div class="card card-chart">
<div class="card-header">
<div class="row">
<p> Input CLI</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-8">
<label>Nilai CLI : </label>
<input type="text" name="nama" class="col-sm-4 nilaicli" id="inputDatabaseName">
<br>
</div>
</div>
<div class="row">
<div class="col-8">
<label> Skor CLI : </label>
<input type="text" name="nama" class="col-sm-3" id="skorclis" readonly="true" onkeypress="return onlyNumberKey(event)">
</div>
</div>
</div>
</div>
</div>
</div>
i want change value in inputid="skorclis" again if i input something in inputid="inputDatabaseName".
but my script dont want change value at inputid="skorclis" repeatly. only want the first if statement. and dont want change again. how to make it become change again?

$("#inputDatabaseName").on("keyup", function(e) {
const nilaicli = this.value;
const cli1 = parseFloat(nilaicli) || 2;
const x = cli1.toFixed(2);
hanldeChange(x);
});
const hanldeChange = (x) => {
const skorcli = document.getElementById("skorclis");
console.info(x);
if (x <= 39.99) {
skorcli.value = 1;
} else if (x <= 59.99) {
skorcli.value = 2;
} else if (x <= 79.99) {
skorcli.value = 3;
} else if (x <= 89.99) {
skorcli.value = 4;
} else if (x <= 100) {
skorcli.value = 5;
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3">
<div class="card card-chart">
<div class="card-header">
<div class="row">
<p> Input CLI</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-8">
<label>Nilai CLI : </label>
<input type="text" name="nama" class="col-sm-4 nilaicli" id="inputDatabaseName">
<br>
</div>
</div>
<div class="row">
<div class="col-8">
<label> Skor CLI : </label>
<input type="text" name="nama" class="col-sm-3" id="skorclis" readonly="true" onkeypress="return onlyNumberKey(event)">
</div>
</div>
</div>
</div>
</div>
</div>

Have look to that:
const myForm = document.querySelector('#my-form') // use a form, it is
// usefull to access on myForm.nilaicli
// element or any one else
myForm.nilaicli.addEventListener('input',function() // use input event, it's also work with mouse copy/paste
{
let x = parseFloat(this.value) || 2
this.value = x // .toFixed(2)
switch (true)
{
case (x >= 0 && x < 40) : myForm.skorclis.value = 1; break;
case (x >= 40 && x < 60) : myForm.skorclis.value = 2; break;
case (x >= 60 && x < 80) : myForm.skorclis.value = 3; break;
case (x >= 80 && x < 90) : myForm.skorclis.value = 4; break;
case (x >= 90 && x <= 100) : myForm.skorclis.value = 5; break;
}
})
myForm.onsubmit = e => e.preventDefault() // disable form submit
fieldset {
display : block;
margin : 1em;
width : 17em;
}
label {
display : block;
margin : 1em;
}
label input {
float : right;
padding : 0 .7em;
width : 9em;
}
<form id="my-form">
<fieldset>
<legend>Input CLI</legend>
<label>
Nilai CLI :
<input type="text" name="nilaicli">
</label>
<label>
Skor CLI :
<input type="text" name="skorclis" readonly >
</label>
</fieldset>
</form>

Auto hide response message

Am JavaScript newbie, and i wanted some help.
the above script can validate valid and invalidate credit card / debit
my problem is that, how can i clear the "invalid credit / debit card number" error message when user has started typing again the card
its like i want to auto clear error message when user has re-type again
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Payment
<img style="visibility: hidden" class="mastercard" src="https://img.icons8.com/color/48/000000/mastercard.png">
<img style="visibility: hidden" class="visacard" src="https://img.icons8.com/color/48/000000/visa.png">
<img style="visibility: hidden" class="discovercard" src="https://img.icons8.com/color/48/000000/discover.png">
<img style="visibility: hidden" class="amexcard" src="https://img.icons8.com/color/48/000000/amex.png">
</h2>
<div class="form-group">
<label for="name-on-card">Name on Card</label>
<input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
</div>
<div class="form-group">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="20">
<span id="loginError"></span>
</div>
<!--<div class="">
<select class="month_year_select" name="month" id="month">
<option value="">exp month</option>
</select>
</div>
<div class="">
<select class="month_year_select" id="year" name="year">
<option value="">exp year</option>
</select>
</div>-->
<div class="CVV">
<label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
</div>
<script type="text/javascript">
document.getElementById('cc-cvv').addEventListener('change', CWcheck); //recommended way
document.getElementById('cc_number').onchange = creditCheck; //it is OK too
function CWcheck() { //function name should conventionally start with lower case but isn't big deal
//"this" is the element which fired the event
if (!/^\d{3,4}$/.test(this.value)) {
this.value = '';
this.focus();
alert('CVV is 3 or 4 digits');
}
}
function creditCheck() {
// hide cc logos
var ccImgs = document.querySelectorAll('h2 img');
for (var i = 0, ccImg; ccImg = ccImgs[i]; ++i) {
ccImg.style.visibility = 'hidden';
}
var ccNum = this.value.replace(/\D/g, ''); //remove all non-digits
if (ccNum.length < 15 /*15 is amex*/ || ccNum.length > 16) {
document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
this.focus();
return false;
}
//implement Luhn algorithm
var check = ccNum.split('') //get array
.reverse()
.map(function(el, index) {
return el * (index % 2 + 1); //multiply even positions by 2
})
.join('') //combine array of strings
.split('')
.reduce(function(a, b) { //sum digits
return a + (b - 0);
}, 0);
if (!check || (check % 10)) { //checksum should be none-zero and dividable by 10
document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
this.focus();
return false;
}
//test passed. show card logo
if (/^5[1-5]/.test(ccNum))
document.querySelector('h2 img.mastercard').style.visibility = 'visible';
else if (/^4/.test(ccNum))
document.querySelector('h2 img.visacard').style.visibility = 'visible';
else if (ccNum.length == 15 && /^3[47]/.test(ccNum))
document.querySelector('h2 img.amexcard').style.visibility = 'visible';
else if (/^6011/.test(ccNum))
document.querySelector('h2 img.discovercasd').style.visibility = 'visible';
//and so on
else {
document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
this.focus();
return false;
}
//test passed. format the string
this.value = ccNum
.replace(/^(\d{4})(\d{4})(\d{4})(\d+)$/, '$1 $2 $3 $4');
}
</script>
</body>
</html>

I have added a input event listener to the input, and based on the length of text present in input, I clear the error message (if its length is greater than 0, which marks user has started typing again.)
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Payment
<img style="visibility: hidden" class="mastercard" src="https://img.icons8.com/color/48/000000/mastercard.png">
<img style="visibility: hidden" class="visacard" src="https://img.icons8.com/color/48/000000/visa.png">
<img style="visibility: hidden" class="discovercard" src="https://img.icons8.com/color/48/000000/discover.png">
<img style="visibility: hidden" class="amexcard" src="https://img.icons8.com/color/48/000000/amex.png">
</h2>
<div class="form-group">
<label for="name-on-card">Name on Card</label>
<input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
</div>
<div class="form-group">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="20">
<span id="loginError"></span>
</div>
<!--<div class="">
<select class="month_year_select" name="month" id="month">
<option value="">exp month</option>
</select>
</div>
<div class="">
<select class="month_year_select" id="year" name="year">
<option value="">exp year</option>
</select>
</div>-->
<div class="CVV">
<label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
</div>
<script type="text/javascript">
document.getElementById('cc-cvv').addEventListener('change', CWcheck); //recommended way
document.getElementById('cc_number').onchange = creditCheck; //it is OK too
function CWcheck() { //function name should conventionally start with lower case but isn't big deal
//"this" is the element which fired the event
if (!/^\d{3,4}$/.test(this.value)) {
this.value = '';
this.focus();
alert('CVV is 3 or 4 digits');
}
}
function creditCheck() {
// hide cc logos
var ccImgs = document.querySelectorAll('h2 img');
for (var i = 0, ccImg; ccImg = ccImgs[i]; ++i) {
ccImg.style.visibility = 'hidden';
}
var ccNum = this.value.replace(/\D/g, ''); //remove all non-digits
if (ccNum.length < 15 /*15 is amex*/ || ccNum.length > 16) {
document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
this.focus();
return false;
}
//implement Luhn algorithm
var check = ccNum.split('') //get array
.reverse()
.map(function(el, index) {
return el * (index % 2 + 1); //multiply even positions by 2
})
.join('') //combine array of strings
.split('')
.reduce(function(a, b) { //sum digits
return a + (b - 0);
}, 0);
if (!check || (check % 10)) { //checksum should be none-zero and dividable by 10
document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
this.focus();
return false;
}
//test passed. show card logo
if (/^5[1-5]/.test(ccNum))
document.querySelector('h2 img.mastercard').style.visibility = 'visible';
else if (/^4/.test(ccNum))
document.querySelector('h2 img.visacard').style.visibility = 'visible';
else if (ccNum.length == 15 && /^3[47]/.test(ccNum))
document.querySelector('h2 img.amexcard').style.visibility = 'visible';
else if (/^6011/.test(ccNum))
document.querySelector('h2 img.discovercasd').style.visibility = 'visible';
//and so on
else {
document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
this.focus();
return false;
}
//test passed. format the string
this.value = ccNum
.replace(/^(\d{4})(\d{4})(\d{4})(\d+)$/, '$1 $2 $3 $4');
}
document.querySelector("#cc_number").addEventListener("input", function() {
if (document.querySelector("#cc_number").value.length > 0) {
document.getElementById("loginError").innerHTML = "";
}
})
</script>
</body>
</html>

Based on your code, I'd suggest adding a line to clear the error message into your event handler:
document.getElementById('cc-cvv').addEventListener('change', function() {
document.getElementById("loginError").innerHTML = "";
CWcheck();
});
This will reset the message to an empty string every time a keystroke is read. It'll also show error messages when the check comes back as invalid.
Hopes this helps.

There are multiple ways of doing this. With your current setup you could use a class to show and hide the error rather than adding the innerHTML. This class could just be removed after each change. Example with your code, attached.
document.getElementById('cc-cvv').addEventListener('change', CWcheck); //recommended way
document.getElementById('cc_number').onchange = creditCheck; //it is OK too
function CWcheck() { //function name should conventionally start with lower case but isn't big deal
//"this" is the element which fired the event
if (!/^\d{3,4}$/.test(this.value)) {
this.value = '';
this.focus();
alert('CVV is 3 or 4 digits');
}
}
function creditCheck() {
document.getElementById("loginError").classList.remove('card-error--active')
// hide cc logos
var ccImgs = document.querySelectorAll('h2 img');
for (var i = 0, ccImg; ccImg = ccImgs[i]; ++i) {
ccImg.style.visibility = 'hidden';
}
var ccNum = this.value.replace(/\D/g, ''); //remove all non-digits
if (ccNum.length < 15 /*15 is amex*/ || ccNum.length > 16) {
document.getElementById("loginError").classList.add('card-error--active')
this.focus();
return false;
}
//implement Luhn algorithm
var check = ccNum.split('') //get array
.reverse()
.map(function(el, index) {
return el * (index % 2 + 1); //multiply even positions by 2
})
.join('') //combine array of strings
.split('')
.reduce(function(a, b) { //sum digits
return a + (b - 0);
}, 0);
if (!check || (check % 10)) { //checksum should be none-zero and dividable by 10
document.getElementById("loginError").classList.add('card-error--active')
this.focus();
return false;
}
//test passed. show card logo
if (/^5[1-5]/.test(ccNum))
document.querySelector('h2 img.mastercard').style.visibility = 'visible';
else if (/^4/.test(ccNum))
document.querySelector('h2 img.visacard').style.visibility = 'visible';
else if (ccNum.length == 15 && /^3[47]/.test(ccNum))
document.querySelector('h2 img.amexcard').style.visibility = 'visible';
else if (/^6011/.test(ccNum))
document.querySelector('h2 img.discovercasd').style.visibility = 'visible';
//and so on
else {
document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
this.focus();
return false;
}
//test passed. format the string
this.value = ccNum
.replace(/^(\d{4})(\d{4})(\d{4})(\d+)$/, '$1 $2 $3 $4');
}
.card-error{
display:none;
}
.card-error--active{
display:block;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Payment
<img style="visibility: hidden" class="mastercard" src="https://img.icons8.com/color/48/000000/mastercard.png">
<img style="visibility: hidden" class="visacard" src="https://img.icons8.com/color/48/000000/visa.png">
<img style="visibility: hidden" class="discovercard" src="https://img.icons8.com/color/48/000000/discover.png">
<img style="visibility: hidden" class="amexcard" src="https://img.icons8.com/color/48/000000/amex.png">
</h2>
<div class="form-group">
<label for="name-on-card">Name on Card</label>
<input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
</div>
<div class="form-group">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="20">
<span id="loginError" class="card-error">invalid credit / debit card number</span>
</div>
<!--<div class="">
<select class="month_year_select" name="month" id="month">
<option value="">exp month</option>
</select>
</div>
<div class="">
<select class="month_year_select" id="year" name="year">
<option value="">exp year</option>
</select>
</div>-->
<div class="CVV">
<label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
</div>
</body>
</html>

How should I put limit inside for loop using if condition using javascript

My goal is that only 15 quantities of input elements can be accepted, once the user enters 16 it should say that only 15 input elements is allowed. However I don't know how will I do this. I tried putting condition inside for but it is not not working. I am a little bit confused on this
Here is my HTML code
<div class="form-group">
<label> Quantity: </label>
<input class="form-control" name="quantity" type="number" id="get_Elem"
required>
<br>
<input type="button" id="sb_add_ctrl" name="is_Sub" class="btn btn-
primary" value="Add Control Number">
</div>
<div class="form-group" name="parent" id="parent"></div>
Here is my JS code
$(document).on('click', '#sb_add_ctrl', function() {
var element = $('#get_Elem').val();
var input;
var parent = $(document.getElementById("parent"));
var value = $('#sel_control_num').val();
functionPopulate(parent);
if (isNaN(element)) {
return;
}
for (var i = 0; i < element; i++) {
if(should I do it here??){
}
value = value.replace(/(\d+)$/, function(match, element) {
const nextValue = ++match;
return ('0' + nextValue).slice(1);
});
document.getElementById("parent").style.padding = "5px 0px 0px 0px";
document.getElementById("parent").innerHTML += '<br><input type="text"
value="' + value +
'" class="form-control" name="get_Input_show[]" required>'
}
});

You can check if the element value is < 16 if yes then only add html else show error message.
Demo Code :
$(document).on('click', '#sb_add_ctrl', function() {
var element = $('#get_Elem').val();
var input;
//var value = $('#sel_control_num').val();
var value = 12;
//functionPopulate(parent);
if (isNaN(element)) {
return;
}
//check if elemnt value if < 16
if (element < 16) {
$("#parent").empty() //empty div
for (var i = 0; i < element; i++) {
/* value = value.replace(/(\d+)$/, function(match, element) {
const nextValue = ++match;
return ('0' + nextValue).slice(1);
});*/
document.getElementById("parent").style.padding = "5px 0px 0px 0px";
document.getElementById("parent").innerHTML += '<br><input type="text" value = "' + value + '" class="form-control" name="get_Input_show[]" required>';
}
} else {
alert("only 15") //show error
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label> Quantity: </label>
<input class="form-control" name="quantity" type="number" id="get_Elem" required>
<br>
<input type="button" id="sb_add_ctrl" name="is_Sub" class="btn btn-
primary" value="Add Control Number">
</div>
<div class="form-group" name="parent" id="parent"></div>

There are two ways in which you can restrict it
You can use maxLength property of an input tag, which will restrict the user to input the 16th character.
You can keep checking the value in the input field and show error if the length is more than 15 character. To do this you can use onkeypress event on input, like
HTML
<input type="text" id="test" onkeypress="test()" />
JS:
<script>
function test() {
alert('Hi')
}
</script>

Duplicate inputs when append using jQuery

Here is the code:
<form class="ui form attached fluid loading segment" onsubmit="return contact(this)">
<div class="field">
<label>Preferred Tour</label>
<div class="field">
<?php
$conn=mysqli_connect('####','####','####','####');
echo '<select required id="tourInfo">';
echo '<option value="" selected disabled>--Preferred Tour--</option>';
$db = mysqli_query($conn, "SELECT `id`,`tourprice`,`tourname` FROM `available_tours`");
while ($d=mysqli_fetch_assoc($db)) {
echo "<option value=".$d['id']." id=".$d['tourname']. " data-price=".$d['tourprice'].">".$d['tourname']."</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="field" id="hiddenTortu" style="display: none;">
<label>Attention</label>
<div class="ui icon">
<p><b>The minimum of people for this tour is 5, less than 5 the tour is not realisable</b></p>
</div>
</div>
<div class="field">
<label>Available Time</label>
<div class="field">
<?php
$conn=mysqli_connect('####','####','####','####');
echo '<select name="gender" required id="timeInfo">';
echo '<option value="" selected disabled>--Preferred Time--</option>';
$db = mysqli_query($conn, "SELECT `time_real` FROM `available_time`");
while ($d=mysqli_fetch_assoc($db)) {
echo "<option value=".$d['time_real'].">".$d['time_real']."</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="two fields">
<div class="field" id="pax">
<label>Please specify the number of People according to the perred tour selection</label>
Here starts the problem with the following script according to the tour selection I'm trying to set up a minimum and maximum so that the user can't choose more numbers for the people on the tour.
The problem is that when the user select first one option, and then realised that the best option is another one, when he/she does another selection the input created with jQuery that was appended remains and because of the new selection a new input is created.
The intention is that if the user chooses option 1 the input append appears according to option one, but if the user regrets and prefers option 2 that the input for the option 1 disappears and a new input according to option 2 appears and so on for the entire if conditions.
<script>
$(document).ready(function(){
$('#tourInfo').on('change', function() {
if ( this.value == '1')
{
$("#pax").append($('<input placeholder="Number of People" type="number" id="peopleInfo" min="1" max="2" value="1" required>'));
(function ($) {
$.fn.restrict = function () {
return this.each(function(){
if (this.type && 'number' === this.type.toLowerCase()) {
$(this).on('change', function(){
var _self = this,
v = parseFloat(_self.value),
min = parseFloat(_self.min),
max = parseFloat(_self.max);
if (v >= min && v <= max){
_self.value = v;
}
else {
_self.value = v < min ? min : max;
}
});
}
});
};
})(jQuery);
$('#peopleInfo').restrict();
}
else if (this.value == '2')
$("#pax").append($('<input placeholder="Number of People" type="number" id="peopleInfo" min="3" max="5" value="3" required>'));
(function ($) {
$.fn.restrict = function () {
return this.each(function(){
if (this.type && 'number' === this.type.toLowerCase()) {
$(this).on('change', function(){
var _self = this,
v = parseFloat(_self.value),
min = parseFloat(_self.min),
max = parseFloat(_self.max);
if (v >= min && v <= max){
_self.value = v;
}
else {
_self.value = v < min ? min : max;
}
});
}
});
};
})(jQuery);
$('#peopleInfo').restrict();
}
else if (this.value == '3')
{
$("#pax").append($('<input placeholder="Number of People" type="number" id="peopleInfo" min="6" max="15" value="6" required>'));
(function ($) {
$.fn.restrict = function () {
return this.each(function(){
if (this.type && 'number' === this.type.toLowerCase()) {
$(this).on('change', function(){
var _self = this,
v = parseFloat(_self.value),
min = parseFloat(_self.min),
max = parseFloat(_self.max);
if (v >= min && v <= max){
_self.value = v;
}
else {
_self.value = v < min ? min : max;
}
});
}
});
};
})(jQuery);
$('#peopleInfo').restrict();
}...
...});
};
})(jQuery);
$('#peopleInfo').restrict();
}
});
});
</script>
</div>
<div class="field">
<label><br>Date of Tour</label>
<input type="text" readonly required id="tourDate" class="datepicker-here form-control" placeholder="ex. August 03, 1998">
</div>
</div>
<div style="text-align:center">
<div>
<label>Ensure all details have been filled correctly</label>
</div>
<button class="ui green submit button">Submit Details</button>
</div>
</form>
</div>

Move your script out from inside the div with id pax, then
Clear your html of the element with id pax before appending:
//Using JQuery
$('#pax').html('');

add and delete divs created in JS

So I got this working almost perfectly but for some reason deleteInput() won't delete 2 div's in a row and I can not figure it out. The function still works but it won't delete. can someone explain why this is?
https://codepen.io/kScheid/pen/pLYXwE?editors=1010
HTML:
<div id="parent" class="first-div">
<label for="email">Email</label><input type="email" id="mail" name="usermail"> <div class="line-left shrinkM-underline"></div>
<div id="child" class="showE flex-it">
<div>
<input type="email"><div class="line-left shrinkM-underline"></div>
</div>
<span type="button" value="Remove Element" onClick="removeElement('parent','child');" class="remove"> <strong>Remove</strong></span>
</div>
<input onclick="addElement('parent', 'child');" class="input-button" type="button" value="+Add another email">
</div>
Javascript:
var counter = 1;
var limit = 5;
var newdiv = document.createElement('div');
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
function deleteInput() {
for (var x = 0; x < counter; x++){
newdiv.removeChild(newdiv.childNodes[0]);
}
counter--;
}
Base format before JS
Added another Div w/JS

This may solve your problem if I understood what you are trying to do correctly. I've added an email class to your divs to remove the emails more easily.
var counter = 1;
var limit = 5;
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
var newdiv = document.createElement('div');
newdiv.className = "email"
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
function deleteInput(divName) {
var emails = document.getElementsByClassName("email");
if (emails.length) {
document.getElementById(divName).removeChild(emails[emails.length - 1]);
counter--;
}
}
<div id="parent" class="first-div">
<label for="email">Email</label><input type="email" id="mail" name="usermail">
<div class="line-left shrinkM-underline"></div>
<div id="child" class="showE flex-it">
<div>
<input type="email">
<div class="line-left shrinkM-underline"></div>
</div>
<span type="button" value="Remove Element" onClick="deleteInput('parent','child');" class="remove"> <strong>Remove</strong></span>
</div>
<input onclick="addInput('parent', 'child');" class="input-button" type="button" value="+Add another email">
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Is there anyway to clear a textarea without using an onclick function? - javascript

As far as I can see here, there isn't a way to clear a textarea without using an onclick function.

Try using the oninput event instead of the onchange event.

Related

how to change value inside input id by if statement at javascript

Auto hide response message

How should I put limit inside for loop using if condition using javascript

Duplicate inputs when append using jQuery

add and delete divs created in JS

Categories

Resources