jQuery + HTML - Two values in the same input?

Question

jQuery + HTML - Two values in the same input?

Navigation

#1 by (3 votes)

1

I'm having the following problem ..

I have an Input with Options which identifies the price of a product.

<tr>
    <td width="180">Cantidad de wCoins:</td>
    <td>
    <select name="precio" id="creditos">
    <option value="100">100 $100 ARS</option>
    <option value="200">200 $200 ARS</option>
    <option value="300">300 $300 ARS</option>
</select> </td>
  </tr>

and I have a jQuery script so that when this value and the account field is modified, it is automatically inserted into an Input Hidden called reference.

$ ('# credits'). change (function () { $ ('# reference'). val ($ ('# account'). val () + "-" + $ (this) .val ()); }); $ ('# account'). change (function () { $ ('# reference'). val ($ (this) .val () + "-" + $ ('# credits'). val ()); });

So far everything goes well, now, the problem I have is that in the Input of the options the Value indicates the price and I also need to indicate the amount of those "wCoins" I mean, in my Hidden Input "Reference" I need to indicate the account and the amount of wCoins, is it possible to add another value to the Options Input?

For example:

 <tr>
        <td width="180">Cantidad de wCoins:</td>
        <td>
        <select name="precio" id="creditos">
        <option value="100" value2="100">100 $100 ARS</option>
        <option value="200" value2="200">200 $200 ARS</option>
        <option value="300" value2="300">300 $300 ARS</option>
    </select> </td>
      </tr>

I ask from the total ignorance, excuse me and thank you very much.

jquery

asked by Ignacio Copparoni 28.06.2018 в 14:07

source

1 answer

Concatenate vectors with std :: vector in C ++ Because I do not calculate the rest of the inputs

score 3 · Accepted Answer

Yes you can add another attribute value to the option, only that this value will not be sent by the form when you send it. What you can do is create a input[hidden] that contains the wCoin. The value of the value2 attribute will be assigned when the select changes:

$("#creditos").change(function(){
   var value2 = $(this).find("option:selected")
                .attr("data-value2");
   $("#wCoin").val(value2);
});

$("#enviar").click(function(){
   console.log($("form").serialize());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <select name="precio" id="creditos">
  <option> -- SELECCIONE UNA OPCION --</option>
          <option value="100" data-value2="100">100 $100 ARS</option>
          <option value="200" data-value2="200">200 $200 ARS</option>
          <option value="300" data-value2="300">300 $300 ARS</option>
  </select>

  <input type="hidden" id="wCoin" name="wCoin" />
  <input type="button" value="Enviar" id="enviar" />

</form>

So the value will be sent to the server as wCoin .