Java script function not called - javascript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<br><br><br><br>
<body style="background-color: cornflowerblue" >
<form action="Login" method="post" name="frmLogin">
<table style="background-color: darkgrey" align="center" border="1">
<thead>
<tr>
<th colspan="2" style="font-size: xx-large;color:darkmagenta" >Login Details</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight: bold" >Username</td>
<td><input type="text" name="txtUsername" value="" /></td>
</tr>
<tr>
<td style="font-weight: bold">Password</td>
<td><input type="password" name="txtPassword" value="" /></td>
</tr>
<tr>
<td align="center" colspan="2" >
<input type="button" onclick="return reset();" value="Reset" name="btnReset" />
<input type="submit" onclick="return submit();" value="Submit" name="btnSubmit" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" language="javascript">
function submit()
{
var username=frmlogin.document.txtUsername.vlaue;
var password=frmlogin.document.txtPassword.vlaue;
if(username=="")
{
alert("Username Must be filled");
return false;
}
if(password=="")
{
alert("Password Must be filled");
return false;
}
return true;
}
function reset()
{
frmlogin.document.txtUsername.vlaue="";
frmlogin.document.txtPassword.vlaue="";
return false;
}
</script>
</form>
</body>
</html>
I have html code above, and on successfully submit I call a servlet name Login.
But it directly call the servlet. It skips the java script function.
And if i remove the form then java script executes.

Your problem is that you gave the custom form validator function the same name as the form's default submit function form.submit(). The form's default submit function will have precedence in this context.
To fix this, you need to rename submit() to something else. E.g.
onclick="return validate();"
with
function validate() {
// ...
}
Unrelated to the concrete problem, you've several major bugs in your JS function, the following line for example is completely wrong:
var username=frmlogin.document.txtUsername.vlaue;
but that's subject for a different question if you can't figure it out.
Last but not least, I hope that you're aware that JS can be disabled/spoofed by the client? Ensure that you're also validating the form in the server side. See also our servlets wiki page for a concrete example.

add the onsubmit event handler for the form:
<form action="Login" method="post" name="frmLogin" onsubmit="return submit();">

devang you need to capture event for the submit button click if you want to execute that javascript code. i am having the same problem but i solved it using jquery click events, because the by default it submits directly without moving through the code . if any alternate solution is there , please letme know too
btw jquery code can be written as
$("input[name=btnSubmit]").click(function(e) {
..if fails conditions..
e.preventDefault();
});

Related

Webpage vanishes when clicking button to send data to server with jQuery

