Develop Reference

If click count number JavaScript

I'm building a demo login form. For the demo, I'd like two things to happen:
When the user clicks the login button for the first time, an error message appears.
When the user clicks the login button for the second time, they are directed to another page.
Here's how my code looks so far:
function toggleError() {
var toggleError = document.querySelector('.message--error');
toggleError.classList.toggle('error-toggled');
}
.message {
display: none;
}
.error-toggled {
display: block;
}
<div class="message message--error">
<span class="message__text">The login details you entered are incorrect.</span>
</div>
<form onsubmit="toggleError(); return false;" action="/" method="get" class="login__form" autocomplete="off">
<label for="email" class="srt">Email</label>
<input type="email" name="email" id="email" required placeholder="Email" class="input input--border-right">
<label for="password" class="srt">Password</label>
<input type="password" name="password" id="password" required placeholder="Password" class="input">
<div class="login__actions">
<button type="submit" class="button">Log In</button>
Lost your password?
</div>
</form>
Using onsubmit="toggleError(); return false;" achieves my first objective of displaying an error message.
How would I extend this function so the user is directed to a page when they click the button for a second time? I'm guessing I would write some type of loop?

Based on first two comments here a possible way:
<script>
var clickCounter=0;
function toggleError() {
//Increase the value by one
clickCounter++;
if (clickCounter == 1) {
//what ever you want to do
return false;
} else if (clickCounter == 2) {
//You need to change the value again
...
var toggleError = document.querySelector('.message--error');
toggleError.classList.toggle('error-toggled');
return false;
}
}
</script>

How to alter the name value in jQuery "add another field" function

I'm trying to add another input field as the user clicks on the "add another field" button.
Although it works perfectly, there's this minor issue as the name in the input field supposed to add +1 to the earlier name value in the additional field, which returns as a string instead of int.
Upon clicking on "Add Additional field" a new input appears with name value as name="asin1" and further on goes as name="asin11" & name="asin111". How can I add it up as a count?
And on the other hand, how can I know on the backend page how many fields were actually user added using PHP.
Any help is greatly appreciated.
$('.extra-fields-customer').click(function() {
$('.customer_records').clone().appendTo('.customer_records_dynamic');
$('.customer_records_dynamic .customer_records').addClass('single remove');
$('.single .extra-fields-customer').remove();
$('.single').append('Remove Fields');
$('.customer_records_dynamic > .single').attr("class", "remove");
$('.customer_records_dynamic input').each(function() {
var count = 1;
var fieldname = $(this).attr("name");
$(this).attr('name', fieldname + count);
count++;
});
});
$(document).on('click', '.remove-field', function(e) {
$(this).parent('.remove').remove();
e.preventDefault();
});
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<div class="customer_records">
<input type="text" class="input" id="fname" name="asin" required placeholder="ASIN/FSIN or Wesite Link of the product">
<a class="extra-fields-customer button" href="#">Add Another Field</a>
</div>
<br>
<div class="customer_records_dynamic"></div>

First solution:
defined count & fieldname out of function .each
$('.extra-fields-customer').click(function() {
$('.customer_records').clone().appendTo('.customer_records_dynamic');
$('.customer_records_dynamic .customer_records').addClass('single remove');
$('.single .extra-fields-customer').remove();
$('.single').append('Remove Fields');
$('.customer_records_dynamic > .single').attr("class", "remove");
var count = 1;
var fieldname='asin';
$('.customer_records_dynamic input').each(function() {
$(this).attr('name', fieldname + count);
count++;
});
});
$(document).on('click', '.remove-field', function(e) {
$(this).parent('.remove').remove();
e.preventDefault();
});
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<div class="customer_records">
<input type="text" class="input" id="fname" name="asin" required placeholder="ASIN/FSIN or Wesite Link of the product">
<a class="extra-fields-customer button" href="#">Add Another Field</a>
</div>
<br>
<div class="customer_records_dynamic"></div>
Another solution:
edit input field Like:
<input type="text" class="input" id="fname" name="asin[]" required placeholder="ASIN/FSIN or Wesite Link of the product">
now you don't need to count your inputs and use this.
$('.customer_records_dynamic input').each(function() {
$(this).attr('name', fieldname + count);
count++;
});
just edit your back-end and receive input data asin as Array

Since you are using PHP on the backend, you really do not need to keep track of the names like you would for a set static number of fields.
Have a look at this:
<input type="text" name="asin[]" />
<input type="text" name="asin[]" />
<input type="text" name="asin[]" />
// php will convert it to an array in the backend as $_POST['asin']
In your PHP you'll want something like:
<?php
foreach ($_POST['asin'] as $asinInputValue) {
// iterate over each input's value
echo $asinInputValue . "<br>";
}

Each time I click button page refreshes

