Calculation form help

brettfranklin2 · August 31, 2018, 7:17am

Essentially, this page is an area where advertisers can purchase a print ad in multiple issues of the year. I have most of the coding part figured out (with help from Salman), but now I’ve found myself in a dead end. I’m not sure if this is a coding problem or a problem solving issue or even both.

The problem is that if the user were to change their “ad size” or “ad color,” then the calculation won’t respond. I would like the calculation to be adjusted appropriately. Note: the calculation only appears once an image is uploaded.

Also, how would I go about changing the font of the calculation area from “Arial” to “Basic” and instead of “This ad will run on 1 days” change to “This ad will run on [each date selected].” (Ex: This ad will run on Aug. 31, 2018, Sept. 1, 2018, Sept. 2, 2018.)

All help is welcome and appreciated!!!

Here is a link to the page ( please do not submit the form ): https://brettfranklin2.wixsite.com/website-2/print-ad

Here is my code:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from 'wix-data';

var till, price, pricesize, priceeffect, pricetime, start, end, pricew1, pricew2, pricew3, pricew4, pricew5, pricew6, pricew7, pricew8, pricew9, pricew10, pricechange, cost, total;

price = pricew1 = pricew2 = pricew3 = pricew4 = pricew5 = pricew6 = pricew7 = pricew8 = pricew9 = pricew10 = 0;

till = 1;
pricesize = 0;
priceeffect = 0;
pricetime = 1;
pricechange = 0;
cost = 0;
total = 0;

// var d = new Date()
// var endDate = new Date("2018-12-31")
// console.log(d.getMonth(), d, endDate)
// arr = new Array();

