Bootstrap problem with Javascript

Asked

Viewed 51 times

0

I have an HTML code that when entering the class form-control in input, my Javascript function does not work.

So my sum function doesn’t work:

<div class="container">
   <div class="row">        
      <label class="col-md-3"><b>IEM1 Investimento na Planta</b></label>                       
   </div>
   <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
         <label class="col-md-3">Total</label>
         <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
            <input type="text" name="IEM1_a" id="IEM1_a" value="0,00" readonly class="form-control resultado_soma 16 decimal" size="21" maxlength="21" title="Valor total em reais de capital aplicado incluindo rede de transporte de telecomunicações, equipamentos, software, hardware e serviços.">
         </div>                       
      </div> 
   </div>
   <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
         <label class="col-md-3">Marketing/<br>Propaganda</label>
         <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
            <input type="text" name="IEM1_b" id="IEM1_b"  value="0,00" class="form-control fator_soma 16 decimal" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em Marketing/Propaganda">
         </div>       
      </div>                
   </div> 
   <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
         <label class="col-md-3">Equipamentos</label>
         <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
            <input type="text" name="IEM1_c" id="IEM1_c"  value="0,00" class="form-control fator_soma 16 decimal" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em equipamentos">
         </div>                       
      </div>
   </div> 
   <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
         <label class="col-md-3">Software</label>
         <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
            <input type="text" name="IEM1_d" id="IEM1_d"  value="0,00" class="form-control fator_soma 16 decimal" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em software">
         </div>                       
      </div>
   </div> 
   <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
         <label class="col-md-3">P&D (Pesquisa e Desenvolvimento)</label>
         <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
            <input type="text" name="IEM1_e" id="IEM1_e"  value="0,00" class="form-control fator_soma 16 decimal" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em P&D (Pesquisa e Desenvolvimento)">
         </div>         
      </div>              
   </div> 
   <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
         <label class="col-md-3">Serviços</label>
         <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
            <input type="text" name="IEM1_f" id="IEM1_f" value="0,00" class="form-control fator_soma 16 decimal"  maxlength="21" size="21" title="Valor total em Reais de capital aplicado em serviços">
         </div>                       
      </div>
   </div>
   <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
         <label class="col-md-3">Call-Center ou qualquer tipo de central de atendimento</label>
         <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
            <input  type="text" name="IEM1_g" id="IEM1_g" value="0,00" class="form-control fator_soma 16 decimal"  maxlength="21" size="21" title="Valor total em Reais de capital aplicado em Call-Center ou qualquer tipo de central de atendimento">
         </div>                       
      </div> 
   </div>
</div>
</div>

That’s how it works:

  <div class="container">



   <div class="row">        
    <label class="col-md-3"><b>IEM1 Investimento na Planta</b></label>                       
    </div>
    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">Total</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_a" id="IEM1_a" value="0,00" readonly class="resultado_soma 16 decimal" size="21" maxlength="21" title="Valor total em reais de capital aplicado incluindo rede de transporte de telecomunicações, equipamentos, software, hardware e serviços.">
    </div>                       
    </div> 
</div>

<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">Marketing/<br>Propaganda</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_b" id="IEM1_b"  value="0,00" class="fator_soma 16 decimal" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em Marketing/Propaganda">
    </div>       
    </div>                
    </div> 

  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
   <label class="col-md-3">Equipamentos</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_c" id="IEM1_c"  value="0,00" class="fator_soma 16 decimal" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em equipamentos">
    </div>                       
</div>
    </div> 


    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
   <label class="col-md-3">Software</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_d" id="IEM1_d"  value="0,00" class="fator_soma 16 decimal" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em software">
    </div>                       
</div>
    </div> 



    <div class="row">
     <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">P&D (Pesquisa e Desenvolvimento)</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_e" id="IEM1_e"  value="0,00" class="fator_soma 16 decimal" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em P&D (Pesquisa e Desenvolvimento)">
    </div>         
    </div>              
    </div> 

    <div class="row">
     <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">Serviços</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_f" id="IEM1_f" value="0,00" class="fator_soma 16 decimal"  maxlength="21" size="21" title="Valor total em Reais de capital aplicado em serviços">
    </div>                       
    </div>
</div>

   <div class="row">
     <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">Call-Center ou qualquer tipo de central de atendimento</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input  type="text" name="IEM1_g" id="IEM1_g" value="0,00" class="fator_soma 16 decimal"  maxlength="21" size="21" title="Valor total em Reais de capital aplicado em Call-Center ou qualquer tipo de central de atendimento">
    </div>                       
    </div> 
</div>

