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>
Related
I am trying to call a function in an external JavaScript file from an HTML-file. The goal is to work with the content of a form there.
I tried so many things and always got the Error "ReferenceError: Can't find variable: X"
The positioning of the jquery javascript file loading
The positioning of the <script src="XXX"> call
Calling the function from the button "onclick" or the form "onsubmit"
Trying to call the javascript file from an embedded script in the HTML
This is what my JavaScript file and my HTML looks like right now:
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
</body>
I also tried
function doSomething() {
// Do something
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
<script>
function submit(e) {
doSomething();
}
</script>
</body>
In both cases, it returned the same error over and over again: "ReferenceError: Can't find variable: X". In the first example, X being "submit" and in the second "doSomething".
All help is very welcome. I know there are similar headlines here, but non of the solutions did anything for me.
Hey so when I ran the code without the e as a parameter for the submit function in the html it didn't give me the error. I think it may be because the e is the place holder for the text of the submit function in this case. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit()">Send</button>
</form>
<script type="text/javascript">
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
</script>
</body>
</html>
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;
I am quite new to HTML and JavaScript. Below is the sample code. The below code block works fine with onsubmit as form tag attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tags</title>
</head>
<body>
<form id="form1" action="#" onsubmit="functSubmit()">
<label for="input1">This text will be passed in CustomeEvent</label>
<input id="input1" type="text" value="default">
<input type="submit" id="bt1">
</form>
<script>
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}
</script>
</body>
</html>
But when I write below code with addEventListener() it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tags</title>
</head>
<body>
<form id="form1" action="#">
<label for="input1">This text will be passed in CustomeEvent</label>
<input id="input1" type="text" value="default">
<input type="submit" id="bt1">
</form>
<script>
document.getElementById("form1").addEventListener('submit', functSubmit(event));
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}
</script>
</body>
</html>
Why might addEventListener not be working?
That's because you're immediately invoking the event listener's callback. Just pass the function as an argument, without invoking it. Anytime the form is submitted, that function will have the event object passed into it.
document.getElementById("form1").addEventListener('submit', functSubmit);
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tags</title>
</head>
<body>
<form id="form1" action="#">
<label for="input1">This text will be passed in CustomeEvent</label>
<input id="input1" type="text" value="default">
<input type="submit" id="bt1">
</form>
</body>
</html>
On a side note: it's generally better practice to separate the concern of your HTML from your JavaScript. While inlining your event handlers in attributes works, it couples two separate concerns. For maintainability's sake, manage your handlers separately. You also get the benefit of leveraging event delegation.
You are invoking functSubmit and passing the result to the addEventListner function.
Instead you want something like this
<form id="form1" action="#" onsubmit="functSubmit()">
or
document.getElementById("form1").addEventListener('submit',functSubmit);
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}
event is already passed in by the caller of the functSubmit function.
I think you can only pass a string as function name. You can try
document.getElementById("form1").addEventListener('submit', function(event){
functSubmit(event);
});
<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);
here's a little code I try to run on Firefox:
<html>
<head>
<title>Ex4: My Sequence Finder</title>
<script type="text/javascript">
function action() {
alert("action");
if (formValidation() == false)
return;
}
function searchInput() {
alert("searchInput");
return;
}
</script>
</head>
<body>
<font face="arial" size="5" color="blue">Input section</font> <br/>
<p>Query Sequence</p>
<form name="form">
<textarea id="input" rows="8" cols="60"></textarea><br/>
<textarea id="enhancers" rows="4" cols="30"></textarea><br/>
<textarea id="silencers" rows="4" cols="30"></textarea><br/>
<input type="button" value="button1" onclick="action()" />
<input type="button" value="button2" onclick="searchInput()" />
<div id="results"></div>
</form>
</body>
</html>
As you can see one of the button calls searchInput() and that works fine, the other
is supposed to call action(), but I get "action() is not a function". Btw they both just call alert() at this point, so I know it got in the function.
I have no idea as to why this happens, any help would be great.
Thanks!
Form elements have an action attribute (specifying the URI that should process the form data).
This attribute name "overrides" the javascript function name, causing the error you see.
Rename your function to something else and it will work.
You can solve this by using
var function1 =new function(){
var action=new function() {
alert("action");
if (formValidation() == false)
return;
}
}
<input type="button" value="button1" onclick="function1.action()" />
action calls formValidation which doesn't seem to be a function. Maybe the parser took this error and chose not te register action as a function because of it.