build a product list

I would like to implement the script http://www.chronoengine.com/faqs/70-cfv5/5251-how-can-i-build-a-product-list.html inserting a dropdown for selecting a format linked to the price. I tried using the following code

<?php
foreach ( $form->data['products'] as $p ) {
$path_foto= JURI::root(). $p['allegato']; 
  echo "<tr>
  <td>{$p['cf_id']}</td>
  <td>{$p['p_name']}</td>
<td><img src='".$path_foto ."' width='100' height='100'/></td>
<td>{$p['p_description']}</td>
 <td>P<input type='text' name='prezzo[{$p['cf_id']}]' id='prezzo'/></td>
  <td>Q<input type='text' name='quantity[{$p['cf_id']}]' id='quantity_{$p['cf_id']}  size='4'  value='1'/></td>
    <td>";
  ?> 
  <?php
  echo "{$p['cf_id']}";
  echo "<select name='formato' id='formato' onchange='formatoFunz()'>";
$db =& JFactory::getDBO();
      $query = "SELECT `formato` AS formato,`prezzo` AS prezzo FROM `bqu1s_cf_prodotti_formati`";
      $db->setQuery($query);
			$formato = $db->loadObjectList();
			foreach($formato as $o) 
			{
			$data = $o->formato;
			$data2 = $o->prezzo;
	echo "<option value=".$data2.">".$data."</option>";
	    	}
echo "</select></td></tr>";
   }
?>

but the change field price is only in the first record. I think I'll have to tie the selection idem record but still can not.
js.code

function formatoFunz() {
    var x = document.getElementById("formato").value;
       document.getElementById("prezzo").value =  x;
	}

thanks for the reply

Hi comelio,

You really don't want to run a database query inside a loop like this if you can avoid it. Better to do one query to get all the data then format/arrange it using PHP.

It also looks as though you are running an identical query each time so the options will always be the same - is that what you intend?

It is important that ids are unique - and you are giving the same id to each select drop-down, changing this may help with the JavaScript problem. You can use {$p['cf_id']} as you have in one of the earlier inputs.

Bob

Hi Bob,

thank you very much for replay.

It also looks as though you are running an identical query each time so the options will always be the same - is that what you intend?

Y.

It is important that ids are unique - and you are giving the same id to each select drop-down, changing this may help with the JavaScript problem. You can use {$p['cf_id']} as you have in one of the earlier inputs.

that's the problem .the select giving the same id to each select drop-down.

the id to be taken is about this {$ p ['cf_id']},
but I can not figure out where to put it: JS code in function or in onChange id or in the input field?
Regards
Cornelio

Hi Comelio,

Please try a version like this which adds ids to all the elements and passes the id as a function variable.

<?php
$db =& JFactory::getDBO();
$query = "
  SELECT `formato`, `prezzo`
    FROM `bqu1s_cf_prodotti_formati`
";
$db->setQuery($query);
$formato = $db->loadObjectList();
$options = array();
foreach( $formato as $o ) {
  $options[] = "<option value='{$o->prezzo}' >{$o->formato}</option>";
}
$options = implode("\n", $options);
foreach ( $form->data['products'] as $p ) {
  $path_foto= JURI::root().$p['allegato']; 
  $id = $p['cf_id'];
  echo "<tr>
  <td>{$id}</td>
  <td>{$p['p_name']}</td>
  <td><img src='{$path_foto}' width='100' height='100'/></td>
  <td>{$p['p_description']}</td>
  <td>P<input type='text' name='prezzo[{$id}]' id='prezzo_{$id}'/></td>
  <td>Q<input type='text' name='quantity[{$id}]' id='quantity_{$id} size='4'  value='1'/></td>
  <td>
    <select name='formato[{$id}]' id='formato_{$id}' onchange='formatoFunz({$id})' >
      {$options}
    </select>
  </td>
</tr>";
}
?>

In practice it may be better to restructure your names like this name='prodotti[{$id}][prezzo]' so that all of the elements for each product are grouped together.

Bob

Hi Bob,

thank you very very much for your response.

Your suggestion to group the items I had already tried using java that works by making the sum of the elements.
but it is a bad solution, I do not like.

function sommare()
    {	
        //conti gli elementi del form
	    var elementi = document.forms[0].elements.length;
		var formati = document.forms[0].elements[1].value;
		
        //inizializzi la somma
        var somma = 0;
        // cicli il form
        for(var i = 0; i < elementi; i++){    
       // incrementi la somma        
            somma += parseInt(document.forms[0].elements[i].value); 
			
			}
        // mostri il risultato
		 document.getElementById('totale_box').innerHTML = somma -3;
		 
		  //inizializzi il prezzo
        var prezzo = 0;
        // cicli il form
        for(var i = 0; i < formati; i++){    
       // incrementi il prezzo        
            prezzo +=parseInt(document.forms[0].elements[i].value);    
        }
        // mostri il risultato
		 document.getElementById('prezzo').value = prezzo;
	
			
    }

the latter with your valuable suggestion does not produce any results in the price field.
I think the problem is he dragging ids.

adding the java code to your so it does not work

function formatoFunz({$id}) {
    var x = document.getElementById("formato_{$id}").value;
       document.getElementById("prezzo_{$id}").value =  x;
 	}

Cornelio

Hi cornelio,

I don't think that either of your JavaScript snippets will work - the second one definitely won't, you may need to get help from someone with some jQuery knowledge.

Bob

Hi Bob,

I added this piece of code jquery as suggested by Bob:
to cycle the recordset using

$('.price').each(function()

.price where the class is assigned to the object input that you want to calculate.
then creating the various input fields to hold the values of the totals

it works perfectly in a dynamic way using

.blur (function ()

here the result:http://50.87.153.95/~ierasia/demo/

<script type="text/javascript" src="/components/com_chronoforms5/js/jquery-2.1.0.min.js"></script>
<script>
   $('.price').blur(function () {
    var sum = 0;
    $('.price').each(function() {
        if($(this).val()!="")
         {
            sum += parseFloat($(this).val());
         }

    });
 //sum total price       
$("input[name='totale_prezzo']").val(sum.toFixed(2));
//sum total order
var total = +a * +b;
$('#totale_ordine').val(+a * +b);
var a = +$('input[name=totale_prezzo]').val();
var b = +$('input[name=totale_qty]').val();
var total = a*b;

$("input[name='totale_ordine']").val((a*b).toFixed(2));
});
</script>

the thing that I want to do now and how you can add a button for more inputs.
in my case it should be noted that the inputs are cycled with the foreach eg where I find myself with duplication all recordset. as you can duplicate only the affected record calling id?

Regards
Cornelio