I am trying to run a very basic code :
<a href="#" onClick="function(event){
event.preventDefault();
document.getElementById('LogOut-form').submit();
}">LogOut</a>
I'm not even pretty sure , if this is right or not but when i click on the link, i do see an error.
Uncaught SyntaxError: Unexpected token (
I just want to submit the form using something like this, is there something that i am missing? If,yes, what would be the solution?
As you are declaring function with onClick use IIF expression
<a href="#" onClick="(
function(event){
event.preventDefault();
document.getElementById('LogOut-form').submit();
})(event)
">LogOut</a>
<a href="#" onClick="(function(event){event.preventDefault();document.getElementById('LogOut-form').submit();})(event)">LogOut</a>
or don't use function expression
<a href="#" onClick="event.preventDefault(); document.getElementById('LogOut-form').submit();">LogOut</a>
However I would recommend you to get rid of ugly inline click handler and don't use inline click handler in old and bad practices. You should bind event using addEventListener
HTML
<a href="#" id='logout'>LogOut</a>
Script
document.querySelector('#logout').addEventListener('click', function(event){
event.preventDefault();
document.getElementById('LogOut-form').submit();
}, false);
<a href="#" onClick="
event.preventDefault();
document.getElementById('LogOut-form').submit();
">LogOut</a>or
function sendData (event) {
event.preventDefault();
document.getElementById('LogOut-form').submit();
}<a href="#" onClick="sendData()">LogOut</a>The context you are trying to use the function expression in expects the function keyword to start a function declaration.
A function declaration must have a name.
There is no point in putting a function there anyway: You never call it.
The value of an onclick attribute is the function body.
If you were going to go down this route then you code would look like this:
onclick="event.preventDefault(); document.getElementById('LogOut-form').submit();"
But don't do that!
Intrinsic event attributes are horrible for a variety of reasons. Bind your event handlers with JavaScript.
<a href="#">LogOut</a>
document.querySelector("a").addEventListener("click", function(event){
event.preventDefault();
document.getElementById('LogOut-form').submit();
});
But don't do that either!
You have a link to the top of the page which you are then "enhancing" with JavaScript to submit a form.
If the JavaScript fails, it doesn't make any sense to link to the top of the page.
Before applying JavaScript: Pick the HTML with the most appropriate semantics and default functionality.
In this case, that means use a submit button.
<button>LogOut</button>
If you don't like the way it looks, apply CSS to style it the way you want.
button {
text-decoration: underline;
color: blue;
background: none;
border: none;
padding: 0;
display: inline;
}<button>LogOut</button>You should not use the on attributes of html elements anymore. Instead use addEventListener like in the answer of Satpal
The onclick is evaluated at the time you click on the link so if you really want to get this to work, you would need to write it as an immediately-invoked function expression:
<a href="#" onClick="(function(event){
event.preventDefault();
document.getElementById('LogOut-form').submit();
})(event)">LogOut</a>
But you really should not do it that ways. You should always keep html, js and css separated.
you're declaring function inside onClick and you should call it. Define your function outside and then call it from onClick like myFunction().
I think that you can't call a function directly that way, cause that code is trying to create a new function, not executing that function. You should create a function somewhere, and call it at the onclick event. For instance:
function myFunction(evt) {
evt.preventDefault();
document.getElementById('LogOut-form').submit();
}
<a href="#" onClick="myFunction">LogOut</a>
If you want to bind a click event directly to an HTML element, then you should use a standard method like this:
<html>
<head>
</head>
<body>
<form id="LogOut-form" type="submit"></form>
<a href="#" onClick="buttonClicked(event)">LogOut</a>
</body>
<script>
function buttonClicked(event){
event.preventDefault();
document.getElementById('LogOut-form').submit();
}
</script>
</html>
Here, buttonClicked() is a function, which will invoke whenever click triggered.
