I need help with the result for a form in JavaScript

tutorials
1

I’m learning programming, first of all, I ask you to help me if I’m making a critical mistake.

I’m trying to develop/practice a calculator, where in the last input field the result is displayed.
I have the formula used on a website, but I’m having trouble replicating the references.
The JavaScript code taken from the site is:

;(function( $, window, document, undefined ) {

    'use strict';

    setTimeout( function(){
        $( '.touchevents' ).find( '.js-taphover' ).removeClass( 'js-taphover' );
    }, 1000 );

    // Calculadora de consumo
    var calcQuantity = function( qty, type ) {
        var values, qtyFaixa;

        qty = parseInt( qty );

        if ( type == 'Ceramica / Porcelanato' ) {
            values = { 19: 1, 79: 2, 99: 3, 119: 4, 9999: 5 };
        }
        if ( type == 'Granitos / Outras Pedras' ) {
            values = { 19: 1, 49: 2, 69: 3, 90: 4, 109: 5, 9999: 6 };
        }

        $.each( values, function( index, value ) {
            if ( qty <= parseInt( index ) ) {
                qtyFaixa = value;
                return false;
            }
        });

        return qtyFaixa;
    };

    $( document ).bind( 'gform_post_render', function( event, form_id, current_page ){

        if ( jQuery.inArray( form_id, [7, 8, 9] ) == -1 ) {
            return;
        }

        var selectors = {
            '7': {
                'fields': '#gform_fields_7 input[type="text"], #gform_fields_7 select',
                'revestimento': '#input_7_8',
                'aresta_menor': '#input_7_17',
                'aresta_maior': '#input_7_18',
                'area_aplicacao': '#input_7_14',
                'resultado': '#input_7_19'
            },
            '8': {
                'fields': '#gform_fields_8 input[type="text"], #gform_fields_8 select',
                'revestimento': '#input_8_8',
                'aresta_menor': '#input_8_17',
                'aresta_maior': '#input_8_18',
                'area_aplicacao': '#input_8_14',
                'resultado': '#input_8_19'
            },
            '9': {
                'fields': '#gform_fields_9 input[type="text"], #gform_fields_9 select',
                'revestimento': '#input_9_8',
                'aresta_menor': '#input_9_17',
                'aresta_maior': '#input_9_18',
                'area_aplicacao': '#input_9_14',
                'resultado': '#input_9_19'
            }
        };
        
        $( selectors[form_id].fields ).on( 'change input paste', function() {

        var revestimento = $( selectors[form_id].revestimento ).val(),
            aresta_menor = parseInt( $( selectors[form_id].aresta_menor ).val() ),
            aresta_maior = parseInt( $( selectors[form_id].aresta_maior ).val() ),
            area_aplicacao = parseInt( $( selectors[form_id].area_aplicacao ).val() ),
            $resultado = $( selectors[form_id].resultado ),
            result, 
            C4, C5, D4, D5, D6, D7, D8; // excel cell

            C4 = aresta_menor;
            C5 = aresta_maior;
            D4 = calcQuantity( aresta_menor, revestimento );
            D5 = calcQuantity( aresta_maior, revestimento );
            D6 = Math.sqrt( area_aplicacao );
            D7 = ( D6 / ( C4 / 100 ) );
            D8 = ( D6 / ( C5 / 100 ) );

            result = ((D7*D4)*(D8-1))+(D8*D5)*(D7-1);
            if ( ! isNaN( result ) ) {
                $resultado.val( Math.ceil( result ) + ' peças' );
            } else {
                $resultado.val( '' );
            }
        });
    });

}( jQuery, window, document ));

My HTML page with the form fields is:

<ion-header [translucent]="true">

</ion-header> <!-- Top da página (menu) -->

