2

I am facing a little problem. Here is my code (a simple form) :

<form id="form-mission" method="post" action="mission.php">
    <ul>
    <li class="except">
    <select name="membre">
        <option value=0> Lucy </option>
        <option value=1> John </option>
        <option value=3> Peter </option></select>
    </li>

    <!--Content-->
    <li><textarea name="texte" id="text_area" ></textarea></li>

    <!-- Submit -->
    <li class="except"><input type="submit" value="Submit" /></li>
    </ul>

</form>

I would like to set the textarea text depending on which name is selected but before we submit the form. In fact, when the option is changed, i want the content of the textarea also changed.

Could you help me please ? Thanks !

2
  • What text you want to set text inside the dropdown or value of selected element in dropdown Jul 14, 2014 at 12:50
  • What should happen if the user enters other text in the textarea? Should just the name be changed, or the whole content overwritten? Jul 14, 2014 at 12:52

4 Answers 4

4

your jquery

$('select[name="membre"]').on('change',function(){
    alert($('select option:selected').text());
    var get=$('select option:selected').text();
    $('#text_area').val(get);
});

DEMO

or you can add id to your dropdown and fire event on the basis of id so your dropdown would be like this

<select name="membre" id="ddlMember">
        <option value=0> Lucy </option>
        <option value=1> John </option>
        <option value=3> Peter </option></select>

and your jquery would be

$('#ddlMember').on('change',function(){
    var get=$('select option:selected').text();
    document.getElementById('text_area').value=get;
});
5
  • 1
    I'd like to make a suggestion to add an ID to the select and use that as your selector instead. jQuery attribute selection is based off of Sizzle so it's a library calling a library really and the ID is faster than the rest. Also you can change line 4 to document.getElementById('text_area').value=get; no need to use jQuery for everything.
    – EasyBB
    Jul 14, 2014 at 13:07
  • @EasyBB: thanks for your suggestion. i will add as you suggested to this solution.
    – Amit Kumar
    Jul 14, 2014 at 13:14
  • i didn't added id as op didn't have id attribute. and here so many people ready to downvote if i modify op question, that's why i didn't modify the question.
    – Amit Kumar
    Jul 14, 2014 at 13:15
  • No I know the OP didn't add it, just merely a suggestion to maybe add to your post for future search logs. Plus 1 for seeing my point. It was making me itch, everyone likes to use jQuery for everything :D
    – EasyBB
    Jul 14, 2014 at 13:18
  • I would suggest adding the name to the select option in the jquery as well. If there are any other selects on the page the script will pull their values if you don't. var get=$('select[name="membre"] option:selected').text();
    – O Genthe
    Apr 9, 2017 at 18:21
3

You can use below js code

$('.test').change(function(){

$('#text_area').val($(".test option:selected").text());

});

Demo

2
$('[name="membre"]').on('change', function(){
    $('[name="texte"]').val($(this).find(":selected").text());
})
1

try this :

$(document).ready(function(){
  $('select[name="membre"]').change(function(){
      var text = $(this).find('option:selected').text();
      $('#text_area').html(text );
  });
});
2
  • your reference on line 4 is not needed to be .html it should plainly be .val or .value however you run it. Yes it works but really come on.
    – EasyBB
    Jul 14, 2014 at 13:10
  • @EasyBB, this is because for formatted text it works well than using val... thats why I have used html. Jul 15, 2014 at 4:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.