I have a jqueryui datepicker associated with a input text. When i make the input textbox readonly i dont want the datepicker to show up . Is that possible? I would be setting the readonly property to true or false from the code.
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
j$('#chkBoxb').click(function(){
var paramChangeBoxes = j$('input:checkbox.change');
if (j$(this).is(':checked')) {
paramChangeBoxes.removeAttr('checked');
j$('#chkBoxb').attr('checked', 'checked');
j$('#CompleteDate').attr('readonly',false);
j$("#CompleteDate").datepicker();
}
else
{
j$('#CompleteDate').attr('readonly',true);
$( "#CompleteDate:not([readonly])" ).datepicker();
}
});
Updated the code
disable it like this:
$('#dateSelector').datepicker('disable');
and enable it like this:
$('#dateSelector').datepicker('enable');
Here's a working sample: http://jsfiddle.net/CG64h/8/
I ran into this today and unfortunately, the answers provided above did not work. Read the datepicker code, here's how it's done in jqueryui 1.10:
$(selector).datepicker("option", "disabled", true);
Here you go:
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
<script>
$('#chkBoxb').click(function(){
if ($(this).is(':checked')) {
$('#CompleteDate').attr('readonly',false)
.datepicker();
} else {
$('#CompleteDate').attr('readonly',true)
.datepicker("destroy");
}
});
</script>
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDisabled.html
I believe you should use 2 different textbox's and toggle them as needed so that only one is shown at a time. The first one as plain text box and the second one with jquery Datapicker applied.
if($("#").attr("enabled")=="false") {
$("#").attr("disabled","true");
}
Just change the selector and add :enabled
$( "#datepicker:enabled" ).datepicker();
Related
I have a JQuery DatePicker which I always want to be displayed, so I've assigned it to a div. I want it to behave as shown in this example, where the selected date appears in the input box, but for some reason it just won't work this way for me. Is there anything I can do to have the value shown in the input box? I want the user to be able to either manually type the date into the box, or for them to select the date from the datepicker. This is the relevant part of my code as it stands so far.
<form class="form-horizontal" role="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<div class="form-group row">
<input type="text" id="my-input">
<div id="my-datepicker"></div>
</div>
<div class="form-group last">
<input type="submit" name="submit_date" value="Show"/>
</div>
</form>
<script>
$("#my-datepicker").datepicker().on('changeDate', function (e) {
$("#my-input").val(e.format());
});
</script>
This link shows my page so far:
https://gyazo.com/9ad02c1c1e2dbb832894f38107dc8bb9
The example you're trying to follow is quite outdated. The new syntax is as follows:
$("#my-datepicker").datepicker({
onSelect: function (event) {
$("#my-input").val($("#my-datepicker").val());
}
});
Codepen example
Previously asked and answered in Listening to onChange on a jQuery datepicker?
Working example here
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(e) {
console.log("Selected date: " + e + "; input's current value: " + this.value);
$("#my-input").val(e)
}
});
});
I am struggling to achieve a solution to my problem:
<div id="editable-content">
<span id="static1" class="non-editable">1-800-</span>
<span class="edittext" id="block1" class="editable" placeholder="HELLO" contenteditable="true"autofocus></span>
<div id="editable-content">
<span id="static2" class="non-editable">1-800-</span>
<span class="edittext" id="block2" class="editable" placeholder="HELLO" contenteditable="true"autofocus></span>
I want to use the value of #block1 to update #block2 on a keyup event.
Means: As soon as user types into #block1 the same text simultaneously appears in #block2.
This my JS so far but it doesn't do what i want it to do:
$( function() {
function updateTextarea() {
$( '#block2' ).val( $( '#block1' ).val());
}
$( '#block1' ).keyup( updateTextarea );
});
What do I do wrong? Thank you so much in advance!!
change this line:
$( '#block2' ).text( $( '#block1' ).text());
Only form elements does have the value attribute so that can be get via .value from javascript or .val() method of jQuery.
Although contenteditable attribute lets you enter text in the element but that is just textContent of that element not value.
Try with this its a sample code hope this will help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type="text" id="ch1" value="" /><br/>
<input type="text" id="ch2" value="" />
<script>
$(document).ready(function(){
$("#ch1").keyup(function(){
var test = $("#ch1").val();
$("#ch2").val(test);
});
});
</script>
</body>
</html>
This is the code I am using which doesn't work. I want the value of "data-page" in the "button" to receive the value of the input field when the input field is blurred. The "data-page" is a number. Appreciate your assistance, thanks.
<input type="text" value="" id="findR" />
<button id="findRB" data-page="" >Find Record</button>
<script>
$(document).ready(function() {
$( '#findR' ).blur(function() {
$('#findRB[name=data-page]').val($('#findR').val());
})
});
</script>
data-page is a data-* attribute and not name attribute.
$( '#findR' ).blur(function() {
$('#findRB').data('page',this.value);
})
I would recommend using data(), but you won't see the actual attribute change as the value is stored in the DOM object. If you wish so, use attr()
$( '#findR' ).blur(function() {
$('#findRB').attr('data-page',this.value);
})
Also, use this.value instead of $( '#findR' ).val() to set the value.
Here is a working example:
$(document).ready(function() {
$( '#findR').blur(function() {
$('#findRB').attr('data-page', $('#findR').val());
});
});
JSFiddle: http://jsfiddle.net/jyq2bm4r/
To set data attribute in element, you can use
$('findRB').attr('data-page', $('#findR').val());
Hello can you please test this. This is working fine for me::
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type="text" value="" id="findR" />
<button id="findRB" data-page="" >Find Record</button>
<script>
$(document).ready(function() {
$( '#findR' ).blur(function() {
var inputVal = $('#findR').val();
document.getElementById("findRB").setAttribute("data-page", inputVal);
})
});
</script>
</body>
</html>
I am trying to call ajax on DatePicker bootstrap changeDate event but after trying every possible way I am failed. Please help me. For testing I use console.log.
Script :
$( document ).ready(function() {
$('.date-picker').datepicker();
$('.date-picker').on('changeDate', function() {
var date = $('#date-picker').val();
console.log(123);
return false; // for testing...
});
});
HTML :
<p class="_50">
<label for="TitleID"><strong>Date </strong></label>
<input name="date-picker" id="date-picker" value="" class="date-picker"" type="text" class="required" readonly="readonly"/>
</p>
Be sure that the input has been loaded and then initialize the plugin.
Try on window.load:
$(window).load(function() {
$('.date-picker').datepicker().
.on('changeDate', function() {
// Your ajax call
});
});
Change "changeDate" to "change" simply:
<p>Date:
<input id="datepicker" type="text">
</p>
$("#datepicker").datepicker().on('change', function() {
alert("changed");
});
Demo Fiddle
I have a form with several text fields. I want to change a span tag when I write something in the field. Like this:
Any ideas?
You can use keyup and then replace the span content with the textbox value.
<input id="test" type="text" />
<span id="content"></span>
$("#test").keyup(function() {
$("#content").html($("#test").val());
});
http://jsfiddle.net/
Edit:
You can also use $(this).val() as pXL has suggested.
$("#test").keyup(function() {
var val = $(this).val();
$("#content").html(val);
});
You can simply use jquery for this. For eg
<input type="text" id="mytext"/>
<span id="content"></span>
$(document).ready(function(){
$("#mytext").keyup(function(){
$('#content').html($(this).val());
})
})
I would use $.keyup() and update the html with input value.
Demo: Working Demo
$(document).ready(function()
{
// Regular typing updates.
$("#input").keyup(function()
{
$("#output").html($(this).val());
});
// If pasted with mouse, when blur triggers, update.
$("#input").change(function()
{
$(this).keyup();
});
// Any value loaded with the page.
$("#input").keyup();
});
The lost focus is also an aproach,
html:
<input type="text" id="txa" value="123" />
<span>345</span>
jquery:
$('input[id=txa]').blur(function () {
$(this).next("span").text($(this).val());
});
Glad to help.