<html>
<head>
<script type="text/javascript">
function fire()
{
document.getElementById("submit1").addEventListner("click",sub,false);
}
function sub()
{
window.alert("submited");
}
window.addEventListener("load",fire,false);
</script>
</head>
<body>
<form action="#">
<input type="button" name="cal" value="Calculate" id="submit1"/>
</form>
</body>
</html>
I don't know where is the error in my code because I am not familiar with addEventListener method, can I know what is the difference between addEventListner and onsubmit ? addEventlistener must use in my code but I am familiar with onsubmit method only, how to change it to addEventListenr ?
You have a typo:
document.getElementById("submit1").addEventListner("click",sub,false);
document.getElementById("submit1").addEventListener("click",sub,false);
Related
In HTML5, returning false in a form gives the red line, indicating there is an error, even though I am able to achieve my expected output. Is there any way to fix this line and have a bug free code as it is triggering my OCD.
Also, I am a big beginner with my code so please try to keep it as simple as possible. i do not understand JQUERY at all.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get" onsubmit="userRegister1(event)">
<input type="text" name="name" />
<button type="submit">Click me</button>
</form>
</body>
</html>
<script>
function userRegister1(event) {
event.preventDefault();
return false;
}
</script>
<form action="#" method="get">
<input type="text" name="name">
<button type="submit" onclick="
// you can code javascript code here, this's same how you code in <script>.....</script>
function userRegister1(){
console.log('your code in userRegister1 function');
}
userRegister1();
// so you return false that's wrong syntax
//onsubmit='userRegister1(); return false;'
// return must be use in function, in this case you can use in function userRegister1()
// BUT i don't suggest use this way
">Click me</button>
</form>
I have been working on this from hours and still coudn't figure it out. this is really frustrating this simple code is also not working now.
<html>
<head>
<script language='javascript'>
function pp(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</head>
<body>
<form method="post">
<input onchange="pp()" type="file" name="pp" >
<input type="submit" >
</form>
</body>
</html>
help please or I will need psychiatrist now
The problem with your code is you are having the name field of the input tag same as the function name. Change your name tag with anything else and it should work.
Checkout this code.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="file" name="ppasd" id="pip" onchange="pp()">
</form>
<script type="text/javascript">
function pp() {
alert('hi')
}
</script>
</body>
</html>
I hope this code work for you.
<html>
<body>
<script language="JavaScript" type="text/javascript">
function inform(){
var filename = document.getElementById('myFile').value;
alert(filename);
}
</script>
<form name="form1">
Please choose a file.
<input type="file" name="uploadbox" size="35" onChange='inform()' id="myFile">
</form>
</body>
</html>
If this code work as you want please comment here it work or not. Happy Coding :)
It seems there is some kind of reference problem with pp. Use the following code and it should work
<html>
<head>
</head>
<body>
<form method="post">
<input onchange="callback()" type="file" id="pp" >
<input type="submit" >
</form>
<script language='javascript'>
function callback(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</body>
</html>
P.S It is a good practice to add javascript code at the end of the html.
P.S 2 it will still get an error because there is no element with id ppimg
I hope it helps
that's not working ?
that's because you use function after put element
so do this instead :
<html>
<head>
</head>
<body>
<form method="post">
<input onchange="pp()" type="file" name="pp" >
<img id="ppimg"/>
<input type="submit" >
</form>
<script language='javascript'>
function pp(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</body>
</html>
and if it's hard !
you can change pp() to pp;
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
When should I use jQuery's document.ready function?
(8 answers)
Closed 9 years ago.
I am new to JavaScript and jquery and want to check fields in a form before submitting. But even a simple example taken from How to do something before on submit? does not work. I do not ge an alert in Firefox and do not see any errors in the webdeveloper's console. See the code:
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
</script>
</head>
<body>
<form id="myForm" action="foo.php" method="get">
<input type="text" value="" />
<input type="submit" value="submit form" />
</form>
</body>
</html>
And of course there is "jquery.min.js" in the same folder.
You need to add the script in a dom ready handler
jQuery(function () {
$('#myForm').submit(function () {
alert('Handler for .submit() called.');
return false;
});
})
When the js code is executed, the html element has to already exists. To delay the code strat, use document.ready as above:
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
});
</script>
Note: the syntax $('#myForm').submit(function() { is deprecated and should probably be replaced by $(document).on("submit", "#myForm", function() { or something similar :)
EDIT: also for what you ask, see javascript documentation about e.preventDefault(), this could also be useful for what you want :)
This will work too, setting script after element already added to the DOM:
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form id="myForm" action="foo.php" method="get">
<input type="text" value="" />
<input type="submit" value="submit form" />
</form>
<script type="text/javascript">
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
</script>
</body>
you should try e.preventDefault(); instead of return false; E.g
$(function() { $('#myForm').submit(function(e) { e.preventDefault(); alert('Handler for .submit called.'); }); });
because some times return false; may not be effective on some codes on jquery
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
});
</script>
</head>
<body>
<form id="myForm" action="foo.php" method="get">
<input type="text" value="" />
<input type="submit" value="submit form" onsubmit="submit" />
</form>
</body>
</html>
demo: http://jsfiddle.net/kapil_dev/6Tf7Y/
<!DOCTYPE html>
<html>
<head>
<title>Database test</title>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
function validateForm(n)
{
var x=document.forms.SignUp.n.value;
alert("*"+x+"*");
}
</script>
</head>
<body>
<h1>Just a Database test</h1>
<form name="SignUp" action="http://127.0.0.1/cgi-bin/connectivity.cgi" onsubmit="return validateForm();" method="post">
Ename :<input type="text" name="ename" onchange="validateForm('ename');"><br><p id="error_1"></p>
<input type="submit" value="Send">
</form>
</body>
</html>
I am trying to pass the user input value by onchange="validateForm('ename') but it does not seem to work i dont get anything.
instead if i change function to this then it works but again i need to pass it as varaible from onchange="validateForm('ename').
function validateForm(n)
{
alert("*"+n+"*");
}
You should pass the element itself, which is this inside an inline handler:
validateForm(this);
function validateForm(elem)
alert(elem.value);
}
One way to make it work, without changing your function call:
function validateForm(n) {
var x = document.forms.SignUp[n].value;
alert("*"+x+"*");
}
why will the method getLinkToFile not be invoked?
<html>
<head>
<title>test page for object fbcontrol</title>
</head>
<script type="text/javascript">
...
function getLinkToFile()
{
alert("alert");
}
...
</script>
<body onload="load()">
<INPUT TYPE="text" NAME="GetLink_textField" VALUE="Geben Sie den Dateipfad an!" SIZE=50>
<INPUT TYPE="button" NAME="GetLink_button" VALUE="Get link" onClick="javascript:getLinktoFile()">
</body>
</html>
The alert message is not shown! Whats the problem!?
you dont need the javascript: bit and the function has an upper case T on to :
<INPUT TYPE="button" NAME="GetLink_button" VALUE="Get link" onClick="getLinkToFile()">
will work fine
try this
onClick="getLinktoFile()"
when you use onclick attribute, you won't use 'javascript:' so:
<INPUT TYPE="button" NAME="GetLink_button" VALUE="Get link" onClick="getLinktoFile()">
Javascript is case-sensitive.
You have getLinkToFile() defined but are calling getLinktoFile (lowercase t in 'to').
Javascript is case-sensitive.
Your function name has an uppercase T.