Develop Reference

Javascript is not working innerhtml

I have simple javascript. I just need to get a date from a textbox and pass to label for other purpose. But here is the problems. I able to alert the that get from textbox but when i try to load it into label. It show empty.
function get_WlcData() {
if ($('#DropDownList1').val() == 'Required') {
document.getElementById("wlcboard").style.display = '';
} else {
document.getElementById("wlcboard").style.display = 'none';
}
var x = document.getElementById("reservation").value;
alert(x);
document.getElementById("lblreserve").innerHTML = "testing";
document.getElementById("lblreserve1").innerHTML = "testasdad";
}
Here is the HTML
<input type="text" name="reservation" id="lblreserve" class="form-control col-md-7 col-xs-12" />
<asp:Label ID="lblreserve1" runat="server" CssClass="labelForm" Visible="False"></asp:Label>

The only thing that comes to mind is that your referencing an ID that doesn't exist
var x = document.getElementById("reservation").value;
In this code you're looking for the value of something with id="reservation" but that element does not exist in the HTML you have provided. Would that not be getElementById("lblreserve") - as this is the ID of the input element?
It also may not be showing because your label is set to Visible="False", meaning the value might be setting but it doesn't appear because it's hidden from view.

first you have to show the hidden label and then write text to that label
document.getElementById("lblreserve").style.display= "inline";
document.getElementById("lblreserve").innerHTML = "testing";
writing to textbox value using
document.getElementById('lblreserve').value='new value';

check whether any html tags entered in textarea using javascript

I'm having a simple commenting system, where i want the user should not type any html special chars, if they done like that they should give an alert of "html tags not allowed". How to do it?
while submitting, a ajax call is passed to another page to store it in db.
So in the javascript itself(before ajax call), how to find is there any html tags in the entered comment.
Any suggestion.

To check you can create an element in the DOM, inject the comment into it and use [element].getElementsByTagName('*') to check for any html element. If its length is not 0, there are html elements in the comment. Something like:
document.querySelector('#check').addEventListener('click', doCheck);
function doCheck(e) {
var chkEl = document.createElement('div'),
isok,
report,
value = document.querySelector('#testing').value;
if (!value.length) {return true;}
chkEl.innerHTML = value;
report = document.querySelector('[data-report]');
isok = !chkEl.getElementsByTagName('*').length;
report.setAttribute( 'data-report',
!isok
? 'you can\'t enter html here!'
: 'text looks ok' );
report.style.color = isok ? 'green' : 'red';
}
[data-report]:before {
content: attr(data-report);
}
<textarea id="testing" placeholder="type some stuff"></textarea>
<span data-report=""></span>
<br>
<button id="check">check for html</button>
Disclaimer: you should always check server side too.

You can use the following statement with regex:
if (/<[a-z][\s\S]*>/i.test(textareaContent)) {
alert("html tags not allowed");
}
Kooilnc is right. You should always check user input on server side as well.
Please see this question Check if a string is html or not

removing html tags in comment
function sanitizeString(str) {
str = str.replace(/[^a-z0-9áéíóúñü \.,_-]/gim, " ");
return str.trim();
}

Get the tag name of a form input value

How does one get the .tagName of a value passed in an HTML form input? This is to check whether the value that has been passed is an 'iFrame'. The input is to only accept iframes
For example:
//HTML
<input type="text" id="iFrame">
<button id="butt">Push</button>
//JavaScript
document.getElementById("butt").onclick = function(){
var iframe = document.getElementById("iFrame").value;
console.log(iframe.tagName);
}

I think you are looking for
var iframe = document.getElementsByTagName("iFrame")

I perhaps did not ask the question in the best way, initially.
I wanted to check if the value passed in the input field was an "iframe" (the input is to only accept iFrames). Since .value returns a string and not an HTML tag, getting the tag name through basic methods would not work. I needed another way.
For anybody else who needs a quick solution, this is how I managed to do it:
document.getElementById("submit").onclick = function(){
var iframe = document.getElementById("iFrame").value;
var check1 = iframe.match(/iframe/g);
var check2 = iframe.match(/frameborder/g);
var check3 = iframe.match(/http:/g);
var check = check1.length + check2.length + check3.length;
if (check === 4) {
alert("good!");
}
}

