I know this is silly question but I am new to Javascript.
I have the following listbox:
<select id = 'data' multiple='multiple'>
<option>test#email.com</option>
<option>test#email.com</option>
<option>test#email.com</option>
<option>test#email.com</option>
<option>test#email.com</option>
</select>
Under the listbox there is a textarea:
<textarea id = 'copydata'>
</textarea>
And underneath the textarea is a button:
<button id = 'add'>add email</button>
I am wondering if it is possible to copy the items that are selected in the listbox to the textarea when the user presses on the button using Javascript.
Note that the listbox has the multiple attribute so that the user can select more than one item.
Any help is greatly appreciated.
Yes it is possible, you should use jQuery though to make it easier:
$("#add").click(function(){ // This event fires when you click the add button
$("#data option:selected").each(function(){ // Loop through each selected option
$("#copydata").val($("#copydata").val() + $(this).text() + "\n"); // Add its innerhtml to the textarea
});
});
Here is the solution using core HTML and Javascript.
<html>
<head>
<script type="text/javascript">
function copyDataToTextArea() {
var _data = document.getElementById("data");
var _textArea = document.getElementById("copydata");
var _selectedData="";
for(i=0; i<document.getElementById("data").length; i++) {
var _listElement = document.getElementById("data")[i];
if(_listElement.selected) {
_selectedData = _selectedData + _listElement.value + "\n";
}
}
_textArea.value=_selectedData;
}
</script>
</head>
<body>
<select id='data' multiple='multiple'>
<option>test1#email.com</option>
<option>test2#email.com</option>
<option>test3#email.com</option>
<option>test4#email.com</option>
<option>test5#email.com</option>
</select>
<textarea id='copydata'>
</textarea>
<button id ='add' onclick="copyDataToTextArea()" >add email</button>
</body>
</html>
Related
I am trying to loop in HTML Select in JavaScript. Below is my code. I want to display my COUNT value in option. I am getting some data from PHP end & it need to be display the count. Please advise if i am missing anything or is it wrong way ?
var cjs=$form.find('[name="cjs"]').data("cjs");
var newHtml = 'Current<br>\
<select class="form-control" id="priority" name="priority">\
'+for (var i = 1; i <= cjs; i++) {+'\
<option disabled selected value ="0" style="display:none">-CHOOSE PRIORITY-</option>\
'+}+'\
</select>\
<button class=" upr edit btn btn-sm btn-primary"> Update </button></center></div>';
$('.proo'+request).html(newHtml);
alert("Successfully Updated");
check this maybe it will helpful for you
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date Picker</title>
</head>
<body>
<p>Click the button to loop through a block of code five times.</p>
<select id="demo">
</select>
<p id="demo"></p>
<script>
function myFunction(selector)
{
var optionList="CHOOSE PRIORITY "
var i;
for (i=1;i<=5;i++){
selector.options[i-1] = new Option(optionList+i);
}
}
//usage:
myFunction(document.getElementById("demo"));
</script>
</body>
</html>
This is my function to copy the selected item from the select box and below that is the HTML code.
<script type="text/javascript">
$(document).ready(function() {
$("#copy").click(function() {
var selected = $("#basket").val();
$("#ingredient").append(selected + '\n');
});
});
</script>
Basket
<select size=3 class="form-control" name="basket" id="basket">
<option value='apples'>apples</option>
<option value='chicken'>chicken</option>
<option value='potato'>potato</option>
</select>
<br>
<center>
<a id="copy" class="btn btn-primary" role="button">Copy to Ingredients</a>
</center>
Ingredients
<textarea rows=10 style="resize: none" class="form-control" id="ingredient" name="ingredient"></textarea>
I'm able to select and copy using the button. However, the issue I'm facing is that when the textarea is cleared manually and when the item is selected to copy using the button, it doesn't work.
Any form of help is appreciated. Thank you.
You need to make use of .val():
$("#copy").click(function(){
var selected = $("#basket").val();
$("#ingredient").val($("#ingredient").val() + selected+'\n');
});
DEMO
$("#copy").click(function(){
var selected = $("#basket").val();
alert(selected);
var x=$("#ingredient").val()+selected;
$("#ingredient").val(x);
});
<html>
<title>
</title>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
function AddingTextBoxes(){
var NumOfText=$("#NumOfTextBoxes").val();
$('#NewlyCreatedSelectBoxes').empty();
for(i=1; i<=NumOfText; i++){
var ipBoxName="MyInput"+i;
var txtBoxAutoNumbering="<input type='text' name='textbx[]' style='width:50px;' value="+i+" /> ";
$('#NewlyCreatedSelectBoxes').append(txtBoxAutoNumbering);
var txtBox="<input type='text' name='textbx[]'/> "
$('#NewlyCreatedSelectBoxes').append(txtBox);
var Select_SelectionOptions="<select id='SelectOption'><option>Text_Box</option> <option>Text_Area</option><option>Radio_Button</option></select> ";
$('#NewlyCreatedSelectBoxes').append(Select_SelectionOptions);
var Select_For_Multiple_Choices="<button type='button' onclick='ChildTxtBoxes()' id='ABC'>Click for child selections</button><br><br>";
$('#NewlyCreatedSelectBoxes').append(Select_For_Multiple_Choices);
}
return false;
/*for(var i=0; i<NumOfText; i++){
var x=1;
NewlyCreatedSelectBoxes.innerHTML=NewlyCreatedSelectBoxes.innerHTML+"<br>AAA "+x+"<input type='text' name='mytext'/>";
x++;
}
return false;*/
}
function ChildTxtBoxes(){
var txtBox="<input type='text' name='textbx[]'/> "
$('#NewlyCreatedSelectBoxes').append(txtBox);
}
</script>
</head>
<body>
<form >
<div id="PHPForms" >
<!--Designing PHP forms dynamically-->
<label>Form Heading</label><input type="text"/><br><br>
<label>Number of text boxes would needed</label><input id="NumOfTextBoxes" type="text"/>
<button id="A" onclick=" return AddingTextBoxes()">Click</button>
<div id="NewlyCreatedSelectBoxes" name="Texty">
</div>
</div>
</form>
</body>
</html>
In this code once I clicked button related to "var Select_For_Multiple_Choices" variable, I shold display a text-box right below the clicked button.. Likewise whenever the button is the text-box should be shown below that button... Bt in my code though it creates a text-box it shows aftr all the text boxes.... Hw I can do this?
You can use .after() to insert after the found element. So something like this:
$(button).after(content);
You can get your code to work as expected by passing the execution context (this) to the function ChildTxtBoxes like: ChildTxtBoxes(this). You have to modify your function to:
function ChildTxtBoxes(button) {
var txtBox = "<input type='text' name='textbx[]'/>"
$(button).after(txtBox);
}
notice the use of the execution context(this) to identify the button that was clicked and the use of .after() to insert a textbox after the button as Vlad suggested.
To be honest, I don't fully understand the keyword this to explain how and why it works. You can read up more on JavaScript “this” keyword here
Here is a working demo
i want to move the selected item of a select tag (list box) into a text box after clicking a button. i am using the below code
<html>
<head>
<script type="text/javascript">
function copy()
{
var sel = document.getElementById('lb').value;
document.getElementById('FileName').value = sel;
}
</script>
</head>
<body>
<form name="frm1" id="frm1">
<select id="lb" name="lb" size="5">
<option value="abc.txt">abc.txt</option>
<option value="def.txt">def.txt</option>
</select>
<input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">
<input type="text" name="FileName" id="FileName">
</form>
</body>
</html>
the above code works properly in google chrome browser but it does not work when i run the page in IE. can anyone tell me whats the problem in the code and kindly suggest a javascript or any other code which is compatible ith both google chrome and IE.
above code works after i allow the pop up that comes but
actually the below code is not working.
<html>
<head>
<title>FILE</title>
<style>
body{background-color:#b0c4de;}
#OutBound{text-align:center;}
#btn_sbmt{position:absolute;top:150px;left:700px;}
#div_text_label{position:absolute;top:50px;left:200px;}
#lbl2{position:absolute;top:80px;left:200px;}
#selected_list{position:absolute;width:300px;top:80px;left:335px;}
#btn_move{position:absolute;top:100px;left:650px;}
#FileName{position:absolute;width:300px;top:100px;left:700px;}
</style>
<script type="text/javascript">
function load_list()
{
document.getElementById('div_main_select').style.display="none";
var textbox = document.getElementById('pattern');
var listbox = document.getElementById('selected_list');
var mainListbox = document.getElementById('lb');
listbox.innerHTML = '';
for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
{
var child = mainListbox.children[childIndex];
option = document.createElement('option');
option.innerHTML = child.innerHTML;
listbox.appendChild(option);
}
alert (load_list_1);
}
function get_list()
{
var textbox = document.getElementById('pattern');
var listbox = document.getElementById('selected_list');
var mainListbox = document.getElementById('lb');
listbox.innerHTML = '';
for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
{
var child = mainListbox.children[childIndex];
if (child.innerHTML.search(textbox.value) != -1)
{
option = document.createElement('option');
option.innerHTML = child.innerHTML;
listbox.appendChild(option);
}
}
alert (get_list_1);
}
function copy()
{
var sel = document.getElementById('selected_list').value;
document.getElementById('FileName').value = sel;
alert (copy_1);
}
</script>
</head>
<body style="color: black; background-color: rgb(255, 255, 255); background-image: url(background-1204x927.jpg);" BGCOLOR="#ffffff" text="black" link="#B03060" vlink="#B03060" onload="load_list()">
<hr>
<form id="OutBound" name="OutBound" action="" method="GET">
<div style="text-align:center;" id="div_text_label" name="div_text_label">
<label id="lbl1" name="lbl1">search :</label>
<input type="text" name="pattern" id="pattern" onKeyUp="get_list()">
</div>
<div style="text-align:center;" id="div_main_select" name="div_main_select">
<select id="lb" name="lb" size="5">
<option value="abc.txt">abc.txt</option>
<option value="def.txt">def.txt</option>
</select>
</div>
<label id="lbl2" name="lbl2">File List:</label>
<select id="selected_list" name="selected_list" size="5">
</select><br>
<input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">
<input type="text" name="FileName" id="FileName">
<input type="submit" name="btn_sbmt" id="btn_sbmt" value="MOVE FILES">
</form>
</body>
</html>
the page works like this..
1) there is a list box (lb) populated with some items.
2) there is 1 more empty list box (selected_list).
3) when the page form is loaded load_list() function is called which loads the empty list box (selected_list) with the contents of the original list box (lb).
4) when someone enters a word or a letter in the search text box then get_list() function is called which filters the files according to the words entered.
5) when a filename is selected in the selected_list and >> button is pressed, the copy() function is called and the filename is copied to the FILENAME text box.
but this all is not working in IE but it works in google chrome. can anyone fix the code so that it works with IE also.
Try this:
function copy() {
var sel = document.getElementById('lb');
document.getElementById('FileName').value = sel.options[sel.selectedIndex].text;
}
The code works fine (see fiddle in IE)
If you are opening the file from local file system, the IE may ask your permission to run script. You should click "Allow Blocked Content" for it to work
See image below
Try this using jQuery (1.10.1)
function copy()
{
$("#FileName").val($("#lb").val());
}
http://jsfiddle.net/7Axu8/
Update
http://jsbin.com/onayow/1
I have 2 textBox and 1 button!
I want to insert text to one of these textboxs. When I click to textbox_1 and click button, mytext will appear at textbox_1. When I click to textbox_2 and click button, mytext will appear at textbox_2.
How can I do this by using JavaScript?
Please help me! I'm new on JavaScript!
put id's of the two textboxes as textbox_1 and textbox_2 and put onclick='onCLickButton();' on the <button> tag
and write the following code in the script
var text_to_be_inserted = "sample";
function onCLickButton(){
document.getElementById("textbox_1").value='';
document.getElementById("textbox_2").value='';
if(document.getElementById("textbox_1").focused){
document.getElementById("textbox_1").value=text_to_be_inserted;
}
else if(document.getElementById("textbox_2").focused){
document.getElementById("textbox_2").value=text_to_be_inserted;
}
else{
// do nothing
}
}
Edited
Please accept my apologies actually I am used to use these functions as I have my own js file having these functions.
please add onfocus='onFocusInput(this);' in the <input> tags and add the following code in the script
function onFocusInput(object){
document.getElementById("textbox_1").focused=false;
document.getElementById("textbox_2").focused=false;
object.focused = true;
}
<html>
<head>
<script type="text/javascript">
var index = false;
var text = "This text shifts to text box when clicked the button";
function DisplayText(){
if(!index){
document.getElementById("txt1").value = text;
document.getElementById("txt2").value = "";
}
else{
document.getElementById("txt2").value = text;
document.getElementById("txt1").value = "";
}
index = index ? false : true;
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="button" value="Change Text" onclick="DisplayText()"/>
</body>
</html>
Take a look at the onFocus() attribute for the INPUT tag - and think about keeping track of what was last given the focus. I'm being a little vague as this sounds a lot like homework.
It isn't the prettiest / most delicate solution, but it works and you can build off it to fulfill your needs.
<script>
var field = 0;
function addText(txt){
if(field === 0) return false;
field.value = txt;
}
</script>
For a form such as
<form>
<input type="text" name="box1" id="box1" onfocus="field=this;" />
<input type="text" name="box2" id="box2" onfocus="field=this;" />
<input type="button" onclick="addText('Hello Thar!');" />
</form>