Javascript for mobile HTML form - javascript

I am having some problems with Javascript :(
This is an HTML form for a mobile webpage. To save space I put the names of the text fields inside the boxes. The name disappears when you focus on the box, but I am not able to make it reappear if the user didn't write anything.
Here is the Script (in head tag):
<script type="text/javascript"> resetDefault();{if (this.value.length==0); this.value="default";} </script>
Here is the HTML code:
<input onfocus="this.value=''" onblur="resetDefault()" name="nom" type="text" value="Nom complet" default="Nom complet"/><br><input onfocus="this.value=''" onblur="resetDefault()"name="courriel" type="text" value="Courriel" default="Courriel"/><br>
I keep getting a "resetDefault is not defined" error. I don't know if default is an accepted attribute for input, but I can't set it to "value" because value becomes 0 once someone has focused on the text field, right?

There are several problems with your javascript code. First, it is not syntactically correct. You should first change this code
resetDefault();
{if (this.value.length==0);
this.value="default";}
so that it has valid syntax, like this:
function resetDefault(){
if(this.value.length == 0){
this.value = "default";
}
}
The second problem is that this refers to the global object, instead of the DOM node you want. You need to pass in a value so it knows which input to change.
Change the onblur javascript so that it passes in a parameter to the function:
onblur="resetDefault(this);"
and change the function so it accepts a parameter:
function resetDefault(that){
if (that.value.length == 0){
that.value="default";
}
}
The third problem is that "default" will just change the value of the input box to the string, "default". I doubt that is what you want. Make the value match the default attribute you gave the input:
that.value = that.getAttribute("default");
Try it out on JSFiddle

The semicolon after resetDefault() in the script in the head needs to be removed - now it's a function call of a function that's not defined.
<script type="text/javascript">function resetDefault() { if (this.value.length==0) this.value="default";} </script>

You need to define the resetDefault() function like so:
function resetDefault() {
// Function stuff here
}

Related

set text of input value with javascript

I know this is probably a piece of cake for all, but im really not any good with javascript.
I would like to set the value of html input with javascript.
I have an input like this:
<input id="input-data" value=""/>
I would like to set the text of the value with javascript, meaning that if id pass value like "CocaCola" to input, it should display "CocaCola" in input
This is how i try
document.getElementById("input-data").value = "CocaCola";
But no data gets displayed in input. When i run debugger and put value as my watch, the "CocaCola" is stored in value.
What on earth am i missing?
Make sure your code is under HTML tag, like this:
<input id="input-data" value=""/>
<script>
document.getElementById("input-data").value = "CocaCola";
</script>
Or you can use:
window.onload = function(){
document.getElementById("input-data").value = "CocaCola";
}
It works any time and anywhere.
Your JavaScript code to set value is right.
You can also try jQuery to set value like this,
$('#input-data').value = 'CocaCola';

Using one onchange javascript function for all div

I have multiple <textarea>, sometime they are blank and sometime they are filled with text.
I want to insert a simple text code such as "<check>" which will automatically change to a check (\u2713).
Presently, my code is like this:
<textarea name="1-S" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-NI" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-C" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
(This block of <textarea> gets repeated, but of course, with different name in each one.)
<script type="text/javascript">
function check(str){
var res = str.replace("<check>", "\u2713");
????
}
</script>
The output will then replace <check> into actual check symbol (\u2713)
The challenge is, I don't want to have to add ID to every <textarea> and then write a script for each one. So is there a way for me to use this one script to apply to all <textarea>???
Many thanks in advance!
You could use the getElementsByTagName method to create an array of your text area tags.
Since you're using jQuery:
$("textarea").each(function(index, textarea) {
// do replacement here
});
Note that you need to use HTML entities to put <check> into a textarea: <check>
Also, you can put a checkmark in without any Javascript like this: ✓
Yes. You can bind an event handler to all elements of a type using jquery.
$('textarea').on('change', function() {
var text = $(this).val();
if (text.match(/\<check\>/)) {
$(this).val(text.replace(/\<check\>/, "\u2713"));
}
});
The benefit of doing it this way is that you can remove your inline 'onchange' handlers from the html and consolidate your validation logic strictly to JavaScript.
To replace the actual textarea content you need to update the value of the textarea with the result of your String-replace regexp. var text = $(this).val() is just assigning the content of the textarea to the variable text, it's not a reference to the innerHTML portion of your textarea.
On a sidenote if you'd like to allow users to use shortcodes in a form, prefer square bracket syntax, e.g., [check].

Weird behaviour with change event in HTML

I have a struts tag like this
<s:select label="Select Item" name="select3ph3meter1" id="select3ph3meter1"
headerKey="0" headerValue="-- Please Select --" list="meterHeaderList"
required="true" onchange="show_3ph3meter1(this.value)" />
The problem is it is not calling the above function on change event. It works when I change the code to this:
... onchange="alert('calling')"
I can't understand what's happening here.
Here is the JavaScript function:
function show_3ph3meter1(select3ph3meter1) {
$("#3ph3meter1").load("meterFiller3p31.action",{select3ph3meter1:select3ph3meter1});
}
function show_depotReceipts(selectrecitem) {
$("#recQuantity").load("depotRecQ.action",{selectrecitem:selectrecitem});
$("#recRange").load("depotRecRange.action",{selectrecitem:selectrecitem});
}
The adjacent function is working perfectly so I assume there is no JavaScript error.
Also, when I put in another function (for instance the adjacent function name in onchange), it is also working. The problem may be with this particular function name show_3ph3meter1().
Hi if you have some other java script written over there contains errors , this code wont work.
So better have like this
<select class="style" onchange="//do something like this
//var e = document.getElementById('selectelement'); //if (e) e.value=100;" />
please check in IE browsers to get the java script errors. write entire code in that change event
First check your calling function name
if this is correct then just write
onchange="javascript : show_3ph3meter1(this)"
and get value on the function
3 else try the access value in function with selector
var elem = document.getElementById("short_code"),
selectedNode = elem.options[elem.selectedIndex];
var valu = selectedNode.value;

Setting input value to attribute value in JQuery

I have a number of <input /> boxes which I want to start off having a value of something like "Enter your name...".
When you focus them, the value becomes empty and you can type away. When you blur them, if nothing has been entered, then it goes back to "Enter your name...".
I thought of having something like this:
<input id="name" _startValue="Enter your name..." />
Then, something like this:
$(document).ready($("input").val($(this).attr(_startValue)));
This initially should set the value to _startValue but it does nothing. Replacing the line with:
$(document).ready($("input").val("hello"));
does work, however, so the problem must be with the $(this) or the attr().
First of all, how do I get this to work. Secondly, if I am trying to do this in a really retarded way, what is a good way to get this functionality?
I believe its better to use a placeholder like:
<input id="name" placeholder="Enter your name..." />
There are already libraries for this, and if you are already using jquery you should use them.
https://github.com/mathiasbynens/jquery-placeholder
just add the attribute "placeholder" and invoque the function:
<input placeholder="my placeholder">
<script type="text/javascript">
$("document").ready(function(){
$("input").placeholder();
});
</script>
Note that you only need to add the plugin if you need old browser support (in IE specially), otherwise, the attribute is enough.
Also, consider that if you code this, it will take you errors like submitting the default value of the form. What jquery plugins do generally is to make a <span> or whatever and place it on top of the input when the input is empty, and hide it when the input is not empty.
// v---you're not passing a function
$(document).ready($("input").val($(this).attr(_startValue)));
// `this` isn't magic-------^---- It doesn't just mean what you want
Should be more like this:
$(document).ready(function() {
$("input").val(function() {
return $(this).attr("_startValue");
});
});
A common way to mimic placeholders is to put the placeholder text in the element's value, then check the value on focus like:
if (this.value == this.defaultValue) this.value = '';
and then on blur:
if (this.value == '') this.value = this.defaultValue;
Please don't use placeholders instead of labels or onscreen help (e.g. format for dates). If a browser doesn't support the placeholder attribute, it's probably best not to emulate them if using it for the default value is an issue.
After all, placeholders are a "nice to have", they should not be fundamental to using the form correctly.

How to enable/disable text field on radio button interaction?

Cannot get this to work. First time using variables passed into functions. Unchecking radio button should disable form field and vice versa. lineid variable distinguishes this radio/text input pair from 10 others.
My code:
<script type="text/javascript">
function disablefield(lineid){
if (document.getElementById(lineid).checked == true){
document.dupedit.lineid.disabled = false;
} else {
document.dupedit.lineid.disabled = true;
}
}
</script>
Subset of my HTML.
You need to pass a string into your disablefield function, so put the value in quotes when you pass it in. Something like:
<input onclick="disablefield('2671997')" />
This is because document.getElementById expects a string, not an integer.
Secondly, to enable/disable the field, you need to use disabled = true; rather than = 'disabled'.
document.dupedit.lineid is looking a for a field with name "lineid", which doesn't exist in your form. I would suggest giving the field an id and using document.getElementById again instead.
If you want to continue using the name attribute, you will have to use document.getElementsByName instead. This returns an array of matching elements (since multiple elements can share the same name), but if in your code you know that the element in question is the only one with that name, you can do this:
document.getElementsByName(lineid)[0].disabled = true;
You can see a working version (I think this is how you wanted it anyway) here. And here is a version using getElementsByName.
You are missing a closing brace on the function:
function disablefield(lineid){
if (document.getElementById(lineid).checked == true){
document.dupedit.lineid='enabled';
}else{
document.dupedit.lineid='disabled';
}
} //<-- here
Also, can I suggest you pass this to the function. Then you don't have to call getElementById
<input onclick='disablefield(this)' type.....
function disablefield(obj){
if (obj.checked == true){
document.dupedit.lineid='enabled';
}else{
document.dupedit.lineid='disabled';
}
}
I think what you need is to re-think the code.
Don't use ID on the checkbox. Better move that ID to the text field you want to disable/enable and check whether that field is disabled/enabled, not the checkbox itself
use cleaner JS.
Please, take a look at the jsFiddle, I have compiled for you. Does it do what you expect, Dan?

Categories

Resources