How to get value of textbox on page load, if it is null? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 1 year ago.
Want to check first that, Is text box contains nothing on page load ?
Then assign some value to it.
if (document.getElementById("txtBoxID").value == null) {
document.getElementById("txtBoxID").value = "Some text here";
}
But getting error
"JavaScript runtime error: Unable to set property 'value' of undefined or null reference"
How to do this?

It is because your DOM is not ready so wait until load complete:
window.onload=function(){
if (document.getElementById("txtBoxID").value == null) {
document.getElementById("txtBoxID").value = "Some text here";
}
};

You're probably trying to access the element before you defined in page, so you should execute that code on window.load event or move that code just before </body>
as alternative you may use the placeholder attribute supported on many modern browsers
<input type="text" id="txtBoxId" placeholder="Some text here" />
If the input has no value, the placeholder value will be shown instead
(polyfills of this behaviour are available for older browser)

You are trying to access the property 'value' on a null (or undefined) object, wich cause an exception, assuming your ID may not be txtBoxID

It is not safe to test null for the textbox value. You should use empty string instead.
I created a jsFiddle which shows this:
<input type="text" id="txtBx" />
document.getElementById("txtBx").value = null;
alert("test 1 textbox is null \n" + (document.getElementById("txtBx").value == null));
alert("test 2 textbox is empty string \n" + (document.getElementById("txtBx").value == ""));
http://jsfiddle.net/kZhHa/3/
(I'm using Chrome)

Are you doing your code above after the page is loaded?
window.onload = function() {
if (document.getElementById("txtBoxID").value == null) {
document.getElementById("txtBoxID").value = "Some text here";
}
}
Note that window.onload isn't best way to check whether page is loaded. It depends on the browser's spec. See window.addEventListener or window.attachEvent or IE.

Please try the below code, you need to set the value to the null first in the line
Name: <input type="text" id="myText" value=''>
Here is the demo :
function func() {
if (document.getElementById("myText").value == '') {
document.getElementById("myText").value = "Some text here";
} else {
alert("not null");
}
}
Name: <input type="text" id="myText" value="">
<p>Click the button to change the value of the text field.</p>
<input type="button" id="button" value="Click Me" onClick="func();" />

If you have JQuery available here is another way of accomplishing what you are asking for. In the document.ready function you can get the value of your text using the id of your textbox and wrapping it in JQuery. This will allow you to check and replace the value of your text box in the case that it is empty by using the .val() function
$(document).ready(function () {
if($('#id-of-your-textbox').val() == ' ')
{
$('#id-of-your-textbox').val('some text');
}
});

Changing an html "for" label with java script

I need to change a "for" label from an extension using javascript. I am unsure how to do this.
Thank in advance for the help!
<input id="theCheckboxId" type="checkbox" name="theCheckBoxName" />
<label for="theCheckBox">The text I want to change</label>

DEMO
First give the label an id
<label id="lbl1" for="theCheckBox">The text I want to change</label>
then do
document.getElementById("lbl1").setAttribute("for", "theCheckboxId");
EDIT
Wait, did you want to change the for value, or change the actual text of the label? In any event, here's how you would change the text:
if (label.textContent)
label.textContent = "New Text";
else if (label.innerText)
label.innerText = "New Text"
else
label.innerHTML = "New Text";

You didn't ask, but if you are using jQuery, you can do it a bit simpler via:
$('label[for="theCheckBox"]').text('your new text')
That said, the advice of giving it an ID instead is definitely the most performant option, though we don't know if you have access to the HTML or not (as if you did, you could probably just change the text right there)

To change the text, do this:
document.getElementById('theCheckboxId').nextElementSibling.textContent = 'newValue';
or this:
document.querySelector('#theCheckboxId + label').textContent = 'newValue';
Or if you need to support older browsers, do this:
function nextElement( el ) {
while( (el = el.nextSibling) && el.nodeType !== 1 );
return el;
}
nextElement( document.getElementById('theCheckboxId') ).innerHTML = 'newValue';
http://jsfiddle.net/3kEYw/