Crystal Rouse
asked on
Copy drop-down selection to another form element
I need to copy a drop-down section on a form to another form element.
So I have a drop-down List:
<div class="row">
<div class="col-xs-6">
@Html.Label("Select one or more Item(s):")
@Html.DropDownListFor(x => x.List, sl.getItem(s)(), new
{
@type = "drop",
@multiple = true,
@style = "width: 100%",
@id = "List",
data_placeholder = "Select Item(s)",
})
</div>
<div class="col-xs-2 col-xs-offset-1">
<button type="button" class="btn btn-info" style="vertical-align:bott om;" onclick="NewRequest.copyLi st();">
Copy to Summary
</button>
</div>
</div>
The View also has:
<script type="text/javascript">
var NewRequest = new NewRequestClass();
NewRequest.init();
</script>
My JavaScript file has:
function NewRequestClass() {
this.List;
this.notes;
}
copyList: function (sender) {
alert(this.List);
this.notes = this.List;
},
//Maps variables to the correct field
init: function () {
this.List = document.getElementById("L ist");
this.notes = document.getElementById("n otes");
},
So I have a drop-down List:
<div class="row">
<div class="col-xs-6">
@Html.Label("Select one or more Item(s):")
@Html.DropDownListFor(x => x.List, sl.getItem(s)(), new
{
@type = "drop",
@multiple = true,
@style = "width: 100%",
@id = "List",
data_placeholder = "Select Item(s)",
})
</div>
<div class="col-xs-2 col-xs-offset-1">
<button type="button" class="btn btn-info" style="vertical-align:bott
Copy to Summary
</button>
</div>
</div>
The View also has:
<script type="text/javascript">
var NewRequest = new NewRequestClass();
NewRequest.init();
</script>
My JavaScript file has:
function NewRequestClass() {
this.List;
this.notes;
}
copyList: function (sender) {
alert(this.List);
this.notes = this.List;
},
//Maps variables to the correct field
init: function () {
this.List = document.getElementById("L
this.notes = document.getElementById("n
},
ASKER
Thanks for the help! When I try this, the contents are added to my "notes" div except they are added after
the placeholder and when I click in the field the text goes away. They also show up as:
<option value="the contents">TEXT</option>
the placeholder and when I click in the field the text goes away. They also show up as:
<option value="the contents">TEXT</option>
If you've got a placeholder, the example has += which will append. You can use just = to overwrite the innerHTML.
Here's an example (without using a template).
I'm not sure without seeing the page why it would copy like that but if you're still having an issue if you scrub any private info and paste the HTML after the page is generated I can take a look.
Here's an example (without using a template).
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<br><br><br>
<div class="row">
<div class="col">
<select type="drop" multiple=true style="width: 100%" id="List">
<option id="1">One</option>
<option id="2">Two</option>
<option id="3">Three</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<select type="drop" multiple=true style="width: 100%" id="Notes">
</select>
</div>
</div>
<button onclick="copyList()">CopyList</button>
<script>
function copyList(){
var options = document.getElementById('List');
var target = document.getElementById('Notes');
target.innerHTML = options.innerHTML;
}
</script>
</body>
</html>
I'm not sure without seeing the page why it would copy like that but if you're still having an issue if you scrub any private info and paste the HTML after the page is generated I can take a look.
The methods that you need here is `.cloneNode()` to clone the element and `.appendChild()` to append it to the specific area you want, something like :
And get your element in the js part like:
Working live fiddle
NewRequestClass.prototype = {
init: function() {
this.List = document.getElementById("List");
this.notes = document.getElementById("notes");
},
copyList: function() {
this.notes.appendChild( this.List.cloneNode() );
}
}
NOTE: The only problem that you'll face is the correctness of your HTML since the id must be unique in the same document and when you copy the element the id will be duplicated, what I would suggest is the use of class instead :...
@multiple = true,
@style = "width: 100%",
@class = "List"
...
And get your element in the js part like:
this.List = document.querySelector(".List");
Working live fiddle
If you want to keep the id in the main drop-down, then I would suggest changing the id of the cloned new drop-down using JS code like :
copyList: function() {
var cloned_list = this.List.cloneNode();
cloned_list.id = "the_new_id";
this.notes.appendChild( cloned_list );
}
ASKER
Thanks for all of the help. I actually need to copy the selected values from the drop down list to a Notes text field. I've tried variations of both approaches and need some more help please.
I sorry I didn't get you the first time, is this what you want?
http://jsfiddle.net/z_acharki/pkxz603a/9/
http://jsfiddle.net/z_acharki/pkxz603a/9/
copyList: function() {
this.notes.value = this.List.value;
}
ASKER
I figured out some of this:
function copyList() {
var list = document.getElementById("L ist");
var notes = document.getElementById("N otes");
notes.value += list.value;
}
This actually copies the selected item from the drop-down list to my Notes text box. But, what I need to do is copy all of the selections since its a multi-select drop-down list. It only copies the first item selected.
function copyList() {
var list = document.getElementById("L
var notes = document.getElementById("N
notes.value += list.value;
}
This actually copies the selected item from the drop-down list to my Notes text box. But, what I need to do is copy all of the selections since its a multi-select drop-down list. It only copies the first item selected.
Then you need this one using the selected options :
http://jsfiddle.net/z_acharki/pkxz603a/14/
copyList: function() {
const selected_options = this.List.querySelectorAll('option:checked');
const values = Array.from(selected_options).map(el => el.value);
this.notes.value = values;
}
http://jsfiddle.net/z_acharki/pkxz603a/14/
I misunderstood what you needed as well, here's my sample updated.
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<br><br><br>
<div class="row">
<div class="col">
<select type="drop" multiple=true style="width: 100%" id="List">
<option id="1">One</option>
<option id="2">Two</option>
<option id="3">Three</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<textarea id="Notes" rows=4></textarea>
</div>
</div>
<button onclick="copyList()">CopyList</button>
<script>
function copyList(){
var options = document.getElementById('List').selectedOptions;
document.getElementById('Notes').value = Array.from(options).map(o=>o.value);
}
</script>
</body>
</html>
ASKER
Thank you for the responses! I am getting errors when trying either solution.
1) when I try: var options = document.getElementById('L ist').sele ctedOption s;
copyList: function () {
var List = document.getElementById("L ist");
var options = List.selectedOptions;
alert(options);
},
I get a returned value of: undefined
2) when I try:
var List = document.getElementById("L ist");
var selected_options = List.querySelectorAll('opt ion:checke d');
alert(selected_options);
I get: [object NodeList]
1) when I try: var options = document.getElementById('L
copyList: function () {
var List = document.getElementById("L
var options = List.selectedOptions;
alert(options);
},
I get a returned value of: undefined
2) when I try:
var List = document.getElementById("L
var selected_options = List.querySelectorAll('opt
alert(selected_options);
I get: [object NodeList]
ASKER
On the 2nd option, I get errors on this line: var values = Array.from(selected_option s).map(el => el.value);
Try to replace it by :
const values = Array.from(selected_options).map(function(el){
return el.value;
});
ASKER
Thank you so much for your help and patience working with me on this! I get an error on the Array.from that Object doesn't support property or method 'from'
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That worked! Thanks again for all of your help!
With pleasure, happy to help anytime.
Sorry, didn't get a chance to circle around before it got answered but glad to see you got it working
You can do so with JS:
Open in new window
This would copy selections as well.
Typically what I have done for dynamic forms is generate a 'template' that is in a hidden <div> then when adding elements I copy from that template with its defaults.
Open in new window
I use an attribute like 'data-istemplate' when collecting results to skip the templates, unless I'm generating ids for each new element.