Email Field Required & Quote Calculator

Ask the community
,
1

Hey Humans, I’m still learning so don’t slate me!
My issues are in BOLD , see what I did there…

I have 2 problems which are multi-stage form related.

IN NEED OF A VALIDATION CODE TO ENABLE BUTTON

  1. My ‘Next’ button (changes slide from 1 to 2) even though the email field lights up red (Set it to required / as an Email Field).

Half of my current code is as below: (it means as long as there is an entry in both ‘name’ and ‘email’ all is good… it’s the closest I have got to what I want).

$w(‘#name’).onKeyPress( function () {
if ((($w(‘#name’).value) === “”) ||
(($w(‘#email’).value) === “”)){
$w(‘#next1’).disable();
} else {
$w(‘#next1’).enable();
}
And then the reverse for the email field (haven’t C & P’d that, so if you need it for your website switch the name and email around for the other half of the code).

My question is how do I include "MUST include @ and . in email field for next1 button to enable.
Not worried about having a validation message pop up, as the field lights up red (which is enough for me).

IN MORE NEED FOR MY DATABASE TO CAPTURE THE QUOTE CALCULATION
PRICE QUOTE CALCULATOR, Calculation not saving to database.
2. I have a basic Quote Calculator, problem is… I want the fields that have the values tied to them to be submitted to the database. BUT when I link the fields to the dataset, the data transfers to the database PRIOR to the Calculation… which leads to zero data to make the calculation…
So I’ve tried the below to try and capture the “end result” rather than, the individual fields that make up the calculation, but still no luck.

function calculate() {
var charge = parseInt($w(“#btype”).value,10) + parseInt($w(“#vat”).value,10) + parseInt($w(“#paye”).value,10) + parseInt($w(“#payeworm”).value,10) + parseInt($w(“#payestaff”).value,10);
return charge;
}
FOR ANYONE looking for a simple Quote calculator, use the above and below, the above is the calculations (basically X + Y+ Z etc etc and the below is what pulls / calculates the data, by a button click)

export function quotecalc_click(event, $w) {
var x = calculate();
$w(“#text38”).text = x.toString();
$w(“#group1”).show();
$w(‘#dataset1’).save()
}

How can I capture the end result to the database OR how can I capture individual entries that make up the “end result” to the Database and still let the Calculator do its thing…

Appreciate any help on the above.
Thanks in advance.
Matt

2

For the email validation part see here.
https://support.wix.com/en/article/corvid-about-validating-user-input-with-code
https://support.wix.com/en/article/working-with-user-input-validation-in-the-settings-panel
https://www.w3schools.com/tags/att_input_pattern.asp
https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute–cms-25145

As for the quote calculator itself, then you might be better off doing one of the following from a previous forum post as it is currently saving your results before any calculation is performed.
https://www.wix.com/corvid/forum/community-discussion/price-calculator
https://www.wix.com/corvid/forum/community-discussion/how-to-calculate-a-custom-price-based-on-user-input
https://www.wix.com/corvid/forum/community-discussion/calculator-1
https://www.vorbly.com/Vorbly-Code/WIX-CODE-CALCULATIONS—SUM-NUMBERS

If you want to do it yourself and add it via html instead then you can look at making your own specific calculator like shown here.
https://jscalc.io
http://javascript-coder.com/javascript-form/javascript-calculator-script.phtml

Then you can use Wix HTML Component to send data to and from the html and the page etc to be able to get the result value and save it etc.
https://www.wix.com/corvid/reference/$w.HtmlComponent.html

3

Hey, thanks for the links, ive used the pattern validation below, and tried something new.

My main concern is getting a legit email before I give them a Quote. I know I’m missing something logically seems simple… but can’t get my head around it. Here’s the code:

Button from slide 1 of form to slide 2.

export function next1_click(event, $w, reject) {
if (($w(‘#email’).value !== “[1]+@[a-z0-9.-]+.[a-z]{2,}$”)){
$w(‘#slideshow1’).next();
}
else {
$w(‘#next1’).disable()

    $w('#text48').show(); // Please provide a valid email address 
    setTimeout ( **function**  () 
    { $w('#next1').enable() 

    },2000) // 2 second timer

}

Closer… but yet so far. Would appreciate any feedback on the above!

  1. a-z0-9._%± ↩︎