Do form output print out of id using JavaScript language?

Question

Do form output print out of id using JavaScript language?

Navigation

#1 by (1 votes)

1

I have a small form that gives a result based on the input of two values via form. I just want the impression of the result to be made out of the form of the result. I've tried everything and I can not. There are 3 possibilities:

The result appears: [object][Object] : what happened a few times when I change the schedule;

Read the "else" for the "third if" and the sentence appears: Please redo your query. This occurs when I have the sentence: - var resultado = $("#valor3").val(); - (most common; it does not 'calculate' and understands that the value is null);

'undefined' that occurs when I have this expression: var resultado = $("#resultado").val();

I leave the code for review, I'm quite a beginner in JavaScript:

CODE (file in .html) - I leave in the form 'undefined'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
 .btn { }
 .n1 { }
 .n2 { }
 .n3 { }
</style>    
     <script type="text/javascript" src="jquery-1.8.3.js"></script>
   <script type="text/javascript" src="jquery.form.js"></script>
   <script type="text/javascript">
   function somarValores(){    
        var s1 = document.getElementById("s1").value;    
        var valor1 = convToFloat(s1) * 0.50;    
        var s2 = document.getElementById("s2").value;    
        var valor2 = convToFloat(s2) * 12;    
        var valor3 = valor1 + valor2;    
   document.getElementbyClassName(resultado).value = valor3;            
   }    

    function convToFloat(temp) {    
        var value;    

        if (temp.indexOf(',') == -1) {    
            temp = temp.replace(",", ".");    
        }    
        return parseFloat(temp); 
    }

    $(document).ready(function(){
       $(".btn").click(function(){

         var volume = $("#valor1").val();

     if(volume != 0){

      $("#n1").html("<font color='#828282' face='arial'><b>RELAT&Oacute;RIO</font><br><br>Volume do ambiente: <font color='blue'>" + volume + " m&sup3;</b></font>");

           }else{   

      $("#n1").html("<font color='#828282' face='arial'><b>RELAT&Oacute;RIO</font><br><br>Campo <i>Volume</i> n&atilde;o preenchido!</b>");

         }

         var pessoa = $("#valor2").val();

     if(pessoa != 0){

      $("#n2").html("<b>N&uacute;mero de pessoas: <font color='blue'>" + pessoa + "</b></font>");

           }else{   

      $("#n2").html("<b>Campo <i>N&uacute;mero de Pessoas</i> n&atilde;o preenchido!</b>");

         }

     var resultado = $("#resultado").val(); 

          if(resultado != 0){ 

           $("#n3").html("<b>N&uacute;mero de pessoas: <font color='blue'>" + resultado + "</b></font>");      

           }else{   

      $("#n3").html("<b>Por favor, refa&ccedil;a sua consulta!</b>");          

   }
       return false;

     })

    })


  </script>
</head>

<body>

 <br>

  <table width="30%" border="0">
    <tr>
     <td width="30%" align="center" valign="center" bgcolor="#EEEEE0">
      <font color="#8B8B83" face="arial"><b> - Estimativa de Carga T&eacute;rmica - </b></font>
        </td></tr></table><br>

 <table width="30%"><tr><td width="30%">
 <form method="post" action""><fieldset><legend></legend>
  <table width="100%" border="0">
    <tr>
     <td width="50%" align="right" valign="center">
      <b>Volume (&nbsp;m&sup3;): </b>
        </td>

     <td width="50%" align="center" valign="center">
       <input type="text" name="volume" id="valor1" size="5"/></td></tr>

      <tr>
       <td width="50%" align="right" valign="center">
         <b>N&#186; de Pessoas: </b>
        </td>

       <td width="50%" align="center" valign="center">
      <input type="text" name="pessoa" id="valor2" size="5"/></td></tr>


      <tr>
       <td width="50%" align="center" valign="center">
         <br><br>
        </td>

       <td width="50%" align="center" valign="center">
           <input type="text" name="resultado" id="valor3" hidden/>
           <input type="submit" value="Calcular Carga T&eacute;rmica" class="btn"/>
        </td></tr></table></fieldset>



 <br>
<dd><div id="n1"><p></p></div><br>
<div id="n2"><p></p></div><br>
<div id="n3"><p></p></div></dd>


</form>
</td></tr></table>
</body>
</html>

javascript

asked by anonymous 18.10.2014 / 16:58

1 answer

How to take parameter from within the popup? Get revision history in Google Drive with Java from NetBeans

score 1 · Answer 1

I think the JavaScript you need is this:

function somarValores() {
    var s1 = document.getElementById("valor1").value;
    var valor1 = convToFloat(s1) * 0.50;
    var s2 = document.getElementById("valor2").value;
    var valor2 = convToFloat(s2) * 12;
    return [valor1, valor2];
}

function convToFloat(temp) {
    if (temp.indexOf(',') == -1) temp = temp.replace(",", ".");
    return parseFloat(temp);
}

$(document).ready(function () {
    $(".btn").click(function (e) {
        e.preventDefault(); // impedir a form de ser enviada para o servidor
        var input = somarValores(); // calcular os valores
        $('#n1 span').text(input[0]);
        $('#n2 span').text(input[1]);
        $('#n3 span').text(input[0] + input[1]);
    });
})

The HTML of the result I suggest like this:

<div class="resultado">
     <h2>RELAT&Oacute;RIO</h2>
    <div id="n1">Volume do ambiente: <span></span> m&sup3;</div>
    <div id="n2">Número de pessoas: <span></span></div>
    <div id="n3">Total: <span></span></div>
</div>

Then to format the layout / design you should use CSS rather than HTML.

For example:

.resultado {
    font-weight: 600;
}

.resultado span {
    color: blue;
}

The add values function will fetch the input and return the two calculated values in an array. So just add.

Your HTML is unnecessarily complex. I think you could clean a lot there. I do not know why it has a <form> if you do not want to send the page to the server ... I leave an example of the code working with your HTML by changing the piece I put on it: link