This is my java scripte code but i cant pass value to summernote using id i want to pass pree value to the summernote to be edited but nothing is displayed
<script>
$(document).ready(function()
{
var table = document.getElementById('hotel');
var markupStr;
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("id").value = this.cells[0].innerHTML;
document.getElementById("hotel_name").value = this.cells[1].innerHTML;
document.getElementById("location").value = this.cells[9].innerHTML;
document.getElementById("rate").value = this.cells[2].innerHTML;
document.getElementById("lno").value = this.cells[3].innerHTML;
document.getElementById("uno").value = this.cells[4].innerHTML;
// document.getElementById("sumsummernote7781").value = this.cells[7].innerHTML;
document.getElementById("acce").value = this.cells[5].innerHTML;
//var markupStr = this.cells[7].innerHTML;
//$('#summernote7781').summernote('code', markupStr);
};
}
});
</script>
Related
I'm rendering a dynamic input and checkbox from an array object which is fine, however I'm not quite sure how to hide the input when I click on the checkbox relative to the input.
function dynamicStuff () {
var objs = ['Id', 'Name', 'Age'];
for (var i = 0; i < objs.length; i++) {
objs[i];
var cElement = document.createElement("input");
cElement.type = "checkbox";
cElement.name = objs[i];
cElement.id = objs[i];
var cElementInput = document.createElement("input");
cElementInput.type = "text";
cElementInput.name = objs[i];
cElementInput.id = objs[i];
cElementInput.placeholder = objs[i]
document.getElementById('chkBox').appendChild(cElement);
document.getElementById('chkBox').appendChild(cElementInput);
}
}
Live example.
Saving on localStroage:
function chkboxCookie() {
var indexOfItem = checkAllFields.indexOf(this.id);
if (indexOfItem >= 0) {
checkAllFields.splice(indexOfItem, 1);
} else {
checkAllFields.push(this.id);
}
/* it saves paramater name in the localStorage*/
localStorage.setItem("checkedUsers", JSON.stringify(checkAllFields));
}
How do I hide the input that I ticked and potentially save that input name/Id in the localStorage?
You'd add an event handler that does something to the input when the checkbox is checked
function dynamicStuff() {
var objs = ['Id', 'Name', 'Age'];
for (var j = 0; j < objs.length; j++) {
(function(i) {
objs[i];
var cElementInput = document.createElement("input");
cElementInput.type = "text";
cElementInput.name = objs[i];
cElementInput.id = objs[i];
cElementInput.placeholder = objs[i];
var cElement = document.createElement("input");
cElement.type = "checkbox";
cElement.name = objs[i];
cElement.id = objs[i];
cElement.addEventListener('change', function() {
cElementInput.style.display = this.checked ? 'none' : 'inline';
localStorage.setItem(objs[i], this.value);
});
var br = document.createElement('br');
document.getElementById('chkBox').appendChild(cElement);
document.getElementById('chkBox').appendChild(cElementInput);
document.getElementById('chkBox').appendChild(br);
document.getElementById('chkBox').appendChild(br.cloneNode());
})(j);
}
}
dynamicStuff()
<div id="chkBox"></div>
Working fiddle.
The id attribute should be unique in the same page so try to change the id of the input for example :
cElementInput.id = objs[i]+'_input';
And attach change event to the checkbox's where you'll show/hide related inputs:
cElement.addEventListener("change", toggleInput, false);
Then define your toggleInput() function :
function toggleInput(){
var input_id = this.id+'_input';
document.getElementById(input_id).style.display = this.checked ? 'inline' : 'none';
localStorage.setItem(this.id, this.value);
}
To check/uncheck the checkboxe's based on localStorage, get the data first :
var localStorageData = JSON.parse(localStorage.getItem("checkedUsers"));
var data = localStorageData==null?[]:localStorageData;
Then check for the the values presented in the array and check/uncheck checkboxe's :
if(data.indexOf(objs[i]) >= 0)
cElement.checked = true;
else
cElement.checked = false;
Hope this helps.
i trie to generate dynamic Input fields with unique Ids but i stucked:
function addTxtBx(){
var txtBxHolder = document.getElementById('txtBoxHolder');
var newTxtBx = document.createElement('input');
newTxtBx.type = 'text';
var i=1;
//newTxtBx.id = document.getElementById("txtWaypoint"[i])
if(i<10){
newTxtBx.id = "txtWaypoint"+[i];
i++;
break;
}
txtBoxHolder.appendChild(newTxtBx);
}
i tried it with a for() but always got Id='name'9,
i know im an trainee. :)
I think so where you miss to loop it properly.
function addTextBox(ops) {
var no = document.getElementById('id1').value;
for (var i = 0; i < Number(no); i++) {
var text = document.createElement('input');
text.type = "text";
text.id = "txtWaypoint" + i; //id created dynamically
document.getElementById('divsection').appendChild(text);
}
}
Try it
I have made a simple dynamic form to generate input boxes.
<body>
<div id="main1">
<input type="button" onclick="addSelectBox ()" name="clickme" value="+"/>
<input type="button" onclick="removeSelect();" value="-"/>
<input type="button" onclick="xmlData();" value="XML" />
</div>
<div id="main">
</div>
</body>
Here's the javascript code:
(function () {
var selele=0;
var brindex=0;
function addSelectBox() {
selele = selele + 1;
var spantag = document.createElement("span");
spantag.setAttribute("id", selele);
var parentDiv = document.getElementById("main");
var selectElement = document.createElement("select");
var selectElement1 = document.createElement("select");
var selectElement2 = document.createElement("select");
var selectElement3 = document.createElement("select");
var arr = new Array("Stocks", "MutualFunds");
var arr2 = new Array("individual", "401k", "IRA");
var arr3 = new Array("contains", "equals");
var arr4 = new Array("scrapedaccounttype", "scrapedtransactiontype");
var textbox = document.createElement('input');
for (var i = 0; i < arr.length; i++) {
var option = new Option(arr[i]);
selectElement.options[selectElement.options.length] = option;
}
for (var i = 0; i < arr2.length; i++) {
var option = new Option(arr2[i]);
selectElement1.options[selectElement1.options.length] = option;
}
for (var i = 0; i < arr3.length; i++) {
var option = new Option(arr3[i]);
selectElement2.options[selectElement2.options.length] = option;
}
for (var i = 0; i < arr4.length; i++) {
var option = new Option(arr4[i]);
selectElement3.options[selectElement3.options.length] = option;
}
spantag.appendChild(selectElement);
spantag.appendChild(selectElement1);
spantag.appendChild(selectElement2);
spantag.appendChild(selectElement3);
spantag.appendChild(textbox);
parentDiv.appendChild(spantag);
linebreak();
};
function removeSelect() {
var parentDiv = document.getElementById("main");
var removetg = document.getElementById(selele);
if (selele != 1) {
parentDiv.removeChild(removetg);
selele = selele - 1;
} else {
parentDiv.removeChild(removetg);
parentDiv.innerHTML = "";
selele = selele - 1;
}
removeBreak();
};
function linebreak() {
brindex = brindex + 1;
var brtag = document.createElement("br");
brtag.setAttribute("id", brindex);
var parentDiv = document.getElementById("main");
parentDiv.appendChild(brtag);
};
function linespace() {
var myElement = document.createElement("span");
myElement.innerHTML = "           ";
var parentDiv = document.getElementById("main");
parentDiv.appendChild(myElement);
};
function removeBreak() {
var myElement = document.getElementById(brindex);
var parentDiv = document.getElementById("main");
brindex = brindex - 1;
parentDiv.removeChild(myElement);
};
function xmlData() {
xmlDoc = loadXMLDoc("data.xml");
newel = xmlDoc.createElement("edition");
x = xmlDoc.getElementsByTagName("span")[0];
x.appendChild(newel);
};
});
I can't get it to work on jsFiddle, the buttons don't work.
They work fine if I embed it in a tag.
Can anybody help me fix them.
EDIT: I guess i added anonymously because I wanted the var selele and brindex globally for all these functions.
I have made the code changes.
JSFIDDLE
Your functions are within an anonymous function and thus not available from outside.
First remove the code from the anonymous function (see here: http://jsfiddle.net/uH84W/6/), then fix the console errors you get (I assume that's not the whole code).
function addSelectBox() {...
In your fiddle you select onload but you change onload to no warp-in or no warp-in now it's work fine
I am having a dynamic form which creates fields dynamically by pressing "+" button.
This form is not binded in the document but generated when we click the + button.
I need to access the form values, how do I achieve that.
what should I use form "get" or "post" .
I have tried by using formdata object or jQuery serialize() but with no success or actually I couldn't figure out a way how to use it correctly .
JSFIDDLE LINK :
code:
HTML :
<body>
<div id="main1">
<input type="button" onclick="addSelectBox ()" name="clickme" value="+" />
<input type="button" onclick="removeSelect();" value="-" />
<input type="button" onclick="xmlData();" value="XML" />
</div>
<form id="autoPopulation_form" method='post'>
<div id="main"></div>
<input type="submit" />
</form>
</body>
JS :
var selele = 0;
var brindex = 0;
function addSelectBox() {
selele = selele + 1;
var spantag = document.createElement("span");
spantag.setAttribute("id", selele);
var parentDiv = document.getElementById("main");
var selectElement = document.createElement("select");
var selectElement1 = document.createElement("select");
var selectElement2 = document.createElement("select");
var selectElement3 = document.createElement("select");
var textbox = document.createElement('input');
textbox.setAttribute("name", "text" + selele);
var arr = new Array("Stocks", "MutualFunds");
var arr2 = new Array("individual", "401k", "IRA");
var arr3 = new Array("contains", "equals");
var arr4 = new Array("scrapedaccounttype", "scrapedtransactiontype");
for (var i = 0; i < arr.length; i++) {
var option = new Option(arr[i]);
selectElement.options[selectElement.options.length] = option;
selectElement.setAttribute("name", "tag" + selele);
}
for (var i = 0; i < arr2.length; i++) {
var option = new Option(arr2[i]);
selectElement1.options[selectElement1.options.length] = option;
selectElement1.setAttribute("name", "acctType" + selele);
}
for (var i = 0; i < arr3.length; i++) {
var option = new Option(arr3[i]);
selectElement2.options[selectElement2.options.length] = option;
selectElement2.setAttribute("name", "compare" + selele);
}
for (var i = 0; i < arr4.length; i++) {
var option = new Option(arr4[i]);
selectElement3.options[selectElement3.options.length] = option;
selectElement3.setAttribute("name", "match_name" + selele);
}
spantag.appendChild(selectElement);
spantag.appendChild(selectElement1);
spantag.appendChild(selectElement2);
spantag.appendChild(selectElement3);
spantag.appendChild(textbox);
parentDiv.appendChild(spantag);
linebreak();
};
function removeSelect() {
var parentDiv = document.getElementById("main");
var removetg = document.getElementById(selele);
if (selele != 1) {
parentDiv.removeChild(removetg);
selele = selele - 1;
} else {
parentDiv.removeChild(removetg);
parentDiv.innerHTML = "";
selele = selele - 1;
}
removeBreak();
};
function linebreak() {
brindex = brindex + 1;
var brtag = document.createElement("br");
brtag.setAttribute("id", brindex);
var parentDiv = document.getElementById("main");
parentDiv.appendChild(brtag);
};
function linespace() {
var myElement = document.createElement("span");
myElement.innerHTML = "           ";
var parentDiv = document.getElementById("main");
parentDiv.appendChild(myElement);
};
function removeBreak() {
var myElement = document.getElementById(brindex);
var parentDiv = document.getElementById("main");
brindex = brindex - 1;
parentDiv.removeChild(myElement);
};
function xmlData() {
xmlDoc = loadXMLDoc("data.xml");
newel = xmlDoc.createElement("edition");
x = xmlDoc.getElementsByTagName("span")[0];
x.appendChild(newel);
};
window.onload = function () {
$( "autoPopulation_form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
};
You are going to find this funny, but your code is fine exept that your selector is wrong when serializing. You forgot the # because you are selecting an ID. Check your updated Fiddle here: http://jsfiddle.net/veritas87/3542N/8/
window.onload = function () {
$( "#autoPopulation_form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
};
I'm going to take a guess here that you are trying to access them from within Javascript.
If that is the case, the easiest way to give the elements a unique id.
var selectElement = document.createElement("select");
selectElement.id = "select_0";
var selectElement1 = document.createElement("select");
selectElement1.id = "select_1";
var selectElement2 = document.createElement("select");
selectElement1.id = "select_2";
var selectElement3 = document.createElement("select");
selectElement1.id = "select_3";
var desiredSelect = document.getElementById("select_3");
You can also give them a name property, in which case you can access them through the form element, or document.getElementsByName. Just be aware the second one will return an array of items, or null.
I am extremely new to JavaScript. I am trying to control the options inside one listbox (called Aggregator) using the selected value of another (called Product). Below is the code I have written so far.
Now when I load the HTML page the code I have written to control the text boxes (using txt, txt2, txt3) does not work either now.
Javascript
function pGo() {
var x = document.getElementById("Product").value;
var txt = "";
var txt2 = "";
var txt3 = "";
var list = document.getElementById("Aggregator");
var aggrs = new Array();
aggrs[0] = "h";
aggrs[1] = "e";
aggrs[2] = "l";
aggrs[3] = "l";
aggrs[4] = "l";
aggrs[5] = "o";
aggrs[6] = "o";
var length = aggrs.length;
var element = null;
if (x == "HII") {
txt = "Full ";
txt2 = "/";
txt3 = "/";
for (var i = 0; i < 5; i++)){
element = aggrs[i]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
}
else if (x == "DLG"){
txt = "Full";
txt2 = "/T";
txt3 = "/responses/";
for (var i = 0; i < 1; i++)){
element = aggrs[i]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
}
else if (x == "TBB"){
txt = "Full ";
txt2 = "/Trams";
txt3 = "/respo";
for (var i = 0; i < 1; i++)){
element = aggrs[i]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
element = aggrs[6]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
form.elements.calcType.value = txt;
form.elements.transform.value = txt2;
form.elements.calcResponse.value = txt3;
}
HTML
product
<select id="Product" onchange = "pGo()">
<option>HII</option>
<option>DLG</option>
<option>TBB</option>
</select><div>
<script type = "text/javascript">
aggregator
<select name = "Aggregator">
</select><br/><br/>
Other text boxes emitted
I need the Aggregator to display certain values from the aggrs list depending on the value selected in the Product select:
HII : [0,1,2,3,4,5]
DLG : [0,1]
TBB : [0,1,6]
Don't go learning jQuery if you're having trouble with basic JavaScript. You'll have worse problems with jQuery.
For a start, you're asking for the ID "Aggregator":
var list = document.getElementById("Aggregator");
when you don't have an object with the ID "Aggregator":
<select name = "Aggregator"></select>
First off, there are a LOT of syntax errors in your code. I have added comments where I made those changes.
There was no id element "Aggregator" so I changed your markup:
product
<select id="Product" onchange="pGo();">
<option>Pick one</option>
<option>HII</option>
<option>DLG</option>
<option>TBB</option>
</select>
<div>aggregator
<select id="Aggregator" name="Aggregator"></select>
<br/>
<br/>
</div>
You had a lot of duplicate code (still is some) and other issues (see comments)
// function to remove duplicate code
function addOptions(list, aggrs, limit) {
var i = 0;
// fix issue where option list did not empty on new select
for (; i < list.length; i++) {
list.remove(i);
}
for (i = 0; i < limit; i++) { // fix extra ")"
var opt = document.createElement("option");
element = aggrs[i]; //missing semicolon
opt.text = element; // use standard form not innerHtml
opt.value = element; // you had no value
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
}
function pGo() {
var x = document.getElementById("Product").value;
var txt = "";
var txt2 = "";
var txt3 = "";
var list = document.getElementById("Aggregator");
var aggrs = ["h", "e", "l", "l", "l", "o", "o"]; //simpler array
var length = aggrs.length;
var element = null;
if (x == "HII") {
txt = "Full ";
txt2 = "/";
txt3 = "/";
addOptions(list, aggrs, 5);
} else if (x == "DLG") {
txt = "Full";
txt2 = "/T";
txt3 = "/responses/";
addOptions(list, aggrs, 1);
} else if (x == "TBB") {
txt = "Full ";
txt2 = "/Trams";
txt3 = "/respo";
addOptions(list, aggrs, 1);
// strange additional option added
var oneAggr = [];
oneAggr[0] = aggrs[6];
addOptions(list, oneAggr, 1);
}
// form.elements.calcType.value = txt; // commented out due to not existing
// form.elements.transform.value = txt2;
// form.elements.calcResponse.value = txt3;
}
This is NOT really pretty (OK it is somewhat strange the options you set) even yet but at least it should work.
Sample to work with: http://jsfiddle.net/Qc4yD/