Develop Reference

How to update the total amount when tip is selected

I'm creating a simple food delivery service. I'm trying to figure out how to update total amount when tip is selected
if(choiceRegular.checked == true) {
var totalPrice = choiceRegular.value;
}else if (choicePremium.checked == true) {
totalPrice = choicePremium.value;
}else if(choiceRoyal.checked == true) {
totalPrice = choiceRoyal.value;
}else {
totalPrice = 0;
}
if(tenTip.checked == true) {
var tipPrice = tenTip.value * totalPriceNum
} else if(fiveTip.checked == true) {
tipPrice = fiveTip.value
} else if(twentyTip.checked == true) {
tipPrice = twentyTip.value
} else {
tipPrice = 0
}
totalPriceNum = Number(totalPrice);
tipPriceNum = Number(tipPrice);
document.getElementById('total-amount').innerHTML = '$'+totalPriceNum;

Without understanding the full scope I think in your case totalPriceNum = Number(totalPrice) + Number(tipPrice); would be the combined total.
If values for totalPrice and tipPrice have already been declared you might want to make it a function in JS
as a function e.g.:
function refreshTotal(){
var totalNumBeforeTip = Number(totalPrice);
if(tenTip.checked == true) {
var tipPrice = tenTip.value * totalPriceNum
} else if(fiveTip.checked == true) {
var tipPrice = fiveTip.value
} else if(twentyTip.checked == true) {
var tipPrice = twentyTip.value
} else {
var tipPrice = 0;
}
var tipPriceNum = Number(tipPrice);
var combinedTotal = totalNumBeforeTip + tipPrice;
var priceResultElement = document.getElementById('total-amount');
priceResultElement.innerHTML = '$'+combinedTotal;
}
in the html something like:
add $5 tip <input type="checkbox" id="tip-5" value="5.00" onChange="refreshTotal()">

Try this
HTML
<input id="tenTip" class="tipSelector" name="tip" data-tip-value="10" type="radio" />
<input id="fiveTip" class="tipSelector" name="tip" data-tip-value="5" type="radio" />
<input id="twentyTip" class="tipSelector" name="tip" data-tip-value="20" type="radio" />
JS
const totalAmount = document.getElementById('total-amount');
document.querySelectorAll('.tipSelector').forEach(tipSelector => {
tipSelector.onclick = () => {
totalAmount.innerHTML = totalPriceNum * (1 + tipSelector.dataset.tipValue / 100);
}
})

jQuery and input forms

I made this input form with Name and Text.
<form action="" method="post" class="main">
<label>Write a comment!</label><br>
<input placeholder="Name" class="form-text" name="user" type = "text" id = "user" autofocus size = "48"><br/>
<textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="Submit comment">
</form>
and I added some jQuery for this form.
$(".form-submit").click(function() {
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
if(commentCheck == '' || commentCheck == NULL ) {
commentBox.addClass("form-text-error");
console.log(commentBox);
return false;
}
if (userCheck == '' || userCheck == NULL){
userBox.addClass("form-text-error");
console.log(userBox);
return false;
}
});
And now I'm here with this problem. I want the user to fill both fields in order to write a comment (name & text). For any empty fields I want to add class "form-text-error" . Everything works except for field with users name.
Any suggestions?

