<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
window.alert("Hi");
//var name-"Bhuvanesh";
//var Comment="Zack";
//window.alert("Hello");
}
};
</script>
</html>
This code above works and the code below does not work
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
//window.alert("Hi");
var name-"Bhuvanesh"; //Edited from - to =
var Comment="Zack";
window.alert("Hello "+name);
}
};
</script>
</html>
I do not understand why the code below does not work. I have used window.onload to make sure the page renders first. Somehow the code does not seem to work. I am trying to make a simple page that can accept Name and comment from the textbox and display it on the webpage. I am relatively new to web development. Any help is appreciated.
Edit 1: This code below does not seem to work.`
var name=document.getElementByName("usrname");
var Comment=document.getElementByName("comnts");
document.write(name+ "wrote "+Comment);
As far as I can tell, getElementByName is not a function. You can use getElementsByName (note the plural). This will return a collection rather than an element. More than this, you were fetching the entire element, not the value of the element like it seems you want. The following works for me:
var name = document.getElementsByName("usrname")[0].value;
var comment = document.getElementsByName("comnts")[0].value;
document.write(name + "wrote "+ comment);
Related
So, I've copied this code and tried to run it. It supposed to take the input (in this case, name) and save it into a text file. But, it didn't work as I expected, can someone tell me what's wrong with this code?
<!DOCTPYE html>
<head>
<title>Web test</title>
</head>
<body>
<form onSubmit="WriteToFile(this)">
<label>Name please: </label>
<input type="text" name="nname" id="fname" size="18">
<br>
<br>
<input type="submit" value="submit">
</form>
<script>
function WriteToFile(passForm){
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CeateTextFile("test.txt", True);
var firstName = document.getElementById('fname');
s.writeline(firstName);
s.writeline("");
s.Close();
}
</script>
</body>
<html>
There's a misspelling here var firstName = document.geteElementById('fname'); it's supposed to be var firstName = document.getElementById('fname');
This is my code where I am trying to call my RESTful web service in dotnetnuke HTML module.
If i remove the alert in javascript and press submit button, the page doesnt redirect. And as I put the alert again, it works! I think it has something to do with the delay. I want to make this work without making use of the alert function. Please help.
<html>
<head>
<script type="text/javascript">
function s()
{
var a=document.getElementById('txt').value;
var url= 'http://localhost:9737/RestServiceImpl.svc/xml/'+a;
window.location = url;
window.alert("hi");
}
</script>
</head>
<body> <input type="text" name="txt" id="txt" />
<input type="submit" value="submit" onclick="s();"/>
</body>
</html>
Try to move your <script type="text/javascript"> just before ending </body> tag.
<html>
<head><title></title> </head>
<body> <input type="text" name="txt" id="txt" />
<input type="submit" value="submit" onclick="s();"/>
<script type="text/javascript">
function s()
{
var a=document.getElementById('txt').value;
var url= 'http://localhost:9737/RestServiceImpl.svc/xml/'+a;
window.location = url;
}
</script>
</body>
</html>
Hope this will resolve your problem.
need to prevent default, otherwise browser immediately navigates away
function s(event) {
var a=document.getElementById('txt').value;
var url= 'http://localhost:9737/RestServiceImpl.svc/xml/'+a;
window.location = url;
event.preventDefault();
}
alternatively you could return false; from function s()
<body>
<script type="text/javascript">
var a="sreedhar";
<input type="text" value="abc">
</script>
</body>
It gives the syntax error.
can't we use "html tags" directly in "javascript".
No, you can't use them directly in JavaScript.
However you may treat them as strings:
var str = '<input type="text" value="abc">';
or as DOM elements:
var input = document.createElement('input');
input.type = 'text';
input.value = 'abc';
And then append to the markup, e.g. document.body.appendChild(input);.
Usually a well formated hmtl with javascript looks like this.
<HTML>
<HEAD>
<script type="text/javascript">
var a="sreedhar";
</script>
</HEAD>
<BODY>
<input type="text" value="abc">
</BODY>
</HTML>
If you want to generate some html with javascript then assign it as a string to some variable.
For example you have a div having id='abc' and you want to generate a textbox in this div then you need to do like this
<script type="text/javascript">
var textbox = '<input type="text" value="abc">';
$('#abc').append(textbox);
</script>
Maybe you want this:
<script type="text/javascript">
var a="sreedhar";
document.write('<input type="text" value="abc">');
</script>
</BODY>
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
//put javascript function here
</script>
</head>
<body>
<input type="text" value="abc">
</body>
</html>
You can use html element inside the javascript using element id.
This is my first attempt to write anything in javascript, although this does exactly as intended, I am sure it can be done simpler. Not that this script is all that useful, just an exercise in learning something new. I was also trying not to use the evil document write.
So what is the more elegant way of doing this?
<html>
<body>
<input name="abc" type="text" id="foo">
<button onclick="AddInputValue()">Submit</button>
<p id="displayURL"></p>
<script>
function AddInputValue(){
var domain = "http://site.com?abc="
var qstring = document.getElementById("foo").value;
document.getElementById("displayURL").innerHTML=domain + qstring;
}
</script>
</body>
</html>
If you use jQuery:
<html>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<form id="form1">
<input name="abc" type="text" id="foo">
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://site.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body>
</html>
You can even add more form elements and the name of the element will match the query string. http://jsfiddle.net/3muu6/
Just posting the example in http://jsfiddle.net/3muu6/.
Increased the number of inputs. This is basically what Google Analytics URL Builder does, and was the inspiration for this exercise.
<html>
<head>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<form id="form1">
<input name="abc" type="text" id="foo" /><br />
<input name="def" type="text" id="bar" /><br />
<input name="ghi" type="text" id="tar" /><br />
<input name="jkl" type="text" id="boo" /><br />
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://example.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body></html>
Now how to omit a query-string pair when the user leaves an input value blank? Hmm.
When I use this code the console.log and the value in the field disappear right away.
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
How can I prevent that from happening. Or what am I doing wrong?
The final goal will be to append the result of a calculation by the value of the field into another field.
edit:
<html>
<head>
<script src="bereken.js"></script>
</head>
<body>
<form id="berekenForm">
Bereken: <input type="text" name="bereken" id="bereken"/><br />
<input type="submit" value="Bereken" id="berekenKnop"/>
</form>
</body>
</html>
The submit button is doing its default task. i.e. submitting the form. Try handling that.
Value in the field 'bereken' not disappearing.See the code below. If this is not the expected answer, please, Update the question with question in details:
<html>
<head>
<script type="text/javascript">
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
</script>
</head>
<body>
<div id="berekenKnop">
Click Here to console value
</div><br/>
<input type="text" value=" bereken value" id="bereken" />
</body>
</html>