Assume my webpage has the following dynamically generated textbox elements with class='mytxt'.
<input type="text" class="mytxt" />
<input type="text" class="mytxt" />
<input type="text" class="mytxt" />
How do I get current textbox element user is typing on and pass it to another function as argument. Something like:
$("body").on("keyup", ".mytxt" ,function(element) {
// where element is current textbox element user is typing on
someFunction(element);
});
I know it is possible to have onkeyup in html and pass 'this' as argument as shown below, but this isn't an option for me since I don't have access to the code that dynamically generates the textbox elements.
<input type="text" class="mytxt" onkeyup="someFunction(this);"/>
The delegate event will pass a variable which is an event. We can get the element from event.target
See MDN
$("body").on("keyup", ".mytxt" ,function(event) {
var element = event.target;
someFunction(element);
});
Related
<input type="number" id="test">
Normally, to set an event listener to the entire field of <input type="number" id="test">, we can just use
$("#test").on("click", function() {});
or
document.getElementById("test").addEventListener("click", function() {});
But how do I set an event listener to the two arrow buttons on the right of the input field?
Does anybody know what selector to use? Or is this impossible?
I don't think you can use Event Listener on input type number. However, you can use onchange on the input tag.
onchange calls the function(myfunction in this case) each time the value is changed.
function myfunction(){
var number = document.getElementById("test");
console.log(number.value);
}
<input id="test" type="number" value="" onchange="myfunction()">
I am new at Jquery. My User Story: I have two input form tag. One is hidden and One is Text. I need to take value from input text and set that value into hidden input and then submit the form with both value. Is it possible to do in Jquery. Here is my example code:
if ($_POST) {
$email = $_REQUEST['email'];
$username = $_REQUEST['username'];
echo "Email Value: " . $email ." And Username Value :" .$username;
}
var lap = $("emailId").val();
var test = $("userId");
test.val(test);
<form>
<input id="emailId" name="email" type="text" value="">
<input id="userId" name="username" type="hidden" value="">
<input type="submit" value="Submit" />
</form>
You don't need jQuery for this. I've provide a solution using jQuery as well as vanilla JavaScript.
jQuery Version
$(document).ready(function(){
$email = $('#email')
// Note that we are updating the hidden input value each time the
// text input value changes. We could do this less frequently by
// using the `input` or `change` event instead of the `keyup` event.
$email.on('keyup', function(e){
$('#userId').val($email.val())
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="email" id="email" />
<input type="hidden" name="userId" id="userId" />
<button type="submit" id="submit">Submit</button>
</form>
Vanilla JavaScript Version
document.addEventListener('DOMContentLoaded', function(e) {
var txtEmail = document.querySelector('#email')
var txtUserId = document.querySelector('#userId')
// Note that we are updating the hidden input value each time the
// text input value changes. We could do this less frequently by
// using the `input` or `change` event instead of the `keyup` event.
txtEmail.addEventListener('keyup', function(e) {
txtUserId.value = txtEmail.value
})
})
<form>
<input type="text" name="email" id="email" />
<input type="hidden" name="userId" id="userId" />
<button type="submit" id="submit">Submit</button>
</form>
A brief explanation of my method
Waiting for the HTML to load
Whether you're using jQuery or not, depending on how your JavaScript and HTML code is stitched together, sometimes you're HTML elements are not available when your JavaScript code runs (for example, if your JavaScript code is included in the <head> tag, which I think has become pretty uncommon these days). For this reason, I've gotten into the habit of making sure the document is ready before I reference any HTML elements. Using jQuery, this is done with the following code:
$(document).ready(function(){
// The code here (inside this function) will be executed after the HTML finishes loading.
})
With vanilla JavaScript, the code looks like this:
document.addEventListener('DOMContentLoaded', function(){
// The code here (inside this function) will be executed after the HTML finishes loading.
})
Making Updates As Soon As Possible
In addition, my code updates the hidden input value after the text input value has changed, rather than waiting for the form to be submitted. Either option may be perfectly acceptable for a given situation. I am in the habit of updating things like these as soon as possible; if in the future, I write some JavaScript code that is expecting the value of these to input controls to be equivalent, and that code runs before the form is submitted, I'll probably have a bug in my code. Hence, I find it safer to just update as soon as the change occurs.
As per jquery documentation You forgot to use # in your both selectors. You should use:
var lap = $("#emailId").val();
var test = $("#userId");
test.val(lap);
Hi I am creating jquery plugin. I stuck on when i focus on input box then it triggered twice.
$(document).ready(function(){
$('#searchText').typefast();
$('#searchText1').typefast();
})
$.fn.typefast=function(){
$('input').focus(function(){
console.log($(this).attr('id'));
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="" value="" id="searchText">
<input type="text" class="form-control" name="" value="" id="searchText1">
`
It's running twice because you are explicitly calling typefast() twice in your document.ready function. Even though your selectors were both missing the # in them, typefast() still gets called on the empty jQuery wrappers. And, since typefast() doesn't actually do anything with the contents of the wrapped set it gets called on, it goes ahead and processes on all input elements. So, the end result is that all input elements get typefast registered into their focus event twice.
If (and this is a big if) you were going to use a plug-in for this, you should just call it once because the plug-in finds all input elements and sets their event handler. Also, plug-ins have a certain pattern that is recommended to be followed to ensure that the $ will, in fact, point to the jQuery object and to ensure that method chaining will work. That would look like this:
$(function(){
// You would want this to be a jQuery utility method (not a wrapped set method)
// so you would set it up directly on jQuery, not jQuery.fn. This way, you can
// just call it whenever you want without a wrapped set.
$.typefast();
});
// By wrapping the plugin in an Immediately Invoked Function Expression
// that passes itself the jQuery object, we guarantee the $ will work
(function($){
$.typefast = function(){
$('input').focus(function(){
console.log($(this).attr('id'));
});
}
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="" value="" id="searchText">
<input type="text" class="form-control" name="" value="" id="searchText1">
But, there is no need for a jQuery plug-in here. This is not what plug-ins are for and you are not even writing it according to best practices. This is not the way to set up event handlers. All you need to do is set up an event handler for the focus event of the textboxes:
// Just passing a function directly to the jQuery object is the same
// thing as explicitly setting a callback for document.ready
$(function(){
// This is the function that will be called when any input gets the focus
function typeFast(){
console.log($(this).attr('id'));
}
// Set all input elements to call typeFast when they receive the focus
$('input').on("focus", typeFast);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="" value="" id="searchText">
<input type="text" class="form-control" name="" value="" id="searchText1">
I'm trying to bind the value from an input field to the parameter of my method on ng-click. Here's what I got, but it doesn't work, and I am not too sure if it's possible to do it this way?:
<input type="text" name="name" value="{{post.PostId}}" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>
$scope.getById = function (id) {
console.log(id);
return $http.get('/api/Post/' + id);
}
You should use ng-model directive for your input element.
Markup
<input type="text" name="name" ng-model="post.PostId" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>
This will take care of 2-way model binding to your property post.PostId. Your ng-click directive will pick up the correct value entered in input element.
See my working Plunk :)
Is there any way to add a serialize event for an input in a form? Let's say I have a simple form.
<form action="blabla">
<input type="text" name="first">
<input type="text" name="second">
</form>
I want:
the first input value to be retrieved as it is
the second input value to be the base64-encoded-image-resized-through-canvas of the url specified within the input.
I'd like to attach a "serialize" event on the second input, so the when calling $("form").serialize() or $("input[name=second]").val() the value returned is not the one displayed, but a value returned by my handler.
Is there any way to achieve this? To trigger an handler when accessing an input value?