How to clear textbox on HTML using Javascript - 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();'/>

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().

Javascript function validation not working for changing button value

This function isn't working. Can anyone please help? When I press the validate button, nothing happens.
<script>
function validate()
{
int user = document.getElementById("uname");
if(user=="rohit")
document.getElementById("btnsubmit").value = "Sucess";
else
document.getElementById("btnsubmit").value = "Fail";
}
</script>
<body>
<div>
<table id="tbl-aut">
<tr>
<td colspan="2"><h2>Enter Login Details</h2></td>
</tr>
<tr>
<td >Username<span style="color:red">*</span></td>
<td><input type="text" ></td>
</tr>
<tr><td colspan="2" align="center"><input id="btnsubmit" type="button" value="Validate" onclick="validate()"><td></tr>
</table>
</div>
</body>
Nothing is happening because you have a few problems:
First, you have a syntax error. int is not a valid keyword in JavaScript. In JavaScript, data types are implicitly determined. You cannot explicitly specify a type (and there is no integer type in JavaScript anyway).
Next, you are attempting to check an object (the text field) against the value stored in the object. You need to access the value property of the text field to get the data entered into it.
Also, you are attempting to get an object with an id of uname, but you didn't set up that id in the text field at all.
Lastly, and this is more of a best-practice thing. Always wrap the true/false branches of your if statements with curly braces {}. Although it is syntactically OK to omit them when there is only one statement in the branch, this is a well-know bug magnet.
<script>
function validate() {
var user = document.getElementById("uname");
if(user.value =="rohit"){
document.getElementById("btnsubmit").value = "Sucess";
} else {
document.getElementById("btnsubmit").value = "Fail";
}
}
</script>
<body>
<div>
<table id="tbl-aut">
<tr>
<td colspan="2"><h2>Enter Login Details</h2></td>
</tr>
<tr>
<td >Username<span style="color:red">*</span></td>
<td><input id="uname" type="text" ></td>
</tr>
<tr><td colspan="2" align="center"><input id="btnsubmit" type="button" value="Validate" onclick="validate()"><td></tr>
</table>
</div>
</body>

How to get a number value from an input field?

