selectbox javascript的一行中包含两个或多个值

Question

In a form I need to put 2 values for each row of a select input like here:

<select name="amount" id="txtAmount" class="sbox" style="width: 260px;">
<option value="34.00" kredit="3000">30.00 kreditov = 34.00 €   (1.13 €/kredit)</option>
<option value="19.75" kredit="1660">16.60 kreditov = 19.75 €   (1.19 €/kredit)</option>
<option value="48.00" kredit="5000">50.00 kreditov = 48.00 €   (0.96 €/kredit)</option>
</select>

Now I want to get kredit value with PHP:

echo 'kredit: '.$_REQUEST['???.kredit']';
echo 'amount: '.$_REQUEST['amount']';

The amount works, but kredit does not works.

How can I get kredit value in amount selectbox?

Answer 1

You can't. name property of select tag means the name of a query parameter, and value of option tag is the value. Store the kredit values in your server.

Answer 2

You cannot submit two values via the option tag as the value attribute is the only value that will be submitted.

With this said, you may not even want to do so. From what I can tell, the $kredit variable holds the value of the users credit. This could easily be modified client side and allow for additional credit to be set.

Nevertheless, you could place both values within the value attribute, with a delimiter to separate the values.

<option value="<?php echo $amount .'-' . $kredit; ?>">Display name</option>

This would require you to separate them once the form is posted.

$values = explode('-', $_POST['amount']);
echo $values[0]; // Amount
echo $values[1]; // Kredit

The other option would be a Javascript event that would populate another hidden element when the user selects the required option.

Answer 3

How about adding a hidden input field with name='kredit '?

<input type='hidden' name='kredit' id='kredit'/>

The hidden kredit field will be submitted to the server.

var select = document.getElementById('txtAmount');
select.addEventListener('change', function(e) {
    var kredit = this.options[this.selectedIndex].getAttribute('kredit');
    document.getElementById('kredit').value = kredit;
    alert(document.getElementById('kredit').value);
});

This allows you to get the selected option's kredit attribute using:

$_REQUEST['kredit']

JSFiddle