Javascript: Read Values on Form & Write Results in Lightbox

I have an existing piece of C-Language code that is used to decode a string of numbers. The way it is working now is that I gets the values from an input form when you user clicks Submit.
It then interprets these values a displays the decoded results in a popup window.

I have a basic form written to emulate this in Wix at:
https://jds-cvoa.wixsite.com/cvoa/decode-vin

The decoded result for this example would read in the Lightbox:


I have all the logic already in the C-Language code. I just need to understand how to assign the values to variables in the Wix javascript page code and then how to invoke the Lightbox with the decoded text.

Using an example Nayeli posted for searching and displaying in another wiindow… I have created the following code behind this input form:

import {local} from ‘wix-storage’;

import wixLocation from ‘wix-location’;

$w.onReady(function () {

});

export function submitButton_click() {

let char1 = $w("#input1").value; 
local.setItem("V1Char", char1); 

let char2 = $w("#input2").value; 
local.setItem("V2Char", char2); 

let char3 = $w("#input3").value; 
local.setItem("V3Char", char3); 

let char4 = $w("#input4").value; 
local.setItem("V4Char", char4); 

let char5 = $w("#input5").value; 
local.setItem("V5Char", char5); 

let char6 = $w("#input6").value; 
local.setItem("V6Char", char6); 

let char7 = $w("#input7").value; 
local.setItem("V7Char", char7); 

let char8 = $w("#input8").value; 
local.setItem("V8Char", char8); 

let char9 = $w("#input9").value; 
local.setItem("V9Char", char9); 

let char10 = $w("#input10").value; 
local.setItem("V10Char", char10); 

let char11 = $w("#input11").value; 
local.setItem("V11Char", char11); 

let char12 = $w("#input12").value; 
local.setItem("V12Char", char12); 

let char13 = $w("#input13").value; 
local.setItem("V13Char", char13); 

wixLocation.to(`/VIN_results`); 

}

============================================
Is this correct? If so, what would the code behind /VIN_results look like? Her example used a repeater, I don’t need that. Just a simple text page.

Thanks
JD

Hi,

It really depends on what you want to do (move to another page, open a lightbox, or do both).

Anyway, what you’re after is sending a parameter to either a new page or a lightbox.
Here’s how to send a parameter (data) to a lightbox.
Here’s how to use query parameters to send data to a new page.

NOTE: In the example you’re using, the concept is to save data to the browser in one page, and read in another one (or in a lightbox). So your saving using ‘local.setItem(‘item1’, ‘someData’)’ and you can then read it by using ‘local.getItem(‘item1’)’.
But… using local storage means that this data is remained in the browser until being actively removed.
You can also use ‘session.setItem’… in that case the data will remain in the browser until the tab is closed.

Anyway, the better thing for you to do is go with passing a parameter to the lightbox or the page.

Liran.

Thanks Liran,

All I want to do is pass these variables to a Lightbox which will have the code to interpret the values and print the results. FYI Here is the pertinent C-language code snipits this does this in the old website.

int chev;
int i;
int iyear;
int year_sw;
char gm_division[10];
char vega_nameplate[5];
char body_style[20];
char body_type[20];
char bs_code[3];
char year_code[4];
char year[4];
char vin[8];
char num[8];
long prod_num;

