I am dynamcically generating rows with some controls . In one of those controls i am having a textbox which is binded with datepicker .
Everything is working fine but there is a minor issue i.e when i select date from textbox-2 which is dynamically generated the selected date is apperaring in textbox-1 and textbox-2 is empty sadly .. so this goes on like if i have 10 textboxes in any textbox i select date end of the day i get the selected date in textbox-1 only ..
You can find the excat senario here : http://jsfiddle.net/JL26Z/8/
Correct me if i made any silly error
Regards
there is minor issue with the element, you created element with id so due to same id its causing problem.
please use class instead of id, it will work fine.
I have updated the fiddle, see here:
http://jsfiddle.net/JL26Z/10/
If you have a look at generated html when you add new fields by pressing button you will see that every text box has the same id. When you set date in calendar it searches for text box with matching id and finds first text box on your form and sets date for it. Make sure that you generate unique id for newly added controls. You can have a counter variable and increment it and append to id when you add new set of controls.
In your fiddle calendar shows for phone number field when it should probably show for date field.
Related
I have a listbox in an Adobe Acrobat form. When I change the value of the listbox, the source of the image field has to be changed with a javascript script:
As a first step, I tried to change the src in javascript, so not yet with the listbox:
var logo = this.getField("companylogo"); // button field
logo.buttonImportIcon("C:\Users\VincentJanssens\Downloads\Blauw.png")
But even this code isn't working.
Thank you for getting me started!
The code can be very simple if you set the fields up to allow for that. The first step is to create buttons for each of the images you want to be available. Name these buttons such that the Export Value of the item in the Dropdown matches exactly. Set these buttons to Hidden and Read Only in the General tab.
Then add a button where you want the various images to appear on your form. Set this field to read-only too. Now, set up the Dropdown to Commit the selected value immediately and add the following JavaScript to the Format script of the dropdown. Replace the string 'displayImage' with the name of the button field you placed on your form.
this.getField("displayImage").buttonSetIcon(this.getField(event.target.value).buttonGetIcon())
Now each time the list item changes, the script will run and use the Export Value of the field to get the button icon from the button with the same name as the export value.
I've posted a working example file here.
Like that, and how to create start and end time picker like datetime picker popup.
sorry for bad english
maybe like this
Well, the first thing that comes to mind is that you use 3 inputs - 2 for start and end time, 1 hidden for the combination. You style those two not to have border and wrap them in bordered div to appear as one field.
Then bind JS event listeners for change on those two visible inputs to update value (e.g. 09:00:00-17:00:00) in the hidden input and in your server-side script you get the value of the hidden input.
This is my first question.
I have looked for an answer but my searches seem to bring back a lot of ways to enforce the datepicker value is empty, or being able to access the selected value which is not an option here.
Background to the problem
I have a table with a dynamic amount of rows, each row contains a few datepickers (we'll call them A datepicker, B datepicker, C datepicker). It also contains a child row that is hidden until the 'Expand for more details' button is clicked, at which point there are a few more fields appearing. One of those fields is a 'Comments' field.
The requirement I have is that when the A datepicker is changed that a 'Comment' MUST be required to go along with that. I am able to tell when the datepicker is changed and therefore to send a message via the validator of the 'Comments' telling the user that it is now required.
The requirement
When entering details into the comments section, I need to be able to check if there is a date selected in the A datepicker so that we can dynamically warn the user that the comments section needs to be X many characters IF there is a date in the A datepicker.
The problem
It appears that when the jQuery datepicker is changed that the .value is not updated. When the row is populated it is possible that the A datepicker can be empty, not all fields require that particular date to be set and therefore not all 'Comment' fields need to be set either.
So I can tell when the datepicker is changed and get the 'Comments' field to be required. However a user can then fill out the 'Comments' field with a blank entry or enter a value that doesn't meet the X amount of characters limit. This behaviour is OK for when there is not a date selected. So when a date is selected I need to enforce the rule.
My problem is that I can't tell if a date is selected or not!
In the example below I had a blank datepicker, I then chose a date and opened developer tools. In the overview of the web page we can see that the date is set to 20th Jan 2018.
Overview of the web page
however through the developer tools we can see that the value is actually empty.
Datepicker value is set to ""
This behaviour is also true when the datepicker was not initially blank, rather than the value being the new date it still retains the old date. In the example below I changed the date from the 23rd of December 2017 to the 31st of December 2017.
Pre-Populated datepicker
And in developer tools the value is still set to the previous value.
Changed to new date
Technicalities
I am using MVC and jQuery, I am not looking for a solution that involves having to go back to the controller as that usually requires the user having to press a submit button and my requirement is that it needs to be able to respond upon selecting the date and entering comments. I'd just like a way to be able to get the displayed date from the datepicker and not it's previous value.
This matters because if it's going from previously having a date into now a blank date, it affects the requirement so that comments are no longer required as there isn't a date. Vice versa if going from a blank date to a selected date.
Things I have tried
I am trying to write this into the OnChange method of 'Comments', so that I can check if there is a date selected or not.
I have tried directly calling it in my .js file with the below. For option 4 and 5 it's contained in a .each loop that goes through ALL the rows in my table and finds the row relating to the 'Comments' field that was changed.
(Please note that parentRow refers to the selected table row which contains the dates (the row that contains the comments field is the child row)).
1) var dateValue = $(parentRow).find("input[name$='datepicker_A']").datepicker("getDate");
2) var dateValue = $(parentRow).find("input[name$='datepicker_A']").val();
3) var datepicker_A = document.getElementById('datepicker_A');
var dateValue = datepicker_A.val();
4) var dateValue = $.datepicker.parseDate("d/M/y", $(this).find("input[name$='datepicker_A']").val());
5) var dateValue = $(this).find("input[name$='datepicker_A']").val();
All of the above return the previous value of the datepicker and not the newly selected one. So my question is.. how do I get it to recognise the new value?
TL:DR
jQuery datepicker doesn't seem to change the .val() property of the input field when selecting a new date, instead the .val() is always the previous value. How can I access the new value via javascript/jQuery?
Your code should look something like this:
<div>
Select date: <input id="thedate" type="text" class="date-pick" />
</div>
And your JavaScript (I am using jQuery 1.9.1 with jQuery UI 1.9.2 here too)
$(function() {
$('.date-pick').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(dateText, inst) {
alert(dateText); // Put your code in here
}
});
});
Here's a JsFiddle
I have a table list with many input fields that has the jqueury datpicker in it. Every input field has as class datepicker and a random id number. when clicked in the input field teh datpicker pops up. With a click on he date the dtae gets inserted. So the he datepicker works fine. But now i want to add an image or text link next to the input field, and when i click on the image/text the content on the input field changes into the selected text. But untill now i cannot combine datepicker and this fucntion into one....
example i tried:
<input type="text" id="a11" class="datepicker" name="sterilizationdate_1" value="<?php echo $sterilizationdate_1?>">
CSA
and the javascript
$('a.CSA').click(function(){
$('.datepicker').val($('.datepicker').val()+$(this).html());
});
I tested this code without the datepicker and it just works fine... why cant i combine the two?
FOUND ANOTHER SOLUTION
custom text insert in datepicker
You are trying to get the val() of input tag but calling val on anchor tag
$('a.CSA').click(function(){
$('.datepicker').val($('.datepicker').prev().val()+$(this).html());
});
Maybe you have another problem on how you call the Datepicker.
You can try:
$('a.CSA').on('click', function(){
$('.datepicker').val($('.datepicker').prev().val()+$(this).html());
});
Instead of:
$('a.CSA').click(function(){
$('.datepicker').val($('.datepicker').prev().val()+$(this).html());
});
Please this link .on()
I'm having trouble finding javascript, HTML and/or CSS code that'll change the form based on the drop down menu. For example, the form is for adding a property and the drop down menu selections are single family, condo, apartment but they each have their own set of text boxes, menus and radio buttons. How can I achieve this?
What I have understand from your query is that , you have a from with some fields and you have a dropdown and you want that when ever your change selection in dropdown the form fields values must change accordingly right ?
If that is the issue , then it is very simple , first catch onSelectionChange event of dropdown and try to get selected value and once you get the selected value fill form fields by accessing them accordingly in a condition.Thanks
So I actually already had a piece of code I was fumbling with (http://jsfiddle.net/CYzsY/) for this question and it looks like its not working for me because its based on jQuery 1.7.1 and I'm linking to 1.10.2 in my code. Will make a new post accordingly. Thanks everyone!