CODEWITHSUNDEEP
javascriptphpjqueryhtml
sunny
sunny

Reputation: 1593

How to echo the value of a select to a text box

I have code in which I try to echo the value of a select with onclick.

I have a select which is getting its data from a database. Now I want that the option I click on is echoed into the text box. But I fail.

Here is my code:

<?php
require_once('functions.php');
$cont = new pacra3();
$segments = $cont->getSegment();
?>
<!DOCTYPE html>
<html>
<head>
    <title>Popup contact form</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="js/jquery-ui.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script>
    function get_main_sector(myid){
        var id = document.getElementById("segment_id").value;
        alert(id);
        $(document).ready(function() {
            $("#segment_id")({
                onSelect: function(Text, inst) {
                    $("#dt_title input[type='text']").val($("#dt_title input[type='text']").attr('data-title')+Text);
                }
            })
        });
    }  
    </script>
</head>

<body>
<span id="spanSegmentData">
    <select name="segment_id" id="segment_id" STYLE="width: 300px"  onchange="get_main_sector(this.value)">
        <option value="">[--Select Segment------]</option>
        <?php
        if(is_array($segments) && !empty($segments)) {
            foreach($segments as $segment) {
                echo '<option value="'.$segment->ID.'"';
                echo '>';
                echo $segment->title;
                echo '</option>';
            } 
        }           
        ?>
    </select>
</span>

<span id="dt_title">
    <input name="title" type="text" value=" MB | <?php echo $segment->title;?> | " data-title="MB | <?php echo $segment->title;?> | " style="width:300px"/ readonly>
</span>
</body>

</html>

Upvotes: 0

Views: 4341

Answers (3)

menaka
menaka

Reputation: 1068

If you are trying to get the selected item value in to the text box, completely remove this part of your code (I think this is useless)

 MB | <?php echo $segment->title;?> | "data-title="MB | <?php echo $segment->title;?> |

for your answer=>

Remove the "onchange" event from select element:

<select name="segment_id" id="segment_id" STYLE="width: 300px">

Inside script (put this script area at the end of the code ... better that way)

 <script>

 $( document ).ready(function() {
      $("#segment_id").on('change', function () {

            var id = document.getElementById("segment_id").value;
            alert(id);

            $("#title").val($$("#segment_id option:selected").text());
        });
 }); 
</script>

the complete answer will be :

    <?php
            require_once('functions.php');
                    $cont = new pacra3();
                    $segments = $cont->getSegment();
           ?>

            <!DOCTYPE html>
            <html>
            <head>
            <title>Popup contact form</title>
            <link rel="stylesheet" type="text/css" href="style.css">
              <link rel="stylesheet" href="js/jquery-ui.css">
              <script src="js/jquery-1.10.2.js"></script>
              <script src="js/jquery-ui.js"></script>

             </head>
            <!-- Body Starts Here -->
            <body>
            <span id="spanSegmentData">
            <select name="segment_id" id="segment_id" STYLE="width: 300px">
                            <option value="">[--Select Segment------]</option>

                            <?php
                          if(is_array($segments) && !empty($segments))
                            {
                                foreach($segments as $segment)
                                {
                                    echo '<option value="'.$segment->ID.'"';
                                    echo '>';
                                    echo $segment->title;
                                    echo '</option>';
                                } 
                            }           
                            ?>
                        </select>
                        </span>

                        <span id="dt_title"> <input name="title" type="text" value="" data-title="" style="width:300px"/ readonly> </span>


        <script type="text/javascript">

            $(document).ready(function () {

        $("#segment_id").on('change', function () {

                        var id = document.getElementById("segment_id").value;
                        alert(id);

                        $("#title").val($$("#segment_id option:selected").text());
                    });


                 }); 
                </script>

                </body>


                </html>

Upvotes: 0

Alexis
Alexis

Reputation: 5831

For that you don't need php. It's done client side.

Get value of select item :

$("#idoftheselect").val();

Get the option text selected of the select : 

$("#idoftheselect").find(":selected").text();

Set a input values :

$("#idoftheinput").val("All your string content or var");

Here an example :

$(".myselect").change(function(){
  var res = $(".myselect").find(":selected").map(function () {
    if($(this).val()!="")
      return $(this).text();
    else
      return "";
   }).get().join(" ");
  
   $("#inputid").val(res);

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

<select class="myselect">
  <option value="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="myselect">
  <option  value="">Choose</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
</select>
<input type="text" id="inputid" placeholder="Here selected item">

Upvotes: 1

Jignesh Patel
Jignesh Patel

Reputation: 1022

Updated code

 $("#segment_id").change(function () {
			var id = $(this).val(); 
			$("#title").val($("#segment_id option:selected").text());
		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spanSegmentData">
    <select name="segment_id" id="segment_id" STYLE="width: 300px" >
                    <option value="">[--Select Segment------]</option>
<option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
                  
                </select>
                </span>

                <span id="dt_title"> <input id="title" name="title" type="text" value=" "

                data-title="MB" style="width:300px" readonly> </span>

Upvotes: 1

Related Questions