I want to copy the value inserted in a textbox to a select control, onclick of a button using javascript. I want to insert multiple values to get multiple options in the select.`
var temp1 = document.getElementById("textboxID").value.replace(/\s/g, "");
setSelectValue('selectID', temp1);
function setSelectValue (id, val) {
document.getElementById(id).value = val;}
This is my code and is not working. Thank you
`
Simple example (https://jsbin.com/sekihofihu/edit?html,output):
<input id="textboxID" />
<button onclick="addOption()">Copy</button>
<select id="selectID"></select>
<script>
var addOption = function()
{
var val = document.getElementById("textboxID").value.replace(/\s/g, "");
var select = document.getElementById('selectID');
var option = document.createElement("option");
option.text = val;
select.add(option);
}
</script>
If you want to add the content of the text input to your select as a new option you can use this:
var temp1 = document.getElementById("textboxID").value.replace(/\s/g, "");
setSelectValue('selectID', temp1);
function setSelectValue (id, val) {
document.getElementById(id).innerHTML += "<option value='" + val + "' >" + val + "</option>";}
Your question is not super clear but if you're trying to add an "option" element into a select element you can do something like this:
<html>
<body>
<select id="targetSelect" ></select>
<input id="sourceInput" type="Text" > </input>
<button id="submit" type="button" onclick="setSelectValue()">
Add to Select
</button>
<script>
function setSelectValue () {
var mySelectElement = document.getElementById("targetSelect");
var newOption = document.createElement("option");
newOption.text = document.getElementById("sourceInput").value;
mySelectElement.add(newOption,0);
}
</script>
</body>
</html>
Related
Im doing a dynamic text box with javascript. But when I execute my button, the value I alredy inserted are erased. So like if I have one textbox and type something on it, when I execute the button to create another textbox it erase all I had type on the 1st one, and create the other one.
I understand why it is happening, but I dont know if there is a way to hold the value, and pass to the "new" div.
<script language="javascript">
var x = 1;
function Button()
{
my_div.innerHTML = my_div.innerHTML +"<label for='variation'>Carro " + x +": </label>" + "<input type='text' name='xcar"+ x +"'>"
x++;
}
</script>
So the problem as I said before was that the my_div.innterHTML was replacing himself and losing the values.
<script language="javascript">
window.onload = function () {
var createTextbox = function () {
var x = 1,
container = document.getElementById('my_div');
return function () {
var div = document.createElement('div');
input = document.createElement('input');
input.type= "text";
input.name = "xtext" + x;
div.appendChild(input);
container.appendChild(div);
x++;
}
}();
document.getElementById('createButton').onclick = createTextbox;
</script>
<input class="carbutton" type="button" value="+ Carro" id="createButton">
I just used this code instead.
HTML:-
'<td>' + item.Message + ' <input type="button" class="btn btn-info" id="' + item.LogID + '" onclick="Clicked(this);" value="View More" /> <p> ' + item.FormattedMessage + ' </p></td></tr>'
this is button in table
Jquery:-
function Clicked(e)
{
var SelectedID = e.id;
$("p").toggle();
};
In this When i click on button i want to show selected id column only and hide rest columns.
But when i click on button it shows all column or hides all column
In addition to balachandar answer. if you want to hide p tag initially then use display:none for p tag
function Clicked(e)
{
var SelectedID = e.id;
$("#"+SelectedID).next("p").toggle(function(){
var btn_text = $("#"+SelectedID).val();
if(btn_text == "View More"){
$("#"+SelectedID).val("Hide");
}else{
$("#"+SelectedID).val("View More")
}
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-info" id="myID" onclick="Clicked(this)" value="View More" /> <p style="display:none"> Some Text you want to in future </p>
Try this below code
function Clicked(e)
{
var SelectedID = e.id;
$("#"+SelectedID).next("p").toggle();
};
Hope this will help you.
You can select the element by its id and find the p element inside:
function Clicked(e)
{
var SelectedID = e.id;
$("#" + SelectedID).find("p").toggle();
};
Or just use this:
function Clicked(e)
{
$(this).find("p").toggle();
};
function Clicked(e)
{
var SelectedID = e.id;
$("#" + SelectedID).toggle();
};
You can use:
function Clicked(d)
{
var SelectedID = d.id;
$("#" + SelectedID).toggle();
};
This function picks all p inside td of your table and hides all of them, then it shows only the one with the same ID as the button.
function Clicked(e) {
var SelectedID = e.id;
$("td p").hide();
$("#" + SelectedID).show();
};
I'm trying to change the text of a button to that of a value stored in a variable. The button is currently blank and not even using a fixed value like .value = "test"; is working.
HTML:
<div id="addContainer">
<textarea id="listTitleInput" class="textarea" placeholder="Add the title of your list here, then click 'Add List'." rows="10" cols="50"></textarea>
<button id="addListBtn" data-role="button">Add List</button>
</div>
<div id="listDisplayContainer">
</div>
JS:
$(document).ready(function () {
//LISTS
var listTitleInput = document.getElementById("listTitleInput");
var addListBtn = document.getElementById("addListBtn");
var listCount = localStorage.getItem("listCount");
if (listCount === null) {
noteCount = 0;
}
//ADD LISTS
function addList() {
if ($("#listTitleInput").val() == "") {
alert("Please give your list a title, then click 'Add List'.");
} else {
listCount++;
var list = $("#listTitleInput").val();
console.log("List Count: " + listCount);
console.log(list);
var display = document.createElement("button");
document.getElementById("listDisplayContainer").appendChild(display);
display.className = "ui-btn";
display.id = "list" + listCount;
$("#list" + listCount).value = list;
}
}
//Lists
addListBtn.addEventListener("click", addList);
});
Looks like you need to change $("#list" + listCount).value = list; to $("#list" + listCount).text(list);
value is not a property and val() doesn't work for a button.
The problem is that you are confusing native DOM attributes with jQuery ones.
$("#list" + listCount).value = list;
$("#list" + listCount) is a jQuery object so it doesn't use the native javascript properties that you may be used to. (value=)
What you are looking for is:
$("#list" + listCount).html(list);
Or
$("#list" + listCount).text(list);
Since list is a string value, it will be best to use .text
I am trying the code given below :
var tmp1 = "3";
var status_detail_hanca = "<select class='status_detail_hanca' name='status_detail_hanca[]' ><option value='0'>Proses</option><option value='1'>Return</option><option value='2' >Selesai</option></select>";
$('select.status_detail_hanca').val(tmp1);
$(".tbody_detail_hanca_checking").append(status_detail_hanca);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tbody_detail_hanca_checking'>
</div>
but this code is not working, tmp1 value from json and this select-option in loop $.each.I am trying this code also :
var status_detail_hanca = "<select class='status_detail_hanca' name='status_detail_hanca[]' ><option value='0'"+ if(tmp1 === '0'){$(this).append("selected")} +">Proses</option><option value='1'"+ if(tmp1 === '0'){$(this).append("selected")} +">Return</option><option value='2'"+ if(tmp1 === '0'){$(this).append("selected")} +">Selesai</option></select>";
but, its also not working.
How to solve this problem ?
Thanks guys !
You can try something like this. Also Its better to use loop and create a string than hard-coding it
var tmp1 = "3";
var optionList = ["Proses", "Return","Selesai", "TEST", "FOO"]
var status_detail_hanca = "<select class='status_detail_hanca' name='status_detail_hanca[]' >";
status_detail_hanca = optionList.reduce(function(p, c, i){
var _t = "<option value='"+i+"' ";
if(tmp1 == i){
_t += "selected='selected'";
}
_t += ">" + c + "</option>";
p += _t;
return p;
}, status_detail_hanca);
status_detail_hanca += "</select>";
$(".tbody_detail_hanca_checking").append(status_detail_hanca);
$(document).on("change", ".status_detail_hanca", function(){
console.log($(this).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tbody_detail_hanca_checking'>
</div>
You can use .prepend(), jQuery() to prepend an <option> element to select.status_detail_hanca with value and text set to tmp1, and selected property set to true.
var tmp1 = "3";
var status_detail_hanca = `
<select class='status_detail_hanca' name='status_detail_hanca[]'>
<option value='0'>Proses</option>
<option value='1'>Return</option>
<option value='2' >Selesai</option>
</select>`;
$(".tbody_detail_hanca_checking")
.append(status_detail_hanca);
var select = $("select.status_detail_hanca")
.prepend($("<option>", {value:tmp1, selected:true, text: tmp1}));
console.log(select.val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class='tbody_detail_hanca_checking'>
</div>
//Selection on base of select option text
$(".status_detail_hanca option:contains("+ $.trim("Text you want to select") +")").attr('selected', 'selected');
//Selection on base of select option value
$('.status_detail_hanca').val(name);
add dot before class name from selecting element by class i.e $('.ClassName').opertion();
I have a some problem
i.e i have a 60 text box controls in asp page i want to text box text to empty so , i am using like below
var st = document.getElementById("<%=hiddenrate.ClientID%>").value;//Total Control names
var controlnames = st.split(','); //split with comma
var i = 0;
for (i = 0; i <= controlnames.length; i++)
{
var gh = '' + '.SetText(' + "'Empty text'" + '' + ');';
ft[i] + gh;
//example rate1.SetText('');
rate2.SetText('');
'
'
rate60..SetText('');
}
but in javascript is that control name and property
How to set text as empty in total controls dynamically?
Thanking You,
Rajesh
IF you want to clear the values of all text inputs use this code:
// get all <input> elements
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
// check input type
if (inputs[i].type === 'text') {
inputs[i].text = '';
}
}
You could easily modify that code to handle textareas as well or add some more filtering to the elements.
If you consider using JS framework you can make this code much shorter. For example if you use jQuery then here's the code for you:
$(document).ready(function () {
$('input:text').text('');
});
Here is another sample to clear value all textboxes:
<script type="text/javascript">
function pp(){
for(p in form1.childNodes) {
if(form1.childNodes(p).type=="text")
form1.childNodes(p).value="";
}
}
</script>
<body>
<form name="form1">
<input type="text" name="a1"/>
<input type="text" name="a2"/>
<input type="text" name="a3"/>
<input type="button" name="a11"/>
<input type="submit" name="a12"/>
<input type="button" value="Clear" onclick="pp()" name="a13"/>
</form>
</body>
How about simply calling document.forms["form1"].reset() in Javascript? It will clear the values of all the controls in the form.
Thanking u all i got the solution like below method
var i = 0;
for (i = 0; i <= ft.length; i++) {
x = new Object();
x = ft[i];
propertyName = ".SetText";
propertyValue = " ";
if(x !="undefined")
eval(''+x+'' + propertyName + "('" + propertyValue + "');");
or
eval(x).SetText('');
}
thnks to all.