Добавить значения в форме

Я сделал форму с несколькими элементами. Каждый элемент имеет значение.Добавить значения в форме

Теперь, мой вопрос: как я могу добавить значения из этих элементов (когда вы их проверяете) на общее значение?

<form id="AddValuesForm" action=""> 

    <fieldset id="AddValuesFormPart1"> 

     <legend>Add Values</legend>  

     <ul> 

     <li> 
      <ul id="AddValueList"> 
      <li id="AddValueItem1"> 
      <input id="value1" type="checkbox" name="value1" value="" tabindex="10"/> <label for="value1">Cheesecake</label> 
      <input class="v1" id="value1" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/> 
      </li> 
      <li id="AddValueItem2"> 
      <input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label> 
      <input class="v2" id="value2" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/> 
      </li> 
      <li id="AddValueItem3"> 
      <input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label> 
      <input class="v3" id="value3" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/> 
      </li> 
      </ul> 
     </li> 

     <li> 
      <ul id="AddValueTotalList"> 
      <li id="AddValueTotal"> 
      <label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/> 
      </li> 
      </ul> 
     </li> 


     <li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li> 

     </ul> 

    </fieldset> 
    </form>

Примечание: без использования JQuery.

источник

2015-02-14 Anonymous

Это следует сделать это:

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta charset="utf-8"> 

<style type="text/css"> 

ul{list-style-type:none;} 

ul#AddValueList{float:left;} 

.v1, .v2, .v3 
{ 
width:35px; 
text-align:right; 
color:#000; 
} 

.v1{margin:0px 0px 0px 50px;} 

.v2{margin:0px 0px 0px 56px;} 

.v3{margin:0px 0px 0px 19px;} 

.t 
{ 
width:35px; 
text-align:right; 
color:#000; 
margin:20px 0px 0px 118px; 
} 

#ValueSubmit, 
#AddValueTotalList 
{ 
clear:left; 
} 

#ValueSubmit input{margin:20px 0px 0px 0px;} 

</style> 

<script type="text/javascript"> 

var totalcounter = 0; 

totaltracker = function (event) { 
    var targetelement = (typeof event.target != "undefined") ? event.target : event.srcElement; 
    var multipler = 0; 
    if (targetelement.checked) { 
     multipler++; 
    } else { 
     multipler--; 
    } 
    var targetvalue = document.getElementById(targetelement.id + 'a'); 
    var idtotal = document.getElementById("total"); 
    if (idtotal) idtotal.value = parseFloat(idtotal.value) + (multipler * parseFloat(targetvalue.value)); 



}; 

function totalloader() { 
    var elements = document.getElementsByTagName('INPUT'); 
    for (var i=0; i<elements.length; i++) { 
     var thisElement = elements[i]; 
     if (thisElement.getAttribute("type") == "checkbox") { 
      if (typeof thisElement.addEventListener != "undefined") { 
       thisElement.addEventListener("click", totaltracker, true); 
      } else if (typeof thisElement.attachEvent != "undefined") { 
       thisElement.attachEvent("onclick", totaltracker); 
      } 
     } 
    } 
} 

</script> 

<title>Add Values in Form</title> 
</head> 

<body onLoad="totalloader();"> 

    <form id="AddValuesForm" action=""> 

    <fieldset id="AddValuesFormPart1"> 

     <legend>Add Values</legend> 

     <ul> 

     <li> 
      <ul id="AddValueList"> 
      <li id="AddValueItem1"> 
      <input id="value1" type="checkbox" name="value1" value="" tabindex="10"/> 
      <label for="value1">Cheesecake</label> 
      <input class="v1" id="value1a" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/> 
      </li> 
      <li id="AddValueItem2"> 
      <input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label> 
      <input class="v2" id="value2a" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/> 
      </li> 
      <li id="AddValueItem3"> 
      <input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label> 
      <input class="v3" id="value3a" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/> 
      </li> 
      </ul> 
     </li> 

     <li> 
      <ul id="AddValueTotalList"> 
      <li id="AddValueTotal"> 
      <label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/> 
      </li> 
      </ul> 
     </li> 


     <li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li> 

     </ul> 

    </fieldset> 
    </form> 

</body> 
</html>

Я изменил идентификатор поля инвалидов значение более проще приравнять от флажка до значения в суммироваться.
Я добавил загрузку тега тела.
Я добавил раздел сценария для выполнения работы.

источник

2015-02-14 14:12:02 Macchiato

Отлично работает! Благодаря! –

Добро пожаловать :) – Macchiato

var t=0; 
for (i=1; i<=3; i++) { 
t = t + document.getElementById('value' + i).value; 
} 

document.getElementById('total').value = t;

источник

2015-02-14 14:01:19

Пожалуйста, объясните, что код делать. –

Пожалуйста, используйте код ниже

 function recalculate(obj, id) { 
      var total = parseFloat(document.getElementById('total').value); 
      var amount = parseFloat(document.getElementById(id).value); 
      if (obj.checked) { 
       total += amount; 
      } else { 
       if (total >= 0) { 
        total -= amount; 
       } 
      } 
      document.getElementById('total').value = total; 
     } 
    </script> 


    <form id="AddValuesForm" action=""> 

     <fieldset id="AddValuesFormPart1"> 

      <legend>Add Values</legend>  

      <ul> 

       <li> 
        <ul id="AddValueList"> 
         <li id="AddValueItem1"> 
          <input id="value1" type="checkbox" name="value1" value="" tabindex="10" onchange="recalculate(this, 'txtValue1');"/> <label for="value1">Cheesecake</label> 
          <input class="v1" id="txtValue1" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/> 
         </li> 
         <li id="AddValueItem2"> 
          <input id="value2" type="checkbox" name="value2" value="" tabindex="20" onchange="recalculate(this, 'txtValue2');"/> <label for="value2">Banana Pie</label> 
          <input class="v2" id="txtValue2" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/> 
         </li> 
         <li id="AddValueItem3"> 
          <input id="value3" type="checkbox" name="value3" value="" tabindex="30" onchange="recalculate(this, 'txtValue3');"/> <label for="value3">Chocolate Muffin</label> 
          <input class="v3" id="txtValue3" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/> 
         </li> 
        </ul> 
       </li> 

       <li> 
        <ul id="AddValueTotalList"> 
         <li id="AddValueTotal"> 
          <label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/> 
         </li> 
        </ul> 
       </li> 


       <li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li> 

      </ul> 

     </fieldset> 
    </form>

источник

2015-02-14 14:13:23 Pete

-1

Использование JQuery JSFIDDLE:

$(document).ready(function() { 
    console.log("ready!"); 
    $('input[type=checkbox]').click(function() { 
    if($(this).is(':checked')) { 
     $('#total').val(  parseFloat($('#total').val())+parseFloat($(this).parent().find('input[type=text]').val())); 
    } else { 
     $('#total').val(parseFloat($('#total').val())-parseFloat($(this).parent().find('input[type=text]').val())); 
    } 
}); 
});

источник

2015-02-14 14:14:29

Смотрите мою заметку, без jQuery. –

ответ

Смежные вопросы