Develop Reference

How to create a password which will reveal a hidden message in html and js

I'm new to HTML and js, and I am currently trying to make it so that the user will type in a password, and if correct, it will reveal a hidden message. This is what I got so far. I can't get it to work.
Here's the HTML:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<p id="hidden_clue"></p>
And here's the js:
var pass1 = 3736.62417618;
var input = document.getElementById("userInput").value;
alert(input);
if (input == pass1) {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}

You were close, but on the getElementById you need to select the ID of the element that you want to get.
function othername() {
var pass1 = 3736.62417618;
var input = document.getElementById("userInput").value;
if (input == pass1) {
document.getElementById("hidden_clue").textContent = "Hello JavaScript!";
}
}
<form id="form" onsubmit="return false;">
<input type="password" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<p id="hidden_clue"></p>

Trying to limit the max characters in a textarea

I'm trying to limit the max characters in a textarea, using JS, i leave here my HTML & JS code:
HTML-->
<form id="formu" action="ok.html" method="post" enctype="multipart/form-data">
<p>
<label for="observaciones">Observaciones:</label>
<textarea id="observaciones" cols="30" rows="5"></textarea>
</p>
</form>
JS-->
window.onload=function(){
document.getElementById("observaciones").addEventListener('keypress',function(){maxlong(document.getElementById("observaciones")),150},false);
}
function maxlong(obj,maxlength){
return(obj.value.length<=maxlength);
}

your event handler doesn't actually do anything. You need to prevent the default beahviour of the event (with the preventDefault method on the event object).

You can do this by html :
<textarea maxlength="50"> </textarea>

try this:
function limiter() {
var area = document.getElementById("content_txt");
var message = document.getElementById("message");
var maxLength = 160;
var checkLength = function () {
if (area.value.length <= maxLength) {
message.innerHTML = (maxLength - area.value.length) + " characters remainging";
}
}
setInterval(checkLength, 300);
}
and this is the textarea
<textarea style="resize:none; margin-bottom: 0px;" id="content_txt"
name="TextArea1" runat="server"
maxlength="160" onkeyup="return limiter();" ></textarea>

<script>
function maxLength(obj){
if(obj.value.length <=150){
return true;
}else{
return false;
}
}
</script>
<textarea onkeypress="return maxLength(this);"></textarea>

This is basic to set maxlength:
<textarea maxlength="50">
Enter text here...
</textarea>

Solved doing this:
function maxlong(elEvento){
var evento=elEvento||window.event;
var obser=document.getElementById("observaciones").value;
if(obser.length>=15){
evento.preventDefault();
}
}
And also i had an extra "{" that made the program not working well...

How to get a script to activate on modal load?

I have a modal that is prepopulated with some text for the user to edit, with a limit of 500 characters. I wanted to include a 'remaining character' notification. I have it working for the onKeyUp, but I want it to initialize with how many characters are left (right now the span is empty until the user hits a key). Neither of the onLoad functions are working (maybe onLoad is wrong? Fairly new here). Any help is appreciated!
<div id="tooltip-modal" style="display:none">
<script language = "Javascript">
maxLength = 500;
var container = $("#tooltip_body");
function taCount(tooltipBody,Cnt) {
objCnt = createObject(Cnt);
objVal = tooltipBody.value;
if (objCnt) {
objCnt.innerText=maxLength-objVal.length;
}
return true;
}
function createObject(objId) {
if (document.getElementById) return document.getElementById(objId);
else if (document.layers) return eval("document." + objId);
else if (document.all) return eval("document.all." + objId);
else return eval("document." + objId);
}
onLoad="alert('Loaded')";
onLoad="return taCount(container,'myCounter')";
</script>
<body>
<form method="post" action="#" id="update-tooltip">
<h2>Edit the description of this item:</h2>
<input type="hidden" name="tooltip_id" id="tooltip_id">
<textarea onKeyUp="return taCount(this,'myCounter')" name="tooltip_body" id="tooltip_body" class="input" rows=7 wrap="physical" cols=40></textarea>
<br><br>
You have <strong><span id="myCounter" ></span></strong> characters remaining for your description...</h3><br>
<button type="submit" value="Update" id="update" >Update</button>
</form>
</body>
</div>

Pretty sure that onload has to be tied to an element on the page, such as the body tag.
http://www.w3schools.com/jsref/event_onload.asp

Split urls/text by spaces into 2 boxes Javascript Only no libraries

