Simple javascript to read textox values and display on a blank page - javascript

I need a simple javascript that reads the value of the textbox (input) and possibly save it to a txt file or display on a blank page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script type="text/javascript">
<!--
function getdata()
{
var val=document.getElementById('t1').value;
var win=open("");
win.document.write(val);
}
//-->
</script>
</head>
<body>
<input id="t1" type="text" />
<input id="B1" type="button" value="getdata" onclick="getdata()"/>
</body>
</html>

Related

window.open() opening a tab instead of a window in Chrome using user input as url source

Not matter what I try, this code is still opening in a new tab. Any ideas on how to modify this to make a new window open?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cast Challonge</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.open("http://challonge.com/"+inputvalue+"/module?theme=5928&show_final_results=0&multiplier=0.3&show_tournament_name=1&scale_to_fit=1"),"_blank","width=1323,height=816";
});
});
</script>
</head>
<body>
<input type="text" value="" id="input">
<button type="button" id="button">Submit Tournament ID</button>
</body>
</html>
Sharing the correct answer in case anyone ever needs this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cast Challonge</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.open(("http://challonge.com/"+inputvalue+"/module?theme=5928&show_final_results=0&multiplier=0.3&show_tournament_name=1&scale_to_fit=1"),"_blank","width=1323,height=816";)
});
});
</script>
</head>
<body>
<input type="text" value="" id="input">
<button type="button" id="button">Submit Tournament ID</button>
</body>
</html>
Change '_blank' with your new window name. Example: 'New Window Test'

Can we use scriptlets inside Javascript?

Here is my Code:
<%#page contentType="text/html"%>
<%#page pageEncoding="UTF-8"%>
<%#page import="java.sql.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example of Java Server Page with JDBC</title>
</head>
<script>
function myFunction() {
var x='<% request.getParameter("ServerName"); %>';
alert(x);
</script>
<body>
<form>
ServerName: <input type="text" name="ServerName" required> <br><br>
<input type="submit" id="btnSubmit" name="btnSubmit" />
</div>
</form>
</body>
</html>
Here in the above function onclick of a button i want to execute the scriptlets which is inside javascript?
you can also use this:
<%#page contentType="text/html"%>
<%#page pageEncoding="UTF-8"%>
<%#page import="java.sql.*"%>
<%
String ServerName = (String)request.getParameter("ServerName");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example of Java Server Page with JDBC</title>
</head>
<script>
function myFunction() {
var x='<%=ServerName%>';
alert(x);
</script>
<body>
ServerName: <input type="text" name="ServerName" required> <br><br>
<input type="submit" id="btnSubmit" name="btnSubmit" />
</div>
</form>
</body>
</html>
You can, but if you want the result to be passed to the JavaScript you have to output something.
var x='<%= request.getParameter("ServerName"); %>';
^ output!
… and unless you take measures to escape that data, you render yourself vulnerable to XSS attacks.
(And, obviously, this won't work until the form is actually submitted)

Javascript position of onchange assignment

I have a checkbox and a text input. I want that the text input is only enabled if the checkbox is checked. I found an answer to this problem here, but the following code did not work:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>
However, I noticed that the code works if I move the < script > environment below the < input > boxes like that
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</body>
</html>
Why does the position of the < script > environment play a role for the onchange attribute?
That's because the page is parsed from the top, and each element is added as soon as it is parsed.
When the script tag has been parsed the code will run right away. At that time the input tags hasn't been parsed, so the input elements doesn't exist yet.
By placing the script tag below the input tags, the script runs after the input elements has been created.
Instead of rearranging the code, you can use the onload event to make sure that the code runs after the page is completely parsed:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>

How to add value from a iframe using javascript?

I have a sample code:
in index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>
<input type="text" value="" name="test" id="text_input">
<iframe src="iframe.html">
</body>
</html>
And iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe</title>
<script>
function getValue(text) {
document.getElementById('text_input').value = text;
}
</script>
</head>
<body>
Click
</body>
</html>
When click on a tag, value "text" can not be passed on from iframe to index.html, how to fix it ?
Use parent to get parent window of iframe. Try this
function getValue(text) {
parent.document.getElementById('text_input').value = text;
}

pass property as argument in javascript

I am using the following code.I want to pass property bgcolor as argument
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function myFunction(key,valu)
{
document.body.key=valu;
}
</script>
</head>
<body onLoad="myFunction('bgColor','red');">
</body>
</html>
But it is not working.
you can try
document.body[key]=valu;
key is string in this case.
If you're passing a property as a string, you must use the square-bracket notation rather than dot notation:
function myFunction(key,valu)
{
document.body[key]=valu;
}
I suggest this since bgColor and onload attribute is so '90s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function setStyle(key,valu) {
document.body.style[key] = valu;
}
window.onload=function() {
setStyle("backgroundColor","red")
}
</script>
</head>
<body>
</body>
</html>
It won't work ever,
try this
function change(key , value)
{
document.body.setAttribute(key, value);
}

Categories