Connecting two items to submit button / clear all function

Discussion Ask a question
,
1

Hello,
I figured out how to connect my drop down field to a text rather then a button to display on my page.
When a user selects a category and state from the drop down. The text underneath display
Total count for the category, Category and selected City & state ( 2 results: Photo shoot Houston Taxes) so that the user can see the results for the category and what they searched for.
The text hide upon ready and show when the drop down is selected.

I need assistance with two items.
First, I want the text to only show once the user hit the submit button for the drop down fields

Secondly,
I have a clear all button, that should clear the “text result selected” and refresh the drop down. I have no clue how to connect this button to do both items.

Below is my entire code for the page:

import wixData from ‘wix-data’;

$w.onReady( function () {
$w(“#noResText”).hide();
$w(“#Categorytext”).hide();
$w(“#cityandstatedropdown”).hide();

});

export function searchbutton_click_1(event, $w) {
$w(“#dataset2”).setFilter(wixData.filter()

    .contains("category", $w('#vendordropdown').value) 
    .and(wixData.filter() 
    .contains("cityState", $w('#cityandstatedropdown').value) 
) 
).then((results) => {

let count = $w(“#dataset2”).getTotalCount();
if (count === 0){
$w(“#noResText”).show();
}
if (count >= 1) {
$w(“#noResText”).hide();

    } 


      console.log("Dataset2 is now filtered");

let numberOfResults = $w(“#dataset2”).getTotalCount()
$w(‘#searchcount’).text = String(numberOfResults);

      console.log(numberOfResults);  


              }). **catch** ((err) => { 
        console.log(err); 
    });

$w(‘#Vendorlist’).expand();
}

export function vendordropdown_change(event) {
// update the label of ‘#Categorytext’ to be the same as #vendordropdown
let dropdownlabel = $w(“#vendordropdown”).value
$w(“#Categorytext”).text = dropdownlabel

if ($w(“#vendordropdown”).value === “Categorytext”) {
$w(“#Categorytext”).hide();

}  **else**  { 
    $w("#Categorytext").show(); 

} 
 console.log($w("#Categorytext").text);

}

export function cityandstatedropdown_change(event) {
// update the label of ‘#CityStatetext’ to be the same as #cityandstatedropdown
let dropdownlabel = $w(“#cityandstatedropdown”).value
$w(“#CityStatetext”).text = dropdownlabel

if ($w(“#cityandstatedropdown”).value === “CityStatetext”) {
$w(“#CityStatetext”).hide();

}  **else**  { 
    $w("#CityStatetext").show(); 

} 
 console.log($w("#CityStatetext").text);

}

2

please format your code to make reading easier

3

ok will do.

4

Arthur, Thank you I followed the article that you provided. Please see code below.

import wixData from 'wix-data';

$w.onReady(function () {
$w("#noResText").hide();
$w("#Categorytext").hide();
$w("#CityStatetext").hide();

});


export function searchbutton_click_1(event, $w) {
    $w("#dataset2").setFilter(wixData.filter()

        .contains("category", $w('#vendordropdown').value)
        .and(wixData.filter()
        .contains("cityState", $w('#cityandstatedropdown').value)
    )
    ).then((results) => {
 let count = $w("#dataset2").getTotalCount();
 if(count === 0){
            $w("#noResText").show();
        }
 if (count >= 1) {
             $w("#noResText").hide();
 
        }

          console.log("Dataset2 is now filtered");           
 let  numberOfResults = $w("#dataset2").getTotalCount()
           $w('#searchcount').text = String(numberOfResults); 
 
          console.log(numberOfResults); 
 
                  }).catch((err) => {
            console.log(err);
        });
  $w('#Vendorlist').expand();
}

export function vendordropdown_change(event) {
 // update the label of '#Categorytext' to be the same as #vendordropdown
let dropdownlabel = $w("#vendordropdown").value
   $w("#Categorytext").text = dropdownlabel
 
 if ($w("#vendordropdown").value === "Categorytext") {
        $w("#Categorytext").hide();
 
    } else {
        $w("#Categorytext").show();
    }
     console.log($w("#Categorytext").text);
}

export function cityandstatedropdown_change(event) {
 // update the label of '#CityStatetext' to be the same as #cityandstatedropdown
let dropdownlabel = $w("#cityandstatedropdown").value
   $w("#CityStatetext").text = dropdownlabel
 
 if ($w("#cityandstatedropdown").value === "CityStatetext") {
        $w("#CityStatetext").hide();
 
    } else {
        $w("#CityStatetext").show();
    }
     console.log($w("#CityStatetext").text);
 
}
export function clearallbutton_click(event) {
$w("#vendordropdown").value = "Select a Vendor Category:"; 
$w("#cityandstatedropdown").value = "Select a City & State:";  
}