A dzisiaj 2 przyklady na to jak przy maksymalnym wykorzystaniu elementów obecnych już w strukturze XHTML’a, dodać parę zdarzeń na zwiekszanie/zmniejszanie wartości w niektórych polach (korzysta z moich globali):
<style type="text/css">
.myForm label{display:block;}
</style>
<form class="myForm" id="mForm">
Pierwsza grupa:<br />
<label><input type='radio' name="g1" />+10 pln</label>
<label><input type='radio' name="g1" />+30 pln</label>
<label><input type='radio' name="g1" />-50 pln</label>Druga grupa:<br />
<label><input type='radio' name="g2" />+10 pln</label>
<label><input type='radio' name="g2" />+30 pln</label>
<label><input type='radio' name="g2" />-50 pln</label>
<p>cena podstawowa: <span id='sumprice'>1200</span> pln</p>
</form>
<script type="text/javascript">
var v={},p=1200
function checkClick(e,s,i){
if( !(e=gTarget(e, /^inp/i)) || !/^rad/i.test(e.type) ) return;
v[e.name]=parseInt(e[_pN].childNodes[1].nodeValue.match(/[+d-]+/))
s=p;for( i in v )s+=v[i];
$('sumprice').innerHTML=s
}
$('myForm').addEvent( 'click', checkClick);
</script>
I drugi przykład, tym razem zdałem się na nazwy klas.
<form id="myForm">
<input type="text" name="lista" class="suma_10" />
<input type="text" name="cena"><input type="text" name="lista2" class="suma_15" />
<input type="text" name="cena2" ><input name="suma">
</form>
<script type="text/javascript">
$('myForm').addEvent('change',function(e,op,val){
e=gTarget( e );
// op[0] - nazwa operacji, op[1] - mnoznik
op = e[_cN].split( '_' );
val = e.value;
while((e=e.nextSibling)&&e.nodeType!=1);
e.value=~~val*~~op[1];
new Function('f',op[0]+'(f)')(this);
});
function suma(f,s){
for(i=0,s=0;i<f.elements.length;i++)if(/^cena/i.test(f.elements[i].name))s+=~~f.elements[i].value
f.suma.value=s;
}
</script>