Understanding how #input and html UI work

[sononicola]

Hi
I need some help to understand how #input works. I want to create two different inputs form based on a checkbox. The problem is the values setted in the inputs form need two runs to be setted for real.
With the code below:
Select or not the checkbox, write a number, press continue, the values is still the old one. In the next run the value appear.
What I'm missing?

'Choose if internal action needs to be calculated as a simple supported beam or if you already know them:
'<p><input name="VAR_inputInternalActions" type="checkbox" id="VAR_inputInternalActions" value="1" > 
'<label for="VAR_inputInternalActions">Azioni interne note</label></p>
'<p id="VAR_inputInternalActions" style="display:none;">'VAR_inputInternalActions = ? {0}'</p>


#hide
#if VAR_inputInternalActions ≡ 1
#input
#show
M_Ed,y = ? {0}kNm
M_Ed,z = ? {0}kNm
N_Ed = ? {0}kN
V_Ed,y = ? {0}kN
V_Ed,z = ? {0}kN
#else
#input
#show
Q = ? {0}kN/m
L = ? {0}m
#post
M_Ed,y = Q*L^2/8
V_Ed,z = Q*L/2
#end if
#show
"-----------------
M_Ed,y
V_Ed,z

[Erikbernhart]

HI Nicola, to my knowledge the #input doesn't work for selections like this, i had the same issue a while ago.

i think if you use this code it should work, the trick here is to add some javascript at the end along with some extra code.
now you can fill in the "need calculation" or " allready know" input and get the calculations from there

'Choose if internal action needs to be calculated as a simple supported beam or if you already know them:
#show
 '<p id = "type1"class = "switch_base"style = "display:none" > 'type = ? {2}' </p >
#pre
'<p><select data-target="type1" class="switch_trigger"> 
'<option value="1">need calculation</option>
'<option value="2">allready know</option>
'</select></p>
#hide
#if type ≡ 1
#pre
'<pre class="switch switch_1">
Q = ? {3}kN/m
L = ? {4}m' </pre >
#post
M_Ed,y = Q*L^2/8
V_Ed,z = Q*L/2
#hide
#else 
#end if
#if type ≡ 2
#show
'<pre class="switch switch_2">
#pre
M_Ed,y = ? {4}kNm
M_Ed,z = ? {5}kNm
N_Ed = ? {6}kN
V_Ed,y = ? {7}kN
V_Ed,z = ? {8}kN'</pre >
#post
M_Ed,y
V_Ed,z
#hide
#end if
#pre
  '<script>if(window.jQuery){$(".switch_trigger").change(function(){$(".switch").hide();$(".switch_"+$(this).val()).show();});$(".switch").hide();$(".switch_"+$(".switch_base input").val()).show();}</script>

@Proektsoftbg please correct me if im wrong :)

[sononicola]

Thanks for the time spent! Your trick is very nerd but it seems to works well! Unfortunately I have zero experience with html and Javascript, but only with Python. Basically the js is always the same, right? Suppose I want to create more cases for different selections inputs. I just need to put inputs inside a <pre class="switch.

I thought that #input was created exactly for this purpose. Maybe your code could be included directly inside Calcpad

[Proektsoftbg]

Hi!

Your code should work in theory. Maybe it is a bug. I will dive deeper into this.

[sononicola]

Hi!

Your code should work in theory. Maybe it is a bug. I will dive deeper into this.

Thankyou 🤞

[sononicola]

@Proektsoftbg with 7.10 versione my code works as expected! thanks

Even so, it would be wonderfull to put the javascript "real-time" change method as default, without the needs to click "continue" /run button to see changes from checkboxes