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>
Related
I'm reasonably new to Javascript so sorry if this has a simple answer.
I would like to make the name that a user inputs in a form into a javascript variable. For example, If the user inputs the name 'James' into the form, I would like the variable 'ans1' to be equal to the string 'James'. Heres my code...
<form>
Name:
<input type="text" id="username" />
<input type="submit" value="Submit" onClick="makeans1()" />
</form>
<script>
function makeans1() {
var ans1 = document.getElementById.value('username');
alert(ans1);
}
</script>
The reason I have added an alert is to check to see if the code has worked. Any help would be very much appreciated. Thanks
The correct code should be:
var ans1 = document.getElementById('username').value;
And always put your alert() 's at the beginning of the function. if you want to test function-hit :)
Just replace below line
var ans1 = document.getElementById.value('username');
with
var ans1 = document.getElementById('username').value
Change: var ans1 = document.getElementById.value('username');.
To: var ans1 = document.getElementById("username").value;.
function makeans1() {
var ans1 = document.getElementById("username").value;
alert(ans1);
}
<form>
Name:
<input type="text" id="username" />
<input type="submit" value="Submit" onClick="makeans1()" />
</form>
I am copying the value of an input of type datetime-local (date_start) to another once the user writes in the first one (date_end). However I would like to be able to add 20 minutes more to the result in the second input (date_end) How could I do it?The format is example 10/20/2017 15:00
$("#date_start").keyup(function(){
var value = $(this).val();
$("#date_end").val(value);
});
The normal JQuery selector does not seem to work with this element, so I have used document.querySelector() instead of $(), So please find below my solution, this implements the stepUp() method of the DatetimeLocal object which will increment the value by minutes. Also please note I am adding the click event also in addition to keyup, since it seems necessary for this input element.
var start=document.querySelector('input[type="datetime-local"]#date_start'), end = document.querySelector('input[type="datetime-local"]#date_end')
start.value = start.value;
end.stepUp(20);
$("#date_start").on("click keyup", function(){
end.value = start.value;
end.stepUp(20);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="datetime-local" class="form-control" id="date_start" name="date_start" value="2017-06-01T08:30">
<input type="datetime-local" class="form-control" id="date_end" name="date_end" >
The Javascript equivalent for this will be.
var end = document.querySelector('input[type="datetime-local"]#date_end'), start = document.querySelector('input[type="datetime-local"]#date_start');
end.value = start.value;
end.stepUp(20);
start.addEventListener("click", addMinutes);
start.addEventListener("keyup", addMinutes);
var addMinutes = function(){
end.value = start.value;
end.stepUp(20);
};
<input type="datetime-local" class="form-control" id="date_start" name="date_start" value="2017-06-01T08:30">
<input type="datetime-local" class="form-control" id="date_end" name="date_end" >
try this
$( document ).ready(function() {
DateObj = Date.parse("10/20/2017 16:00");
// vale you get $("#date_end").val(value);
var date = new Date(DateObj+1200000);
console.log(date.toLocaleString('en-US',{ hour12: false }));
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
Below is my Html Doc and the JQuery does not do anything when the range input changes, any assistance is much appreciated as I am extremely new to web design. Even the alert doesn't work at the top so I am unsure as to what my problem is. My belief is somehow the script is never being called or it's a problem with it being an html doc but either way thank you.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var num=0;
var numOptions = new Array(100);
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
$(document).ready(function(){
$("#numQuestions").on('input',function(){
var numbQuestions = $("#numQuestions".text());
if(num>numbQuestions){
for(i=numbQuestions;i<=num;i++){
try{
$("#qRowNum'+i).remove();
}catch(err){
}
}
}else{
for ( i=num; i < numbQuestions; i++)
{
var row = '<div id="qRowNum'+ i '">
#the below function is not implemented in this version
<input type="text" placeholder="Question '+i'"> <input type="range" name="numOptions'+i'" min="0" max="5" placeholder="Number Of Options" onchange="CreateOptions(this);" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();> </div>';
$("#questionRows").append(row);
//New script test
}
}
num = numbQuestions;
});
});
<div id="questionRows">
</div>
<input type="submit" value="Start">
</form>
</body>
</html>
This is your problem:
var numbQuestions = $("#numQuestions".text());
Firstly I think you mean this:
var numbQuestions = $("#numQuestions").text();
But that is also not true because an input field has not text property. They have value So do this:
var numbQuestions = $("#numQuestions").val();
And this is another problem: $("#qRowNum'+i) When you start selector by double quotation, you need to end this also by double quotation. But it still is not a true jquery selector.
I think you need to more studies about jquery.
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 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>