CODEWITHSUNDEEP
phpjqueryhtml
user6224087
user6224087

Reputation:

jQuery and PHP to update Select Box value in Text field

I know this question has been asked a lot of times in several other ways but none of them helped me. So, I have formatted it in my own words.

Supppose I have a select box like this:

<select name="something">
    <option value="1"><?php echo $value1; ?> for <?php echo $value2; ?>
</select>
<input type="text" name="sometext" value="">

I want to have the <?php echo $value1; ?> in the text field updated live on change of the select box option. To be clear, I DO NOT want the value="1" in the text field and I need to have that value="1" there for some reason and I cannot replace it with value="<?php echo $value1; ?>". I strictly want the inside value <?php echo $value1; ?> to be replaced in the text field. But I do not know how I can achieve it. Please help me experts. For live changing jQuery preferred.

Upvotes: 0

Views: 1780

Answers (3)

codelock
codelock

Reputation: 780

You need to fetch the selected option text instead of the usual option value, it is pretty easy to do.

You don't need to add any data attributes to achieve this, as there is a method to fetch the actual option text.

Here is a working example:

PHP for populating a select element (below I show the static HTML)

<select id="something" name="something">
    <?php foreach($selectList as $value=>$text){ ?>
        <option value="<?php echo $value;?>"> <?php echo $text;?> </option>
    <?php } ?>
</select>

HTML

<select id="something" name="something">
    <option value="1"> Value 1 </option>
    <option value="2"> Value 2 </option>
    <option value="3"> Value 3 </option>
</select>
<input type="text" id="sometext" name="sometext" value=""/>

jQuery

$(document).ready(function(){

    $('#something').on('change',function(){
        var selectedText = $(this).children(':selected').text();
        $('#sometext').val(selectedText);
    });

});

This approach is fast and easy to maintain.

And of course a jsfiddle to see it in action: https://jsfiddle.net/kzgapkt5

Hope it helps a bit

Upvotes: 0

Samir
Samir

Reputation: 1368

Hope this will work for you,

$(document).ready(function() {
     $('select').change(function(){

       var selectedOption = $("select option:selected").text(); //Get the text
        selectedOption = selectedOption.split("for"); //split the 2 value by using for
        alert(selectedOption[0]); //Get the value before for

        $('input').val(selectedOption[0]);

    });
});

Upvotes: 0

Shailesh Chauhan
Shailesh Chauhan

Reputation: 570

Try below code:

<select name="something">
    <option value="1" data="<?php echo $value1; ?>"><?php echo $value1; ?> for <?php echo $value2; ?></option>
</select>
<input type="text" name="sometext" value="">

See below working HTML 

jQuery(document).ready(function($){
  $('#something').change(function(){
    $('#sometext').val($(this).find(':selected').attr('data'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="something" id="something">
    <option value="1" data="value1">value1 form value01</option>
    <option value="1" data="value2">value2 form value02</option>
    <option value="1" data="value3">value3 form value03</option>
    <option value="1" data="value4">value4 form value04</option>
</select>
<input type="text" name="sometext" id="sometext" value="">

Upvotes: 1

Related Questions