How to get the value of date picker on change in jquery - javascript

I need to get the value of date onchange ,
Here is the code
<div class="input-daterange" data-date-format="dd/mm/yyyy">
<label>Date </label>
<input id="value_date" class="form-control" name="start" type="text" />
</div>
Here is my jquery
$('#value_date').change(function() {{
var valuefirstone = document.getElementById('#value_date').value;
alert(valuefirstone);
}
</script>
Onchange the function is not calling, I have just create alert on change but its not working

try this ;
$('#value_date').datepicker().on('changeDate', function (ev) {
var valuefirstone = $(this).val();
alert(valuefirstone);
});
Remove the .datepicker() if it's done earlier

it is better to use jquery built in functions inside a jquery context. Also your jquery change function syntax and javascript code to get the value from date picker is wrong.
change your jquery change function to:
$(document).ready(function(){
$('#value_date').change(function() {
var valuefirstone = $(this).val();//use jquery built in functions
alert(valuefirstone);
});
});
Make sure you wrapped the change function with document ready fn

you can easily do with below code:
$("#value_date").on('change', function(event) {
event.preventDefault();
alert(this.value);
/* Act on the event */
});

Related

Jquery click event not returning anything

My jquery is not alerting anything when I click the button with the id decrease. This is my code. I am using external js file.
$(document).ready(
$('#decrease').click(function() {
var beforeIncrement = $('#amt').val();
alert(beforeIncrement);
}))
I tried doing this and it is working fine.
$(document).ready(function(){
alert("Ready");
})
This is the html code:
<div class="row justify-content-center d-flex">
<button id="decrease" class="btn btn-warning">-</button>
<input type="number" id="amt" value="1"/>
<button id="increase" class="btn btn-warning">+</button>
</div>
what's wrong with my first code snippet?
The value you pass to ready() needs to be a function.
In your first example, you are passing the return value of $('#decrease').click(...).
This means that $('#decrease').click(...) has to be evaluated immediately, so it is looking for #decrease before the DOM is ready and the element doesn't exist yet.
ready() then ignores the value you pass to it because it isn't a function.
Wrap the call to $('#decrease').click(...) in a function, just as you did for alert(...) in the second example.
You also have a missing ); at the end but I'm guessing that just got cut off when you transcribed your code to the question.
Try using this:
$('#decrease').on('click', function(){
var beforeIncrement = $('#amt').val();
alert(beforeIncrement);
})
if you have the right html syntax, the right syntax for your js script is:
(you have to use a function for document.ready):
$( document ).ready(function() {
$('#decrease').click(function() {
var beforeIncrement = $('#amt').val();
alert(beforeIncrement);
});
});
you could use the shorthand syntax:
$(function() {
$('#decrease').click(function() {
var beforeIncrement = $('#amt').val();
alert(beforeIncrement);
});
});

set value to a input and grab it on change or keyup

Check the html code bellow. The id foo input taking a text then cloning to another input id doo. As you can see in jquery code i am simply passing the value from foo to doo. But my problem is when i try to get value of doo on second part of code in jquery i dont get updated value of doo. Thing is that if i write input in foo then it virtually displays in doo but in real this not changing i think. So what i want is- when i pass input in foo it will also trigger in doo value. Since i am also updating doo from foo. Ask question if you want to know anything more. Thanks in advance
jsfiddle link
Jquery:
$("#foo").keyup(function () {
$('#doo').val($(this).val());
});
$("#doo").on("change paste keyup", function () {
var tryGetNewValue = $('#doo').val();
console.log(tryGetNewValue);
});
Html:
<input type="text" id="foo" value=""><br>
<br>
<input type="text" id="doo" value=""><br>
The problem is that the functions are running at the same time and the value of doo hasn’t changed in time for the function. I would change your js code to this:
$("#foo").keyup(function () {
$('#doo').val($(this).val());
var tryGetNewValue = $('#doo').val();
console.log(tryGetNewValue);
});
$("#doo").on("paste keyup", function () {
var tryGetNewValue = $('#doo').val();
console.log(tryGetNewValue);
});
And then obviously run whatever you would run in both places where you have the var tryGetNewValue running
The change event does not get triggered because only input directly from the user into the element can set it off (see https://developer.mozilla.org/en-US/docs/Web/Events/change).
As for a way to allow this to work, you can use a function for each event like so:
$("#foo").keyup(function () {
$('#doo').val($(this).val());
changeEvent();
});
$("#doo").on("change paste keyup", function () {
changeEvent()
});
function changeEvent(){
var tryGetNewValue = $('#doo').val();
console.log(tryGetNewValue);
}
It's better use deligate function of jquery. Both function change both input values.
$(document).on("input paste keyup","#doo,#foo", function (e) {
$("#foo").val($(this).val());
$("#doo").val($(this).val());
var tryGetNewValue = $(this).val();
console.log(tryGetNewValue);
});
You can even get same thing like below to
$( "body" ).delegate( "#doo, $foo", "input paste keyup", function(e) {
$("#foo").val($(this).val());
$("#doo").val($(this).val());
var tryGetNewValue = $(this).val();
console.log(tryGetNewValue);
});

Kendo Scheduler DatePicker events

How can I set event for Kendo Scheduler Start and End date DatePicker control?
I want to put some logic when Start or End date changes from DatePicker control but I don't know how to do.
I tried to bind event like below but it is not working for me:
start: {
type: "date",
from: "StartDate",
validation: { required: true },
event: { change: "onStartDateChange('start')" }
}
You can select those DatePicker and add your new function when scheduler triggering edit event.
here is some code snippet you need to add
$("#scheduler").kendoScheduler({
edit: scheduler_edit // add on scheduler edit events
//remove for clarity
});
next you need to find DatePicker components using jquery and bind it with new function. While Scheduler edit popup window provide with 2 type different datepicker you need to select carefully whether as DatePicker or DateTimePicker
function scheduler_edit(e) {
console.log("edit");
var startDatePicker = $("input[name=start][data-role=datepicker]").data().kendoDatePicker;
startDatePicker.bind("change", newFuncForDatePicker);
}
function newFuncForDatePicker(e) {
console.log(this.value());
}
for complete sample, you can look into this dojo
I think Your datePicker is not bind in kendo scheduler.If you have change some date and append this date in another datePicker you can use like this example
This is my edit function you can use edit function or others function as you like:
edit: function (e) {
//get date from event
var getDateFromEvent = e.event.start;//or you can use different types of date like that
var datePicker = $("[name=signUpDueDate]").data("kendoDatePicker");
datePicker.value(getDateFromEvent).format("MM/DD/YYYY"));
datePicker.trigger("change");
};
This is your controller Then you can use html like that
<div class="col-xs-12 col-sm-3 form-group">
<div data-container-for="earlySignupDate">
<input id="signUpDueDate" name="signUpDueDate" class="pull-left" type="text" data-type="date" data-role="datepicker" data-bind="value: SignUpDueDate" />
</div>
</div>
Like this:
<script>
$("#scheduler").kendoScheduler({
edit: function(e)
{
// clone for input[name=end]
e.container.find("input[name=start]")
.data()
.kendoDateTimePicker.bind("change", function(e) {
var value = this.value();
// value has the new datetime
console.log(value);
});
}
});
</script>
Se my dojo: http://dojo.telerik.com/#svejdo1/AWoNU

Add onclick to element, but keep current onclick event

Is it possible to add a javascript event to a DOM element that already has a onclick event, but I want to keep that event property.
I have radio buttons like this:
<input type="radio" name="checkout-payment" value="56" id="checkout-payment-56" class="checkout-radio checkout-payment-radio checkout-payment-radio" onclick="paymentChanged(this);" />
in which I want to add
window.location.href=window.location.href
while keeping the original onclick, but I have no access to the html, I can only modify through javascript.
so my desired code will be
<input type="radio" name="checkout-payment" value="56" id="checkout-payment-56" class="checkout-radio checkout-payment-radio checkout-payment-radio" onclick="paymentChanged(this); window.location.href=window.location.href" />
Wrap the
window.location.href=window.location.href
in function, lets call it
onRadioButtonClick()
then, just do
var self = this; //keep the context of the file
$("[name=checkout-payment]").on('click', function () {
onRadioButtonClick.call(self); //call the method with the normal context.
//continue code..
});
You could try:
var curHandler = $('#checkout-payment-56').attr("onclick");
$('#checkout-payment-56')[0].onclick = null;
$('#checkout-payment-56').click(function () {
window.location.href=window.location.href;
});
I actually found out there was a much simpler way to acheive my desired result.
$( '.webshop-checkout input[type="radio"]' ).click(function() {
location.reload(true);
});
i am sorry i was not clear in my original post, and it has been edited.
If you want to add this to every .webshop-checkout input[type="radio"], you could do it that way:
$('.webshop-checkout input[type="radio"]').click(function(){
window.location.href=window.location.href;
});
JS Fiddle Demo
$("#checkout-payment-56" ).bind( "click", function(evt) {
console.log('that works');
//sessionStorage.setItem(evt.target.id,evt.target.className);
});

javascript onclick change onclick to new function

I need to be able to change the onclick event of an id so that once it has been clicked once it executes a function which changes the onclick event
Here is my code:
Javascript:
function showSearchBar()
{
document.getElementById('search_form').style.display="inline";
document.getElementById('searchForm_arrow').onclick='hideSearchBar()';
}
function hideSearchBar()
{
document.getElementById('search_form').style.display="none";
document.getElementById('searchForm_arrow').onclick='showSearchBar()';
}
and here is the HTML:
<!-- Search bar -->
<div class='search_bar'>
<img id='searchForm_arrow' src="images/icon_arrow_right.png" alt=">" title="Expand" width="10px" height="10px" onclick='showSearchBar()' />
<form id='search_form' method='POST' action='search.php'>
<input type="text" name='search_query' placeholder="Search" required>
<input type='image' src='images/icon_search.png' style='width:20px; height:20px;' alt='S' >
</form>
</div>
Thanks
Change your code in two places to reference the new functions directly, like:
document.getElementById('searchForm_arrow').onclick=hideSearchBar;
Can you try this,
function showSearchBar()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display="inline";
}else{
document.getElementById('search_form').style.display="none";
}
}
You were nearly right. You are settingthe onclick to a string rather than a function. Try:
in showSearchBar()
document.getElementById('searchForm_arrow').onclick=hideSearchBar;
in hideSearchBar()
document.getElementById('searchForm_arrow').onclick=showSearchBar;
You do not need to create two function.
Just create one function and using if condition you can show and hide the form tag..
function showSearchBar()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display=''; // no need to set inline
}else{
document.getElementById('search_form').style.display='none';
}
}
function searchBar(){
var x = document.getElementById('search_form').style.display;
x = (x == 'inline') ? 'none' : 'inline';
}
You can wrap up both functions into one by adding a check to the current condition of the element and applying your style based on that condition. Doesn't actually change the function but doesn't need to as there is now only one functon performing both actions.
With javascript you can check and perform opration
function SearchBarevent()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display="inline";
}else{
document.getElementById('search_form').style.display="none";
}
}
or if you may go for jquery there is better solution toogle
Like:
$("#button_id").click(function(){
$( "#search_form" ).toggle( showOrHide );
});
Fiddle is example
Here is an option that uses jQuery:
$('#searchForm_arrow').click(function() {
$('#search_form').slideToggle();
});
http://jsfiddle.net/PuTq9/

Categories