Pass Javascript Output to a field

Asked

Viewed 153 times

2

In this my script below is not passing the results to the fields at all someone would have a light on how I can solve this

$(window).load(function(){
var contador = function() {
var n = $("input:enabled:checked").length;
var unchecked = 0;
var cb = $(this).index();
$("input:enabled").each(function(i) {
    if ((i < cb) && !($(this).is(":checked"))) {
      ++unchecked;
    }
  })

  if($(this).is(":checked")){
    $('#campo').append('<div style="margin-top: 10px;"><input type="text" placeholder="Insira seu Ticket" name="tks[]" required  class="created" name="check1" ></div>');
  }else{
    $('.created').eq($(this).index()-unchecked).remove();
  } 

$("#checkcount").text(n + (n === 1 ) + " Cadeiras Marcadas");
};
contador();
$("input[type=checkbox]").on("click", contador);


(function() {
    var elements = document.getElementsByTagName('input');
    var resultado = document.getElementById('resultado_soma');
    $('#result').val(resultado);
    var total = 0;

    for (var i = 0; i < elements.length; i++) {
        elements[i].onclick = function() {
            if (this.checked === false) {
                total = total - this.value;
            } else {
                total = total + parseFloat(this.value);
            }

            resultado.innerHTML  = 'R$ ' + total.toFixed(2).replace(".",",");
        }
    }
})();




});

.mesa input { visibility: hidden; }

.mesa {
  position:relative; float:left;
  width:140px; height:140px;
  background:url('http://i.stack.imgur.com/MI8cD.png') no-repeat center center;
}

.mesa label {
  position:absolute; display: block;
  width:36px; height:32px; left:50%; top:50%; margin-left:-18px; margin-top:-16px;
  background:url('http://i.stack.imgur.com/27Y0g.png') no-repeat center top;
}

.mesa input:checked + label {
  background:url('http://i.stack.imgur.com/aHDoy.png') no-repeat center top;
}

.mesa span {
  position:absolute; display:block; left:50%; top:50%;  -webkit-transform:translate(-50%,-50%);
  font:bold 15px Arial, Helvetica, sans-serif;
}






        .mesa4 input { visibility: hidden; }

.mesa4 {
  position:relative; float:left;
  width:140px; height:140px;
  background:url('http://i.imgur.com/EMhWAZP.png') no-repeat center center;
}

.mesa4 label {
  position:absolute; display: block;
  width:36px; height:32px; left:50%; top:50%; margin-left:-18px; margin-top:-16px;
  background:url('http://i.stack.imgur.com/27Y0g.png') no-repeat center top;
}

.mesa4 input:checked + label {
  background:url('http://i.stack.imgur.com/aHDoy.png') no-repeat center top;
}

.mesa4 span {
  position:absolute; display:block; left:50%; top:50%; -webkit-transform:translate(-50%,-50%);
  font:bold 15px Arial, Helvetica, sans-serif;
}






.l1 { -webkit-transform:translateY(-50px) }    
.l2 { -webkit-transform:rotate( 60deg) translateY(-50px) }
.l3 { -webkit-transform:rotate(120deg) translateY(-50px) }
.l4 { -webkit-transform:rotate(180deg) translateY(-50px) }
.l5 { -webkit-transform:rotate(240deg) translateY(-50px) }
.l6 { -webkit-transform:rotate(300deg) translateY(-50px) }

.l7 { -webkit-transform:rotate(90deg) translateY(-50px) }
.l8 { -webkit-transform:rotate(270deg) translateY(-50px) }

In Divs the results appear perfectly more if you pass to an input nothing appears 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div style="position: absolute; left: 200px; "class="mesa">
<input type="checkbox" id="m1" name="m301"  value="200" /><label class="l1" for="m1"></label>
<input type="checkbox" id="m2" name="m301"  value="200" /><label class="l2" for="m2"></label>
<input type="checkbox" id="m3" name="m301"  value="200" /><label class="l3" for="m3"></label>
<input type="checkbox" id="m4" name="m301"  value="200" /><label class="l4" for="m4"></label>
<input type="checkbox" id="m5" name="m301"  value="200" /><label class="l5" for="m5"></label>
<input type="checkbox" id="m6" name="m301"  value="200" /><label class="l6" for="m6"></label>
</div>

<div style="position: absolute; left: 10px;">
<div id="checkcount"></div>  
<div id="resultado_soma"></div>
<div id="campo"></div>  
</div>

<div style="position: absolute; left: 400px;"><br /><br />
<input type="text" id="resultado_soma2" name="resultado_soma2" placeholder="Total" /><br />
<input type="text" id="checkcount2" name="checkcount2" placeholder="N de cadeiras" /><br />

</div>


</body>
javascript

  • Two questions: this $('#result').val(resultado), in case the resultado does not refer to the element of id="resultado_soma"? And another thing, like this element #result?

  • That then I was trying to pass to the input was a test

  • would be 2 fields one with id="resultado_soma" output and another with id="checkcount output"

1 answer

2


See if this is what you wanted:

Basically, I created these variables:

var resultadoInput = document.getElementById('resultado_soma2');
var checkCount = document.getElementById('checkcount2');

And to pass the result to the input, just use the .value:

resultadoInput.value  = 'R$ ' + total.toFixed(2).replace(".",",");
checkCount.value  = $("input:enabled:checked").length;

In the second line I use the number of checkbox marked to count the chairs.

Jsfiddle

  • Perfect... who knows... Thank you

  • Samir only one thing. when putting the Ubmit button I checked that the value field zeroed by clicking it, from error "Nan" how can I fix this. Follow the script with Submit https://jsfiddle.net/fabioo7/342pc7pf/6/

Browser other questions tagged javascript

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