Modifying old javascript code to new

Question

The old html and javascript code:

<tr>
 <input id="pret_id_1" type="text" name="pret" />
 <input id="val_id_1" type="text" name="val"/>
 <input id="val_tva_id_1" type="text" name="val_tva"/>
 <input id="cant_id_1" type="text" name="cant" />
</tr>

<script>
  var x=document.form_factura;
  x.val.value = (x.pret.value * x.cant.value).toFixed(2) ;
  x.val_tva.value = ((x.pret.value * x.cant.value) * tva_val).toFixed(2);       

  if(!/^[a-z()+ A-Z()-]*$/.test(x.val_tva.value)){        
    var suma = (x.pret.value * x.cant.value)- (-x.val_tva.value);
  } else { 
    var suma = (x.pret.value * x.cant.value);
  }       
  x.suma.value = suma.toFixed(2);
  ...
</script>

I try to multiply this .. and I added arrays in the name elements .

<tr class="row1">
 <input id="pret_id_1" type="text" name="pret[]" />
 <input id="val_id_1" type="text" name="val[]"/>
 <input id="val_tva_id_1" type="text" name="val_tva[]"/>
 <input id="cant_id_1" type="text" name="cant[]" />
</tr>
<tr class="row2">
 <input id="pret_id_2" type="text" name="pret[]" />
 <input id="val_id_2" type="text" name="val[]"/>
 <input id="val_tva_id_2" type="text" name="val_tva[]"/>
 <input id="cant_id_1" type="text" name="cant[]" />
</tr>

How can I update the javascript code for array input name elements ??

if it's only one row (.row1) the javascript not working.. must be at least 2 elements with same name.

EDIT: I forgot to mention that I use php and mysql to store the data.

Thanks.

score 1 · Answer 1 · answered Feb 10 '14 at 13:34

First you should not add the [] in the fields' names:

<tr class="row1">
 <input id="pret_id_1" type="text" name="pret" />
 <input id="val_id_1" type="text" name="val"/>
 <input id="val_tva_id_1" type="text" name="val_tva"/>
 <input id="cant_id_1" type="text" name="cant" />
</tr>
<tr class="row2">
 <input id="pret_id_2" type="text" name="pret" />
 <input id="val_id_2" type="text" name="val"/>
 <input id="val_tva_id_2" type="text" name="val_tva"/>
 <input id="cant_id_1" type="text" name="cant" />
</tr>

Then x.val will return an array of DOM elements (instead of one single element like before):

<script>
  var x=document.form_factura;
  for(var i=0; i<x.pret.length; i++) {
    x.val[i].value = (x.pret[i].value * x.cant[i].value).toFixed(2) ;
    x.val_tva[i].value = ((x.pret[i].value * x.cant[i].value) * tva_val).toFixed(2);       

    if(!/^[a-z()+ A-Z()-]*$/.test(x.val_tva.value)){        
      var suma = (x.pret[i].value * x.cant[i].value)- (-x.val_tva[i].value);
    } else { 
      var suma = (x.pret[i].value * x.cant[i].value);
    }       
    x.suma[i].value = suma.toFixed(2);
    ...
  }
</script>

Yes, I think this works. Thanks. But with php how can I handle the post variable: $_POST['pret'] ... I forgot to mention that I use php and mysql to store the data. — user2039290, Feb 10 '14 at 13:44

epascarello · Accepted Answer · 2014-02-10T13:42:25.617

Well you have unique ids so you can loop

for(var i=1;i<=2;i++) {
    var pret = document.getElementById("pret_id_" + i );
    var cant = document.getElementById("cant_id_" + i );
    var val = document.getElementById("val_id_" + i ); 
    val.value = (pret.value * cant.value).toFixed(2) ;
}

if you want to do it by name,

var pretElems = document.form_factura["pret[]"];
var cantElems = document.form_factura["cant[]"];
var valElems = document.form_factura["val[]"]]; 


for(var i=1;i<=2;i++) {
    var pret = pretElems[i];
    var cant = cantElems[i];
    var val = valElems[i]; 
    val.value = (pret.value * cant.value).toFixed(2) ;
}

Modifying old javascript code to new

2 Answers2