Request for help and or ideas

Wappler General
1

Hi, I’m updating some code and it is working but I’m having a problem with my inputted values jumping around as I type them in. I’m sure it is because I’m trying to compute 3 different variable values that are all dependent on each other. I did not even think I could get this to work but it does - is there a way (maybe with some type of validation) to keep the values from updating before I finish the input for a variable?

Or is this approach a really bad way to handle the problem?

This is the code but I’m not sure if this the best way to get it into the post

<input type="number" class="form-control form-control-sm" id="stf1" name="stf1" placeholder="Enter Value" dmx-bind:value="((stf3.value) / (3.14159265359 * ((pizzasize.value * .5).pow(2)))).round(4)" step="0.0001" value="0">
                  </div>
                  <div class="col-sm-3">
                    <input type="number" class="form-control form-control-sm" id="stf2" name="stf2" placeholder="Enter some text" dmx-bind:value="(((3.14159265359 * ((pizzasize.value / 2).pow(2))) * stf1.value) / 0.035274).round(2)" step="0.1" value="0">
                  </div>
                  <div class="col-sm-3">
                    <input type="number" class="form-control form-control-sm" id="stf3" name="stf3" placeholder="Enter some text" dmx-bind:value="(.035274 * stf2.value).round(2)" step="0.1" value="0">
                  </div>
2

did you try condition? ( server side or client side )

3

I’m really new to web site coding and wappler (I have never used DMXzone) - to be honest, I just started to learn everything about 2 weeks ago.

Can you help me understand how I would apply a condition?

1 Like
4

To be honest, this is the way things work and how they are kind of meant to work. In older ways of coding you would enter in all your data, then click a submit button and the server would process what you had input and return an answer.

The code you have shown are all dependant on each other, so if you load your page and the field already has a default value of lets say
Sauce TF 1 = 0,0298
Sauce TF 2 = 6,76
Sauce TF 3 = 0,24
Those fields have already been calculated from the size of the pizza

So a Pizza size of 16 inches is the variable that sets Sauce TF 1 and Sauce TF 2 to start their calculations. As these 3 fields are all mathematically worked out from the value already in each field, if you change any field value the other values will all adjust in real time. So if you remove the existing value in Sauce TF 1 and begin typing your first digit of Zero, then the values will all adjust to Zero, then you type your second digit of lets say 1 and as you hit the key so all the values update in real time.

I really do not see a way myself of making the dependant field only update on another event such as focus out or something. Sorry.

I do know a bit about the calculator as I was a little involved in its development with @drymetal

5

Thanks so much - yes I’m the total newbie that drymetal has been helping. He has really been holding my hand and w/o him I would be nowhere. I have been making a bunch of updates on my own just looking at what he has done. It is a great way for me to learn!

I think what might work is if I add a button the user hits that says calculate (or something like that).

I just don’t know how to pause the existing value calculations to wait for the user to hit submit?

Do you think that could work?

6

The only possible way to make that work would be to remove all the mathematical functions from each of the dmx-bind:value parameters.
Then you would need to add a calculate button that has a very very large on click event and conditions.
The concept is like this lets say the i had a calculator with only 3 inputs for the example

input1 takes the initial variable that is unknown, lets say I will add a 5 to that
input2 takes the input1 value of 5 and adds 3
input3 takes the input1 value of 5 and adds the input2 value of 3 and divides by 2
So the answer mathematically should return 4 (5+3)=8 (8/2)=4 so the condition is that it needs to take the value of input1 and input2 first and produce an answer and only then do the division.

I would have to add the calculate button with an on click event that pulls the values of the 3 fields and does the calculation ((input1.value + input2.value)/input3.value)

So thats the simplistic version of this, with your mammoth calculator I honestly would not even know where to begin trying to do all those calculations in a single click because the onclick of a button will do all commands in one go and in no particular order unless you set up onsuccess conditions all over the place, so onsuccess of input1+input2 then run the answer of that / input3 and so on and so on.

I might be over thinking it though, maybe Chad would have a slightly simpler idea, in fact his first version was closer from a code perspective to what you want now then what I advised him to alter it to. haha.

7

Thanks so much - I have been doing lots of stuff on practice pages so I don’t mess up the working pages. It was working great but I had given Chad some incorrect calculations, I corrected those since he had done the heavy lifting for me already and I just needed to adjust some math.

The big difference now is I’m trying to calculate 3 values at once - (before the only input was STF1 along with pizza size… and STF2 and STF3 were only calculated).

I think I could do this by asking the user to specify what they want to calculate vice trying to do all three (Thickness factor, weight in grams and weight in ounces all at once) but that would cause me to add a ton of individual pages which would be a problem for me to keep straight in my brain chassis.

Thanks so much for the input - I’m not giving up!

1 Like
8

Well I am glad you are not, you already have a really good base to begin with, looking forward to seeing the final outcome of this.
I have to admit i never for a single moment realised the precision that actually went into making a pizza. I have a new appreciation when I am eating them now.

2 Likes