display input in divs doesn't work - javascript

I am trying to populate divs based on input. It works fine (I tried it.) at http://jsfiddle.net/2ufnK/2/ but when I implemented it at http://communitychessclub.com/cccr-pairing/test.html it didn't work. I wonder why...
<div class = "ui-widget white"><input id = "W01" name = "w01" type = "text" onchange="screen_W01()" class = "automplete-2" autofocus></div>
<div class = "ui-widget black"><input id = "B01" name = "b01" type = "text" onchange="screen_B01()" class = "automplete-2" ></div><br />
<div class = "ui-widget white"><input id = "W02" name = "w02" type = "text" onchange="screen_W02()" class = "automplete-2"></div>
<div class = "ui-widget black"><input id = "B02" name = "b02" type = "text" onchange="screen_B02()" class = "automplete-2"></div><br />
and:
<script>
function screen_W01(){var x = document.getElementById("W01"); var div = document.getElementById('WD01'); div.innerHTML = x.value;}
function screen_B01(){var x = document.getElementById("B01"); var div = document.getElementById('BD01'); div.innerHTML = x.value;}
function screen_W02(){var x = document.getElementById("W02"); var div = document.getElementById('WD02'); div.innerHTML = x.value;}
function screen_B02(){var x = document.getElementById("B02"); var div = document.getElementById('BD02'); div.innerHTML = x.value;}
</script>
the HTML to display the values...
<div id="WD01"></div>
<div id="BD01"></div>
<div id="WD02"></div>
<div id="BD02"></div>
But it just doesn't work: the values aren't displayed. Can someone suggest a better way (jquery preferred) or correct my coding error?

I would suggest using ONE function for all inputs and corresponding divs.
It uses "string manipulation" on the input id to deduct the target's id.
$(".ui-widget input").on("change", function(){
var inputID = $(this).attr("id"); // Ex: W01
// Add the "D"
var divID = inputID.substr(0,1)+"D"+inputID.substr(1); // Ex: W + D + 01
console.log(inputID);
var inputValue = $(this).val();
$(document).find("#"+divID).html(inputValue);
});
And the markup for the inputs would be (Just remove the "onchange=...")
<div class = "ui-widget white">
<input id = "W01" name = "w01" type = "text" class = "automplete-2" autofocus>
</div>

I might be way off on this; I'm fairly new to all of this as well. I do see you have
<div class = "ui-widget white"><input id = "W01" name = "w01" type = "text" onchange="screen_W01()" class = "automplete-2" autofocus></div>
and
function screen_W01(){var x = document.getElementById("W01"); var div = document.getElementById('WD01'); div.innerHTML = x.value;}
where your id = "W01" for both, but in your HTML values you have
<div id="WD01"></div>
which has id="WD01". Could this be the reason it's not working? All of the HTML values have the added 'D'. That's the only thing I can see based off what's here.

Related

how to insert a value of each iterations dynamically in an id using jquery?

