I am a newbie in Javascript and jquery I have a jquery function
$('.input-group .date').datepicker({
});
for
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="">
</div>
I want to add this inside input tag using onclick="" can you please tell me how to do this ?
If I'm thinking what your thinking then it's wrong.
.datepicker() already assigns an onClick event so you don't have to create an extra one.
You have to make sure you are using jQuery and jQuery UI in order for datepicker to work.
Then you either have to put your script before you close body or in the head and use
$(document).ready(function(){ ... });
I also think you are using the wrong selector here.
. is class
# is ID
So it should be
$('.input-group .form-control').datepicker();
Example: http://jsfiddle.net/Spokey/AjRm3/
For those coming to this question because they want to know how to bind to the event that happens when someone clicks on an input box, then this is useful:
$('input.your-input-box-class').focus(function(e){
// do something
});
For those who want to use datepicker like the original question asks, then remember that jQuery UI abstracts away from these types of details. So just use the widgets like they were meant to be used. In this case, create the datepickers for all your input boxes that have a certain class (say date maybe) when the DOM is done loading:
$(document).ready(function(){
$('input.datepicker').datepicker({ /*... pass options here ...*/ });
});
And for options, you read the documentation, they include handling all the events you need:
http://api.jqueryui.com/datepicker/
Call a function:
onclick="someFunction(this);"
Set function:
function someFunction(this) {
$(this).prev('.input-group.date').datepicker({});
}
You bind datepicker to DOM element, not onClick.
$(document).ready(function(){
$('.form-control').datepicker({});
});
Or add it in function, so you can call it dynamically.
put the set of code inside a javascript function say clickMe()
function clickMe(){
$('.input-group .date').datepicker({
});
}
now call the function in click method.
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="" onclick="clickMe()">
</div>
Related
I know this question has been asked -and answered- multiple times. However I found a new solution - but do not fully understand it. The setup is this:
<input id="input1" onchange="GetText()"/>
All answers i found suggest to use the id to get the value of the input.
function GetText(){
alert($("#input1").val());
}
$(this).val() does not work here.
Another way to use the value of the #input1 would be to use this.value in the calling function:
<input id="input1" onchange="GetText(this.value)" />
This passes the value as a parameter to the function.
However I found a JQuery sample that attaches a function to #input1 and makes $(this).val() work.
$("#input1").change(function(e){
alert($(this).val())
});
Against all answers here at stackoverflow seeing that it is possible to attach a function to a input field and have access to the value of it - I ask myself how I would have to write this function and not attach it with JQuery. Or can it be only attached with JQuery? Why?
Here is a fidle with this setup to play
You either pass reference to input object as a parameter in inline call to callback like this:
<input id="input2" onchange="GetText(this)" />
and then in javascript:
function GetText(_this){
alert(_this.value);
}
Fiddle here
Or you can attach function directly to input object like so
document.getElementById('input2').getText = function() {
alert(this.value);
};
and in html:
<input id="input2" onchange="this.getText()" />
Fiddle here
Basically this object in javascript is bound to context, in which the function has been created. When you define function globally, like GetText in your example, this is bound to global object in scope of that function.
<input id="input1" onchange="GetText.call(this)"/>
or
<input id="input1" onchange="GetText.apply(this)"/>
Will call the GetText function with the input as the value of this. Then you can use $(this) or this.value within the scope of GetText.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
If you're looking for a similar Vanilla JS function that you can put into you're HTML, which I actually don't recommend, because I support JavaScript HTML separation, it would be something like:
function getInputVal(context){
alert(context.value);
}
In your HTML:
<input id='whoCares' name='whoCares' value='Some Value' onchange='getInputVal(this)' />
Inline JS is not easy to maintain, especially if there's so much of it. It is better to separate your JS and HTML.
//Wait for DOM to load
$(function() {
//set up change event listener --> anonymous function
$('#input1').on('change', function() {
alert( this.value );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input1" />
Or if you want to use a named function:
//wait for DOM to load
$(function() {
//Define function
function GetText(){
alert( this.value );
}
//set up change event listener --> named function
$('#input1').on('change', GetText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="input1" />
All answers i found suggest to use the id to get the value of the input.
That's actually a pretty bad design; you want to create event handlers that can be unaware of the elements they're attached to.
The example without using jQuery would look like this:
var input = document.getElementById('input1');
input.addEventListener('change', function(event) {
alert(this.value);
}, false);
<input id="input1" />
See also: addEventListener()
I try to implement a change function on every input field named plz_von.
<input type="text" name="plz_von[]" class="plz_von" placeholder="10000">
<input type="text" name="plz_von[]" class="plz_von" placeholder="20000">
<input type="text" name="plz_von[]" class="plz_von" placeholder="30000">
<input type="text" name="plz_von[]" class="plz_von" placeholder="40000">
I want to do it this way:
$('input[name="plz_von[]"]').change(function() {
alert("got it");
});
I don't know what's going wrong. Any idea? I tried it with the class name as well.
Because [ ] is an attribute selector. You need to escape it.
$('input[name="plz_von\\[\\]"]')
Since you have a class that is common, you might as well use that instead.
$('input.plz_von')
Thanks all for the support. Finally I found the failure.
I had to put the jQuery code into the ready function! This is quite clear, because the function cannot by added to the inputfield, when the input field isn't already loaded in the DOM.. grrr
$(document).ready(function() {
$('input[name="plz_von[]"]').change(function() {
alert("hu");
});
});
Best regards,
Marco
I have this Jquery function to mask my textbox:
jQuery(function($){ //Mask textbox #hour with placeholder
$("#hour").mask("9:99",{placeholder:"0"});
$("#hourInTable").mask("9:99",{placeholder:"0"});
});
Works perfectly with this html code:
But when I try to do it in the textbox that has the ID hourInTable outputted by Jquery it doesnt mask anything:
jqTds[2].innerHTML = '<input type="text" name="hourInTable" id="hourInTable" value="00:00">';
This above code is called after a button press and the textbox hourInTable is placed somewhere on the page.
Placed this code direct into my html:
<input type="text" name="hourInTable" id="hourInTable" value="00:00">
And it worked, so its due to the html output in JS.
Thanks in advance.
Most likely it happens because when jQuery does the masking, the input is not yet present. Give the function a name and call it after you are sure that the innerHTML is placed.
try something like this
jqTds[2].innerHTML = '<input type="text" name="hourInTable" id="hourInTable" value="00:00">';
// call after text box is added
$("#hourInTable").mask("9:99",{placeholder:"0"});
because #hourInTable is not present on DOM ready so it doesn't apply mask on it
call masking function after your dynamically created input is added
Add the masking code in function. And call it on button click which adds dom <input type="text" name="hourInTable" id="hourInTable" value="00:00"> in page.
I have an input field and i am trying to set its value using its class
<form:input path="userName" id="userName" title="Choose A Unique UserName" readonly="${userNameStatus}" class="formData"/>
Which renders as:
<input id="userName" name="userName" title="Choose A Unique UserName" class="formData" type="text" value=""/>
I am using the following jquery but this does not seem to work. Can someone tell me where i am going wrong.
$(".formData").html("");
Edited JQuery Function that handles the event
$('#reset').click(function (){
$("#userNameErr").text("");
$('#badgeNoErr').text("");
$(".errors").html("");
$(".formData").val("");
});
nor is $(".formData").text("") or $(".formData").val("") working.
This should work.
$(".formData").val("valuesgoeshere")
For empty
$(".formData").val("")
If this does not work, you should post a jsFiddle.
Demo:
$(function() {
$(".resetInput").on("click", function() {
$(".formData").val("");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="formData" value="yoyoyo">
<button class="resetInput">Click Here to reset</button>
If the input field has a class name formData use this :
$(".formData").val("data")
If the input field has an id attribute name formData use this :
$("#formData").val("data")
If the input name is given use this :
$("input[name='formData']").val("data")
You can also mention the type. Then it will refer to all the inputs of that type and the given class name:
$("input[type='text'].formData").val("data")
change your jquery loading setting to onload in jsfiddle . . .it works . . .
use this code for set value in input tag by another id.
$(".formdata").val(document.getElementById("fsd").innerHTML);
or
use this code for set value in input tag using classname="formdata"
$(".formdata").val("hello");
You just write this script. use input element for this.
$("input").val("valuesgoeshere");
or by id="fsd" you write this code.
$("input").val(document.getElementById("fsd").innerHTML);
$('.formData').attr('value','YOUR_VALUE')
Put your jQuery function in
$(document).ready(function(){
});
It's surely solved.
I´m making a google instant-type of remote suggestion script with ajax on a site I'm making.
now I have this:
<input type="text" name="spanishtitle" onkeyup="suggest(this, 'title_es');" onblur="fill();" />
and I would like to move that onkeyup script to a jquery call, so I added this
$('.suggestable').live('keyup', ( function() { suggest(this); } ));
and changed the above to this
<input class="suggestable" type="text" name="spanishtitle" onblur="fill();" />
but I'm missing the 'title_es' parameter which tells the ajax handler what am I looking for.
So what I want to know, basically, is if there's a way to add this parameter to the object, so I can access it from suggest() somehow.
You can add it to your HTML...
<input type="text" name="spanishtitle" onblur="fill();" data-title="title_es" />
And then access it in jQuery...
$('.suggestable').live('keyup',
function() { suggest(this, $(this).attr('data-title')); }
);
The data- prefixed attributes are in the HTML5 spec, and are going to be very useful.
At last, no further excuses for using inline event attributes :)
Assign it as the id of the element and then
$('.suggestable').live('keyup', function() {
suggest(this, $(this).attr("id"));
});
The data-* attribute is html5 as far as I know
You can add it as an attribute to the input, something like:
<input data-lookfor='title_es' class="suggestable" type="text" name="spanishtitle" onblur="fill();" />
then you can access it in jQuery with .attr()
var look_for = $(this).attr('data-lookfor');