CODEWITHSUNDEEP
phpjqueryhtmlmysqlforms
TGITC
TGITC

Reputation: 3

Change value of input based on select option label

I've searched for a solution to this but have come up short; it's a bit different to the usual solution.

I'm building a PHP Graph system, and as part of its setup features I need to be able to submit to 2 columns in a MySQL database using 1 "select" input. The user sees an eye friendly drop-down, selects an eye-friendly option, and the 2 required values are added. The one value submitted needs to refer to a sql-formatted column name (such as col_1) and the other value needs to be the eye-friendly label for it ("Column 1"). So for the following example:

<select name="col_name" id="col_name">
        <option value="first_name">First Name</option>
        <option value="middle_name">Middle Name</option>
        <option value="second_name">Second Name</option>
</select>

<input type="hidden" name="col_title"></input>

It's easy enough to automatically enter the selected value into the hidden inout, but I need the label (if that's its name) of the selected option to automatically enter into the hidden input, #col_title. So not the selected value (EG middle_name), but the label (Middle Name), which I can't find much on.

Would anyone be able to help? Thank you!

Upvotes: 0

Views: 3193

Answers (3)

Jao Assy
Jao Assy

Reputation: 125

One way of doing it is by using JQuery like so:

<html>
<head>
<title>Try</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type='text/javascript'></script>
</head>
<body>  

    <select name="col_name" id="col_name">
        <option value="first_name">First Name</option>
        <option value="middle_name">Middle Name</option>
        <option value="second_name">Second Name</option>
    </select>

    <input type="hidden" name="col_title" id="col_title"></input>

    <script type='text/javascript'>

        $("#col_name").change(function(){

            $("#col_name").children().each(function(){

                if(this.value == $('#col_name').val()){

                    $("#col_title").val(this.innerHTML);
                }

            });

            // console.log($("#col_title").val());

        });

    </script>
</body>

the code above listen to changes on the find the selected option and copy it's value to the tag;

Upvotes: 0

MohammadReza Mahmoudi
MohammadReza Mahmoudi

Reputation: 1324

Try this

HTML:

<select name="col_name" id="col_name">
    <option value="first_name">First Name</option>
    <option value="middle_name">Middle Name</option>
    <option value="second_name">Second Name</option>
</select>

<input type="hidden" name="col_title" id="textbox" />

jQuery:

// init
$('#textbox').val($('#col_name option:selected').text());
//on selecting
$('#col_name').on('change', function() {
    $('#textbox').val($(this).find('option:selected').text());
});

Working example: https://jsfiddle.net/a3qk1s7g/

Upvotes: 1

Barmar
Barmar

Reputation: 780688

Use .text() to get the text of an element. The :selected modifier will select the selected option.

var label = $("#col_name option:selected").text();
$("input[name=col_title]").val(label);

Upvotes: 3

Related Questions