How can the code below be modified, such that I would be able to add single and comma separated values to a select box?
Example 1: orange
[SELECT BOX]
orange
Example2: red,blue,green,yellow
[SELECT BOX]
red
blue
green
yellow
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function add() {
var select = document.getElementById('list')
var option = document.getElementById('reference').value
select.options[select.options.length] = new Option(option, option)
}
</script>
</head>
<body>
<input type="button" value="add" onclick="add()">
<input type="text" id="reference">
<br><br>
<select style="width: 200px;" id="list"><option>
</body>
</html>
Simply split the value by a comma, and then loop through each of the strings, appending the option as you go:
function add() {
var select = document.getElementById('list')
var options = document.getElementById('reference').value.split(',');
for(i=0; i<options.length; i++){
select.options[select.options.length] = new Option(options[i], options[i])
}
}
JSFiddle
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>
I created a couple inputs that feed into a JavaScript command to create custom sentences. Whatever the user inputs or selects is added to a sentence framework. When the user selects submit, the sentence is created in a textarea. How can I add a feature to my app that counts the words within the textarea? I simply want a small text box to the bottom right of the text area that states how many words are in the text area.
Thanks so much for your help!
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<style type="text/css">
table,td,th {margin-left: auto;margin-right: auto}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}
.chosen-select {width:200px}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
function sentence() {
document.getElementById("s1").value = "";// reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Year, Make, and Model are needed");
document.getElementById("z1").focus();
}
else {
const input1 = document.getElementById("z1").value;
var input3 = $('#z3').val();
console.log(input3);
var input3Formatted = "";
if(input3.length==1){
// Only one value...
input3Formatted = input3[0];
}
if(input3.length==2){
// Two values... Just add and "and"
input3Formatted = input3[0]+" and "+input3[1];
}
if(input3.length>2){
// more than 2 values...
for(i=0;i<input3.length-1;i++){
input3Formatted += input3[i]+", ";
}
input3Formatted += "and "+input3[input3.length-1];
}
const input5 = "It has minor curb rash on the "+input3Formatted+"."
const input7 = document.getElementById("z5").value;
document.getElementById("s1").value =
"This is my " +input1+ ". It is in good condition.The vehicle's rims have curb rash. "+input5+" The "+input1+"'s color is "+input7+"."
}
}
function reset() {
document.getElementById("s1").value = "";
}
</script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
})
});
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100" >
</td>
<td>
<select data-placeholder="Minor Curb Rash" name="minorrash" multiple class="chosen-select" id="z3">
<option value=""></option>
<option value="front left rim">Front Left Rim</option>
<option value="back left rim">Back Left Rim</option>
<option value="front right rim">Front Right Rim</option>
<option value="back right rim">Back Right Rim</option>
</select>
</td>
<td>
<input type="text" id="z5" placeholder="Color" name="name" maxlength="100">
</td>
</tr>
</table>
<br>
<div class="display">
<button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>
<div class="display">
<button onclick="reset()" id="r1">Reset</button>
</div>
</body>
</html>
i don t know if this is what are you trying, this is what I understood of your question:
<script type="text/javascript">
var nameValidationInput = document.getElementById('s1');//here you search in your text area al the words
function useValue() {
var NameValue = nameValidationInput.value;
document.getElementById("demo").innerHTML = NameValue.split(" ").length // here you count the word separated by a space
}
</script>
<br>
<textarea rows="1" cols="5" id="demo"></textarea>// just to show the count in the text area
<br>
in this way the function will count each word separated for a space (if you want something more detailed if will be a much more dificult)
Well, the simplest way to do it is to store all the text from the textarea in an array (separated by white spaces). You can use .split to achieve that. Once done, then simply get the length of the array. It'll return the world count.
Try this.
var splitData = textarea.value.split(" ");
var wordCount = splitData.length;
I will leave a another version of what was sugested. Using length is not enough because it will count every whitespace as a word, and at the begining it will count 1 word even when its empty. I sugest using trim() and filter to prevent those bugs, for example:
wordsArr = text.trim().split(" ")
wordsArr.filter(word => word !== "").length
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>
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'm having a problem with this form I'm working on. Whenever I add, or refresh the page, the values are still there. I believe this is because the clone method copies the value attribute from the textBox. Is there any way I can get rid of them when I add another textBox?
<html>
<head>
<title>JQuery Example</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
function removeTextBox()
{
var childCount = $('p').size() //keep track of paragraph childnodes
//this is because there should always be 2 p be tags the user shouldn't remove the first one
if(childCount != 2)
{
var $textBox = $('#textBox')
$textBox.detach()
}
}
function addTextBox()
{
var $textBox = $('#textBox')
var $clonedTextBox = $textBox.clone()
//document.getElementById('textBox').setAttribute('value', "")
$textBox.after($clonedTextBox)
}
</script>
</head>
<body>
<form id =
method="POST"
action="http://cs.harding.edu/gfoust/cgi-bin/show">
<p id= "textBox">
Email:
<input type = "text" name="email" />
<input type ="button" value ="X" onclick = "removeTextBox()"/>
</p>
<p>
Add another email
</p>
<input type="submit" value="submit"/>
</form>
</body>
</html>
The Following addition should work:
var $clonedTextBox = $textBox.clone();
$($clonedTextBox).val('');