when I release a key in an input form html field, I get in Firefox 33.1 in jQuery an keyup event and also an unwanted focusout event. I just want the keyup event when releasing the key.
This is my code:
<html>
<head>
<script src="libraries/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<form id="contact_form">
<input class="contact_save" type="text" value="" />
</form>
</body>
<script>
$(document).ready(function($){
$('#contact_form .contact_save').focusout(function() {
alert("focusout!");
});
$('#contact_form .contact_save').keyup(function() {
alert("keyup!");
});
});
</script>
</html>
What I am doing wrong?
Thanks
Michael
It's because the alert causes the focusout to be called. Putting the result in another element for an example does not cause it to trigger:
$('#contact_form .contact_save').focusout(function() {
alert("focusout!");
});
$('#contact_form .contact_save').keyup(function() {
$('#result').val('keyup');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contact_form">
<input class="contact_save" type="text" value="" />
<output id="result" />
</form>
Trying using:
$('#contact_form .contact_save').blur(function() {
alert("focusout!");
});
Related
I have a text-field whose value will be set on the click of a button. I want to detect when the value of the input field will change. I can't figure out the specific event to fire.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myFunction() {
$('#mytxtBox').val("2018/12/18");
}
$(document).on('input', '#mytxtBox', function() {
alert("Eureka!!!")
});
</script>
</head>
<body>
<input id='mytxtBox' type="text">
<button onclick="myFunction()">Press it</button>
</body>
</html>
Use trigger method to trigger the input event.
$('#mytxtBox').val("2018/12/18").trigger("input");
You need the change event. first you subscribe the input to the event listener, and add your logic that you want to fire when the event is called. Then you trigger the event after an update. Something like...
$(function(){//bind the event listener
$('#mytxtBox').on('change', function(){
//do stuff here
});
})
function myFunction() {
$('#mytxtBox').val("2018/12/18");
$('#mytxtBox').trigger('change');//trigger the event
}
Just assign the change a .change() and it will trigger the onChange event
$('#updateValue').on('click', function () {
$('#mytxtBox').val("2018/12/18").change();
});
$('#mytxtBox').on('change', function() {
console.log('abc');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='mytxtBox' type="text">
<button id="updateValue"> Press it </button>
Try this..
the alert will pop before the value appear
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myFunction() {
$('#mytxtBox').val("2018/12/18").trigger("eureka");
}
$(function(){
$('#mytxtBox').on("eureka", function() {
alert("Eureka!!!")
});
});
</script>
</head>
<body>
<input id='mytxtBox' type="text">
<button onclick="myFunction()">Press it</button>
</body>
</html>
We can try using passing function as a callback to val() method.
Reference: http://api.jquery.com/val/#val-function
function myFunction() {
$('#mytxtBox').val(function(i ,value){
alert('hello i am going to change');
return "2018/12/18";
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='mytxtBox' type="text">
<button onclick="myFunction()">Press it</button>
There are multiple events for textbox such as keypress, change, keydown, keyup etc. You can select any as suitable for your goal.
Below example use keypress event:
function fnChangedText() {
alert("Eureka!!!");
}
function myFunction() {
$('#mytxtBox').val("2018/12/18");
$('#mytxtBox').keypress();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='mytxtBox' type="text" onkeypress="fnChangedText()">
<button onclick="myFunction()"> Press it </button>
I'm trying to use sth like onchange but with no results.
i've been searching for a while but i didn't find.
HTML
<input type="text" id="myInput" />
<div id="button"></div>
JS
<script>
$("#button").on('click', function()
{
$("#myInput").val("new value");
});
$("#myInput").on('change keyup paste blur oncut propertychange', function()
{
//my code
});
</script>
I can't find a event where a JQ action is recognized like a changing in my input...
Thank you for your help!
Did you put these js code part into the $(document).ready(function(){
});
I think because these js is not loaded when the webpage is completed loaded.
$(document).ready(function(){
$("#button").on('click', function()
{
$("#myInput").val("new value");
});
$("#myInput").on('change keyup paste blur oncut propertychange', function()
{
console.log('event detected');
});
});
<html>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type="text" id="myInput" />
<div id="button"></div>
</body>
</html>
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<input id="test" value="">
<input type="button" id="btn" value="Get">
</body>
</html>
And JS:
$('#btn').click(function(){
alert(document.documentElement.innerHTML);
});
http://jsbin.com/wuveresele/edit?html,js,output
I want to enter some value (for example, 123) into input field, click button and see "rendered" html code of the page in an alert popup.
What I see:
...
<input id="test" value="">
...
What I want to see:
...
<input id="test" value="123">
...
Is it possible using JS or JQuery?
Here's what I added to your JS
$('#btn').click(function(){
$("#test").attr("value",$("#test").val());
alert(document.documentElement.innerHTML);
});
What I'm essentially doing is using the Jquery attr() function.The first parameter refers to the attribute you want to manipulate and the second attribute is the value to be given.
Here is the working demo
Here is your solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var value = $("#test").val()
alert(value);
});
})
</script>
<input id="test" value="">
<input type="button" id="btn" value="Get">
I'm having an issue using jQuery 1.4.2 .delegate function with IE 9. I would love to use the latest version of jQuery and just use the .on function but I am forced to use 1.4.2 due to a vendor product.
My goal is to have a function fire off when the text field changes. So if it's empty and it gets set to "test" then a function will run.
Here's what I'm trying to do, the alert never shows...
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function test(result) {
var result = result;
$("#txtTest").val($("#txtTest").val() + result);
}
$("body").delegate("#txtTest", "change",function() {
alert( "Handler for .change() called." );
});
</script>
</head>
<body>
Test: <input type="text" id="txtTest"/><br />
<input type=button value=Test name="Submit" id="btnTest" onclick="test('testing the call')" />
</body>
</html>
I have also tried using myCustomEvent:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function test(result) {
var result = result;
$("#txtTest").val($("#txtTest").val() + result).trigger("myCustomEvent");
}
$("body").delegate("#txtTest", "myCustomEvent",function() {
alert( "Handler for .change() called." );
});
</script>
</head>
<body>
Test: <input type="text" id="txtTest"/><br />
<input type=button value=Test name="Submit" id="btnTest" onclick="test('testing the call')" />
</body>
</html>
Thanks in advance
The problem is that you named your submit button "Submit". This is a no-no for HTML!! Browsers default to using internal submit functions when buttons are named submit. see [*] below.
Also, a val() inject doesn't trigger the change() event, so we need to call that manually.
Change Submit to xSubmit and trigger the change event at the end of the chain manually and it works. It should also be in a dom ready wrapper:
html
Test: <input type="text" id="txtTest"/><br />
<input type="button" value="Test" name="xSubmit" id="btnTest" onclick="test('testing the call')" />
js
$(function() {
$("body").delegate("#txtTest", "change", function() {
alert( "Handler for .change() called." );
});
});
function test(result) {
$("#txtTest").val($("#txtTest").val() + result).change();
}
demo:
http://jsfiddle.net/at7eoarL/1/
Further Reading: * - https://issues.apache.org/jira/browse/TAP5-947
I've made a simple test case that is suppose to take the value in the textarea and put it in the div with the id "submit-output" without refreshing, but for some reason it doesn't work.
clicking the submit button doesn't seem to call the postMessage() function, and even reloads the page when I have return false in there at the end.
Can someone please tell me why the submit button is using the default behavior?
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Case</title>
</head>
<body>
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea name="post" rows="2" cols="50"></textarea>
<input type=submit value="Submit" id="submitbutton" onclick="postMessage()">
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
function postMessage(){
$('#post-form').submit(function(){
console.log("submit");
$('submit-output').html($('#post-form').children('.post').val());
console.log("submitted");
elem.children('.post').val("");
return false;
});
}
});
</script>
</body>
</html>
You shouldn't use the "click" event of a submit button, only the "submit" event of the form.
Also, the $('submit-output') command will try to find a TAG with this name, not the ID, you should use $("#submit-output") instead.
Other important thing: you need to use e.preventDefault() to prevent the event posting the form.
Code working:
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea id="txtInput" name="post" rows="2" cols="50"></textarea>
<input type="submit" value="Submit" id="submitbutton" />
</form>
Javascript:
$(document).ready(function() {
$("#post-form").submit(function(e) {
e.preventDefault();
$("#submit-output").html($("#txtInput").val());
$("#txtInput").val("");
});
});
DEMO FIDDLE
You don't need onclick="postMessage()" in the input tag, remove that and remove the postMessage() function. Also add event.preventDefault(); like this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Case</title>
</head>
<body>
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea name="post" rows="2" cols="50"></textarea>
<input type=submit value="Submit" id="submitbutton">
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
$('#post-form').submit(function(event){
event.preventDefault();
console.log("submit");
$('#submit-output').html($('#post-form').children('.post').val());
console.log("submitted");
return false;
});
});
</script>
</body>
</html>
`
Test Case
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea name="post" rows="2" cols="50"></textarea>
<input type=submit value="Submit" id="submitbutton" >
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
function postMessage(){
console.log("submit");
$('#submit-output').html($('#post-form').children('.post').val());
console.log("submitted");
elem.children('.post').val("");
return false;
}
$('#post-form').submit(postMessage);
});
</script>
</body>
`
Try this