Inserting form with conditional logic to multiple tables

Server Side Components
,
#21

Add it directly in the HTML:

dmx-bind:disabled="inp_StartDate.value && inp_EndDate.value && inp_StartDate.value.monthsUntil(inp_EndDate.value) > 12"
#22

Got you! It still does not work. The select option only gets disabled when I chose a start and end date.

#23

Of course, my bad :slight_smile:

dmx-bind:disabled="(!inp_StartDate.value && !inp_EndDate.value) || inp_StartDate.value.monthsUntil(inp_EndDate.value) > 12"

I forgot the ! in the expression also added || for the second condition.

#24

Now it does not work at all, even if I chose start and end date :joy:

#25

It should be working perfectly fine :slight_smile:

#26

Now the select option is disabled by default but gets abled no matter what start and end date I put in… Weird.

#27

@Teodor @Hyperbytes Thank you very much for your help guys! Unfortunately I’m probably am going to have to abandon Wappler since it’s too complicated. We are three people trying to do a pretty simple task and it’s not working. Is it possible to add custom Javascript instead/also? This is what my Javascript look like for this function:

$("#StartDate, #EndDate").change(function() {

    if ($('#StartDate').val() && $('#EndDate').val()) {

      var startDate = moment($('#StartDate').val());
      var endDate = moment($('#EndDate').val());

      var durationMonths = Math.abs(endDate.diff(startDate, 'months'));

      // maintain value outside of change function
      durationYears = Math.abs(endDate.diff(startDate, 'years'));

      if (durationMonths > 12) {
        $('#VariablePriceOption').prop("disabled", false);
      } else {
        $('#VariablePriceOption').prop("disabled", true);
      }

      // If dates changed, update variable inputs shown
      if ($('#VariablePriceOption').is(':checked')) {
        if (durationMonths > 12) {
          $('#VariablePriceInput1').val('');
          $('.duration-years-input').remove();
          handleVariablePricing();
        } else {
          $('#FixedPriceOption').click();
        }
      }
    }

  });
#28

Yes, i think Teodor is having a bad day which is not like him

Verbally the expression is: disabled if DateStart is empty OR DateEnd is empty OR the gap between them is less than 12 months

Therefor all the condition should be OR, the AND in Teodors expression is wrong

So the expression should be:

!inp_StartDate.value || !inp_EndDate.value || inp_StartDate.value.monthsUntil(inp_EndDate.value) < 12

As simple JavaScript I am surprised you didn’t notice yourself.

Also note it is “<” not “>”

I have tested this and it works exactly as you wanted

#29

Well, from what I understand the select must be disabled if the start AND end dates are missing OR the difference is more than 12 months.
Isn’t that the case? :slight_smile:

#30

May be wrong but I thought if either was missing (as date gap cannot be calculated without both) so we are both correct based on our differing understanding.

here is my test page anyway

https://findmystudentdigs.co.uk/customtester.php

1 Like
#31

@Teodor @Hyperbytes Guys, you’ve been more than helpful. Thank you very much! @Hyperbytes’s last expression works great. I just don’t think Wappler is the right tool for the particular website I’m trying to build, or rather, I don’t think it’s wise to start learning a new tool at the same time you want to have a website built. Especially when the website is full of this weird conditional logic in all the forms. I’ll try out Wappler again at a later point.

Thank you very much again!

#32

Fair comment although that is exactly what I did, baptism of fire but I learned so much having to get my head around Wappler by necessity.