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
Related
I'm just starting with JQuery and generally web development, so this question might be really easy but I would appreciate your help.
Javascript code:
$(document).ready(function(){
$("#convbut").click(function() {
alert( "Handler for .click() called." );
});
});
HTML button:
<button name="conversion" type="button" id="#convbut">Convert</button>
When clicking Convert button I am not getting alert message.
I don't know what error you have in your console. Make sure you have loaded the jquery library first. I have added full code here so as you haven't and is working great
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button name="conversion" type="button" id="convbut">Convert</button>
<script>
$(document).ready(function(){
$("#convbut").click(function(){
alert( "Handler for .click() called." );
});
});
</script>
</body>
</html>
Your html
<button name="conversion" type="button" id="#convbut">Convert</button>
use this by remove # before id;
<button name="conversion" type="button" id="convbut">Convert</button>
I realized the problem, I need HASH in JQuery before ID name without ID actually having it in index.html
Javascript:
$(document).ready(function(){
$("#convbut").click(function() {
alert( "Handler for .click() called." );
});
});
HTML:
<button name="conversion" type="button" id="convbut">Convert</button>
This is not a duplicate of How to trigger jQuery change event in code, since that deals with the interaction of jQuery with jQuery event listeners, while this question discusses the interaction of jQuery with native event listeners.
I use addEventListener to bind a change event for an input, but $('#input').val('bbbb').change(); can't trigger the alert, how to trigger addEventListener("change",function) function by JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code</title>
</head>
<body>
<script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"></script>
<input id="input" type="text" value="input" />
<script type="text/javascript">
document.getElementById("input").addEventListener("change", function() {
alert(this.value);
});
</script>
<input type="button" value="change input" onclick=" $('#input').val('bbbb').change();" />
</body>
</html>
You cannot trigger a native event with jQuery's .trigger('change'). You will need to create a native event and dispatch it:
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', true, true);
// ^ ^ ^
// | | cancelable
// | bubbles
// type
And then to fire it:
var el = document.getElementById("input");
el.dispatchEvent(evt);
Bind the change event using jquery.
$("#input").change(function() {
alert(this.value);
});
Working snippet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code</title>
</head>
<body>
<script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"></script>
<input id="input" type="text" value="input" />
<script type="text/javascript">
$( "#input" ).change(function() {
alert(this.value);
});
</script>
<input type="button" value="change input" onclick=" $('#input').val('bbbb').change();" />
</body>
</html>
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>
I am trying to get a single form value from a posted form using HTML and Jquery could anyone tell me what I am doing wrong with the following script.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form id="target" action="1.html">
<input type="text" value="Hello world">
<input type="submit" value="Go">
</form>
<script>
$( "#target" ).submit(function( event ) {
var input = $("#target :input[text]");
alert( input);
console.log(input)
event.preventDefault();
});
</script>";
</body>
</html>
I can only seem to return an object but I cant display this using alert or the console.log feature.
var input = $("#target :input[text]");
should be:
var input = $("#target input[type='text']").val();
Wrap your submit event in ready function
$(document).ready(function(){
$( "#target" ).submit(function( event ) {
var input = $("#target input[text]").val();
alert( input);
console.log(input)
event.preventDefault();
});
});
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!");
});