sorry if confusing.. but i am this code:
$(document).ready(function(){
$("button.yo1").click(function(){
$("div.class1").html("<h1> </h1><h1><br /><select id='multi2' style='width:193px;'></select><br /></h1><button>Pick Class</button>")
});
});
and 'multi2' can't be found .. do i have to pass a parameter or variable?. here is the function to get multi2
function childless() {
var s = document.getElementById('multi2');
var ar = [1,2,3];
for(var i=0; i<ar.length; i++) {
var option = document.createElement('option');
option.text = ar[i];
option.value = ar[i];
s.options[i] = option;
}
}
it works if i dont change the div, any ideas?
Well, the childless() function can't be called unless button.yo1 has been clicked
$(document).ready(function(){
$("button.yo1").click(function(){
$("div.class1").html("<h1> </h1><h1><br /><select id='multi2' style='width:193px;'></select><br /></h1><button>Pick Class</button>");
childless(); // <---call childless() after the HTML content has been added.
});
});
Although I'd wonder why you want to recreate the content with each click of div.class1.
Related
Need to send dynamic (not hardcode) data to a select element.
This code works great in one of my sheets but doesn't work in the other sheet.
The "select" element doesn't get updated with the options I send..
I don't get an error message either.
I've spent a lot of time twitching it and trying to find why but still don't see what's wrong.
p.s. I used a dummy object to send the data for testing purpose.
The html (used MaterializeCss framework)
<select class="icons browser-default" id="selName" onChange ="getNameText();">
<option value="" disabled selected>Choose week</option>
<div id = "err"></div>
//select element initialization in framework
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var options = handlers()
var instances = M.FormSelect.init(elems);
});
function handlers() {
var success = google.script.run.withSuccessHandler(addOptions).getNamesForDropdown()
var failure = google.script.run.withFailureHandler(showError).getNamesForDropdown()
return;
}
function addOptions(names) {
var selectTag = document.getElementById("selName") //select tag
for (var k in names) {
var thisID = k;
var thisText = names[k];
var option = document.createElement("option"); //creating option
option.text = thisText
option.value = thisID;
selectTag.add(option);
}
}
function showError() {
var err = document.getElementById("err").innerHTML = "There was an error."
}
//get the text of selected option
function getNameText() {
var sel = document.getElementById("selName")
var nameText = sel.options[sel.selectedIndex].text;
return nameText;
}
Dummy object I send:
function getNamesForDropdown() {
var namesObj = {
one: "blah",
two: "blahblah"
}
return namesObj;
}
Here's the result what I get (on the screen you there's only hardcoded option):
I handled it. I added a class "browser-default" to the select and the options got updated. This class comes from MaterializeCss Framework.
I created a function which contains a string that I want to add to a in HTML. But when I test it, it won't show me the options declared in my table.
function test(){
// table already defined
var choices = "<option selected>Select...</option>";
for (var i=0; i<tableOptions.length; i++) {
choices += "<option>" + tableOptions[i][0] +"</option>";
}
document.getElementById("theOptions").innerHTML = choices;
}
and in my HTML I have
<select id="theOptions"></select>
What am I doing wrong?
By the way, my test() is automatically loaded after my page is displayed.
<body onload="test()">
See How to populate the options of a select element in javascript for detail on creating and appending options to an existing <select> element.
Using that method, this seems closest to what you're getting at:
var select = document.getElementById("theOptions");
opt = document.createElement("option");
opt.innerHTML = "Select...";
select.appendChild(opt);
for(var i = 0; i < tableOptions.length; i++)
{
var opt = document.createElement("option");
opt.innerHTML = tableOptions[i][0];
select.appendChild(opt);
}
although I found similar questions the solutions mentioned there wont seem to work for me.
What I'm trying to do:
Fetch all the table names of my database with Ajax
Fill the Table Names as options with respective values into a select field
How far I've come:
My fetch_devices php script echoes:
["test1","test2","test3"]
function FetchDevices(){
alert("Fetching");
$.ajax({
url: 'php/sql/fetch_devices.php',
success: function(devices) {
var elements = Object.keys(devices).length;
var select = document.getElementById("devices");
var option = document.createElement("option");
var i = 0;
while(i < elements)
{
option.text= devices[i];
option.value= devices[i];
select.appendChild(option);
i++;
}
},
cache: false
});
}
But in the end I only see the last option "test3".....
Why is that happening?
Thanks in advance!
Best Regards,
You are overriding the same option. Aslo make use of add(). Change it to
while(i < elements)
{
var option = document.createElement("option");
option.text= devices[i];
option.value= devices[i];
select.add(option);
i++;
}
I am new to javascript and I can't populate many fields with one click.
<script>
function addTxt(txt, field)
{
var myTxt = txt;
var id = field;
document.getElementById(id).value = myTxt;
}
</script>
<input type="text" name="xx" id="info" autofocus="required">
<p>x</p>
I've got 3 more fields.
Thanks.
You can use
function addTxt(txt, ids)
{
for (var i=0, l=ids.length; i<l; ++i) {
document.getElementById(ids[i]).value = txt;
}
}
And call it like
addTxt('Some text', ['id1', 'id2', 'id3']);
You can populate multiple fields. I have shared a jsfiddle link. You can populate multiple fields using this code.
function addTxt(_val, _id,_no)
{
var _myTxt = _val;
var _id = _id;
for(var i=1;i<=_no;i++){
document.getElementById(_id+i).value = _myTxt;
}
}
Click here to see DEMO
I think you don't need a function to do this.
Just use
document.getElementById('id1').value
= document.getElementById('id2').value
= document.getElementById('id3').value
= 'Some text';
Or, if you think document.getElementById is too long, use a shortcut:
var get = document.getElementById;
/* ... */
get('id1').value = get('id2').value = get('id3').value = 'Some text';
Try getting the elements by tagName or by className instead of by id, then using a for loop to iterate through each one.
I can't get the dynamic textfield value. Please see the below my jquery code.
I added onclick event while creating the textfield for LandMark. Please see the below code.
I am always getting undefined. Please help me.
function dynamicEvent() {
alert("dynamic event");
$(document).ready(function(){
alert("inside ajax --> dynamic");
var table = document.getElementById("dataTable");
alert("table-->"+table);
var rowCount = table.rows.length;
alert("rowCount-->"+rowCount);
alert("value of rowCount"+rowCount);
var uniqueId;
for (var i=rowCount;rowCount>7;i++){
uniqueId = i;
alert("inside for loop");
alert("uniqueId-->"+uniqueId);
var element = document.createElement("input");
uniqueId=uniqueId-1;
element.id = "t02Travelfrom" +uniqueId;
var tfrom=element.id;
alert("tfrom id-->"+tfrom);
var t02Travelfrom=$("tfrom").val();
alert(tfrom+"--value-->" +t02Travelfrom);
}
});
}
You have incorrect selector:
var t02Travelfrom=$("tfrom").val();
change to:
var t02Travelfrom=$("#" + tfrom).val();
$("tfrom") returning elements with tag tfrom
You need $(tfrom). You don't need double quotas.