Javascript code:

      $(".decimal").keypress(function(){
        if(this.type == "text" && this.className != "numero_livre"){
        if(this.value.length > 1){
            if(isNaN(this.value.replace(",", ".")) == false){
                if((this.value.indexOf("0") == 0) && (this.value.indexOf(",") != 1)){
                    this.value = this.value.substring(1);
                }
            }
        }
        }
       });

       $(".fator_soma").keypress(function(){
        if(this.type == "text" && this.className != "numero_livre"){
        if(this.value.length > 1){
            if(isNaN(this.value.replace(",", ".")) == false){
                if((this.value.indexOf("0") == 0) && (this.value.indexOf(",") != 1)){
                    this.value = this.value.substring(1);
                }
            }
        }
        }
       });

       $(".numero").keypress(function(){
        if(this.type == "text" && this.className != "numero_livre"){
        if(this.value.length > 1){
            if(isNaN(this.value.replace(",", ".")) == false){
                if((this.value.indexOf("0") == 0) && (this.value.indexOf(",") != 1)){
                    this.value = this.value.substring(1);
                }
            }
        }
        }
       });

       $(".decimal").change(function(){
       if(this.value.indexOf(",") < 0){
        this.value = this.value + ",00";    
       } else {
        if(this.value.split("").reverse().join("").indexOf(",") == 1){
            this.value = this.value+"0";
        }
        if(this.value.split("").reverse().join("").indexOf(",") > 2){
            this.value = parseFloat(this.value.replace(",", ".")).toFixed(2).replace(".", ",");
        }
       }

       });

       $(".fator_soma").change(function(){
        var resultado = 0;
        var classeArr = "";
        var parte = "";
        classeArr = this.className.split(" ");
        parte = classeArr[1];
        $(".fator_soma."+parte).each(function(){
            resultado = parseFloat(this.value.replace(",", ".")) + parseFloat(resultado);
        });     
        $(".resultado_soma."+parte).each(function(){
            this.value = resultado;
            if(classeArr[2] == "decimal"){
                this.value = this.value.replace(".", ",");
            }
        });
       });
            });

Any suggestions on how to make the first case work with the Javascript function?

php javascript html bootstrap-3

  • It would be interesting to have javascript code to see how you are accessing the fields.

  • I will post!!!!

  • 1

    tries to put the form-control class at the end, because you are using concatenation there, accessing the fields in the order the class is pointed to.

  • 1

    play form-control after factor_sum 16

  • 1

    In my tests, putting in the end works perfectly. html published as answer below.

  • Thanks! It worked! I am new in web...I thank you for the help!

Show 1 more comment

1 answer

0


Putting the form-control in the end, it worked in my tests.

What happens is that you are using a concatenated identifier on className, therefore the form-control in the beginning breaks the sequence because you start the path by fator_soma

 <div class="container">



   <div class="row">        
    <label class="col-md-3"><b>IEM1 Investimento na Planta</b></label>                       
    </div>
    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">Total</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_a" id="IEM1_a" value="0,00" readonly class="resultado_soma 16 decimal form-control" size="21" maxlength="21" title="Valor total em reais de capital aplicado incluindo rede de transporte de telecomunicações, equipamentos, software, hardware e serviços.">
    </div>                       
    </div> 
</div>

<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">Marketing/<br>Propaganda</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_b" id="IEM1_b"  value="0,00" class="fator_soma 16 decimal form-control" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em Marketing/Propaganda">
    </div>       
    </div>                
    </div> 

   <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
   <label class="col-md-3">Equipamentos</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_c" id="IEM1_c"  value="0,00" class="fator_soma 16 decimal form-control" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em equipamentos">
    </div>                       
</div>
    </div> 


    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
   <label class="col-md-3">Software</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_d" id="IEM1_d"  value="0,00" class="fator_soma 16 decimal form-control" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em software">
    </div>                       
</div>
    </div> 



    <div class="row">
     <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">P&D (Pesquisa e Desenvolvimento)</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_e" id="IEM1_e"  value="0,00" class="fator_soma 16 decimal form-control" maxlength="21" size="21" title="Valor total em Reais de capital aplicado em P&D (Pesquisa e Desenvolvimento)">
    </div>         
    </div>              
    </div> 

    <div class="row">
     <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">Serviços</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input type="text" name="IEM1_f" id="IEM1_f" value="0,00" class="fator_soma 16 decimal form-control"  maxlength="21" size="21" title="Valor total em Reais de capital aplicado em serviços">
    </div>                       
    </div>
</div>

   <div class="row">
     <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">        
    <label class="col-md-3">Call-Center ou qualquer tipo de central de atendimento</label>
    <div class="col-md-9 col-sm-6 col-xs-6 form-group has-feedback">
    <input  type="text" name="IEM1_g" id="IEM1_g" value="0,00" class="fator_soma 16 decimal form-control"  maxlength="21" size="21" title="Valor total em Reais de capital aplicado em Call-Center ou qualquer tipo de central de atendimento">
    </div>                       
    </div> 
</div>

Browser other questions tagged php javascript html bootstrap-3

You are not signed in. Login or sign up in order to post.