t show_results() {

/* decode VIN */

for(i=0;i<6;i++) {
num[i]=vin[i];
}

prod_num=atoi(num);
prod_num=prod_num-100000;

/* print summary */

printf(“

The VIN Tag information you provided decodes as follows:

\n”);
printf(“\n”);
printf(“ \n”);
printf(“ \n”);
printf(" \n",entries[12].val);
printf(“\n”);
printf(“
<font face="arial narrow",helvetica size=4>%s\n",entries[0].val);
printf(" %s\n",entries[1].val);
printf(" %s\n",entries[2].val);
printf(" %s\n",entries[3].val);
printf(" %s\n",entries[4].val);
printf(" %s\n",entries[5].val);
printf(" %s\n",entries[6].val);
printf(" %s\n",entries[7].val);
printf(" %s\n",entries[8].val);
printf(" %s\n",entries[9].val);
printf(" %s\n",entries[10].val);
printf(" %s\n",entries[11].val);
printf(" %s
\n”);
printf(“\n”);

printf("

This Tag is/was originally affixed to a %d Chevrolet Motor Division %s ",year_sw,body_type);
printf(“body assembled at Lordstown, OH. The Lordstown factory installed a Cosworth Vega engine that had been \n”);
printf(“assembled in Tonawanda, NY into this body. It then built this vehicle as a Cosworth Vega model.\n”);

printf(“

It was the number %d Vega built for this production year.

\n”,prod_num);
if(year_sw == 1975) {
printf(“The Lower Left Corner of the BODY TAG of this car should read: %sC.\n”,vin);
}
else {
printf(“The Lower Left Corner of the BODY TAG of this car should read: %sC90.\n”,vin);
}

}

int decode_id() {

printf(“

Thank You, Here Are The Decode Results

”);

if(num_entries <13) {
printf(“Error! You failed to complete all the input boxes.\n”);
printf(“Please hit the back button and try again.

\n”);
print_tail();
return(0);
}

chev=atoi(entries[0].val);

if(chev == 1) {
strcpy(gm_division,“Chevrolet”);
}
else {
printf(“Error! You entered %d for the YEAR.

\n”,chev);
printf(“This decoder only works with 75 or 76 Chevrolet Vegas
Please hit the back button and try again.

\n”);
print_tail();
end_session();
exit(0);
}

/* BODY TYPE */

if(entries[1].val[0] == ‘V’) {
strcpy(body_type,“Vega”);
}
else {
printf(“Error! You entered %s for the YEAR.

\n”,entries[1].val);
printf(“The ONLY valid body type for Vega is "V".
Please hit the back button and try again.

\n”);
print_tail();
end_session();
exit(0);
}

/* BODY STYLE */

strcpy(bs_code,entries[2].val);
strcat(bs_code,entries[3].val);

if(!strncmp(bs_code,“77”,2)) {
strcpy(body_style,“2 Door Hatchback Coupe”);
}
else {
printf(“Error! You entered %s for the body style.

\n”,bs_code);
printf(“The ONLY valid body type for Vega is "77".
Please hit the back button and try again.

\n”);
print_tail();
end_session();
exit(0);
}

/* YEAR */

strcpy(year_code,entries[4].val);
strcat(year_code,entries[5].val);
strcat(year_code,entries[6].val);

if(!strcmp(year_code,“O6U”)) {
year_sw=1976;
}
else {
if(!strcmp(year_code,“E5U”)) {
year_sw=1975;
}
else {
year_sw=0;
}
}

switch(year_sw) {

case 1976: strcpy(year,"1976"); 
  break; 

case 1975: strcpy(year,"1975"); 
  break; 

default:  printf("Error!  The value <font color=red> <b> %s </font></b> is not a valid code.<p>\n",year_code); 
                        printf("Please hit the back button and try again.<p>\n"); 
                        print_tail(); 
                        end_session(); 
                        exit(0); 

}

/* UNIT_NO */

strcpy(vin,entries[7].val);
strcat(vin,entries[8].val);
strcat(vin,entries[9].val);
strcat(vin,entries[10].val);
strcat(vin,entries[11].val);
strcat(vin,entries[12].val);

}

i

int show_tag() {

printf(“\n”);
printf(“

\n”);
printf(“\n”);
printf(“\n”);
printf(“ \n");
printf(“ \n”);
printf(“\n”);
printf(“ \n”);
printf(" \n");
printf(“\n”);
printf(“\n”);
printf(" \n");
printf(“\n”);
printf(“\n”);
printf(“\n”);
printf(" \n");
printf(“\n”);
printf(“\n”);
printf(" \n");
printf(“\n”);
printf(“\n”);
printf(" \n");
printf(“\n”);
printf(“
<font face="arial narrow",helvetica size=2>BODY BY FISHER \n”);
printf("
<font face="arial narrow",helvetica size=4>ST\n");
printf("      \n");
printf(" %s",entries[0].val);
printf("     1 \n");
printf(" %s",entries[1].val);
printf(" %s",entries[2].val);
printf("     U\n");
printf("     \n");
printf(" %s",entries[3].val);
printf("     BDY\n");
printf("
\n");
printf("
<font face="arial narrow",helvetica size=4>TR\n");
printf("       \n");
printf(" %s",entries[4].val);
printf("       \n");
printf(" %s",entries[5].val);
printf("       \n");
printf(" %s",entries[6].val);
printf("       \n");
printf(" %s",entries[7].val);
printf("     PNT\n");
printf("
\n");
printf("
<font face="arial narrow",helvetica size=4>\n");
printf("       \n");
printf(" %s",entries[8].val);
printf("             \n");
printf("             \n");
printf("            78-3593\n");
printf("
\n");
printf("
<font face="arial narrow",helvetica size=4>\n");
printf("       \n");
printf(" %s",entries[9].val);
printf("             \n");
printf("             FUL\n");
printf("
\n");
printf("
<font face="arial narrow",helvetica size=2>GENERAL MOTORS CORPORATION
\n");
printf(" CERTIFIES TO THE DEALER THAT THIS
\n");
printf(" VEHICLE CONFORMS TO ALL U.S. FEDERAL
\n");
printf(" MOTOR VEHICLE SAFETY STANDARDS
\n");
printf(" APPLICABLE AT TIME OF MANUFACTURE\n");
printf("
\n");
printf("
\n”);

}

I see from the link you gave me… pass data and open lightbox…

The syntax in this page code would be:

import wixWindow from ‘wix-window’;
// … wixWindow.openLightbox(“LightboxName”, dataObj);

I have to sent it 13 values… would they be the #inputn from the input boxes… for example:

import wixWindow from ‘wix-window’;
// … wixWindow.openLightbox(“LightboxName”, #input1,@input2,…etcj);

Or should I decode the values here and construct the TEXT and send that as the object for the light box?

Hi,
In wixWindow.openLightbox you can pass an object and receive it in the lightbox page itself.
Check out the example in this thread .
Roi.

Thanks Roi,
I have implemented the code and it is not working. Can you please take a look?

Page: https://jds-cvoa.wixsite.com/cvoa/decode-vin

The lightbox name is “Decoded Vin”. I entered the numbers that appear on the photo example and clicked Submit. Nothing…

I didnt see where you supply the name of the lightbox, so I used the LINK button on the submit. Still nothing…

Thanks
JD

Hi,
wixWindow.openLightbox method receives two arguments. The first one is the name of the lightbox (as a “string”, it expects the name of the lightbox) and the second is optional as an object.
You can’t have them both linked and onclick event. It will cause in-consist behaviour.
I prefer with onclick event.
Roi.

Thanks. I fixed the main page with a on click event. I console.log(codes) and see my test text appear, both when the button is clicked and when the lightbox opens. But I do not see the text on the lightbox.

Do I need more code to actually grab the text sent and display it?

JD

Yes,
Look at the thread i’ve send you above and look at the example.
Roi.

I did it exactly the same way… the code behind the Light box is:

import wixWindow from ‘wix-window’;

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
//TODO: write your page related code here…
console.log(wixWindow.lightbox.getContext());
});

I have also been looking at:

I see examples of:
Open a lightbox and send it data
or
Open a lightbox and receive data when it is closed
or
Open a lightbox, send it data, and receive data back when it is closed

Neither of which tells me how to display the text in the Lightbox?

Thanks for your patience.
JD

ahhhh, I guess this is the missing part:

You need to set the text value from the getContext method.
Roi.

Hi Roi,

I still can’t quite figure this out… from the doc, it looks like I need to 1) add a textbox on the lightbox and then 2) SET the text.

Set a text element’s plain-text content
$w(“#textElement”).text = “Text Value”;

My text element is named #decodedText and it should hold the value passed to the lighbox. This example shows setting it to a static value?

I tried:
$w(“#decodedText”).text = decodedVIN
but it gives an error. “decodedVIN is not defined”

My latest attempts to get this working… In the LightBox page CODE:

import wixWindow from ‘wix-window’;
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady( function () {
//TODO: write your page related code here…
console.log(wixWindow.lightbox.getContext());
// let decoded = $w(“#decodedVin”).text // “Text Value”
let decoded = “OVERWRITTEN TEXT”
$w(“#decodedText”).text = decoded
});

The text in the lightbox gets correctly overwritten but if I change to the commented line above, I get SDK error:
#decodedVin is not a valid selector

Please advise.
Thanks
JD

wixWindow.lightbox.getContext() contains the text that passed to the lightbox. You need to set the text element value from there.
Roi.

Got it!
This worked:

import wixWindow from ‘wix-window’;

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

$w.onReady( function () {
//TODO: write your page related code here…
let decoded = (wixWindow.lightbox.getContext());
// let decoded = $w(“#decodedVin”).text // “Text Value”
$w(“#decodedText”).text = decoded

});

Good job!

Not quite done. Now I have to get the text actually decoded based on those 13 input chars on the calling page. I’m getting … “is not a valid selector” error

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixWindow from ‘wix-window’;
import wixLocation from ‘wix-location’;
$w.onReady( function () {
//TODO: write your page related code here…

});

export function decodeButton_click(event, $w) {
//Add your code for this event here:

let yearcode = $w(“#input5”).value; <-----ERROR “is not a valid selector” error
let model_year = “0000”;

if (yearcode === “E” ) {
model_year = “1975”;
}
else
if (yearcode === “O” ) {
model_year = “1976”;
}

let last_digit = $w(“#inpu13”).value; <-----ERROR “is not a valid selector” error
let suffix = “th”;

if (last_digit === 1)
suffix = “st”;
else
if (last_digit === 2)
suffix = “nd”;

let decodedVIN=“This Tag is/was originally affixed to a” + model_year + “Chevrolet Motor Division \nVega body assembled at Lordstown, OH. The Lordstown factory installed \na Cosworth Vega engine that had been assembled in Tonawanda, NY into \nthis body. It then built this vehicle as a Cosworth Vega model.\n\nIt was the 123397”+suffix +" Vega built for this production year.\n\nThe Lower Left Corner of the BODY TAG of this car should read: 223397C90.";

console.log(decodedVIN); 

console.log(yearcode);
console.log(model_year);

wixWindow.openLightbox("Decoded Vin", decodedVIN, wixLocation.path); 

}

I found one of the errors… mis spelled #inpu instead of #input