$w.onReady(function () {
// Gets today's date
const today = new Date();

const options = {
    day: "numeric",
    month: "long",
    year: "numeric"
};
 // Sets the property of the text element to be a string representing today's date in US English
$w("#text194").text = today.toLocaleDateString("en-US", options);
$w("#text193").text = today.toLocaleDateString("en-US", options);
$w("#date1").text = today.toLocaleDateString("en-US", options);
$w("#text192").text = today.toLocaleDateString("en-US", options);

//$w('#datePicker1').disabledDates = [0,1,2,3,4,5,6]
    $w('#dataset1').onReady(() => {

 // ------------------KEEP THIS CODE FOR ----------------------//

 /*$w('#datePicker1').disabledDates = []
        wixData.query("PublicationDates")
            //.not("issue")
            .find()
            .then((res) => {
                //  console.log(res.items[0].issue, "DB");
                //  issue = res.items[0].issue
                var dbDates = []

                while (d <= endDate) {
                    arr.push(new Date(d));

                    C = arr.filter(function (val) {
                        return dbDates.indexOf(val) === -1;
                    });
                    d.setDate(d.getDate() + 1);
                }       
                    for (let i= 0; i < res.length; i++) {
                        let dbD = res.items[i].issue
                        dbDates.push(dbD)
                    }
 
                //let C = arr.filter(a => !dbDates.includes(a));

                console.log(arr, dbDates, C)
            })

        //  $w('#datePicker1').disabledDaysOfWeek = [0,1,2,3,4,5,6]*/
        weeks()
    })
1
    $w('#radioGroup1').onChange(() => {
 let slide = $w('#radioGroup1').value;
        $w('#slideshow1').changeSlide(Number(slide) - 1)
 if ($w('#radioGroup1').value === '1') {
            pricesize = 800;
 //pricechange = pricesize-800;
            $w('#checkbox01').checked = false;
            $w('#checkbox1').checked = false;
            $w('#checkbox2').checked = false;
            $w('#checkbox3').checked = false;
            $w('#checkbox4').checked = false;
            $w('#checkbox8').checked = false;
            $w('#checkbox7').checked = false;
            $w('#checkbox6').checked = false;
            $w('#checkbox5').checked = false;
            $w('#checkbox16').checked = false;
            $w('#checkbox15').checked = false;

            console.log(pricesize, 'price size')
        } else if ($w('#radioGroup1').value === '2') {
            pricesize = 400;
 //pricechange = pricesize-400;
            $w('#checkbox01').checked = false;
            $w('#checkbox1').checked = false; 
            $w('#checkbox2').checked = false;
            $w('#checkbox3').checked = false;
            $w('#checkbox4').checked = false;
            $w('#checkbox8').checked = false;
            $w('#checkbox7').checked = false;
            $w('#checkbox6').checked = false;
            $w('#checkbox5').checked = false;
            $w('#checkbox16').checked = false;
            $w('#checkbox15').checked = false;

            console.log(pricesize, 'price size')
        } else if ($w('#radioGroup1').value === '3') {
            pricesize = 200;
 //pricechange = pricesize-200;
            $w('#checkbox01').checked = false; 
            $w('#checkbox1').checked = false; 
            $w('#checkbox2').checked = false; 
            $w('#checkbox3').checked = false;
            $w('#checkbox4').checked = false;
            $w('#checkbox8').checked = false;
            $w('#checkbox7').checked = false;
            $w('#checkbox6').checked = false;
            $w('#checkbox5').checked = false;
            $w('#checkbox16').checked = false;
            $w('#checkbox15').checked = false;

            console.log(pricesize, 'price size')
        } else if ($w('#radioGroup1').value === '4') {
            pricesize = 100;
 //pricechange = pricesize-100;
            $w('#checkbox01').checked = false;
            $w('#checkbox1').checked = false;
            $w('#checkbox2').checked = false;
            $w('#checkbox3').checked = false;
            $w('#checkbox4').checked = false; 
            $w('#checkbox8').checked = false;
            $w('#checkbox7').checked = false;
            $w('#checkbox6').checked = false;
            $w('#checkbox5').checked = false;
            $w('#checkbox16').checked = false;
            $w('#checkbox15').checked = false;

            console.log(pricesize, 'price size')
        } else {
            pricesize = 0;
            $w('#checkbox01').checked = false;
            $w('#checkbox1').checked = false;
            $w('#checkbox2').checked = false;
            $w('#checkbox3').checked = false;
            $w('#checkbox4').checked = false;
            $w('#checkbox8').checked = false;
            $w('#checkbox7').checked = false;
            $w('#checkbox6').checked = false;
            $w('#checkbox5').checked = false;
            $w('#checkbox16').checked = false;
            $w('#checkbox15').checked = false;

            console.log(pricesize, 'price size')
        }

        calc();
    })

    $w('#uploadButton1').onChange(() => {
 if ($w("#uploadButton1").value.length > 0) {
            $w("#uploadButton1").startUpload()
                .then((uploadedFile) => {
                    $w("#full").src = uploadedFile.url;
                    $w("#half").src = uploadedFile.url;
                    $w("#quater").src = uploadedFile.url;
                    $w("#eight").src = uploadedFile.url;
                    $w('#calculate').show();
                    $w('#submit').enable();
                    calc();
                })
                .catch((uploadError) => {
                    console.log(`Error: ${uploadError.errorCode}`);
                    console.log(uploadError.errorDescription);
                });
        }
    });

 /*$w('#month1').onChange(() => {
        let month1 = $w('#month1').value
        console.log(month1);
/*
        wixData.query("PublicationDates")
            .eq("issue", )
            .find()
            .then((res) => {
                console.log(res, res.items[0])
                let dates = res.items[0].issue.getDate();
                let months = res.items[0].issue.getMonth();
                console.log(dates, months)

            })*/

    })

//});

export function checkbox1_change(event, $w) {
 if ($w('#checkbox1').checked) {
 //$w('#fulbox').hide();
 //$w('#halfbox').hide();
 //$w('#quatebox').hide();
 //$w('#eighbox').hide();
        priceeffect = 275;
 
    } else {
 //$w('#fulbox').show();
 //$w('#halfbox').show();
 //$w('#quatebox').show();
 //$w('#eighbox').show();
        priceeffect = 0;

    }
    calc()
}

