Display javascript value within HTML body - javascript

i have the following relevant code in the header of my html doc:
test1.value = System.Gadget.Settings.read("Date1");
And I'm trying to display the test1 value in the body of my html doc.
It displays when i use:
<input type="text" id="test1" />
But isn't working when i use (in the body):
<script type="text/javascript">
document.write(document.getElementById('test1').id);
</script>
Any suggestions would be greatly appreciated

This might be obvious, but why not just write:
<html>
<body>
<div>Here's the Date1 value:
<script type="text/javascript">
document.write(System.Gadget.Settings.read("Date1"));
</script>
</div>
</body>
</html>
If this does not do what you want, please explain what your expected output is.

That doesn't work because your script is in the header of your page and the declaration os the input text1 is in the body .. so what happends is that when the browser runs the script it won't find the object.
You will need something like this ...
<html>
<body>
<input type="text" id="test1" />
<script type="text/javascript">
document.write(document.getElementById('test1').id);
</script>
</body>
</html>

Related

Unable to select text field with javascript

I must be missing something basic. I can't give the textfield focus with the following:
<head>
</head>
<body>
<input id="hi"></input>
<script>
document.getElementById('hi').focus();
document.getElementById('hi').select();
</script>
</body>
</html>
Try this in Script:
document.getElementById("hi").innerHTML

html button disappears after onclick() event

Hello guys I am New to javascript I want to know why does the html button disappears as soon as i click it. The browser shows the text but the button disappears. here is how my html looks likes
<html>
<head>
<script type="text/javascript">
function funcname(){
document.write("<br/> <br/> <br/> some text");
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>
The write() method writes HTML expressions or JavaScript code to a document.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
Answer from: source
<html>
<head>
<script type="text/javascript">
function funcname()
{
document.body.innerHTML += "Some Text";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>
Try above code it will work fine.If you use document.write() overwritten body so should be use document.body.innerHTML .
The Document.write function overwrites the document content when called, as stated by the Mozilla Developer Network:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Document/write
document.write() will override your whole body element. If you want to override only specific parts, you could define a target and use innerHTML to change the text.
<html>
<head>
<script type="text/javascript">
function funcname(){
document.getElementById("someParagraph").innerHTML = "Paragraph changed!";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
<p id="someParagraph">Hey<p>
</body>
</html>

JavaScript function "not defined" after importing jQuery

I have the following (simplified) code:
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" />
<script language="javascript" type="text/javascript">
function testFunction() {
alert('It works');
}
</script>
</head>
<body>
<form method="post" action="test.html" onsubmit="testFunction()">
<input type="submit" value="Test" />
</form>
</body>
</html>
My testFunction() function works fine by it self, that is until I import jQuery with the line
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" />
Now it fails and tells me that
Uncaught ReferenceError: testFunction is not defined
I am hoping this is a newbie mistake and that I am missing something obvious. Notice that I haven't even try to use jQuery yet.
You need to close the <script> tag fully.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Works great on jsfiddle after changing:
http://jsfiddle.net/PVYM9/
Also, in HTML5 you can shorten the doctype to just <!DOCTYPE html>, and you don't need to define type properties for your <script> tags. See jsfiddle for example.
You have to close the script tag in the right way
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
(note the closing </script> tag)
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> // close the script tag properly
<script type="text/javascript"> // there is no need of writing language="javascript"
function testFunction() {
alert('It works');
}
</script>
hey man there is no need of writing language="javascript" because type already specifies it!
Despite being valid XML, many HTML elements (such as script, textarea etc) don't work well in most browsers if you close them using a trailing slash (i.e. <element />). You need to create open and close tags for them to work (<element></element>). That seems to be true for XHTML as well.
Others, like your input tag, work fine the way it is. I don't know why some require a closing tag and others not, neither a list of those elements, I just know some of them from experience...

How to modify the value of text input with js/jquery?

I would like to dynamically modify the values of certain form elements, more specifically certain input text fields. So far, whenever I load my html page, I am just getting the blank input field, but I am expecting it to contain the value of 1. Here is an example of how I am trying to do this.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myForm = $(this).getElementById('form1');
myForm.elements['Q01'].value = '1';
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
The reason this needs to be done dynamically is because the value of form could be different every time. Am I even approaching this correctly? Suggestions on how I can achieve my intended functionality?
-- EDIT --
None of the solutions seem to be doing the trick. Here is an update of my code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("#Q01").val("1");
$("#form1 input[name='Q01']").val("1");
//$("input[name='Q01']").val('1');
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
I am expecting when I load the page, that the input text will have 1 in it. But the input text keeps showing up empty. Any ideas?
-- EDIT --
Here is a solution derived from the answers from below that I like:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Q01").val("1");
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
If you are using jQuery you could just change the id attribute to name in the input elements and then do something like this:
$('#Q01').val('1')
The val method sets the value sou can find more here: http://api.jquery.com/val/
You've got your ready handler correct. One of the great things about jQuery is its selector engine. I recommend taking a look at the documentation to help familiarize yourself with it.
To do what you want, I'd recommend something like this:
$(document).ready(function() {
$("#form1 input[name='Q01']").val("1");
});
The #form1 is the same as document.getElementById("form1"). The input[name='Q01'] grabs all input elements that have a name attribute equal to Q01. The .val method sets the selected elements value to the string 1.
$(document).ready(function(){
$("form input[name='Q01']).val('1');
)};
This should work:
$("input[name='Q01']").val('1');
But why not to set id's to your inputs?
Hope it works

Select text box on page load jQuery

I have the following code which uses JavaScript to select a text box when the page loads. I have included a copy of my code below. My question is how can this be done in jQuery?
<!doctype html>
<html>
<head>
</head>
<body>
<input id="query">
<script type="text/javascript">
function box(query){
document.getElementById('query').focus();
}
box('query');
</script>
</body>
</html>
Thanks in advance, Callum
You also can use HTML5:
<input type="text" autofocus>
Reference: http://www.w3schools.com/html5/att_button_autofocus.asp
Cross Browser Compatibility: http://caniuse.com/#feat=autofocus
$(document).ready(function(){
$('#query').focus()
});

Categories