jQuery and PHP to update Select Box value in Text field - php

Question

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.

Answer 1

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="">

Answer 2

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]);
});
});

Answer 3

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