Input hidden + select

2

Personal I have a foreach populating 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 want to pass the product price as I need to display it in the table as image below, I tried to do with input hidden, like this:

<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 the next products are out of select, as below:

ThisdataIgetinjavaScriptthisway:

$('.preview-add-button').click(function(){varform_data={};vardados={};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 it? Or some other way to pass the price?

Thank you.

    
asked by anonymous 09.08.2015 / 00:31

1 answer

1

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

I do not know the domain of your application, but I do not recommend passing a price through a% of client-side to the application for security reasons: imagine in an e-commerce if a user decides to edit this price and to checkout the shopping cart? The wrong price would be used, and the user benefited.

If you really want to have the price on the client side, I recommend adding an attribute to the input tag, stating the price:

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

In this case, you will need a little Javascript, depending on your usage.

Editing

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

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

In the JS of the question, I did not see any reference to the option previously added, but I believe it is referring to the places where you use the input selector.

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.

    
09.08.2015 / 00:48