I am having a issue with HTML and jQuery programming.
I am making a bulletin board with HTML and jQuery, with 2 textboxes and a button.
$(document).ready(function(e) {
$('save').click(function() {
const name = $('name').val();
const words = $('words').val();
$.post(
"http://localhost:8000/board_write",
{
name: words
},
function(data, status) {
}
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td class="vert" bgcolor="">
Name
</td>
<td>
<input class="name">
</td>
</tr>
<tr>
<td bgcolor="">
Anything you'd like to say
</td>
<td>
<textarea class="words" cols="40" rows="5" placeholder="please enter anything">
</textarea>
</td>
</tr>
<tr>
<td>
<input class="save" type="button" onclick="write()" value="Save">
</td>
</tr>
</table>
And, I also coded with jQuery to send the data of the two textboxes to localhost:8000, which is a node.js server to log the data to the console.
When I click the button, the page vanishes. What causes the situation? And, how can I solve the problem?
You have onclick = "document.write()"; that explicitly deletes the document . https://www.w3schools.com/jsref/met_doc_write.asp
Explanation: the code in onclick is scoped such: {window{document{element{}}}}; if you meant to implement a write() function, do so and invoke it by window.write(), or name it something differently to document.write. Otherwise, write() will de resolved to document.write().

Send form data when clicking on table

I'm trying to post some form data when a user clicks on a table but I can
't get it to work. This is what I've tried so far:
<form Method="post">
<table>
<tr><th colspan="2">sometext</th></tr>
<tr name="id" value="1"><td>Option 1</td><td>TEXT</td></tr>
<tr name="id" value="2"><td>Option 2</td><td>TEXT</td></tr>
<tr name="id" value="4"><td>Option 3</td><td>TEXT</td></tr>
</table>
</form>
I think I might need to use JavaScript but I don't know how to since I'm new to JavaScript.
Use Jquery
jQuery('tr').click(function(){
jQuery('form').submit();
});
But take a look at this article for further clearance :)
Forms
here you go
<form Method="post" id="myForm">
<table id="mytable">
<tr><th colspan="2">sometext</th></tr>
<tr name="id" value="1"><td>Option 1</td><td>TEXT</td></tr>
<tr name="id" value="2"><td>Option 2</td><td>TEXT</td></tr>
<tr name="id" value="4"><td>Option 3</td><td>TEXT</td></tr>
</table>
</form>
Few Changes to HTML
<script type="text/javascript">
onload=function(){
document.getElementById("mytable").addEventListener('click',function(){
document.getElementById("myForm").submit();
});
}
</script>

locally add javascript to xampp to do math/formula

I'm trying to make a table, in which user can fill some cells with values and then click submit to show the calculation result. I have jquery-2.0.3.min.js and script.js in my directory. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Inteligence Decision Support System</title>
<script src='localhost/idss/jquery-2.0.3.min.js'></script>
<script type="text/javascript" src='localhost/idss/script.js' charset="utf-8"></script>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" type="text" value="0"></td>
<td><input name="a20" type="text" value=""></td>
<td><input name="a25" type="text" value=""></td>
</tr>
</table>
<input type="button" onclick="Zcount()" value="Submit" >
</body>
</html>
and here is the script.js file
<script type="text/javascript">
function Zcount(){
var cost, a20, a25;
a20 = document.getElementById("a20").value;
a25 = document.getElementById("a25").value;
cost = (2*parseInt(a20))+(3*parseInt(a25));
document.getElementById("Cost").value=cost;
}
</script>
but when I filled a20 and a25 and click the submit button, nothing happened. The result stayed zero. Where did I go wrong?
You have to check if the external javascripts are actually loaded. You can do this by right-clicking in he browser ind click "inspect element" in chrome or firefox. If you click "console" in these inspectors you can check if they are loaded. If they aren't, you have to adjust your src attribute in the HTML script element.
Also, you have to use the id attribute on the input's because you're using getElementById, and officially inputs have to be surrounded by a form element. So, in the body tag, your HTML will be like this:
<form id="form" action="#" method="post">
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" id="Cost" type="text" value="0"></td>
<td><input name="a20" id="a20" type="text" value=""></td>
<td><input name="a25" id="a25" type="text" value=""></td>
</tr>
</table>
<input type="submit" value="Submit" >
</form>
Inside the script.js, you don't have to use the HTML script tags.
Why are u including jquery if you don't use it?
But because you do, you can use this script:
$('form').submit(function(){
var cost, a20, a25;
a20 = $("#a20").val();
a25 = $("#a25").val();
cost = (2*parseInt(a20))+(3*parseInt(a25));
$("#Cost").val(cost);
return false;
});
Working jsFiddle: http://jsfiddle.net/jwvanveelen/ch2wR/

unedined output in javascript alert box

I have written simple jsp file which contain textfield for username and password.
I want to validate that field using javascript, but when I write
var a=document.getElementsByID("uname") and prints length of a, it shows me output as 'undefined'.
here is my code..
<head>
<script>
function validate() {
var a=document.getElementById("uname");
alert(a.length);
return false;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login</title>
</head>
<body>
<form method="post" action="/Edzeal/Validate">
<table align="center">
<tr>
<td>User Name:</td>
<td><input type="text" name="uname" id="uname"></td>
<td><p id="uerror"></p></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr></tr>
<tr>
<td><input type="submit" value="Login" onclick="return validate()"></td>
<td><input type="reset">&nbspRegister</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
You are trying to alert the 'length' property of the reference to that element. Element objects do not have any such property, unlike arrays or strings, so you are seeing 'undefined'.
See the docs for Elements: https://developer.mozilla.org/en-US/docs/Web/API/element
And document.getElementById
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
Element has no property length on it, it being undefined is expected.
https://developer.mozilla.org/en-US/docs/Web/API/element?redirectlocale=en-US&redirectslug=DOM%2Felement
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
Just change
alert(a.length);
to
alert(a.value);
a is an Element, no the string value of the form field. You need .value to get that.

How to clear textbox on HTML using Javascript

I have code in html like this
<html>
<script type="text/javascript" src='LatihanKuisJs.js'></script>
<body>
<form name="kuis">
<table border="1" width="50%">
<tr>
<th colspan="2" >Celcius
</tr>
<tr>
<td align="center" width="80%">Kelvin</td>
<td align="center"><input type="text" id="kelvin">
</td>
</tr>
<tr>
<td align="center" width="80%">Reamur</td>
<td align="center"><input type="text" id="reamur"></td>
</tr>
<tr>
<td align="center" width="80%">Fahrenheit</td>
<td align="center"><input type="text" id="fahrenheit"></td>
</tr>
</table>
<input type="button" value="Calculate" onclick='calculateCelcius();'/>
<br/><br/>
<textarea rows="20" cols="90" id="textarea">
</textarea>
<br/><br/>
<input type="button" value="Clear" onclick='clear();'/>
</form>
</body>
</html>
and external javascript function like this:
function calculateCelcius(){
var kelvin = document.getElementById('kelvin');
var reamur = document.getElementById('reamur');
var fahrenheit = document.getElementById('fahrenheit');
var textarea = document.getElementById('textarea');
var hasil=(kelvin.value*1 + reamur.value*1 + fahrenheit.value*1);
textarea.value += hasil + '\n';
}
function clear(){
document.getElementById("textarea").value="";
}
When I tried to click the clear button on my page, the text area wasn't clear.
What's wrong? And what should I do?
Just rename your function from clear to something like clearTextarea and it will work.
The clear() method refers to obsolete document.clear() method, which is described at MDN as:
This method used to clear the whole specified document in early
(pre-1.0) versions of Mozilla. In recent versions of Mozilla-based
applications as well as in Internet Explorer and Netscape 4 this
method does nothing.
Also according to HTML5 specification:
The clear() method must do nothing.
References:
https://developer.mozilla.org/en-US/docs/DOM/document.clear
http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#dom-document-clear
if you use a function like this one
function clearInput(element){
element.value="";
}
then in the input add this
onfocus="clearInput(this)"
this can be used multiple times for any text fields or text areas because the id of the object is passed where it calls the function from.
RKillah
Try adding javascript: before your function name when defining onclick event.
Something like this:
<input type="button" value="Clear" onclick='javascript: clear();'/>

Categories