CODEWITHSUNDEEP
c#javascriptvisual-studio-2010asp.net-mvc-3
anouar
anouar

Reputation: 317

How to fill a TextArea with Values of DropDownList Using JavaScript in ASP

I am developing an ASP .Net MVC 3 application using C# and SQL Server 2005.

I am using also Entity Framework and Code First Method.

In a view, I have a DropDownList, a button and a TextArea.

How can I fill the panel with the values of DropDownlist when I click in the button.

I try to use javascript, but I think that's not working because when I click on the button, nothing happens.

This is the code :

<%:Html.Label("Poste Suivant :")%><%: Html.DropDownListFor(model => model.PosteSuivantSelected, Model.PostesItems, new { @id = "dd" })%>
<input type="button" value="Ajouter" id="add"  onclick="addtext()"/>
<textarea ID="ta" cols="10" name="S1" rows="2" ></textarea>

<script language="javascript" type="text/javascript">
        function addtext() {

            var dd = document.getElementById('dd');
            var ta = document.getElementById('ta');
            var add = document.getElementById('add');
            if (add.onkeypress) {
                ta.value = dd.selectedvalue;
            }

        }
</script>

Upvotes: 2

Views: 2070

Answers (2)

topherd
topherd

Reputation: 96

As long as your .net code is rendering a select list like the one below the problem is just in your javascript. You need to use the selected index to get the option. I was also unsure why you were checking if they keypress function existed on add.

<select id="dd"><option>a</option><option>b</option></select>
<input type="button" value="Ajouter" id="add"  onclick="addtext()"/>
<textarea ID="ta" cols="10" name="S1" rows="2" ></textarea>

<script language="javascript" type="text/javascript">
        function addtext() {

            var dd = document.getElementById('dd');
            var ta = document.getElementById('ta');
            var add = document.getElementById('add');
            //if (add.onkeypress) {
                ta.value = dd.options[dd.selectedIndex].value;
            //}

        }
</script>

If you want to add the option from the select menu instead of replace then your function should look like this:

        function addtext() {

            var dd = document.getElementById('dd');
            var ta = document.getElementById('ta');
            var add = document.getElementById('add');
            //if (add.onkeypress) {
                ta.value = ta.value + dd.options[dd.selectedIndex].value;
            //}

        }

If you only want the items in the textarea once I would store the selected values in an array and then replace the value with the joined values of the array.

<script language="javascript" type="text/javascript">
        var storedValues = [];
        function addtext() {

            var dd = document.getElementById('dd');
            var ta = document.getElementById('ta');
            var add = document.getElementById('add');
            //if (add.onkeypress) {
            var selectedValue = dd.options[dd.selectedIndex].value;
            if(storedValues.indexOf(selectedValue) === -1){
                storedValues.push(selectedValue)
                ta.value = storedValues.join('')
            }
            //}

        }
</script>

Upvotes: 1

RinatG
RinatG

Reputation: 141

use this:

ta.innerText = dd.options[dd.selectedIndex].innerText;

Upvotes: 1

Related Questions