Title virtually says it all. Each time I click calculate button the page just refreshes. I added the stopPropagation and preventDefault which worked on my other button on a different page, however in this situation they don't seem to work. Any thoughts?
JS:
/******** Loan Balance Constructor *********/
function LoanBalance(mLoanAmt, mIntRate, nMonths, mMonthlyPmt){
//Declarations
this.loanAmount = mLoanAmt;
this.interestRate = mIntRate;
this.numbOfMonths = nMonths;
this.monthlyPayment = mMonthlyPmt;
//Calculates Remaining Balance
this.calculateRemaining = function(){
console.log(this.loanAmount);
console.log(this.interestRate);
console.log(this.numbOfMonths);
console.log(this.monthlyPayment);
//COME BACK TO FIX THE FORMULA
var remainingBalance = this.loanAmount*(Math.pow(1+this.interestRate, this.numbOfMonths) -
(this.monthlyPayment*(Math.pow(1 + this.interestRate, this.numbOfMonths) - 1) / this.interestRate));
return remainingBalance;
}
return this.calculateRemaining()
}
function newBalanceObject(e){
e.stopPropagation();
e.preventDefault();
var balanceObject = new LoanBalance(document.getElementById("loanAmount").value, document.getElementById("interestRate").value,
document.getElementById("numMonthsPaid").value, document.getElementById("sliderDuration").value);
var result = balanceObject.calculateRemaining();
document.getElementById("remainingBalanceTag").innerHTML = "Your remaining balance is: " + "$" + result.toFixed(2);
}
HTML:
<div id="remainingBalance">
<h1 class="text-center">Loan Balance Calculator</h1>
<form>
<div class="form-group">
<label for="loanAmount">Loan Amount:</label>
<input class="form-control" id="loanAmount">
</div>
<div class="form-group">
<label for="interestRate">Interest Rate:</label>
<input class="form-control" id="interestRate" placeholder="Please enter number as a decimal">
</div>
<div class="form-group">
<label for="numMonthsPaid">Number of Months Paid: </label>
<input id="numMonthsPaid" type="text" data-slider-min="0" data-slider-max="600" data-slider-step="1" data-slider-value="300">
<div class="form-group">
<label for="sliderDuration">Loan Duration: </label>
<input id="sliderDuration" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="600" data-slider-step="1" data-slider-value="300"/>
</div>
<button id="calcButton" class="btn btn-default">Calculate</button>
</form>
<h1 class="text-center" id="remainingBalanceTag"></h1>
</div>

The form is getting submitted by default. You need to intercept the submission event and stop the default's browser action.
Since you haven't specified the action on the form element, it's simply refreshing the page, because it doesn't know where to send the data to.
Here's a sample code which shows how to intercept and stop all forms fom being submitted by the browser. Adjust it according to your setup so you only prevent submission of the forms that you want prevented.
Array.from(document.forms).forEach(form => {
form.addEventListener('submit', e => e.preventDefault())
}

Minimal length in textarea validation

I have a problem with my script.
It is only partly working. If i enter less then 15 charachters the alert appears but then i click ok on the alert massage and the from gets send anyway. I am not sure waht i'm doing wrong. Here is my script:
function checktextarea() {
var minLength = 15;
var $textarea = $('#massage');
if($textarea.text().split(/\s+/).length < minLength) {
alert('You need to enter at least ' + minLength + ' words');
return false;
}
}
This is the html:
<form action="kontaktsi.php" name="myForm" id="myForm" method="post" class="contact_form" onsubmit="checktextarea()">
<span class="sporo">
<input type="text" id="fname" name="fname" class="contacttextform form-control" placeholder="Name" required>
</span>
<input type="email" id="email" name="email" class="contacttextform" placeholder="Your email" required><br><br>
<textarea name="message" id="message" cols="8" rows="8" class="contacttextarea" placeholder="text text text?" required></textarea>
<br>
<div class="send">
<input name="send" type="submit" class="contactformbutton" style="width:150px;" value="Send">
</div>
</form>

change your <form> tag into this:
<form action="kontaktsi.php" ... method="post" onsubmit="return checktextarea()">
You need to add return to the call, in order to pass the boolean value false to the submit event.
There's also a typo in your script: change $('#massage') into $('#message')
Finally, you need to use val() instead of text() to get the value of a <textarea>.
Here's the final script:
function checktextarea() {
var minLength = 15;
var textarea = $('#message');
if(textarea.val().replace(' ') < minLength) {
alert('You need to enter at least ' + minLength + ' words');
return false;
}
return true;
}

I am not 100% sure if it is the only way, but the last time I solved this problem I avoided the generic onsubmit mechanism; precisely because of the missing way of breaking in case of error.
Instead, one can bind a jQuery submit event and then use preventDefault() in case of error, as described here:
http://api.jquery.com/submit/
One can even submit directly with jQuery: Submit a form using jQuery
It is slightly more work, but you have much better control.

try this
function checktextarea() {
var minLength = 15;
var $textarea = $('#massage');
if($textarea.val().split(' ').length < minLength) {
alert('You need to enter at least ' + minLength + ' words');
return false;
}
}

Add delimter to data posted to form

The post data is separated by commas. I need to add a delimiter (concatenate) such as '|' to all the input fields (text, textarea, select, etc) to the post data submitted by a form, but I do not want to change the value of the fields themselves in the form.
<form action="somepage.php" method="post">
<div class"line">
<input type="text" class="sometext" name="desc" />
</div>
<div class"line">
<input type="text" class="sometext" name="desc" />
</div>
<div class"line">
<input type="text" class="sometext" name="desc" />
</div>
<input type="submit" id="submitbutton" />
</form>
I tried the below code, but it changes the data in the form itself
$(document).on('click', '#submitbutton', function(){
$('.sometext').each(function(){
var descVal=''
var descVal = $('.sometext').val() + '|';
$(this).val(descVal);
});
});

When using $('.sometext').val() you're not specifying exactly which element you want the value of. Change:
var descVal = $('.sometext').val() + '|';
To:
var descVal = $(this).val() + '|';
Alternatively you can simply use:
$(this).val(this.value + '|');
$(document).on('click', '#submitbutton', function(){
$('.sometext').each(function(){
$(this).val(this.value + '|');
});
});