<ion-content [fullscreen]="true">

  <ion-header collapse="condense">

    <script type="tab1.page.ts"></script> <!-- Script JS -->
    
    <ion-toolbar>
      <ion-title size="large">Calculadora</ion-title>
    </ion-toolbar>
  </ion-header>


      <div class="ion-padding">

          <h1>
            Cálculo de Consumo
          </h1>

          <p>
            Faça o cálculo da quantidade de clipes necessária para sua obra
          </p>

            <ion-item color="none">
              <ion-label position="floating">
                Revestimento
              </ion-label>
                <ion-select type="text">
                  <ion-select-option class="Ceramica / Porcelanato">Cerâmica / Porcelanato</ion-select-option>
                  <ion-select-option class="Marmores / Granitos">Mármores / Granitos</ion-select-option>
                </ion-select>
            </ion-item> 

              <br>

            <ion-item  color="none">
              <ion-label position="floating">
                Lado X (cm)
              </ion-label>
              <ion-input type="number"></ion-input>
            </ion-item> 

              <br>

            <ion-item  color="none">
              <ion-label position="floating">
                Lado Y (cm)
              </ion-label>
              <ion-input type="number"></ion-input>
            </ion-item> 

              <br>

            <ion-item  color="none">
              <ion-label position="floating">
                Parede Maior (m)
              </ion-label>
              <ion-input type="number"></ion-input>
            </ion-item> 

              <br>

            <ion-item  color="none">
              <ion-label position="stacked">
                {{ resultado }}
              </ion-label>
              <ion-input type="text"> </ion-input>
            </ion-item> 

          <h5>
            Observação: Como as cunhas são reutilizáveis, sugerimos a quantidade de 300 a 400 peças por instalador.
          </h5>

      </div>

</ion-content>

thank you in advance for the help

2

Hi @Lucazzmacedo welcome to the community!!
You didn’t discribe what is the errors you are getting.
But, beforehand I may tell you there are some mistakes in your code.
So, I cound’t understand why are you importing a page inside the header tag like this: <script type="tab1.page.ts"></script> unfortunately it is a mistake.
Another question is why are you using jQuery in your code?
Is better to avoid using jQuery. But if you really can’t avoid, be sure you have imported it correctly. Please, take a look at Angular patterns and you will understand better.
The pure javascript will not work like in the way you are trying to make use. I suggest you can adjust and translate the javascript code into typescript code using the Angular pattern.

3

In addition to the above advice

If you want to pursue the angular route I suggest also to go to angular.io and follow the Tour of Heroes tutorial, to learn the basics of angular patterns - including forms

Or look at examples from Josh Morony

Maybe this is a steep learning but this will be necessary to stay away from jQuery - great alternatives are Vue or React

If u insist using jquery then you have to remove all angular stuff and go for the plain vanilla js code examples

Welcome to web development!

4

Now the error makes more sense, I was thinking that the code was JavaScript in its entirety, thank you very much.

I need to do the following calculation to be displayed in the last field of the form, can I?

calcQuantity = If ‘Ceramics / Porcelain’ is selected in the 1st field “Coating”, the values ​​entered in the 2nd (Side X) and 3rd (Side Y) will be replaced by 1, 2, 3, 4 or 5.
That is, if the user enters numbers less than 19 in the 2nd and 3rd field of the form, the calculation will use the numeral ‘1’. If the user enters a number between 20 and 59 the calculation will use the numeral 2 to do the calculation and so on) in this case you would have to use an IF, right?!

squareroot = the customer will fill in the 4th field of the “bigger wall (m)” form. This value will extract the square root.

The calculation will look like this:
D4 = calcQuantity (Number extracted from Side X );
D5 = calcQuantity (Number extracted from Side Y);
D6 = squareroot (Square root of the application area);
D7 = (D6 / (C4 / 100));
D8 = (D6 / (C5 / 100));
result = ((D7D4)(D8-1))+(D8D5)(D7-1);

I understood the formula well, but to put the logics in JS I’m having difficulties.

Thanks a lot for the help friends!