Well so far i havent been able to get it to change the input box value.
What i want it to do?
I want it to take the text from the first box. And when you click the button splits it and appends them to the 2nd and 3rd box.
I don't want to use jquery or any libraries purely javascript.
Any questions ask away.
Not sure what im doing wrong here. Seems it should work. Any help? Thanks
Edited this is working for what i need.... not sure if its the best way but it does work
Code
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var urls_1;
var split_text;
function addto_boxes(form) {
var split_text = document.getElementById("text_to_split").value;
var urls_1 = split_text.split(" ", 100000);
document.getElementById("input_box1").value = document.getElementById("input_box1").value + urls_1[0] + " ";
document.getElementById("input_box2").value = document.getElementById("input_box2").value + urls_1[1] + " ";
}
</SCRIPT>
</HEAD>
<BODY>
<input id="Split" type="button" value="Add to boxes" onclick="addto_boxes(this.form);"/><Br>
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea><Br>
<FORM NAME="myform" ACTION="" METHOD="GET">Put 1st urls in this box:
<textarea NAME="inputbox" id="input_box1" VALUE=""rows="4" cols="75"></textarea><Br>
Put 2nd urls in this box: <Br>
<textarea NAME="inputbox2" id="input_box2" VALUE=""rows="4" cols="75"></textarea><Br>
<INPUT TYPE="reset">
</FORM>
</BODY>
</HTML>

This should work for you
HTML
<input id="Split" type="button" value="Add to boxes" />
<Br>
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea>
<Br>
<FORM NAME="myform" ACTION="" METHOD="GET">Put 1st urls in this box:
<textarea NAME="inputbox" id="input_box1" VALUE="" rows="4" cols="75"></textarea>
<Br>Put 2nd urls in this box:
<Br>
<textarea NAME="inputbox2" id="input_box2" VALUE="" rows="4" cols="75"></textarea>
<Br>
<INPUT id="reset" TYPE="reset">
</FORM>
Javascript
var aBox1 = [];
var aBox2 = [];
document.getElementById("Split").addEventListener("click", function () {
var urls_1 = document.getElementById("text_to_split").value.trim().split(" "),
url1 = urls_1[0] || "",
url2 = urls_1[1] || "";
if (url1.length) {
aBox1.push(url1);
}
if (url2.length) {
aBox2.push(url2);
}
document.getElementById("input_box1").value = aBox1.join(" ");
document.getElementById("input_box2").value = aBox2.join(" ");
}, false);
document.getElementById("reset").addEventListener("click", function () {
aBox1.length = 0;
aBox2.length = 0;
}, false);
On jsfiddle

Stopping action if requirements are not met

I want to check the validation of two text boxs if either one is empty. It showed show an error as an innerHTML and if they are both filled in. It will then continue to action. Here is my code:
function go()
{
var toCheck = document.getElementById('myAnchor');
if (toCheck != '') {
return true;
}
else
{
document.getElementById('myAnchor').innerHTML = 'Fred Flinstone';
}
}
this does set the innerHTML but still continues with the action. How can I stop it from continuing?
Thank you!

You should check the value of text box,
Change the code to
function go()
{
var toCheck = document.getElementById('myAnchor').value;
if (toCheck != '') {
return true;
}
else
{
document.getElementById('myAnchor').innerHTML = 'Fred Flinstone';
}
}

add the onsubmit on the form:
<form onsubmit="return true;">
...
</form>
if the return is false it will stop from submitting an opposite scenario if it's true. you could also call your functions on that attribute and do the same thing then if it doesn't fit the condition it will stop from submitting your form and do the other process you desire to happen.

Textfields use the value attribute.
document.getElementById('myAnchor').value = 'Fred Flinstone';
An empty textfield would have a value of "".
function go()
{
var toCheck = document.getElementById('myAnchor');
if (toCheck.value != "") {
return true;
}
else
{
toCheck.value = 'Fred Flinstone';
}
}
Here's a working example.
<!DOCTYPE html>
<html>
<body>
<form name="form" action="data.php">
<label style="float:left">
<font face="Comic Sans MS">* username &nbsp
</label></font>
<input type="text" id='textfield' name="name" size="40" style="float: left;">
<label id='myAnchor' style="display: inline; padding-left: 20px;"></label> <br/> <br/>
<label style="float:left"><font face="Comic Sans MS">* password &nbsp</label></font>
<input type="text" name="pwd" size="40" style="float: left;">
<label id="myAnchor2" style="display: inline; padding-left: 20px;">
</label> <br/> </p> <input type="button" value="LogIn" onClick="return go();"> </form>
</body>
<script>
function go()
{
var toCheck = document.getElementById('textfield');
if (toCheck.value != "") {
return true;
}
else
{
toCheck.value = 'Fred Flinstone';
}
}
</script>
</html>

In your question you said that
I want to check the validation of two text boxs
In that case you should be checking the value of textboxes, not the myAnchor.
I would change your html code like this:
<input type="text" name="name" id="name" size="40" style="float: left;">
<input type="text" name="pwd" id="pwd" size="40" style="float: left;">
<input type="submit" value="LogIn" onSubmit="go();">
adding id to the input boxes
then change the onClick event to onSubmit. that way you can perform javascript validation in the function, then submit the form if all goes well, otherwise display the error.
Then your script will be like...
function go() {
var name = document.getElementById('name').value,
pwd = document.getElementById('pwd').value;
if (name != '' && pwd != '') {
document.forms["form"].submit();
}
else {
document.getElementById('myAnchor').innerHTML = 'Fred Flinstone';
}
}