function weeks() {
    console.log('tillfn called')

   $w('#checkbox01').onChange(() =>{
 if($w('#checkbox01').checked) {
            pricew1 = pricesize + priceeffect
        } 
 else {
            pricew1 = 0
        }
        calc()
    })
        $w('#checkbox2').onChange(() =>{
 if($w('#checkbox2').checked) {
            pricew2 = pricesize + priceeffect
        } 
 else {
            pricew2 = 0
        }
        calc()
    })
        $w('#checkbox3').onChange(() =>{
 if($w('#checkbox3').checked) {
            pricew3 = pricesize + priceeffect
        }  
 else {
            pricew3 = 0
        }
        calc()
    })
        $w('#checkbox4').onChange(() =>{
 if($w('#checkbox4').checked) {
            pricew4 = pricesize + priceeffect
        } 
 else {
            pricew4 = 0
        }
        calc()
    })
    $w('#checkbox8').onChange(() =>{
 if($w('#checkbox8').checked) {
            pricew5 = pricesize + priceeffect
        } 
 else {
            pricew5 = 0
        }
        calc()
    })
    $w('#checkbox7').onChange(() =>{
 if($w('#checkbox7').checked) {
            pricew6 = pricesize + priceeffect
        } 
 else {
            pricew6 = 0
        }
        calc()
    })
    $w('#checkbox6').onChange(() =>{
 if($w('#checkbox6').checked) {
            pricew7 = pricesize + priceeffect
        } 
 else {
            pricew7 = 0
        }
        calc()
    })
    $w('#checkbox5').onChange(() =>{
 if($w('#checkbox5').checked) {
            pricew8 = pricesize + priceeffect
        } 
 else {
            pricew8 = 0
        }
        calc()
    })
    $w('#checkbox16').onChange(() =>{
 if($w('#checkbox16').checked) {
            pricew9 = pricesize + priceeffect
        } 
 else {
            pricew9 = 0
        }
        calc()
    })
    $w('#checkbox15').onChange(() =>{
 if($w('#checkbox15').checked) {
            pricew10 = pricesize + priceeffect
        } 
 else {
            pricew10 = 0
        }
        calc()
    })
}

function calc() {
 //You will spend a total of $42.00. This ad will run for 14 days ending on Jul 28, 2018.
    price = pricew1 + pricew2 + pricew3 + pricew4 + pricew5 + pricew6 + pricew7 + pricew8 + pricew9 + pricew10
 
    console.log("(" + pricesize, "+", priceeffect, "+", pricechange,') * ', till)
    $w('#calculate').html = `<span style='font-size: 16px'> You will spend a total of <span style="font-size: 16px"> $${price}</span>. This ad will run on <span style="font-size: 16px">${till} days. </span> </span> `

}

export function box3_mouseIn(event, $w) {
 //Add your code for this event here: 
    $w('#text195').show();
    $w('#vectorImage2').show();
    $w('#vectorImage3').show();
}

export function box3_mouseOut(event, $w) {
 //Add your code for this event here: 
    $w('#text195').hide();
    $w('#vectorImage3').hide();
    $w('#vectorImage2').hide();
}

export function box10_mouseIn(event, $w) {
 //Add your code for this event here: 
    $w('#vectorImage6').show();
    $w('#vectorImage7').show();
    $w('#text203').show();
}

export function box10_mouseOut(event, $w) {
 //Add your code for this event here: 
    $w('#vectorImage6').hide();
    $w('#vectorImage7').hide();
    $w('#text203').hide();
}

admin-23 · September 2, 2018, 3:33pm

Hi Brett,

This can be solved by moving the actual calculation to a separate function (for example “calculateFields”) then calling this function every time a relevant element was changed.

Topic		Replies	Views
Calculator for print products Ask the community code , question	0	95	June 17, 2019
Dynamic Newspaper Sales Form Ask the community code , question	0	68	June 13, 2019
Calculator Ask the community code , question	7	1106	October 23, 2018
Data Collection Field Calculations Ask the community code , question	8	687	May 25, 2019
Custom HTML ads on wix website Ask the community code , question	2	392	April 20, 2023

Calculation form help

Related topics