Input Hidden + select

Question

Folks I have a foreach that will populate the select as below:

<select id="status" name="status[]" class="order-type">
     <?php foreach ($produtos as $produto) : ?>
        <option value="$produto['id']"><?=$produto['nome'];?></option>
     <?php
           endforeach
     ?>
</select>

I also want to pass the price of the product because I need to display it in the table as shown below, I tried to do with Hidden input, this way:

<select id="status" name="status[]" class="order-type">
     <?php foreach ($produtos as $produto) : ?>
        <option value="$produto['id']"><?=$produto['nome'];?></option>
        <input type="hidden" name="preco" value="<?=$produto['preco']?>">
     <?php
           endforeach
     ?>
</select>

But hence the next products stay out of select, as below:

This data I receive in Java this way:

$('.preview-add-button').click(function(){
    var form_data = {};
    var dados = {};
    form_data["status"] = $('.payment-form #status option:selected').text();
    form_data["amount"] = $('.payment-form input[name="amount[]"]').val();
    form_data["valor"]  = $('.payment-form input[name="valor"]').val();
    var valor  = getMoney($('.payment-form input[name="valor"]').val());
    form_data["total"] = formatReal(("R$ "+form_data["amount"] * valor));
    var total = form_data["amount"] * valor;
    form_data["remove-row"] = '<span class="ico-cancel"></span>';
    var row = $('<tr></tr>');

    $.each(form_data, function( type, value ) {
      $('<td class="input-'+type+'"></td>').html(value).appendTo(row);
    });
    $('<input/>').attr("type", "hidden").attr("name", "produto"+ contador + "[]").val(form_data["status"]).appendTo(row);
    $('<input/>').attr("type", "hidden").attr("name", "produto"+ contador + "[]").val(form_data["amount"]).appendTo(row);
    // $('<input/>').attr("type", "hidden").attr("name", "produto"+ contador + "[]").val(form_data["valor"]).appendTo(row);
    contador++;
    $('.preview-table > tbody:last').append(row);
     sum += total;
    $(".preview-total").text(formatReal(sum));
});  

Can anyone help me solve? Or some other way to pass the price?

Thank you.

Answer 1

The problem is the input within the select. Within the select, tags only option may be contained.

I don’t know what the domain of your application, but I don’t recommend passing a price through a input from the customer side to the application for security reasons: imagine in an e-commerce if a user decides to edit this price and check out the shopping cart? The wrong price would be used, and the user benefited.

If you really want to have the customer-side price, I recommend adding an attribute to the tag option, stating the price:

<option value="$produto['id']" preco="$produto['preco']"><?=$produto['nome'];?></option>

In this case, a little Javascript will be required depending on your use.

Editing

Using the above suggestion to pass the price as a tag attribute option, you can use the following command to get the price associated to the option selected in the combo:

$('.payment-form #status option:selected').attr('preco');

In the JS of the question, I saw no reference to input previously added, but I believe it refers to the places where you use the selector .payment-form input[name="valor"].

In this case, for example, the line:

form_data["valor"]  = $('.payment-form input[name="valor"]').val();

becomes:

form_data["valor"]  = $('.payment-form #status option:selected').attr('preco');

The same process should be used in the other occurrences where you want to get the price of the selected product.