Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX SUBMIT FORM AND UPDATE REPEATER

Need to submit a form then update your Wix Repeater? This tutorial will show you how to submit a user form to a Wix database then automatically update a Wix Repeater. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/5

THE ELEMENTS

The Page

Form Elements​

  • Product options: #dropdown1

  • Customization options: #dropdown2

  • Quantity: #input1

  • Submit Button: #button1

 

Repeater Elements (#repeater1)

  • Product Name: #text1

  • Product Color: #text2

  • Quantity: #text3

Sum Total Text: #text4

The Database

Create a database: Products (dataset1)

Recommended fields:

  • Product: name

  • Customization : color

  • Quantity: quantity

THE CODE

Page Code

import wixData from 'wix-data';

 

export function button1_click(event) {

 

  let product = $w("#dropdown1").value;

  let color = $w("#dropdown2").value;

  let quantity = $w("#input1").value;

  $w('#dataset1').setFieldValue('name', product);

  $w('#dataset1').setFieldValue('quantity', quantity);

  $w('#dataset1').setFieldValue('color', color);

  $w("#dataset1").onAfterSave(() => {

    $w("#repeater1").onItemReady(($item, itemData, index) => {

      $item("#text1").text = itemData.name;

      $item("#text2").text = itemData.color;

      $item("#text3").text = itemData.quantity;

    });

 

    wixData.query("Products")

      .find()

      .then((result) => {

        $w("#repeater1").data = result.items;

 

        let sumTotal = 0; // declare sum

 

        result.items.forEach(item => {

          sumTotal = sumTotal + Number(item.quantity);

          console.log(sumTotal);

        });

 

        $w("#text4").text = "" + sumTotal;

 

      });

 

  });

}

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

When I click on the Add to Cart button, the repeater will import all the data from the database and display it, and this is done when the click is linked to the database and when the cancel link with the database.the bottom not work

Dia

Aug 17, 2020

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP