I wrote function, which control input text. When I click button, in Input set value. In that time I need that function 'StartDate1.change' control change input value. So if this is value no equals 12/24/2013 -> clear field. But this is function doesn't work. Can you help me fix it?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="demo_form.asp">
Date: <input type="text" name="Phone" title="title1" value="">
<input id="target" class="ms-ButtonHeightWidth" type="button" accesskey="O"
value="Add date" >
</form>
<script type="text/javascript">
$(document).ready(function(){
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
});
var StartDate1=$('[title="title1"]');
StartDate1.change(function(event){//doesn't get here
window.setInterval(function(){
if($(event.target).val()==='12/24/2013')
{
//some code
}else
{
$(event.target).val('');
}
});
});
});
</script>
</body>
</html>
This is example on fidler:
Fiddle
If you need to control value in input field use keyup handler
http://jsfiddle.net/yPYDJ/5/
The onchange event only fires when the value changes and the input loses focus.
You can trigger it manually changing your code like this:
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
StartDate.change();
});
The function passed to window.setInterval is called repeatedly. So value set by the function on button click is reset immediately.
var timeFunction;
$( "#targetb" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.off('change');
StartDate.val('12/25/2013');
StartDate.on('change',function(event){
console.log("lol");
timeFunction=window.setInterval(clearInput,2000);
});
});
function clearInput(){
var StartDate=$('[title="title1"]');
if(StartDate.val()==='12/24/2013')
{
//some code
}else
{
StartDate.val('');
window.clearInterval(timeFunction);
}
}
I have created a new fiddle http://jsfiddle.net/yPYDJ/4/. Check this and accept it ifthis is what you expected.
Related
I am learning Javascript.. Below code working only if my script tag below my input text element, but if i place code above input text tag, its not working. May I know why? Below is code:
<head>
</head>
<body>
<input type="text" id="name" >
<script type="text/javascript">
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
</script>
</body>
Below code is same as above except that I am using function, inside which I am using same code as above. But in this case, my script tag is above input text tag, and its working. How it's working in this case? Below is the code:
<head>
<script type="text/javascript">
function keyPressListener(){
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
So, what exactly difference between above 2 codes?
When you are using the onkeypress attribute. It actually works the same way as the addEventListener. You just have to write a simple function and call it in onkeypress
<input type="text" id="name" onkeypress="keyPressed()">
<script>
function keyPressed(){
console.log('Key Pressed');
}
</script>
Why is not working to place above the input
-Because document was not ready .so you need body.onload event .see the body onload=start() it will apply the js function after body loaded
<body onload="start()">
<input type="text" id="name">
<script type="text/javascript">
function start() {
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e) {
console.log('Pressed!')
})
}
</script>
</body>
And the second one -you are using two function in a single event. So use with any one of the event
if use with inline keypress of keyPressListener() else use Dom event of the
keypress (addEventListener)
*Note:
Dont include the addEventListener() inside keyPressListener() .
If you use with addEventListener() remove the onkeypress event inline of the markup.
because both are same action .
<head>
<script type="text/javascript">
function keyPressListener() {
console.log('Pressed!')
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
You can use addEventListener.
Or try this as your input:
Add a ; after keyPressListener():
<input type="text" id="name" onkeypress="keyPressListener();">
If that doesn't work try this:
<input type="text" id="name" onkeypress="keyPressListener(); return true;">
HTML5 knows that when you use an onkeypress attribute that it needs to call the JavaScript function when the key is pressed. You can basically put any functional JavaScript in the parameter for the onkeypress="(JavaScript goes here)" attribute.
You can also just grab the element from the DOM and then add the event listener to the element like so:
jQuery: $('#name').onkeypress( function() { //code goes here } );
Regular Js: document.getElementById('name').onkeypress( function() { //code goes here } );
I am struggling with buttons and JavaScript.
I have a button which name is for example button1 and I would like to put the name of it button1 to input and click enter. I mean that I would like to send query for searching/sorting.
Here is with what I am done so far. It is working but only put text into input box without any action.
http://jsfiddle.net/9t7L4dmw/
$( "button" ).click(function() {
var text = $( this ).text();
$( "input" ).val( text );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<input type="text" placeholder="Search">
So when you click the button you want:
the input to be filled with the button's name
submit a form?
In that case wrap (at least) the input inside a form tag. In your JS submit the form after filling the input.
http://jsfiddle.net/9t7L4dmw/3/
$("form").on('click', 'button', function () {
$("#search").val($(this).text());
}).on('submit', function (event) {
event.preventDefault;
var data = $(this).serialize();
alert(data);
// $.post(...);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method=post>
<button type=submit>button1</button>
<button type=submit>button2</button>
<button type=submit>button3</button>
<button type=submit>button4</button>
<input type=search id=search name=search placeholder="Search">
</form>
About version without ajax
It doesn't work here in the snippet:
Blocked form submission to 'http://stacksnippets.net/js' because the form's frame is sandboxed and the 'allow-forms' permission is not set.
but it's ok in jsfiddle: http://jsfiddle.net/9t7L4dmw/4/
This is the code I am using which doesn't work. I want the value of "data-page" in the "button" to receive the value of the input field when the input field is blurred. The "data-page" is a number. Appreciate your assistance, thanks.
<input type="text" value="" id="findR" />
<button id="findRB" data-page="" >Find Record</button>
<script>
$(document).ready(function() {
$( '#findR' ).blur(function() {
$('#findRB[name=data-page]').val($('#findR').val());
})
});
</script>
data-page is a data-* attribute and not name attribute.
$( '#findR' ).blur(function() {
$('#findRB').data('page',this.value);
})
I would recommend using data(), but you won't see the actual attribute change as the value is stored in the DOM object. If you wish so, use attr()
$( '#findR' ).blur(function() {
$('#findRB').attr('data-page',this.value);
})
Also, use this.value instead of $( '#findR' ).val() to set the value.
Here is a working example:
$(document).ready(function() {
$( '#findR').blur(function() {
$('#findRB').attr('data-page', $('#findR').val());
});
});
JSFiddle: http://jsfiddle.net/jyq2bm4r/
To set data attribute in element, you can use
$('findRB').attr('data-page', $('#findR').val());
Hello can you please test this. This is working fine for me::
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type="text" value="" id="findR" />
<button id="findRB" data-page="" >Find Record</button>
<script>
$(document).ready(function() {
$( '#findR' ).blur(function() {
var inputVal = $('#findR').val();
document.getElementById("findRB").setAttribute("data-page", inputVal);
})
});
</script>
</body>
</html>
I want execute the alert inside the $("#address").change function , but that needs to be done only if the the value is changed using the button .
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('button').click(function(){
$("#address").val("hi")
})
$("#address").change(function(){
alert("The text has been changed.");
});
});
</script>
</head>
<body>
<input type="text" id="address">
<button>Click</button>
</body>
</html>
You can trigger change event in click function:
$('button').click(function(){
$("#address").val("hi")
$("#address").change(); //or $("#address").trigger("change");
});
$("#address").change(function(){
alert("The text has been changed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address" type="text">
<button>Change</button>
Trigger the change event like this:
$('button').click(function(){
$("#address").val("hi")
$("#address").trigger('change');
});
$("#address").change(function(){
alert("The text has been changed.");
});
If you want the alert on #address change only when the button is clicked and not when changing the #address value manually:
var textChangedHandler = function() {
alert("The text has been changed.");
};
$('button').click(function(){
// Attach event handler for 'change' to #address
$("#address").bind("change", textChangedHandler);
// Update #address value
$("#address").val("hi");
// Trigger 'change'
$("#address").trigger('change');
// Remove event handler for 'change' from #address
$("#address").unbind("change", textChangedHandler);
});
DEMO
I have two text fields:
<input type="text" id="ex_1" class="update">
<input type="text" id="ex_2" class="update">
I want when I assign value:
jQuery("#ex_1").val(12);
jQuery event called like below but not on the change but on assign value:
jQuery(".update").change();
jQuery(".update").live('keyup change', function()
{
alert(jQuery(this).val());
}
On the assignment of value jQuery event called?
you can use like this
$(".update").keyup(function () {
$(this).trigger("change");
});
$(".update").change(function () {
alert("change");
});
DEMO
Is this what you are looking for>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../JS/jQuery.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("input").change(function () {
alert('in'); // do you stuff here
});
$("#Button1").click(function () {
$("input").val(12);
$("input").trigger("change");
});
});
</script>
</head>
<body>
<input type="text" id="ex_1" class="update">
<input type="text" id="ex_2" class="update">
<input id="Button1" type="button" value="button" />
</div>
</body>
</html>
.trigger("change") will invoke the elements change function.
In the code above, on click of the button the val will be changed and also the change function will be triggered.
Syntax :
$("selector_of_element").trigger("event_function");
The change event fires only if the value is changed by the user interaction.
If you want to fire event then you have manually trigger event. So use .change(); or.trigger('change');
If you're programatically assigning value, you'll have to manually trigger the change event. Check this answer.
Try this:
jQuery('#ex_1').val(12).change();