I have a problem, with disabling a input button with javascript in a aspx document at ie.
The js look's like
<script language="javascript" type="text/javascript">
function SetButtonStatus(sender, target)
{
if (searchinput.value.length < 4)
{
document.getElementById(target).disabled = true;
}
else
{
document.getElementById(target).disabled = false;
}
}
</script>
I call the input button with
<input name="searchinput" type="text" value="" id="searchinput" onkeyup="SetButtonStatus(this, 'searchsubmit')" />
In Chrome everything works fine. If i type more then 4 characters in the inputfield, the button will be enabled. But in IE & FF nothing happens... Why? How could i fix this?
You are depending on the non-standard "Create a global variable for every element that has an id" that is supported by Chrome and IE in some rendering modes.
Replace searchinput with sender (since you have defined sender and passed a reference to the element you are interested in already).
<script language="javascript" type="text/javascript">
function SetButtonStatus(sender, target)
{
// use document.getElementById("searchinput") instead of searchinput or in your case can use sender
document.getElementById(target).disabled = document.getElementById("searchinput").value.length < 4;
}
</script>
Why don't you just use jquery it handles all browsers internaly and you don't have to worry about them. Make it like this:
<input name="searchinput" type="text" value="" id="searchinput"/>
<input type="button" value="button" disabled="true" id="buttonSearch"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('#searchinput').keydown(function(e){
var lenght = 3;
if(e.keyCode ==8)
{
lenght = 5;
}
if (searchinput.value.length < lenght)
{
$('#buttonSearch').attr("disabled", true);
}
else
{
$('#buttonSearch').removeAttr('disabled');
}
});
});
</script>
Related
I created the following Javascript as input placeholder attribute alternative for browsers that don't support the input placeholder attribute, like old versions of Internet Explorer:
function placeholder_check(value1) {
if(document.getElementById(value1).getAttribute('value') == null || document.getElementById(value1).getAttribute('value') == '') {
document.getElementById(value1).setAttribute('value', '');
}
if(document.createElement('input').placeholder == undefined) {
if(document.getElementById(value1).getAttribute('value') == '') {
document.getElementById(value1).setAttribute('value', document.getElementById(value1).getAttribute('placeholder'));
}
}
}
This code will set the value of an input to the placeholders value. But only, if the placeholder attribute is not supported by the browser. If it is supported, the placeholder attribute will be used instead. This code will also only get executed if the value attribute in not set.
It's easy to implement since you only need a specific id for every input and just a small piece of Javascript to call the function like that: onmouseover="placeholder_check(this.id);", e.g.:
<input id="input1" placeholder="plaseholder 1" onmouseover="placeholder_check(this.id);">
I tested this code a little bit and it seems to work. Since I'm not very familiar with Javascript, I'd like to know if I did everything right? Or, is there something I should improve? Or, something unexpected that won't work on some browsers?
you could load that function with the onload event
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
For who is interested in it, here's the working code:
<!DOCTYPE html>
<html>
<head>
<script>
function placeholder_check(value1) {
if(document.getElementById(value1).getAttribute('value') == null || document.getElementById(value1).getAttribute('value') == '') {
document.getElementById(value1).setAttribute('value', '');
}
if(document.createElement('input').placeholder !== undefined) {
if(document.getElementById(value1).getAttribute('value') == '') {
document.getElementById(value1).setAttribute('value', document.getElementById(value1).getAttribute('placeholder'));
}
}
}
function placeholder_check_start() {
var elements = document.querySelectorAll("form input");
for (var i = 0, element; element = elements[i++];) {
if(element.id != null && element.id != '') {
placeholder_check(element.id);
}
}
}
</script>
</head>
<body onload="placeholder_check_start();">
<form>
<input id="fff" placeholder="Input 1">
<input id="lll" placeholder="Input 2">
<input id="uuu" placeholder="Input 3">
</form>
</body>
</html>
After page load, this will automatically loop thought all input fields within a form and set the value to the placeholders text, but only if the browser doesn't support input placeholder attribute and is the value isn't set already.
I am trying to show alert and focus on control when user try to leave control without entering any value in the control. This requirement is something like user is forced to enter values (I know there are certain limitations of such requirements).
When user leaves textbox1 alert is shown and at the sametime alert for textbox2 is also displayed as I am trying to focus on textbox1. This becomes infinite loop in IE and both the pop up keep on displaying in IE.
This code works perfectly in chrome but not in any version of ie.
Code sniphet below:
<html>
<head>
<script language="javascript">
function ShowAlertAndFocus1(){
var txt1 = document.getElementById("txtBox1");
if(txt1.value.length == 0){
alert("Blur 1 called");
txt1.focus();
};
};
function ShowAlertAndFocus2(){
var txt2 = document.getElementById("txtBox2");
if(txt2.value.length == 0){
alert("Blur 2 called");
txt2.focus();
};
};
</script>
</head>
<body>
<input type="text" id = "txtBox1" onblur="ShowAlertAndFocus1();"/>
<input type="text" id = "txtBox2" onblur="ShowAlertAndFocus2();"/>
</body>
</html>
I am not sure if am missing something or this limitation is with IE only?
<!DOCTYPE html>
<html>
<head>
<title> x </title>
<script>
function setOnBlur( txtBox,n ){
setTimeout( function(){
if (document.activeElement==txtBox) {
txtBox.onblur=function(){
if (txtBox.value.length == 0){
alert("Blur "+n+" called")
setTimeout( function(){txtBox.focus()},0 )
}
else txtBox.onblur=null
}
}
},0)
}
</script>
</head>
<body>
<input type=text id=txtBox1 onfocus=setOnBlur(txtBox1,1) >
<input type=text id=txtBox2 onfocus=setOnBlur(txtBox2,2) >
</body>
</html>
No Proper Solutions found till now.
EDIT -
Trick - I used two variables and set them inside the methods. I again checked the values before showing the popup.
Basically, your alerts cause the focus to go away as soon as you focus on the text fields. It is an odd behavior in IE that the blur event comes first. Maybe you can try replacing the alerts and try using console.log instead (That would only work in IE 8 & 9 if developer tools are opened). Or best, you can remove the alerts completely. That should work.
<html>
<head>
<script language="javascript">
function ShowAlertAndFocus1(){
var txt1 = document.getElementById("txtBox1");
if(txt1.value.length == 0){
console.log("Blur 1 called");
txt1.focus();
};
};
function ShowAlertAndFocus2(){
var txt2 = document.getElementById("txtBox2");
if(txt2.value.length == 0){
console.log("Blur 2 called");
txt2.focus();
};
};
</script>
</head>
<body>
<input type="text" id = "txtBox1" onblur="ShowAlertAndFocus1();"/>
<input type="text" id = "txtBox2" onblur="ShowAlertAndFocus2();"/>
</body>
</html>
I have a snippet {example} - i would like to add that snippet through a jquery function like this:
<script type='text/javascript'>//<![CDATA[
$(function(){
var value = $('#formname').attr("value");
if (value == "workspace-brochure") {
$('#results').text("{sn-english-workspace-thanks}");
}
});//]]>
</script>
it doesnt seem to be working though. anyone familiar with jquery and expression engine that can let me know if this is even possible.
This works fine in my testing:
<form>
<input type="text" id="formname" value="workspace-brochure">
</form>
<div id="results"></div>
<script>
$(function () {
var value = $('#formname').val();
if (value == "workspace-brochure") {
$('#results').text("{sn-english-workspace-thanks}");
}
});
</script>
Fiddle: http://jsfiddle.net/phripley/rE2G7/
I have a textarea, which will handle output, and a textfield which will handle user input.
Focus will be entirely on the input field.
I can't make it so that the user input field will add text when the form is submitted (enter key is pressed). It will only work if there is a button and this is clicked. How do I solve this issue?
Below is the code i'm trying for the enter key submit.
<html>
<head>
<script type="text/javascript">
function addtxt(input) {
var obj=document.getElementById(input)
var txt=document.createTextNode("blah blah")
obj.appendChild(txt)
}
</script>
</head>
<body>
<textarea id="textarea1"></textarea>
<br><input type="text" onSubmit="addtxt('textarea1');">
</body>
</html>
This will do the job. Also, you should deal with the value property of the textarea rather than appending text nodes to it: if the user changes the textarea's value at all, changing its child nodes afterwards will have no effect. If you want the textarea to be read-only, add a readonly attribute: <textarea id="textarea1" readonly></textarea>.
<script type="text/javascript">
function inputKeyDown(evt, input) {
if (evt.keyCode == 13) {
var textarea = document.getElementById("textarea1");
textarea.value += "\n" + input.value;
input.value = ""; // I'm guessing you may want this
return false;
}
}
</script>
<input type="text" onkeydown="return inputKeyDown(event, this);">
Instead of submit, try using the keypress event. Detect when the enter key is pressed, copy the data, and cancel the event (to prevent form submission). If you allow the form to submit, it will simply replace the existing page with the result of the form post.
Modifying your current code:
<html>
<head>
<script type="text/javascript">
function addtxt(e,ctl,input) {
var key;
if (window.event) {
key = event.keyCode;
} else {
key = e.which;
}
if (key == 13) {
var obj=document.getElementById(input);
var txt=document.createTextNode("blah blah");
obj.appendChild(txt);
ctl.value = '';
return false;
}
return true;
}
</script>
</head>
<body>
<textarea id="textarea1"></textarea>
<br><input type="text" onkeypress="return addtxt(event,this,'textarea1');">
</body>
</html>
Note that there may be much better ways to achieve your ultimate goal, but since you don't state what that is, this is really the best I can do. Also, I'd would definitely look at using a framework like jQuery/Dojo/Prototype and add the handlers unobtrusively.
Use the form element
<form onsubmit="addtxt('textarea1')">
<textarea id="textarea1"></textarea>
<br><input type="text" />
</form>
You can use JQuery
$('textarea#textarea1').keypress(function(e) {
if (e.keyCode == 13) { // enter
//do some stuff
}
});
Can I create a javascript variable and increment that variable when I press a button (not submit the form).
Thanks!
Yes:
<script type="text/javascript">
var counter = 0;
</script>
and
<button onclick="counter++">Increment</button>
The purist way to do this would be to add event handlers to the button, instead of mixing behavior with the content (LSM, Layered Semantic Markup)
<input type="button" value="Increment" id="increment"/>
<script type="text/javascript">
var count = 0;
// JQuery way
$('#increment').click(function (e) {
e.preventDefault();
count++;
});
// YUI way
YAHOO.util.Event.on('increment', 'click', function (e) {
YAHOO.util.Event.preventDefault(e);
count++;
});
// Simple way
document.getElementById('increment').onclick = function (e) {
count++;
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
};
</script>
<script type="text/javascript">
var i=0;
function increase()
{
i++;
return false;
}</script><input type="button" onclick="increase();">
I needed to see the results of this script and was able to do so by incorporating the below:
var i=0;
function increase()
{
i++;
document.getElementById('boldstuff').innerHTML= +i;
}
<p>var = <b id="boldstuff">0</b></p>
<input type="button" onclick="increase();">
add the "script" tag above all and a closing script tag below the function end curly brace. Returning false caused firefox to hang when I tried it. All other solutions didn't show the result of the increment, in my experience.
Use type = "button" instead of "submit", then add an onClick handler for it.
For example:
<input type="button" value="Increment" onClick="myVar++;" />
Yes.
<head>
<script type='javascript'>
var x = 0;
</script>
</head>
<body>
<input type='button' onclick='x++;'/>
</body>
[Psuedo code, god I hope this is right.]
yes, supposing your variable is in the global namespace:
<button onclick="myVar += 1;alert('myVar now equals ' + myVar)">Increment!!</button>
I believe you need something similar to the following:
<script type="text/javascript">
var count;
function increment(){
count++;
}
</script>
...
and
<input type="button" onClick="increment()" value="Increment"/>
or
<input type="button" onClick="count++" value="Increment"/>
Had a similar problem. Needed to append as many text inputs as the user wanted, to a form. The functionality of it using jQuery was the answer to the question:
<div id='inputdiv'>
<button id='mybutton'>add an input</button>
</div>
<script>
var thecounter=0; //declare and initialize the counter outside of the function
$('#mybutton').on('click', function(){
thecounter++;
$('#inputdiv').append('<input id="input'+thecounter+'" type="text/>);
});
</script>
Adding the count to each new input id resulted in unique ids which lets you get all the values using the jQuery serialize() function.