i have the following code is not working. I am not getting both alert box info when page loads and when i put the cursor on the input box which has type="password". Both cases are not working right now. I need to make it work. Any help? Please
HTML
<div class="field">
<input name="ctl00$logInBox$UserName" type="text" maxlength="256" id="ctl00_logInBox_UserName" class="userName" autocomplete="off" placeholder="Username" />
<input name="ctl00$logInBox$Password" type="password" maxlength="256" id="ctl00_logInBox_Password" class="password" autocomplete="off" placeholder="Password" value="" />
</div>
Javascript
<script type="text/javascript">
window.onload = function () {
var loginid = document.getElementById('ctl00_logInBox_Password');
loginid.setAttribute('type', 'text');
alert(loginid.type);
}
(function () {
var loginFocus = document.getElementById('ctl00_logInBox_Password');
loginFocus.focus = function () {
this.type = "password";
alert(this.type);
}
})();
</script>
As per my understanding, You are willing to check type attribute of input.
DEMO
Please check it, it may help. Correct me if I have misunderstood your problem.
I have just added:
$('.password').focus(function () {
var loginFocus = document.getElementById('ctl00_logInBox_Password');
this.type = "password";
alert(this.type);
});
Update:
I have now tried it as below:
onfocus="this.type='password'; alert(this.type);"
Update Fiddle
DEMO: Using javascript
To get the attribute type , use getAttribute command
<script>
function myFunction() {
var set = document.getElementById("ctl00_logInBox_Password").setAttribute("type", "text");
var get = document.getElementById("ctl00_logInBox_Password").getAttribute('type');
alert(get);
}
</script>
Related
I'm trying to get each input value on keyup with comma separated. My code is working fine with onclick event but not with on keyup.
<input type="text" class="date" name="date[]" onkeyup="showHint(this.value)" />
This is part of my js function showhint where i'm defining the input value.
var DoB = [];
$(".date").each(function(){
DoB.push($(this).val());
});
var newDob = DoB.slice(0,-1);
xmlhttp.open("GET","validation.php?q="+newDob+",true);
Can anyone help me with this what is my mistake here?
Thanks in advance.
Are you sure the issue is the keyup? It seems to me the DoB.slice(0, -1) is causing your code not to work.
I replaced it with a DoB.join(','); to create the comma separated string.
function showHint(someValue) {
var DoB = [];
$(".date").each(function(){
//console.log($(this).val());
DoB.push($(this).val());
});
//var newDob = DoB.slice(0, -1);
var newDob = DoB.join(',');
document.getElementById("URL").value = "validation.php?q="+newDob;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="date" name="date[]" onkeyup="showHint(this.value)" />
<input type="text" class="date" name="date[]" onkeyup="showHint(this.value)" />
<br>URL : <input type="text" size="50" id="URL"/>
try this:
$( ".date" ).keyup(function() {
DoB.push($(this).val());
});
As per your code, you don't have to keep array DoB. as you have only one dob element. and you can directly get value of input.
following code will work for you
function showHint(){
var DoB = $(".date").val();
console.log(DoB);
xmlhttp.open("GET","validation.php?q="+DoB +",true);
}
I also had this happen to me before, when I used the onkeyup event in the script itself it works fine for me.
Here's an example:
document.getElementById("fname").onkeyup = function() {myFunction()};
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p>Press a key inside the text field and release it to set the text to uppercase.</p>
Enter your name: <input type="text" id="fname">
</body>
</html>
I'm having trouble getting the match to bind to the oninput property of my text input. Basically I want my submit button to be enabled only when the regular expression is matched. If the regex isn't matched, a message should be displayed when the cursor is over the submit button. As it stands, typing abc doesn't enable the submit button as I want it to. Can anyone tell me what I'm doing wrong? Thank you.
<div id="message">
</div>
<form method="POST">
<input type="text" id="txt" oninput="match()" />
<input type="submit" id="enter" value="enter" disabled />
</form>
<script>
var txt = $("#txt").value();
var PATTERN = /abc/;
var REQUIREMENTS = "valid entries must contain the string 'abc'";
// disable buttons with custom jquery function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
this.disabled = state;
});
}
});
$('input[type="submit"]).disable(true);
var match = function(){
if (txt.match(PATTERN)){
$("#enter").disable(false)
}
else if ($("#enter").hover()){
function(){
$("#message").text(REQUIREMENTS);
}
}
</script>
Your code would be rewrite using plain/vanille JavaScript.
So your code is more clean and better performance:
<div id="message"></div>
<form method="POST">
<input type="text" id="txt" oninput="match()" />
<input type="submit" id="enter" value="enter" disabled />
</form>
<script>
var txt;
var enter = document.getElementById('enter');
var message = document.getElementById('message');
var PATTERN = /abc/;
var REQUIREMENTS = "valid entries must contain the string 'abc'";
function match() {
txt = document.getElementById('txt').value;
if (PATTERN.test(txt)) {
enter.disabled = false;
} else if (isHover(enter)) {
enter.disabled = true;
message.innerHTML = REQUIREMENTS;
} else {
enter.disabled = true;
}
}
function isHover(e) {
return (e.parentElement.querySelector(':hover') === e);
}
</script>
If you wanted to say that you want handle the events in different moments, your code should be the following.
Note: the buttons when are disabled doesn't fired events so, the solution is wrapper in a div element which fired the events. Your code JavaScript is more simple, although the code HTML is a bit more dirty.
<form method="POST">
<input type="text" id="txt" oninput="match()" />
<div style="display: inline-block; position: relative">
<input type="submit" id="enter" value="enter" disabled />
<div id="buttonMouseCatcher" onmouseover="showText(true)" onmouseout="showText(false)" style="position:absolute; z-index: 1;
top: 0px; bottom: 0px; left: 0px; right: 0px;">
</div>
</div>
<script>
var txt;
var enter = document.getElementById('enter');
var message = document.getElementById('message');
var PATTERN = /abc/;
var REQUIREMENTS = "valid entries must contain the string 'abc'";
function match() {
txt = document.getElementById('txt').value;
if (PATTERN.test(txt)) {
enter.disabled = '';
} else {
enter.disabled = true;
}
}
function showText(option) {
message.innerHTML = option ? REQUIREMENTS : "";
}
</script>
Two problems here:
The variable txt is defined once outside the function match, so the value is fixed to whatever the input with id txt has when the script/page is loaded.
You should move var txt = $("#txt").val(); into the match function.
Notice I changed the function value() to val().
Problems identified:
jQuery events don't happen on disabled inputs: see Event on a disabled input
I can't fix jQuery, but I can simulate a disabled button without it actually being disabled. There's other hacks you could do to get around this as well, for example, by overlaying a transparent element which actually captures the hover event while the button is disabled.
Various syntactical errors: format your code and read the console messages
.hover()){ function() { ... } } is invalid. It should be .hover(function() { ... })
else doesn't need to be followed by an if if there's no condition
.hover( handlerIn, handlerOut ) actually takes 2 arguments, each of type Function
$('input[type="submit"]) is missing a close '
Problems identified by #Will
The jQuery function to get the value of selected input elements is val()
val() should be called each time since you want the latest updated value, not the value when the page first loaded
Design issues
You don't revalidate once you enable input. If I enter "abc" and then delete the "c", the submit button stays enabled
You never hide the help message after you're done hovering. It just stays there since you set the text but never remove it.
https://jsfiddle.net/Lh4r1qhv/12/
<div id="message" style="visibility: hidden;">valid entries must contain the string 'abc'</div>
<form method="POST">
<input type="text" id="txt" />
<input type="submit" id="enter" value="enter" style="color: grey;" />
</form>
<script>
var PATTERN = /abc/;
$("#enter").hover(
function() {
$("#message").css('visibility', $("#txt").val().match(PATTERN) ? 'hidden' : 'visible');
},
$.prototype.css.bind($("#message"), 'visibility', 'hidden')
);
$('form').submit(function() {
return !!$("#txt").val().match(PATTERN);
});
$('#txt').on('input', function() {
$("#enter").css('color', $("#txt").val().match(PATTERN) ? 'black' : 'grey');
});
</script>
HI now i using to onblur in jquery but it's not working i m searching google but not find solution
can u please check this and tell me where i m wrong .
$(document).ready(function(){
function myFunction() {
var rohit = $('#fname').val();
alert("Your name is" + rohit);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Enter your name: <input type="text" name="fname" id="fname" onblur="myFunction()">
Error show is
Uncaught ReferenceError: myFunction is not defined
Currently your myfunction() is defined in dom ready handler, which will not be accessible to the dom element. Put that outside ready handler, it will work. But I will prefer to use jquery event handler to bind blur event.
$(document).ready(function() {
$("#fname").blur(function() {
var rohit = $('#fname').val();
alert("Your name is" + rohit);
});
});
Note: put your jquery reference at the head tag. Because it should be loaded before you using its functions.
Use the following snippet:
$(function(){
$("#fname").blur(function(e){
// do stuff on blur;
});
});
Enter your name: <input type="text" name="fname" id="fname" onblur="myFunction()">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function myFunction() {
var rohit = $('#fname').val();
alert("Your name is" + rohit);
};
</script>
You can also defined as. Running jsfiddle is https://jsfiddle.net/p5urjog7/
Try with this
$(document).ready(function() {
$("#fname").on('blur', function() {
var rohit = $('#fname').val();
alert("Your name is" + rohit);
});
});
Please have a run below snippet and check the demo:
Thanks
$(document).ready(function() {
$("#fname").blur(function() {
var fnameVal = $('#fname').val();
$('#showoutput').text(fnameVal);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Enter your name: <input type="text" name="fname" id="fname" />
<p>Output on blur: <span id="showoutput"></span></p>
You need to define function before the input element, like at starting of body to call like in this fiddle.
Demo Fiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function myFunction() {
var rohit = $('#fname').val();
alert("Your name is" + rohit);
};
<script>
Enter your name: <input type="text" name="fname" id="fname" onblur="myFunction()">
At start i also got error of function is undefined, but when i wrap in head, it started working.
I am using this code..
Error is showing but focus is not working in firefox. As this code is working in IE, i can't say this code is completely wrong.
<form name="frm" action="search.php" method="post">
<input type="text" name="search" onblur="return check();"/>
<input type="submit" name="submit" />
<strong id="err"></strong>
</form>
I am using this string in external javascript.
This code is in valid.js
function check()
{
var item=frm.search;
var errr=document.getElementById('err');
if(item.value.length<3)
{
item.focus();
errr.innerHTML="Entered String is very short";
return false;
}
}
Please reply me as soon as possible.
try this one
function check()
{
var item = document.forms['frm'].elements['search'];
var errr=document.getElementById('err');
if(item.value.length<3)
{
errr.innerHTML="Entered String is very short";
setTimeout(function() {
item.focus()
}, 10);
return false;
}
}
demo jsfiddle http://jsfiddle.net/ff4vW/
Its good if you use document.getElementById()
But if you are using name
Then you should use
var item = document.forms['frm'].elements['search'];
var item = document.getElementsByName('search')[0];
I am trying to create a simple JavaScript function. When someone inserts a number in an input field, the value of another field should change to that value. Here is what I have at the moment:
function updateInput(ish) {
fieldname.value = ish;
}
<input type="text" name="fieldname" id="fieldname" />
<input type="text" name="thingy" onchange="updateInput(value)" />
Somehow this does not work, can someone help me out?
You can't access your fieldname as a global variable. Use document.getElementById:
function updateInput(ish){
document.getElementById("fieldname").value = ish;
}
and
onchange="updateInput(this.value)"
for jQuery we can use below:
by input name:
$('input[name="textboxname"]').val('some value');
by input class:
$('input[type=text].textboxclass').val('some value');
by input id:
$('#textboxid').val('some value');
<input type="text" name="fieldname" id="fieldtobechanged" />
<input type="text" name="thingy" id="inputfield" />
I have used following code and it works instantly without any delay.
var timeoutID = null;
function findMember(str) {
document.getElementById("fieldname").innerHTML = str;
}
$('#inputfield').keyup(function(e){
clearTimeout(timeoutID);
timeoutID = setTimeout(findMember.bind(undefined, e.target.value), 500);
});