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()
Related
I what to load the b.js file to HTML with button and function. when user type "yes" and click on "Ok" button, "b.js" must load in page (not open in new window or new tab)
what code I must to use in ??????????? place to solve my problem?
here is the code:
HOME.html
<html>
<head>
</head>
<body>
<form name="load">yes OR no<input name="id" type="text">
<input type="button" value="OK" onClick="my(document.forms.load)">
<script>
function my(form) {
if (form.id.value=="yes") {
?????????????
} else {
alert("NO")
}
}
</script>
</body>
</html>
b.js
document.write(`
<html>
<h1> Load the HTML code</h1>
</html>
`);
I tried to use <script src="b.js"></script> but this code immediately load "b.js" that I dont what this
I tried to use
var scriptTag = document.createElement('script');
scriptTag.setAttribute('src','b.js');
document.head.appendChild(scriptTag)
but not working
I tried to use
document.getElementsByTagName('body')[0].innerHTML += "<script src='b.js'></script>";
but this code not working
what can I do to load the "b.js" file after click on button?
thanks :)
Is this what you're looking gor?
function my(form) {
const loadHTML = () => {
const scriptB = document.createElement('script')
scriptB.setAttribute('src','b.js')
console.log(scriptB)
document.write(`
<h1>Load the HTML code</h1>
${scriptB.outerHTML}
`);
}
if (form.id.value==="yes") {
loadHTML()
} else {
alert("NO")
}
}
<html>
<head>
</head>
<body>
<form name="load">
<h2>YES or NO</h2>
<input name="id" type="text">
<input type="button" value="OK" onClick="my(document.forms.load)">
</form>
</body>
</html>
<!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);
<head>
<script type="javascript">
function display()
{
document.getElementById("textField1").value = "abc";
}
</script>
</head>
<body>
<form id="form1" action="http://google.com">
<input id="textField1" type="text" value="0" align="right" size="13"/><br>
<input id="button1" type="button" value="1" onclick="display()">
</form>
</body>
but the value of textfield is not changing.
Any Ideas what am i doing wrong ??
try
<script type="text/javascript">
instead of
<script type="javascript">
. I believe the latter is not a valid syntax.
Removing the type attribute entirely works as well:
<script>
Your line
document.getElementById("textField1").value = "abc";
is correct, try
<head>
<script>
function display() {
document.getElementById("textField1").value = "abc";
}
</script>
</head>
<body>
<form id="form1" action="http://google.com">
<input id="textField1" type="text" size="13" value="clear" /><br>
<input type="button" onclick="display()">
</form>
</body>
Remove the type from your script tag. It's incorrect and making the browser not treat the script contents as JavaScript. Here it is not working, and here it is working (with the type="javascript" removed).
It has to be
<script type="text/javascript">
function display()
{
document.getElementById("textField1").value = "abc";
}
</script>
and not
<script type="javascript">
function display()
{
document.getElementById("textField1").value = "abc";
}
</script>
In case the text field is not having id attribute and having name attribute then,
use
document.getElementsByName("name")[0].value="ert";
getElementsByName() returns an array of objects with that specific name,that's why we are using the index 0.
There is nothing wrong with your code, it works fine in this fiddle.
I only speculate, but you could try to either delete the type attribute of the script-tag, or change it to type="text/javascript" which would be the proper type to use. If you don't specify it, the browser will consider it as JavaScript by default.
It's actually correct, but if it doesn't work try like this:
document.getElementById("textfield1").innerHtml = "ABC";
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>
I just started learning JavaScript and am wondering why this simple snippet hangs when I click on the "Call function" button. What am I missing?
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.write("hello");
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
You need to write inside an element or give an element a value, or you should use document write like that :
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("lblMessage").innerText = "hello";
document.getElementById("txtMessage").value = "hello";
//document.write("hello");
}
</script>
</head>
<body>
<form>
<script type="text/javascript">
document.write("This is written while page processed by browser !<br />");
</script>
<input type="text" id="txtMessage" /><br />
<span id="lblMessage"></span><br />
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
If you simply want to see your button doing something then try:
alert("Hello");
instead of the document.write.
Where do you expect the function to output its "hello"? Right into the button's source code? That makes no sense. The browser is confused and hangs.
Document.write doesn't magically insert something at the end of your document. It writes its stuff out right there where it is called.
Not too sure what you mean by "hang"... Try this out... The alerts can be removed, but will inform you of where it is at in execution...
<html>
<head>
<script type="text/javascript">
function myFunction() {
//for debugging
alert('Made it into function');
document.getElementById('MyOutputDiv').innerHTML = 'Word To Your Mom...';
//for debugging
alert('function complete');
}
</script>
</head>
<body>
<input type='button' onclick='myFunction();' value='Call Function'>
<br>
<div id='MyOutputDiv'></div>
</body>
</html>
document.write, but where? You have to specify this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<pre><script type="text/javascript">
function myfunction() {
d = document.getElementById('hello');
d.style.display = "block";
d = document.getElementById('callme');
d.style.display = "none";
}
</script>
</pre>
<div id="hello" style="display:none">
Hello
</div>
<div id="callme">
<input type="button"
onclick="myfunction()"
value="Call function">
</input>
</div>
</body>
</html>
I can't explain the "hang" but please take a look at this page for a primer on document.write: http://javascript.about.com/library/blwrite.htm I would also like to second that you probably want to write to a specific element in the page rather than just overwriting the entire page.