Use Length to get length of input then if return zero do addClass
$(".form-submit").click(function() {
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
if (commentCheck.length <= 0 || commentCheck == NULL) {
commentBox.addClass("form-text-error");
console.log(commentBox);
return false;
}
if (userCheck.length <= 0 || userCheck == NULL) {
userBox.addClass("form-text-error");
console.log(userBox);
return false;
}
});
.form-text-error {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" class="main">
<label>Write a comment!</label><br>
<input placeholder="Name" class="form-text" name="user" type="text" id="user" autofocus size="48"><br/>
<textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="Submit comment">
</form>
Also you can use submit function instead of click:
$(".form-submit").submit(function() {});
But i recommend you to use something like this:
$(".form-submit").click(function(e) {
e.preventDefault(); //remove this later
$('.form-text').each(function() {
if ($(this).val().length <= 0) {
$(this).addClass('form-text-error');
return false;
} else {
$(this).removeClass('form-text-error');
return true;
}
});
});

it is due to condition if return with false so it will check 1st condition and return back no further check.
need to make changes accordingly as below.
$(".form-submit").click(function() {
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var err = false;
if(commentCheck == '' || commentCheck == NULL ) {
commentBox.addClass("form-text-error");
console.log(commentBox);
err = true;
}
if (userCheck == '' || userCheck == NULL){
userBox.addClass("form-text-error");
console.log(userBox);
err = true;
}
if(err)
return false;
});

You are doing return false after comment
if(commentCheck == '' || commentCheck == NULL ) {
commentBox.addClass("form-text-error");
console.log(commentBox);
return false;
}
That's why it didn't get name field
You can use like this as like your requirement,
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var flag =0;
if(commentCheck == '' || commentCheck == NULL ) {
$("#comment").addClass("form-text-error");
console.log(commentBox);
flag = 1;
}
if (userCheck == '' || userCheck == NULL){
$("#user").addClass("form-text-error");
console.log(userBox);
flag = 1;
}
if(flag == 1)return false;

Use input type="button" and use this snippet that's tested and it works...
$("#comment").removeClass("form-text-error");
$("#user").removeClass("form-text-error");
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var flag =0;
var flag1 =0;
if(commentCheck == '' || commentCheck == null ) {
$("#comment").addClass("form-text-error");
console.log(commentBox);
flag = 1;
}
if (userCheck == '' || userCheck == null){
$("#user").addClass("form-text-error");
console.log(userBox);
flag1 = 1;
}
if(flag == 1 || flag1 == 1){return false;}
else{return true;}

You are returning false for both the validations.
Also, use .length === 0 || !box.
A common function would help.
Fixed
use e.preventDefault(); This would validate the username field as well and would not submit if empty.
var commentBox = $("#comment");
var userBox = $("#user");
function checkIfEmpty(box, check) {
if (check.length === 0 || !box) {
box.addClass("form-text-error");
console.log(box);
return true;
} else {
box.removeClass("form-text-error");
return false;
}
}
$(".form-submit").on('click', function(e) {
e.preventDefault();
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var commentCall = checkIfEmpty(commentBox, commentCheck);
var userCall = checkIfEmpty(userBox, userCheck);
if(userCall === true && commentCall === true) {
return false;
}
});
.form-text-error {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="main">
<label>Write a comment!</label>
<br/>
<input placeholder="Name" class="form-text" name="user" type="text" id="user" autofocus size="48"/>
<br/>
<textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
<br/>
<input type="submit" class="form-submit" name="new_comment" value="Submit comment"/>
</form>

code does not validate email from a form, in javascpricpt

hi i font know if this is the right place to ask this question but i have a problem with my code that i cannot figure out. i have tried many different algorithms and none work. i am trying to validate email from a form.
here is the code (form is in html)
function isValidString(str) {
var quot = "\"";
if (str.indexOf(quot) != -1)
return false;
var badStr = "$%^&*()_+[]{}<>?אבגדהוזחטיכךלמםנןסעפצקרשת";
var i = 0,
p;
while (i < str.length) {
p = badStr.indexOf(str.charAt(i));
if (p != -1)
return false;
i++;
}
return true;
}
function isValidEmail()
{
var str = document.getElementById("email").value;
document.write("email from isValidEmail(str) = " + email);
if (isEmpty(str) || str.length < 5) {
alert("isEmpty(str) || str.length < 5 = false");
return false;
}
if (!isValidString(str)) {
alert("!isValidString(str) = false");
return false;
}
var atSign = str.indexOf('#');
if (atSign == -1 || str.lastIndexOf('#') || atSign === 0 || atSign == str.length - 1) {
alert("atSign == -1 || str.lastIndexOf('#') || atSign == 0 || atSign == str.length - 1 = false");
return false;
}
var dotSign = str.indexOf('.', atSign);
if (dotSign == -1 || dotSign === 0 || dotSign == str.length - 1 || dotSign - atSign < 2) {
alert("dotSign == -1 || dotSign == 0 || dotSign == str.length - 1 || dotSign - atSign < 2 = false");
return false;
}
return true;
no matter what i input it always comes back valid.
here is the part where i apply it:
var email = document.getElementById("email").value;
if (emailcheck(email)) {
alert("invalid email");
return false;
}
return true;
thanks in advance

An example of using the parser library mentioned in my comment.
var eAddr = document.getElementById('eAddr'),
check = document.getElementById('check'),
pre = document.getElementById('out');
check.addEventListener('click', function (evt) {
pre.textContent = !!emailAddresses.parseOneAddress(eAddr.value.trim());
}, false);
<script src="https://rawgit.com/FogCreek/email-addresses/master/lib/email-addresses.js"></script>
<input id="eAddr"></input>
<button id="check">Test pattern</button>
<pre id="out"></pre>
Note: this will accept Goodhertz Inc <support#goodhertz.com> as it stands and you would need to further check the object returned by parseOneAddress to filter these out.

You don't call the rigth function i. e. call
var email = document.getElementById("email").value;
if (isValidString(email)) {
alert("invalid email");
return false;
}
return true;
instead of
var email = document.getElementById("email").value;
if (emailcheck(email)) {
alert("invalid email");
return false;
}
return true;

Using Regular expression is the best method for validating input elements. Below function can validate email perfectly.
function regExValidate_Email(id) {
var email = document.getElementById(id).value;
if (email != '') {
var regExforEmail = /^[a-zA-Z0-9._+-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (regExforEmail.test(email)) {
$("#" + id).css("background-color", "#ffffff");
return true;
}
else {
alert('Please enter a valid email id. \nex: yourname#example.com');
document.getElementById(id).style.backgroundColor = '#feffea';
document.getElementById(id).value = '';
Ctrlid = id;
setTimeout("document.getElementById(Ctrlid).focus()", 1);
return false;
}
}
else { document.getElementById(id).style.backgroundColor = 'white'; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Email: <input type="email" onblur="return regExValidate_Email(this.id)" id="txtEmail" />

How can I customize a MadMimi embedded email form?

I'm using MadMimi to collect emails on a pre-launch website (http://www.saashopper.com), and need to change the embedded form so it doesn't open a new tab when confirming the email signup. I want it to just confirm underneath the input field that the signup was successful (or not, and why). How should I go about doing this?
Here's the embed code MadMimi provided:
<form accept-charset="UTF-8" action="https://madmimi.com/signups/subscribe/114920" id="mad_mimi_signup_form" method="post" target="_blank">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓"/>
<input name="authenticity_token" type="hidden" value="5twZyvvQepHt/3X9lhtT+Z3Zeb1OFVeAPFMLBjbukwA="/>
</div>
<div class="mimi_field required">
<label for="signup_email">Email*</label>
<br/>
<input id="signup_email" name="signup[email]" type="text" data-required-field="This field is required" placeholder="you#example.com"/>
</div>
<div>
<input type="submit" class="submit" value="Subscribe" id="webform_submit_button" data-default-text="Subscribe" data-submitting-text="Sending..." data-invalid-text="↑ You forgot some required fields" data-choose-list="↑ Choose a list">
</input>
</div>
</form>
<script type="text/javascript">
(function() {
var form = document.getElementById('mad_mimi_signup_form'),
submit = document.getElementById('webform_submit_button'),
validEmail = /.+#.+\..+/,
isValid;
form.onsubmit = function(event) {
validate();
if(!isValid) {
revalidateOnChange();
return false;
}
};
function validate() {
isValid = true;
emailValidation();
fieldAndListValidation();
updateFormAfterValidation();
}
function emailValidation() {
var email = document.getElementById('signup_email');
if(!validEmail.test(email.value)) {
textFieldError(email);
isValid = false;
} else {
removeTextFieldError(email);
}
}
function fieldAndListValidation() {
var fields = form.querySelectorAll('.mimi_field.required');
for(var i = 0; i < fields.length; ++i) {
var field = fields[i],
type = fieldType(field);
if(type == 'checkboxes' || type == 'radio_buttons') {
checkboxAndRadioValidation(field);
} else {
textAndDropdownValidation(field, type);
}
}
}
function fieldType(field) {
var type = field.querySelectorAll('.field_type');
if(type.length > 0) {
return type[0].getAttribute('data-field-type');
} else if(field.className.indexOf('checkgroup') >= 0) {
return 'checkboxes';
} else {
return 'text_field';
}
}
function checkboxAndRadioValidation(field) {
var inputs = field.getElementsByTagName('input'),
selected = false;
for(var i = 0; i < inputs.length; ++i) {
var input = inputs[i];
if((input.type == 'checkbox' || input.type == 'radio') && input.checked) selected = true;
}
if(selected) {
field.className = field.className.replace(/ invalid/g, '');
} else {
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
isValid = false;
}
}
function textAndDropdownValidation(field, type) {
var inputs = field.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i) {
var input = inputs[i];
if(input.name.indexOf('signup') >= 0) {
if(type == 'text_field') {
textValidation(input);
} else {
dropdownValidation(field, input);
}
}
}
htmlEmbedDropdownValidation(field);
}
function textValidation(input) {
if(input.id == 'signup_email') return;
var val = input.value;
if(val == '') {
textFieldError(input);
isValid = false;
return;
} else {
removeTextFieldError(input)
}
}
function dropdownValidation(field, input) {
var val = input.value;
if(val == '') {
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
onSelectCallback(input);
isValid = false;
return;
} else {
field.className = field.className.replace(/ invalid/g, '');
}
}
function htmlEmbedDropdownValidation(field) {
var dropdowns = field.querySelectorAll('.mimi_html_dropdown');
for(var i = 0; i < dropdowns.length; ++i) {
var dropdown = dropdowns[i],
val = dropdown.value;
if(val == '') {
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
isValid = false;
dropdown.onchange = validate;
return;
} else {
field.className = field.className.replace(/ invalid/g, '');
}
}
}
function textFieldError(input) {
input.className = 'required invalid';
input.placeholder = input.getAttribute('data-required-field');
}
function removeTextFieldError(input) {
input.className = 'required';
input.placeholder = '';
}
function onSelectCallback(input) {
if(typeof Widget != 'undefined' && Widget.BasicDropdown != undefined) {
var dropdownEl = input.parentNode,
instances = Widget.BasicDropdown.instances;
for(var i = 0; i < instances.length; ++i) {
var instance = instances[i];
if(instance.wrapperEl == dropdownEl) {
instance.onSelect = validate;
}
}
}
}
function updateFormAfterValidation() {
form.className = setFormClassName();
submit.value = submitButtonText();
submit.disabled = !isValid;
submit.className = isValid ? 'submit' : 'disabled';
}
function setFormClassName() {
var name = form.className;
if(isValid) {
return name.replace(/\s?mimi_invalid/, '');
} else {
if(name.indexOf('mimi_invalid') == -1) {
return name += ' mimi_invalid';
} else {
return name;
}
}
}
function submitButtonText() {
var invalidFields = document.querySelectorAll('.invalid'),
text;
if(isValid || invalidFields == undefined) {
text = submit.getAttribute('data-default-text');
} else {
if(invalidFields.length > 1 || invalidFields[0].className.indexOf('checkgroup') == -1) {
text = submit.getAttribute('data-invalid-text');
} else {
text = submit.getAttribute('data-choose-list');
}
}
return text;
}
function revalidateOnChange() {
var fields = form.querySelectorAll(".mimi_field.required");
for(var i = 0; i < fields.length; ++i) {
var inputs = fields[i].getElementsByTagName('input');
for(var j = 0; j < inputs.length; ++j) {
inputs[j].onchange = validate;
}
}
}
})();
</script>

You can add and iframe under the input field like this:
<iframe name="myFrame">
<p>Your browser does not support iframes.</p>
</iframe>
And then change the target attribute of the form and give it the iframe name:
<form accept-charset="UTF-8" action="https://madmimi.com/signups/subscribe/114920" id="mad_mimi_signup_form" method="post" target="myFrame">
Thus the result will be shown in the iframe window in the same page.

Null error is coming document.getElementByid("dthchannel" + [i] is null)

function validate()
{
var flag=0;
var spchar=/^[a-zA-Z0-9 ]*$/;
var num=/^[0-9]*$/;
var custid = document.getElementById('CUSTOMERID').value;
var phoNo = document.getElementById('PHONENO').value;
var emailId = document.getElementById('EMAILID').value;
var channel = document.getElementById('CHANNELDTL').value;
if(channel=="")
{
alert("You have not selected any channel");
flag=1;
return false;
}
if(custid=="" || custid==null )
{
alert("Please enter Customer ID");
document.getElementById('CUSTOMERID').focus();
flag=1;
return false;
}
if (custid.search(num)==-1)
{
alert("Customer should be Numeric");
document.getElementById('CUSTOMERID').focus();
flag=1;
return false;
}
if(phoNo=="" || phoNo==null )
{
alert("Please enter Phone");
document.getElementById('PHONENO').focus();
flag=1;
return false;
}
if (phoNo.search(num)==-1)
{
alert("Phone should be Numeric");
document.getElementById('PHONENO').focus();
flag=1;
return false;
}
if(emailId=="" || emailId==null )
{
alert("Please enter Email");
document.getElementById('EMAILID').focus();
flag=1;
return false;
}
if (emailId)
{
if(isValidEmail(document.getElementById('EMAILID').value) == false)
{
alert("Please enter valid Email");
document.getElementById('EMAILID').focus();
flag=1;
return false;
}
}
if(flag==0)
{
var emailid=Base64.tripleEncoding(document.getElementById('EMAILID').value);
document.getElementById('E_EMAIL').value=emailid;
document.getElementById('EMAILID').value="";
var mobileno=Base64.tripleEncoding(document.getElementById('PHONENO').value);
document.getElementById('E_PHONE').value=mobileno;
document.getElementById('PHONENO').value="";
var customerid=Base64.tripleEncoding(document.getElementById('CUSTOMERID').value);
document.getElementById('E_CUSTID').value=customerid;
document.getElementById('CUSTOMERID').value="";
document.topupsform.action="../dth/leads/channelMail/channelMailUtil.jsp";
document.topupsform.submit();
alert("Thank you for choosing A-La-Carte services.\nWe will process it within 24 hours.\nYou will soon receive confirmation on your mail id.");
}
}
function isValidEmail(Email)
{
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = trim(Email);
if(reg.test(address) == false)
{
return false;
}
else
return true;
}
function trim(str)
{
str = this != window? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}
function sendMail()
{
caltotal();
validate();
}
//----------------------------------
var counter = 0;
function resetcheckboxValue(){
//var totalinputs = document.topupsform.getElementsByTagName("input");
var totalinputs =document.getElementsByName("dthchannel");
var totallenght = totalinputs.length;
counter = 0;
for(var i = 0; i < totallenght; i++) {
// reset all checkboxes
document.getElementsByName("dthchannel")[i].checked = false;
document.getElementById("totalamount").value = "0";
document.getElementById("youpay").value = "0";
}
}
function caltotal()
{
var plansObj = document.getElementsByName("dthchannel");
var plansLength = plansObj.length;
counter = 0;
var finalNameValue = "";
for(var i = 1; i <= plansObj.length+1; i++) {
if ( document.getElementById(("dthchannel")+ [i]).checked)
{
var gvalue = parseInt(document.getElementById(("dthchannel")+[i]).value);
var gNameValue= document.getElementById("CHANNELNAME"+i).value+"~"+gvalue+"#";
finalNameValue+= gNameValue;
counter+= gvalue;
}
showresult();
}
var finallist = finalNameValue.substring(0,finalNameValue.length-1);
//alert("finallist" +finallist);
document.getElementById("CHANNELDTL").value= finallist;
}
function showresult(){
if(counter <= 150 && counter > 0){
document.getElementById("youpay").value = "150";
document.getElementById("totalamount").value = counter;
}
else
{
document.getElementById("youpay").value = counter;
document.getElementById("totalamount").value = counter;
}
}
window.onload = resetcheckboxValue;

You need to modify whatever lines look like this:
var gvalue = parseInt(document.getElementById("dthchannel" + i).value);
You don't want to do document.getElementById(("dthchannel") + [i]) as I've never seen that before and I don't think it works.