I have some issues with calculating some stuff with JS and getting the right values out of the input fields (number). When I use this code it doesn't show anything. So what is wrong with my JS? Do I need to include a jQuery file?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<form id="frm1" action="Calculate.html">
<table width="350px" border="1px">
<tr>
<th colspan="2">Availability</th>
</tr>
<tr>
<td>Total Production Time</td>
<td><input type="number" name="TotalProductionTime" placeholder=""> hours</td>
</tr>
<tr>
<td>Breaks</td>
<td><input type="number" name="Breaks" placeholder=""> minutes</td>
</tr>
<tr>
<td>Malfunctions</td>
<td><input type="number" name="Malfunctions" placeholder=""> minutes</td>
</tr>
<tr>
<td>Theoretical production time:</td>
<td><p id="test"></p></td>
</tr>
</table>
<input type="button" onclick="Calculate()" name="Calculate" value="calculate">
<script>
function Calculate()
{
var TotalProductionTime = document.getElementById("TotalProductionTime").value;
var TotalProductionTimeInMinutes = TotalProductionTime * 60;
var Breaks = document.getElementById("Breaks").value;
var Malfunctions = document.getElementById("Malfunctions").value;
var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions;
document.getElementById("test").innerHTML = TheoreticalProductionTime;
}
</script>
</body>
</html>
You had some mistakes in your HTML, but here is a working JSFiddle: Fiddle
You you are trying to get elements by their ID, but you don't give them an ID you give them a Name. Also, stop using inline JavaScript calls; it is bad practice.
function Calculate() {
var TotalProductionTime = document.getElementById("TotalProductionTime").value;
var TotalProductionTimeInMinutes = TotalProductionTime * 60;
var Breaks = document.getElementById("Breaks").value;
var Malfunctions = document.getElementById("Malfunctions").value;
var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions;
document.getElementById("test").innerHTML = TheoreticalProductionTime;
}
<form id="frm1" action="Calculate.html">
<table width="350px" border="1px">
<tr>
<th colspan="2">Availability</th>
</tr>
<tr>
<td>Total Production Time</td>
<td>
<input type="number" id="TotalProductionTime" placeholder="">hours</td>
</tr>
<tr>
<td>Breaks</td>
<td>
<input type="number" id="Breaks" placeholder="">minutes</td>
</tr>
<tr>
<td>Malfunctions</td>
<td>
<input type="number" id="Malfunctions" placeholder="">minutes</td>
</tr>
<tr>
<td>Theoretical production time:</td>
<td>
<p id="test"></p>
</td>
</tr>
</table>
<input type="button" onclick="Calculate()" value="calculate">
</form>
Every id must be converted to integer. Example
var Malfunctions = parseInt(document.getElementById("Malfunctions").value);
then your ready to go
With HTMLInputElement you can use property .valueAsNumber which returns a numeric property if possible:
const str = document.querySelector("input").value;
const num = document.querySelector("input").valueAsNumber;
console.log(typeof str, str, str + 2);
console.log(typeof num, num, num + 2);
<input type="number" value="40" disabled />
You've got two problems here. One obvious is that you try to get a reference to the form inputs by id, but didn't give them any (you gave them a name). To fix, either change the name attribute to an id, or use the form-specific way to reference them, e.g.:
var TotalProductionTime = document.forms.frm1.TotalProductionTime
Second problem is more vicious and has to do with the scope of execution of what you put in onclick attributes. You see, your button is named "Calculate" just like your function, and in the context of the onclick attribute, its parent form is used to resolve identifiers before the global scope. So instead of calling the function named Calculate, you're trying to call the button itself. Fix that by giving them different names, referencing window.Calculate explicitly, or much better, define your event handler in JavaScript instead of using the HTML attribute:
document.forms.frm1.Calculate.onclick=Calculate

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/

How to empty a textbox, textarea in jquery

var $contact_title = $('#contact_title').val();
var $contact_summary = $('#bbcode').val();
I retreive a text area and text field then I do this:
$contact_title.val('');
$contact_summary.val('');
Nnone of them get emptied
HTML:
<form action="" method="get">
<table border="0">
<tr>
<td valign="top">Title:</td>
<td>
<input name="title" type="text" style="width:710px" id="contact_title" />
</td>
</tr>
<tr>
<td valign="top">Message:</td>
<td>
<textarea name="request" cols="30" rows="20" id="bbcode"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right" >
<input name="send" type="button" onClick="clicked()" value="Send" />
</td>
</tr>
</table>
</form>
You should store the element in your variable and not the value.
So, your code should be:
var $contact_summary = $('#bbcode');
$contact_summary.val('');
Btw, it's a good practice to use unobtrusive javascript and bind your click event outside of your html markup:
$('button').click(function() { //clear inputs });
Your problem is because you are setting your variables to be the string values of the elements, rather than the jQuery objects containing the elements.
Try this:
var $contact_title = $('#contact_title');
var $contact_summary = $('#bbcode');
$contact_title.val('');
$contact_summary.val('');
Or alternatively;
$('#contact_title').val('');
$('#bbcode').val('');
Your variable ($contact_title) contains the text, not the actual DOM-element, from what I can tell. If you change it to
$('#contact_title').val('');
You'll be fine.
you have to use the same syntax that you used while getting the values from those filed.
try:
$('#contact_title').val('');
$('#bbcode').val('');
In js fiddle easier to write/read javascript code. Here is an answer.
http://jsfiddle.net/7RFYx/
jQuery(document).ready(function () {
var $contact_title = $('#contact_title');
var $contact_summary = $('#bbcode');
var $contact_summary_val = $contact_summary.val();
var $contact_title_val = $contact_title.val();
$contact_title.val('');
$contact_summary.val('');
});

Categories