I need to insert value of each iteration in id="funDirName" and id="addr1" and i have added the below code block for reference:
$(document).ready(function() {
var types = [];
var address1 = [];
var otherTypes = [];
$("input[id*='street_address_']").each(function(index) {
otherTypes.push($(this).val());
address1 = otherTypes[index].split(',');
var obj = {};
obj.funName = address1[0];
obj.addr1 = address1[1];
types.push(obj);
console.log("address1");
console.log(address1);
console.log(types);
var funDirName = address1[index].funName;
$('#funDirName').text(funDirName);
$('#addr1').text(address1[1]);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id = "funDirName" style = "margin: 0;" ></p>
<p id = "addr1" style = "margin: 0;" ></p>
// try to change
$('#addr1').val(address1);
// into
$('#addr1').text(address1);
/* val() method works only with form elements like inputs
*/

How can I select the id of the outermost element inside a parent element?

For example is I have a <div>, so inside my <div> i have some elements with id such as <label>, <span> and <p> the first element that occurs on my code is the <p>
<div id = 'cont' class = 'inc'>
<p id = '1' class = 'box'>
<label id ='aa' class = 'innerbox'><span id = 'aaa' class = 'innerboxs'></span></label>
</p>
<p id = '2' class = 'box'>
<label id ='aa' class = 'innerbox'><span id = 'aaa' class = 'innerboxs'></span></label>
</p>
<p id = '3' class = 'box'>
<label id ='aa' class = 'innerbox'><span id = 'aaa' class = 'innerboxs'></span></label>
</p>
</div>
Base on the example above, after the <div>, <p> is it's very first child element that occurs. Let's assume that I want to get their ID through this code.
function checkContents(){
var output = "";
var elements = document.querySelectorAll('.inc [id]'),
ids = Array.prototype.map.call(elements, function(element) {
return element.id;
});
output = 'ids = ' + JSON.stringify(ids, null, ' ');
alert(output);
}
This function outputs all the id inside the <div> with the inc class. I just want to get the id of the <p> with the classname of box, how can I get it?
If you're sure, there will only be <p> elements inside the div.inc
then you can simply do
var elements = document.querySelectorAll('.inc p');
If you're not sure what are the first level elements, then you can simply use the selector to select only the immediate children like
var elements = document.querySelectorAll('.inc > *'),
Replace this line
var elements = document.querySelectorAll('.inc [id]'),
with:
var elements = document.querySelectorAll('.inc>*'),
Here is a plunkr for it
Replace following line
var elements = document.querySelectorAll('.inc [id]')
with
var elements = document.querySelectorAll('.inc p[id]'),

HTML and JS : Capture Key Value pairs in HTML form

I have a Spring MVC application where I am required to capture a variable number of key value pairs based on user input. The HTML & JS part of the code to render the controls is as follows :
<tr>
<td><label>Attributes (Names & Value(s))</label></td>
<td><input id="Button1" type="button" value="Add" onclick="Button1_onclick()"/></td>
</tr>
<script language="javascript" type="text/javascript">
var NumOfRow = 1;
var attribs = {};
function Button1_onclick() {
NumOfRow++;
// get the reference of the main Div
var mainDiv = document.getElementById('MainDiv');
// create new div that will work as a container
var newDiv = document.createElement('div');
newDiv.setAttribute('id', 'innerDiv' + NumOfRow);
//create span to contain the text
var newSpan = document.createElement('span');
newSpan.innerHTML = "Attribute Type";
// create new textbox for type entry
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.setAttribute('id', 'DimensionType' + NumOfRow);
//create span to contain the text
var newSpan2 = document.createElement('span');
newSpan2.innerHTML = "Attribute Value(s)";
// create new textbox for value entry
var newTextBox2 = document.createElement('input');
newTextBox2.type = 'text';
newTextBox2.setAttribute('id', 'DimensionValue' + NumOfRow);
// create remove button for each attribute
var newButton = document.createElement('input');
newButton.type = 'button';
newButton.value = 'Remove';
newButton.id = 'btn' + NumOfRow;
// attach event for remove button click
newButton.onclick = function RemoveEntry() {
var mainDiv = document.getElementById('MainDiv');
mainDiv.removeChild(this.parentNode);
NumOfRow--;
}
// append the span, textbox and the button
newDiv.appendChild(newSpan);
newDiv.appendChild(newTextBox);
newDiv.appendChild(newSpan2);
newDiv.appendChild(newTextBox2);
newDiv.appendChild(newButton);
// finally append the new div to the main div
mainDiv.appendChild(newDiv);
}
}
</script>
I am not sure how to send this captured data back to my controller when the form is submitted. Please advise. Also if there is a better way to capture such data, those suggestions are most welcome as well.
What about making Capture key event in a text field you can do this :
<html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--
document.onkeypress = DisplayMsg;
function DisplayMsg(key_event)
{
if (document.all) //Checks for IE 4.0 or later
{
document.form1.text2.value = String.fromCharCode(event.keyCode);
}
else if (document.getElementById) //checks for Netscape 6 or later
{
document.form1.text2.value = String.fromCharCode(key_event.which);
}
else if (document.layers) //Checks for Netscape 4
{
document.form1.text2.value = String.fromCharCode(key_event.which);
}
}
//-->
</script>
<title>Capture Key Pressed</title>
</head>
<body>
<form name="form1">
<b>Type value in field: See what you typed:</b><br>
<input type = "text" name = "text1" onKeyPress="DisplayMsg(event)" size="20">
<input type = "text" name = "text2" onKeyPress="DisplayMsg(event)" size="20">
</form>
</body>
</html>

How to create a clickable list of divs with sub items using JavaScript

I want to create a list of clickable divs from arrays using Javascript, where the list structure has to be something like this:-
<div id="outerContainer">
<div id="listContainer">
<div id="listElement">
<div id="itemId"> </div>
<div id="itemTitle"> </div>
<div id="itemStatus"> </div>
</div>
<div id="listElement">
<div id="itemId"> </div>
<div id="itemTitle"> </div>
<div id="itemStatus"> </div>
</div>
</div>
</div>
I want to extract the values of itemId, itemTitle and itemStatus from three arrays itemIdData[ ], itemTitleData[ ] and itemStatusData[ ] respectively, to create the whole list.
Also, when I click on any of the listElements, I want an alert showing the itemId. Can anyone help me with this problem.
If you're using jQuery, then try something like this:
$("#listContainer").on("click", "div", function () {
console.log("jQuery Event Delegation");
alert($(this).find(">:first-child").attr("id"));
});
It's possible to write the same thing without jQuery, but will take further lines of code - I'm conveying the idea of delegation here (there are extensive existing docs and examples on the JQuery site, and here on this site).
NB: the code you're submitted in the question can't(shouldn't) have multiple DOM elements with same IDs (that's what classes are for - for semantically similar elements). Also, trying to emulate a list using divs instead of li elements is perhaps not best practice.
After a bit of experimentation, understood what I was doing wrong and how to get it done.
Here's the code:-
var listContainer = document.createElement("div");
document.getElementById("outerContainer").appendChild(listContainer);
for (var i = 0; i < json.length; i++) {
//create the element container and attach it to listContainer.
var listElement = document.createElement("div");
listElement.id = i;
listElement.className = "listItemContainer";
listElement.addEventListener("click", function(e){
var itemId = e.target.children[1].innerHTML;
alert(itemId);
});
listContainer.appendChild(listElement);
//create and attach the subchilds for listElement.
var itemTitle = document.createElement("span");
itemTitle.innerHTML = postTitleData[i];
itemTitle.id = 'title'+i;
itemTitle.className = "itemTitle";
listElement.appendChild(itemTitle);
var itemId = document.createElement("div");
itemId.innerHTML = postIdData[i];
itemId.id = 'id'+i;
itemId.className = "itemId";
listElement.appendChild(itemId);
var itemStatus = document.createElement("span");
itemStatus.innerHTML = postStatusData[i];
itemStatus.id = 'status'+i;
itemStatus.className = "itemStatus";
listElement.appendChild(itemStatus);
}
Tried something like this which isn't quite working!
var listContainer = document.createElement("div");
document.getElementById("outerContainer").appendChild(listContainer);
var listElement = document.createElement("div");
listContainer.appendChild(listElement);
listElement.className = "listItemContainer";
for (var i = 0; i < json.length; i++) {
var itemId = document.createElement("div");
itemId.innerHTML = idData[i];
listElement.appendChild(itemId);
itemId.className = "itemId";
var itemTitle = document.createElement("div");
itemTitle.innerHTML = titleData[i];
listElement.appendChild(itemTitle);
itemTitle.className = "itemTitle";
var itemStatus = document.createElement("div");
itemStatus.innerHTML = statusData[i];
listElement.appendChild(itemStatus);
itemStatus.className = "itemStatus";
listElement.appendChild(document.createElement("hr"));
var elementId = 'ListElement'+i;
listElement.id = elementId;
listElement.addEventListener("click", function(){
alert(document.getElementById(elementId).innerHTML);
});
}

Using $('selector').each() to modify and update html of DOM elements?

I am trying to create an event listener across a bunch of links on my site. These links are generated within a loop, so I end up with <a class = "replyButton" id = "replyID"<? echo $x; ?> etc.
I'm trying to use the code below to reveal an input box when each respective link is clicked, but with no luck. I can get it to work using plain JS too, in one case, but not using JQuery, extrapolated across several like this. Any help would be really awesome.
window.onload = function(){
$('.replyButton').each(function(index){
var domElementId = "replyArea" + index;
domElementId.onclick = function() {
var replyFieldHtml = '<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>';
document.getElementById('domElementId').innerHTML = replyFieldHtml;
console.log('domElementId');
return false;
}
});
}
Edit: here is the loop im using to generate the html...
$x = 0;
while ($x < 8){
$x++;
$r = $wallarray - $x;
$postContent = $wall_content['wall_posts'][$x-1];
$postUser = getUserNameById($wall_content['userID'][$x-1]);
?>
<div class = "row">
<div class = "span6">
<div class = "span1" id = "wallPhoto"><img src ="assets/img/usr/profile_holder.jpg></div>
<div class = "span4">
<div class = "span4" id = "wallFeedStyle"><a id = "wallUserLink" href = "#"><b><? echo $postUser; ?></b></a></div>
<div class = "row">
<div class = "span5">
<div class = "span4" id = "userPost"><? echo $postContent; ?></br><p class = "wallsmall"></i>Like ยท<a class = "replyButton" id = "replyButton<? echo $x; ?>" href="#"></i>Reply</a></p></div></div>
</div>
<div class = "row">
<div class = "span5">
</div>
</div>
<div class = "row" id = "replyArea<? echo $x; ?>"></div>
</div>
<?
}
?>
You're using the variable in the wrong manner. Try this:
window.onload = function () {
$('.replyButton').each(function (index) {
var domElementId = "replyArea" + index;
$('#' + domElementId).on('click', function () {
var replyFieldHtml = '<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>';
$(this).html(replyFieldHtml);
console.log(domElementId);
return false;
});
});
}
I ended up using the code below to solve this one, after digging deeper into the history behind .on() and .bind(). Thanks for all your help!
$('a.replyButton').on("click", function(){
var index = $(this).attr('id');
$('#replyArea'+index).html('<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>');
});
I ended up changing the "replyLink" ID attribute to just the number. So there were a bunch of /<.a> with class replyButton, and ID attributes as a number. And it seems to do the job nicely, no need to setup the .each() loop too.

Categories

Resources