I really don't understand why this is being so hard for me to get working:
http://jsfiddle.net/jp2code/qCExy/
It will eventually be going into an ASP.NET control, so I believe I need to pass Javascript the <textarea> control's ID.
It doesn't work.
So, in the jsFiddle, I tried using standard controls for First and Last names, but they don't work either.
EDIT:
I've been playing around with the jsFiddle, and it appears that my jsOnFocus is never called (alert never fires). However, I was able to run down a little script from someone else that makes the multiline textbox clear and reset - I just can't seem to find a way to call this from a javascript function:
function jsOnFocus(obj) {
alert("Inside the jsOnFocus.");
if (obj.Value==obj.defaultValue)
obj.Value="";
}
function jsOnBlur(obj) {
if (obj.Value==="")
obj.Value=obj.defaultValue;
}
Here is the HTML.
<table>
<tr><td>Message:</td><td> </td></tr>
<tr>
<td> </td>
<td>
<textarea name="txtMsg" rows="6" cols="30"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value==='')this.value=this.defaultValue;">[Write your message here or call my voice number at (555) 222-1234.]</textarea>
</td>
</tr>
<tr>
<td>Test1:</td>
<td><input type="text" name="txtTest1"
onfocus="jsOnFocus(txtTest1)"
onblur="jsOnBlur(txtTest1)" value="Test1" /></td>
</tr>
<tr>
<td>Test2:</td>
<td><input type="text" name="txtTest2"
onfocus="if(this.value=='Test2'){this.value=''};" value="Test2" /></td>
</tr>
<tr>
<td>Test3:</td>
<td><input type="text" name="txtTest3"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value==='')this.value=this.defaultValue;" value="Test3" /></td>
</tr>
</table>
"Message" works, but I'd like to get the code to running in a javascript that I can place in my "js" file and use on other objects.
"Test1" is an attempt to call the javascript, but it does not work.
"Test2" works, but it does not use the technique in "Message".
"Test3" works, and it does use the technique in "Message".
Does anyone see how to make this code work in the javascript instead of inline html?
jsFiddle Link: http://jsfiddle.net/jp2code/qCExy/10/
I played around a bit with your fiddle. I'm a newb when it comes to jsfiddle though so I did not dare to try to save my changes.
Anyway, there are a few things that keep the Test1 box from working. First of all, the script in the "JavaScript" block in the fiddle is added to the page like this (check by viewing source in the Result section):
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
function jsOnFocus(obj) {
alert("Inside the jsOnFocus.");
if (obj.Value==obj.defaultValue)
obj.Value="";
}
function jsOnBlur(obj) {
if (obj.Value==="")
obj.Value=obj.defaultValue;
}
});//]]>
</script>
So your functions are not in a scope (for lack of a more precise term) where you can call them like you tried to do.
To fix this I added the script directly in the Html section inside as <script> block.
There was also a small issue with the javascript code itself. The value property is called value, not Value.
Also, I changed the onfocus and onblur attributes on the input to pass this to the functions. You can of course change it to pass an id if you want and then look up the control using the id. In that case make sure that the control has an id specified.
Anyway, here is the resulting code from the Html section of the fiddle:
<script type="text/jscript">
function jsOnFocus(obj) {
if (obj.value==obj.defaultValue)
obj.value="";
}
function jsOnBlur(obj) {
if (obj.value==="")
obj.value=obj.defaultValue;
}
</script>
<table>
<tr><td>Message:</td><td> </td></tr>
<tr>
<td> </td>
<td>
<textarea name="txtMsg" rows="6" cols="30" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value==='')this.value=this.defaultValue;">[Write your message here or call my voice number at (555) 222-1234.]</textarea>
</td>
</tr>
<tr>
<td>Test1:</td>
<td><input type="text" name="txtTest1" onfocus="jsOnFocus(this)" onblur="jsOnBlur(this)" value="Test1" /></td>
</tr>
<tr>
<td>Test2:</td>
<td><input type="text" name="txtTest2" onfocus="if(this.value=='Test2'){this.value=''};" value="Test2" /></td>
</tr>
<tr>
<td>Test3:</td>
<td><input type="text" name="txtTest3" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value==='')this.value=this.defaultValue;" value="Test3" /></td>
</tr>
</table>
Code Behind:
string strUserName = "User Name";
string strPassword = "Password";
txtUserName.Text = strUserName;
txtPassword.Text = strPassword;
txtPassword.Attributes.Add("onblur", "PasswordBlur(this, '" + strPassword + "');");
txtUserName.Attributes.Add("onblur", "UserNameBlur(this, '" + strUserName + "');");
txtUserName.Attributes.Add("onfocus", "UserNameFocus(this, '" + strUserName + "');");
txtPassword.Attributes.Add("onfocus", "PasswordFocus(this, '" + strPassword + "');");
Java Script:
function UserNameBlur(txtElem, strUserName) {
if (txtElem.value == '') txtElem.value = strUserName;
}
function PasswordBlur(txtElem, strPassword) {
if (txtElem.value == '') txtElem.value = strPassword;
}
function UserNameFocus(txtElem, strUserName) {
if (txtElem.value == strUserName) txtElem.value = '';
}
function PasswordFocus(txtElem, strPassword) {
if (txtElem.value == strPassword) txtElem.value = '';
}
Related
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>
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've the follow code for get the value fot two input and send it to a Ajax file for proccess it. It doesn't work and I put an alert for see what's wrong and the alert return me [object HTMLInputElement].
<tr>
<td>Introduzca licencia: </td>
<td><input type="text" id="lic" name="lic" value=""/></td>
</tr>
<tr>
<td>Introduzca apellidos: </td>
<td><input type="text" id="ape" name="ape" value=""/></td>
</tr>
<script type="text/javascript">
var lic=document.getElementById("lic").value;
var ape=document.getElementById("ape").value;
</script>
<tr>
<td><input type="button" value="Buscar" onclick="load(lic, ape);"/></td>
</tr>
If I try that it return the value of the input
<script type="text/javascript">
function prueba(){
var lic=document.getElementById("lic").value;
var ape=document.getElementById("ape").value;
alert("La licencia es: "+lic+" y los apellidos son: "+ape);
}
</script>
<tr>
<td><input type="button" value="Buscar" onclick="prueba();"/></td>
I don't know why the first code doesn't work if I'm making the variables of the same way.
In the onclick handler (load(lic, ape);) for <input type'='button'> in the first code block, neither the load function nor the two arguments (lic and ape) are defined.
Change it to:
onclick="load();"
and make your script file as:
function load(){
var lic = document.getElementById("lic").value,
ape = document.getElementById("ape").value;
alert("lic is " + lic); // test
alert("ape is " + ape); // test
}
DEMO
P.S. You are missing <table> tags. And document.getElementById will always return a DOM object.
I have a table where each td element will contain a input type text.
<tr>
<td id="a1"><input type="text" id="a1t"/></td>
<td id="a2"><input type="text" id="a2t"/></td>
</tr>
<tr>
<td id="b1"><input type="text" id="b1t"/></td>
<td id="b2"><input type="text" id="b2t"/></td>
</tr>
I need to know the td id when text input is focused. I tried doing that by calling a js function with onfocus event attached to input type text, but the function is not getting called.
<input type="text" id="b2t" onfocus="cell_clicked('b2t')" />
Here is the function and a fiddle:
function cell_clicked(cell_no){
alert(cell_no);
}
But the function is not getting called.
Am i doing anything wrong?
Your code works fine, you have a setting wrong in jsfiddle.
Under Framework and extensions change onLoad to no wrap to make your function cell_clicked globally available.
See this http://jsfiddle.net/ywt8V/3/ (your fiddle http://jsfiddle.net/ywt8V/ with just this setting is changed).
As a side-note, you could access the id of the parent table-cell like this:
onfocus="cell_clicked(this.parentNode.id)"
Hope this helps
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<td><div id="boom" class="selected"><input type="text" id="b2t" onfocus="cell_clicked(this.id)" /></div></td>
function cell_clicked(id){
var foo = $( "#"+id ).parent(".selected").attr( "id" );
alert(foo);
}
I am new to this forum and I want to be able to get a value from my html inputs into javascript. Right now i have this code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PWS</title>
</head>
<body bgcolor="#009933" text="#FFFFFF">
<H1 align="center">PWS Julia en Sophie</H1>
<hr>
<br>
<strong>DOUCHE</strong>
<table>
<tr>
<td>Temperatuur</td>
<td><input type="text" name="dtemp" onClick="calculateTotal()" /></td>
</tr>
<tr>
<td>Tijd</td>
<td><input type="text" name="dtijd" onClick="calculateTotal()" /></td>
</tr>
<tr>
<td>Hoe vaak per week</td>
<td><input type="text" name="dfreq" onClick="calculateTotal()" /></td>
</tr>
</table>
<br>
<strong>BAD</strong>
<table>
<tr>
<td>Temperatuur</td>
<td><input type="text" name="btemp" onClick="calculateTotal()" /></td>
</tr>
</tr>
<tr>
<td>Hoe vaak per week</td>
<td><input type="text" name="bfreq" onClick="calculateTotal()" /></td>
</tr>
</table>
<script type="text/javascript">
var dTemp = document.getElementsByName("dtemp").value;
document.write(dTemp);
</script>
obviously, its not working. Because the dTemp value stays undefined.
Can anyone help me, thanks in advance,
Bob
document.getElementsByName returns an array, so you have to reference the position of the element:
var dTemp = document.getElementsByName("dtemp")[0].value;
I would also recommend giving ID's to your inputs, since it seems that each name is unique in your case, that way you could use document.getElementById
document.getElementsByName("dtemp") will give you array of elements, traverse through one by one and get the value from it.
var elements = document.getElementsByName("dtemp");
var firstValue = elements[0].value;
1) You need to index the result of getElementsByName, as described in other answers; append [0] to document.getElementsByName("dtemp").
2) You can’t use document.write in code that is executed after the page has loaded. It would replace the current document by the written content. Write to an element instead.
3) You have not defined the function calculateTotal at all. Wrap your JavaScript code in a function, e.g.
<div id=result></div>
<script>
function calculateTotal() {
var dTemp = document.getElementsByName("dtemp")[0].value;
document.getElementById('result').innerHTML = dTemp; }
</script>
4) You have a long way to go, since now your code makes no attempt at calculating anything, you should hardly use onclick on an input element to start the calculation (rather, onchange on it, or onclick on a separate button element). You should read a good JavaScript primer, really.