Inserting select box text into database

Question

I know this has been asked before, however I cannot find a solution to my problem.

I have a select box with three options and three values, these values are used to perform some calculations using JS so I cannot change these to match the option text. This is to work out the amount of V.A.T.

My select looks like this:

<select name="tax" id="tax" class="select">
<option value="20">Standard 20%</option>
<option value="0">Zero 0%</option>
<option value="0">Exempt 0%</option>
</select>

Which is fine, however I need to insert the text into the database and not the values, as it needs to be viewed in the backend. I have tried a javascript function to add a hidden input to the select box targeting the option that is selected but that was a bit buggy, and didn't seem right. i was thinking of displaying the text next to the value when it is retrieved from the database, however I wouldn't be able to distinguish from the two 0 amounts.

Could someone please offer some further solutions, best approaches to this.

Many Thanks

Duplicated: http://stackoverflow.com/questions/610336/javascript-retrieving-the-text-of-the-selected-option-in-select-element — emerson.marini, Apr 05 '13 at 12:41
you could use the `data` attribute to hold your calculation values and use the `value` attribute to hold the values you want to store. — dnagirl, Apr 05 '13 at 12:42

score 2 · Accepted Answer · answered Apr 05 '13 at 12:42

2

You can get the text of the selected option with jQuery as follows:

$("#tax option:selected").text();

You could easily use this within your AJAX request to send the correct value to the database, just assign it to a variable:

var the_text = $("#tax option:selected").text();

Failing that, why not just do the lookup in the JS calculations - it'd make your life so much easier:

<select name="tax" id="tax" class="select">
    <option value="standard">Standard 20%</option>
    <option value="zero">Zero 0%</option>
    <option value="exempt">Exempt 0%</option>
</select>

And your JS could look something like this:

var vat_amount = ($('#tax').val() == 'standard') ? 20 : 0;

answered Apr 05 '13 at 12:42

BenM

52,573
26
113
168

Thanks very much BenM. I implemented the lookup in the JS calculation, and it's now correctly passing the value when the drop down item is selected, (and calculating correctly) Like: run : function() { var amount = $('#net-price-1').val(); var tax = ($('#tax1').val() == 'standard') ? 20 : 0; var tax = ($('#tax1').val() == 'zero') ? 0 : 0; var tax = ($('#tax1').val() == 'exempt') ? 0 : 0; – m1243 Apr 05 '13 at 13:01
I forgot to mention changing the variable names for each tax amount, var tax, var tax1 etc.. – m1243 Apr 05 '13 at 13:38

score 0 · Answer 2 · answered Apr 05 '13 at 12:42

0

You can retrieve the text by JS using the html() function. Or, if you are just using a POST to send the data to the server, try adding both values to the value attribute of the option and split it server side to get the right data.

answered Apr 05 '13 at 12:42

Bas Slagter

9,831
7
47
78

Inserting select box text into database

2 Answers2