Vorbly Code | WIX SUBMIT FORM AND UPDATE REPEATER

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.

hi

m

Nov 17, 2019

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP