We Keep Coding

Changing the text and adding HTML to the text of a checkbox inside a label

Using plain vanilla JS is there a way of being able to change the text content that appears beside a checkbox when that input is nested within a label tag? Specifically adding a HTML link to the text?
I can change the text no problem but setting the content to display HTML just ends up rendering the HTML to screen. So, in the following example I want to make the Terms and Conditions text a link.
<label for="custom_field">
<input type="checkbox" name="custom_field" id="custom_field" value="I have read the terms and conditions"> I have read the terms and conditions
</label>
I've been through using nodes and siblings and while I can change the text either one of two things happen - I either end up overwriting all the content between the label tags and therefore killing the checkbox.
Or my anchor tag gets rendered to screen instead of interpreted.
Any ideas where I'm going wrong?
Here's the latest code I'm trying:
let terms = document.querySelector('#custom_field');
if(terms){
terms.nextSibling.innerHTML = "I have read and agree to the <a href='#'>terms and conditions</a>";
}
NOTE: Due to restrictions in my CMS I can't edit the content of the label directly to just insert the relevant HTML. So what I need to work with is as per the first code block.

innerHTML doesn't work because terms.nextSibling is a Text node, which doesn't have an innerHTML property.
You'll need to split the label's Text node on "terms and conditions", then move that node into a link:
const terms = document.querySelector('#custom_field');
if (terms) {
const fullText = terms.nextSibling;
const link = document.createElement('a');
link.href = '#';
const tcIndex = fullText.textContent.indexOf('terms and conditions');
const termsText = fullText.splitText(tcIndex);
// If there's more text after "terms and conditions", you'll need to split again
// termsText.splitText('terms and conditions'.length);
fullText.parentElement.insertBefore(link, termsText);
link.append(termsText);
}
<label for="custom_field">
<input type="checkbox" name="custom_field" id="custom_field" value="I have read the terms and conditions"> I have read the terms and conditions
</label>

Why not add an extra HTML tag?
<label for="custom_field">
<input type="checkbox" name="custom_field" id="custom_field">
// Added Span
<span id="result"> I have read the terms and conditions</span>
</label>
<script>
let terms = document.querySelector('#custom_field');
if(terms){
document.getElementById('result').innerHTML = "I have read and agree to the <a href='#'>terms and conditions</a>";
}
</script>

I believe that this is the most basic way to do it using plain JavaScript. Since you have a text node after your checkbox, you'll need to first find the text you want to replace, and then replace it with your HTML that is wrapped in a new node that can contain HTML (the existing text node can't be converted).
let terms = document.querySelector('label');
for (var i = 0; i < terms.childNodes.length; i++) {
var textNodeTrimmed;
if (terms.childNodes[i].nodeType === 3) textNodeTrimmed = terms.childNodes[i].nodeValue.trim()
if (textNodeTrimmed.length > 0 && textNodeTrimmed === "I have read the terms and conditions") {
var replacementNode = document.createElement('span');
replacementNode.innerHTML = "I have read and agree to the <a href='#'>terms and conditions</a>";
terms.childNodes[i].parentNode.insertBefore(replacementNode, terms.childNodes[i].nextSibling);
terms.childNodes[i].remove();
}
}
<label for="custom_field">
<input type="checkbox" name="custom_field" id="custom_field" value="I have read the terms and conditions"> I have read the terms and conditions
</label>

Full Working Example
you can add the value by plain js using parentnode
then replacing the old text by cutting the checkbox using children[0].outerHTML and pasting it again with the new content
that new content can include HTML anchors or any other tags

Javascript: How to print input to <div> selected by class?

Edit: Thanks for the helpful answers so far! I'm still struggling to print the input to the "right" div, though. What am I missing?
Next to the input field, there is an option to select either "left" or "right". Depending on the selection, the input is to be printed eiether left or right on the click of a button. This is what I have - but it only prints to the left, no matter the selection.
jQuery(document).ready(function(){
$('.button').click(function(){
$('.input').val();
if ($('select').val() == "left"){
$('div.left').html($('.input').val());
}
else {
$('div.right').html($('.input').val());
}
});
});
</script>
Sorry if this is very basic - I am completely new to JS and jQuery.
I'm trying to print input from a form into a div. This is part of the source HTML modify (it's for a university class):
<input type="text" class="input">
<div class="left">
</div>
<div class="right">
</div>
Basically, text is entered into the field, and I need to print this text either to the "left" or the "right" div when a button is clicked.
So far, I have only ever dealt with divs that had IDs, so I used
document.getElementById("divId").innerHTML = ($('.input').val());
But what do I do now when I don't have an ID? Unfortunately, changes to the HTML source are not an option.
Thanks in advance!

Just use normal selectors, like css and jQuery does.
https://api.jquery.com/category/selectors/
in your case:
$('div.left').html($('.input').val());

As you see there are many ways to do this. You can get elements by tag name, class, id...
But the most powerful way is to get it with querySelector
function save() {
var input = document.querySelector('input').value;
document.querySelector('div.left').innerHTML = input;
}
<input type="text" class="input">
<button onclick="save()">Save</button>
<div class="left"></div>
<div class="right"></div>

There are plenty of other ways to target HTML elements, but the one you're looking for in this case is getElementsByTagName(). Note that this returns a NodeList collection of elements, so you'll additionally need to specify the index that you wish to target (starting at 0). For example, if you want to target the second <div> element, you can use document.getElementsByTagName("div")[1].
This can be seen in the following example:
let input = document.getElementsByTagName("input")[0];
let button = document.getElementsByTagName("button")[0];
let div2 = document.getElementsByTagName("div")[1];
button.addEventListener("click", function(){
div2.innerHTML = input.value;
});
<input type="text">
<button>Output</button>
<br /><br />
<div>Output:</div>
<div></div>

Since you have unique class names for each element, document.getElementsByClassName can be used. This will return an array of elements containing the class. Since you only have one element with each class name, the first element of the returned array will be your target.
<input type="text" class="input">
<button onclick="save()">Save</button>
<div class="left"></div>
<div class="right"></div>
<script>
function save() {
var input = document.getElementsByClassName('input')[0].value;
document.getElementsByClassName('left')[0].innerHTML = input;
}
</script>

This is one of the many ways to do what you want:-
Write the following in console:
document.getElementsByTagName("div");
now you can see the total number of div elements used in your current document/page.
You can select one of your choice to work on by using "index number"(as in array index) for that particular div.
Lets say your div having class name = "right" is the 3rd one among the other div elements in your document.
This will be used to access that div element.
document.getElementsByTagName("right")[2].innerHTML = "whatever you want to write";

How to pass element to javascript function and access the first child

I am creating check-boxes in my ASP.NET code behind a file in C#. I am adding an attribute value before adding the control to the page, therefore ASP is adding the attribute to the span surrounding the check-box and the label for the text. It looks like this:
<span data-bind="visible: showCheckBox(this)">
<input id="" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1">
<label for="">Outside Source</label>
</span>
I have a function called showCheckBox() written in Knockout.js. It determines if the target checkbox should be displayed, based on the value of the selected item in the drop down list immediately preceding it. For example, if the value of the selected item in the drop down list is 1, then the target checkbox with a corresponding value of 1 would be visible. That function looks like this:
function showCheckBox(span) {
var value = span.firstChild.value;
return value == reason();
}
reason() is the view model variable that holds the value of the selected drop down list item.
No matter what I do, I cannot get the value of the check-box to be sent correctly. It is always undefined.

The first child in this HTML is actually a textNode, which firstChild will return if that is what is found. These are the actual characters it is returning: "↵ " (A return and a space).
You can use the firstElementChild property instead:
function showCheckBox(span) {
var value = span.firstElementChild.value;
return value == reason();
}
Also, don't forget to check the support tables for firstElementChild.

After thinking about it for a while also, a coworked suggested this solution.
Instead of assigning the value of the check box as the ID that corresponds to the drop down list view model variable, he suggested I assign it in the data-bind attribute instead. In my C# code behind file, that looks like this
cb.Attributes.Add("data-bind", String.Format("visible: showCheckBox({0})", reasonDetails[i].ReasonForSendingNoticeID.ToString()));
Which looks like this when displayed in HTML
<span data-bind="visible: showCheckBox(1)" style="display: none;">
<input id="" type="checkbox"
name="ctl00$MainContent$SecondaryForm$ctl00" value="Outside Source">
<label for="" style="display: inline;">Outside Source</label>
</span>
Then I changed the function as follows
function showCheckBox(id) {
return id == reason();
}
Doing it like so allowed us to directly pass the value into the function without having to pass the element or its child.
Thank you for the help and suggestions.

