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('');
});
Related
I have this table:
<tbody class="schoolsRows">
<tr>
<td width="50%">
<input type="text" class="classA schoolNameClass valid" id="1">
</td>
<td width="25%">
<input type="text" class="classA postCodeClass valid" id="2">
</td>
<td width="25%">
<input type="text" class="classA urnClass valid" id="3">
</td>
<td>
<input type="button" value="Clear Content" onclick="clearRowContent(this)">
</td>
</tr>
</tbody>
On button click, I am trying to reach to each of the textboxes and clear it.
Here is my javascript code:
function clearRowContent(e) {
var row = e.closest('tr');
var textBoxToClear = row.find('.schoolNameClass');
}
I can get to the row, but the problem is when I try to get to the textboxes by using find or siblings I get this error
Uncaught TypeError: row.find is not a function
I wonder why is this happening.
bind e java script to jquery object , like $(e)
var row = $(e).closest('tr');
e is javascript object not jQuery. So , you cannot call jQuery methods on it.
Use jQuery to handle events:
$('.schoolsRows').on('click', 'button', function() {
$(this).closest('tr').find('.schoolNameClass').val(''); // Clear value of textbox
});
You are passing DOM object to clearRowContent using this and trying to use it as jQuery object. You need to convert DOM object to jQuery object to call closest
function clearRowContent(e)
{
var row = $(e).closest('tr');
var textBoxToClear = row.find('.schoolNameClass');
}
I am trying to build a bookmarklet to auto-fill the textarea with attribute name="param[random-number][details]" with text.
The random-number is generated on the server and is different each time. The page HTML looks like:
<table>
<tbody>
<tr>
<td>Video Title:</td>
<td>
<input type="text" name="param[30301754][title]" value="VIDEO TITLE" autocomplete="on">
</td>
</tr>
<tr>
<td>File name:</td>
<td>
<input type="text" name="param[30301754][filename]" value="FILE NAME" autocomplete="on">.3gp
</td>
</tr>
<tr>
<td>Description: </td>
<td><textarea name="param[30301754][description]"></textarea>
</td>
</tr>
</tbody></table>
Assuming there's only one element like <textarea name="param[xxx][description]"> on the page, you can use a jQuery wildcards as a selector.
$("textarea[name$=\\[description\\]]").val("test");
Update
To do this as a simple bookmarklet, you'll need to prompt the user for the text they want to auto-populate (or get it from somewhere else), and wrap the whole thing in an anonymous function. You also need a reference to the jQuery library. (See this article for more information on how to create a bookmarklet.)
This should do it for your case:
javascript: (function () {
if (!($ = window.jQuery)) {
script = document.createElement('script');
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
script.onload = doAutoFill;
document.body.appendChild(script);
} else {
doAutoFill();
}
function doAutoFill() {
var textToFill = prompt("Enter text to fill:");
if (textToFill != null) $("textarea[name$=\\[description\\]]").val(textToFill);
}
})();
Here's an updated fiddle as an example: jsfiddle
I don't see your bookmarklets button so I'm making some assumptions. jsfiddle
var someText = "text for the textbox";
$('#myButtonId').on('click', function(){
$('textarea').val(someText);
});
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
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();'/>
I've got a page with a handful of input fields.
I need to find the fields with an array of values, and if so, .remove() the closest('tr')
The markup is similar to this
<table>
<tr>
<td>
<input type="text" value="this">
</td>
</tr>
<tr>
<td>
<input type="text" value="that">
</td>
</tr>
<tr>
<td>
<input type="text" value="them">
</td>
</tr>
</table>
I need to find "this" and "that", and if they are there, remove their <tr> container (and themselves) so I'd end up with:
<table>
<tr>
<td>
<input type="text" value="them">
</td>
</tr>
</table>
I've tried this:
jQuery(document).ready(function($){
var badfields = ['this', 'that'];
var fieldvalue = $('input[type="text"]').val();
if($.inArray(fieldvalue, badfields) > -1){
$(this).closest('tr').remove();
}
});
but it doesn't seem to want to work?
You need to iterate over all the fields using .each, so something like this:
$('input[type="text"]').each(function() {
var fieldvalue = $(this).val();
if ($.inArray(fieldvalue, badfields) > -1) {
$(this).closest('tr').remove();
}
});
Example: jsfiddle
You can be very concise sometimes with jQuery. jQuery has content selectors you can use for this type of purpose:
$("input[type=text][value=this], [value=that]").parents("tr").remove();
since you don't necessarily know this or that beforehand, you can do something like this:
var badfields = ['this', 'that'];
$(badfields).each(function(i) {
$("input[type=text][value=" + this + "]").parents("tr").remove();
});
You can use each to iterate through the selector. this in your inArray scope is not the element you were looking for.
DEMO: http://jsfiddle.net/
html:
<table>
<tr>
<td>
<input type="text" value="this">
</td>
</tr>
<tr>
<td>
<input type="text" value="that">
</td>
</tr>
<tr>
<td>
<input type="text" value="them">
</td>
</tr>
</table>
js:
jQuery(document).ready(function($){
var badfields = ['this', 'that'];
$('input[type="text"]').each(function(){
if( $.inArray(this.value, badfields) > -1 ){
$(this).closest('tr').remove();
}
});
});