The problem is hidden, and it's because you're for a large part not using KnockoutJS at all. You should check the docs for the KnockoutJS checked binding.
There should very likely be no reason to check the DOM inside view models, not even those handling visibility. Instead, use the view model. You haven't quite posted a complete minimal repro, but here's what it should more or less look like:
function ViewModel() {
var self = this;
self.reasons = [{id: 1, txt: "Main reason"}, {id: 2, txt: "Other reason"}];
self.reason = ko.observable(self.reasons[0]);
self.showCheckBox = ko.computed(function() {
return self.reason().id === 1;
});
self.hasOutsideSource = ko.observable(false);
};
ko.applyBindings(new ViewModel());
pre { font-family: consolas; background: smoke; border: 1px solid #ddd; padding: 5px; margin: 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: reasons, value: reason, optionsText: 'txt'"></select>
<span data-bind="visible: showCheckBox">
<label>
<input data-bind="checked: hasOutsideSource" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1">
Outside Source
</label>
</span>
<hr>
This would be sent to your server / debug info:
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
If you can't take the above approach, I strongly recommend considering skipping the use of KnockoutJS, because it'll probably cause you more trouble than it'll help you if you do to much DOM manipulation on your own.

angularjs removing special characters in dynamic form elements

I am trying to use angularjs dynamic form elements but when I type something in inputs, there are appearing many special characters []"": and field, value .etc in textarea, I just want to see in textarea what I wrote in inputs ,
this is what I am working on it http://plnkr.co/edit/JbjqjAoQ3odBhXF1a13r?p=preview
sorry for my poor english,,,

What Chris Story says is correct. You are trying to model the text value of the <textarea> to an array of objects, inputs
If you are just trying to display the results like it seems, a <textarea> is not the way to go. You can display them in a simple list, like this:
<ul>
<li ng-repeat="input in inputs">{{input.field}} = {{input.value}}</li>
</ul>
EDIT
To display it in a <textarea>, you will need to store the list as string to use. This can be done by appending each item into a single string each time there is a change to an input value using ng-change.
Change the inputs to utilize the ng-change:
<div ng-repeat="input in inputs">
<input type="text" ng-model="input.field" ng-change="inputChanged()" />
<input type="text" ng-model="input.value" ng-change="inputChanged()" />
<button ng-click="removeInput($index); inputChanged()">Remove</button>
</div>
And create the function that is called to maintain the string:
$scope.inputChanged = function() {
$scope.listString = "";
for(var i = 0; i < $scope.inputs.length; i++) {
var field = $scope.inputs[i].field;
var value = $scope.inputs[i].value;
$scope.listString += field + " = " + value + "; ";
}
}
And finally, use this $scope.listString in the <textarea>:
<textarea rows="22" cols="55" ng-model="listString"></textarea>
I have forked your Plunkr here
The behavior does not make much sense from a UX perspective, but this seems to match your requirement. An option that might make sense is to add disabled="true" to the <textarea> so it can not be edited.

The issue is that you are rendering {{inputs}} and inputs is an Array.

jQuery templates - how to get value of user-edited input

I run into a problem while using jQuery templates (http://api.jquery.com/category/plugins/templates/)
First: defined a template like this one:
<td>
<input type="text" value="${Text}" />
</td>
When it renders user types some text into it, but I don't know how to get what he types. All I receive is old "value" attribute value.
The code I use to get data back:
var enteredData = row.tmplItem();
var note = enteredData.data;
var data = {};
data.NoteId = note.NoteId;
data.NoteText = note.Text;
I'd be grateful for any help!
Thank you!

You should be able to use
$('input').val()
to get the entered value
(obviously it would be best to give the input an id so you don't call all inputs on the page!)

try this:
<td>
<input type="text" value="${Text}" id="text${id}"/>
</td>
and
$('#text'+ id).val() //if you want a specific one of more inputs
or just set a static id if you only have one....