Retrieving form value with jQuery - dynamics-crm-4

Sadly, this isn't as cut and dry as I had hoped. Over the past few weeks I had been researching the use of jQuery with CRM. While it's nice and dandy for style alterations, I couldn't find any examples that are closer to business logic.
For example, today I needed to alert the browser if one of 4 fields were empty. Two were date fields, one a picklist and one a checkbox (bit). I thought that calling $("#formElement").val() would have gotten the value, and in some cases it did, such as the picklist after I parsed it as an int. However, the date fields always returned an empty string.
Looking through the CRM form HTML, I see that "#formElement" isn't always the ID of an input for a CRM form element. Case in point, the date fields had ID="DateTime" (or something similar). At this point, I had thought that I will need to create a filter that will take the table that contains #formElement as it's ID and look for the value of the first input in that table, but at that point using crmForm.all.formElement.DataValue just seemed easier.
I'm sure someone here has a solution for this (and maybe some explaination of how CRM Forms are written to help with a filter), and it really stinks not being able to install add-ons for Internet Explorer here at work. Thanks for any and all help.

Use jQuery to select the form itself (either by its ID or just by $(form)) and then iterate over its children that are input text fields. I haven't done this for a form before but it might work for you.

For anyone else who is looking for an answer, I have figured it out to a managable degree. Unfortuantely, I haven't been able to use CSS selectors to shorten attribute names, but I have been able to utilize jQuery to cut down on time. If you'd like to use a CRM 4 attribute with jQuery, it looks like this:
$(crmForm.all.new_attribute).bind("click", function() { ClickFunction(); });
What I was really gunning for was chaining, because there are plenty of times when I need to null a field, disable it, and then force it to submit. A little bit of magic and this:
crmForm.all.new_attribute.DataValue = null;
crmForm.all.new_attribute.Disable = true;
crmForm.all.new_attribute.ForceSubmit = true;
Becomes:
crmForm.all.new_attribute.dataValue().disable().forceSubmit();
I hope this helps some of you guys out!

Related

HTML input field dynamic "placeholder"

I have a rather stupid question, but I would like some input on the issue.
On some websites you have a date input field, which has a placeholder in the form of mm/dd/yyyy.
However, when you start typing, the characters are getting replaced one by one, like 02/3d/yyyy.
So its not a placeholder but some sort of dynamic input already. My question is, how is this generated? Is this a javascript library (jquery, angularjs etc.) or any other feature im not aware of?
Thanks for your help, I tried finding appropriate code online but nothing did the function described above.
I mean of course you could program in JS an event listener on keypress, and depending on the input you adjust the field accordingly, but I wonder if there is an easier way to do so!
You can create the mask by following this guide: https://github.com/RobinHerbots/Inputmask

Regular Expression for TextInput component: MM/DD/YY

I'm terrible with Regular Expressions but I believe in this case I must create one.
Basically, a user needs to type a date of format: MM/DD/YYYY into a TextInput and I need to verify it.
Can anyone point me in the direction of those old Flex regular expression testers that I can no longer find, please?
Thanks!
UPDATE:
Here's the regular expression just in case it'll help someone:
var pattern:RegExp = /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d$/;
Grant Skinner has regexer, I think thet's what you are looking for
http://gskinner.com/RegExr/
regexpal is pretty decent too
http://regexpal.com/
\d{2}/\d{2}/\d{4} for DD/DD/DDDD
\d\d?/\d\d?/\d{4} for D/D/DDDD and DD/DD/DDDD
Rather than using regular expressions (which are perfectly fine, they can just get messy), you might consider using the Flex DateValidator or a Flex 3 DateField control. Both of these methods will make sure you end up with a valid input with little effort on your part.
There is an example of how to use each class found at the bottom of the pages I linked to.

Multiselect select element - capturing current option set before adding / removing new items

Hello and thank you for reading.
I have an aspx form hosted in SharePoint 2010 that has some multiple select elements within a form. There are buttons to add and remove options from these select elements.
My problem is that I need to run a query based on the options within these multi select elements each time new options are added / removed from them. SharePoint is executing some server side code I don't have access to but here's my underlying problem.
If I hook into the buttons' onclick event, when my function is called the options have already been added to or removed from the select element. I need to capture the current option set of these elements, before the onclick function executes.
Is there another event I can tie into? Something like onbeforeclick on the buttons or optionsChanged on the multi select element? It doesn't look like any event will satisfy what I need to do here, but I'm hoping someone has faced a similar issue before.
Thanks,
Zachary Carter
The only solution I could come up with is to capture the present set of options each time an option is added or removed.
This solution is going to involve alot of array manipulation however, and if I can avoid that and simply tie into an event, before the onclick event of the button is called, that would be my ideal solution.
This might not be a great answer to your question, and if not, I apologize. However, I just ran into a very similar problem, albeit using Visual Basic. The solution wasn't elegant in my eyes, but I used VB's MouseUp event, which fires when the mouse button is released. On release (i.e., at the end of the previous action), I save all the information in the elements into an array, and then on the next click, before anything else happens, I can check against that array.
Edit: Gah, looks like you posted essentially that solution while I was typing. Sorry I didn't notice.

Rendering 20 large identical listBoxes

I have an HTML table with rows (20 rows).
Every row has a listbox of countries (about 250 countries) that are filled using a single dataset from the database.
Loading time is quick enough, but rendering time is really a mess.
Is there any way I can speed the rendering of those listboxes?
You could load it only once, and then copy the DOM element everywhere you need it...
I'm not sure if this would improve a lot since it would rely more on the user's computer, but I guess it's worth trying if it's too slow the way it is right now.
edit: here's how I'd do it. Use with caution, I haven't tested it and there is most likely tons of errors with this code, it's just to give you an idea of what I was saying.
<mylistbox id="listboxtemplate"> ... </>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
on document ready, using jquery:
jQuery(".thisPlaceNeedsAListbox").append( jQuery("#listboxtemplate").clone() )
You could try to add next select box only after user has selected previous one (using JavaScript).
I'm quite sure that you can rethink the form or the process, but I can't suggest anything specific since you haven't given enough information. For example depending on situation you could use multi-select or some fancy JavaScript widget.
EDIT based on your comment:
Then how about serving the table without selects. And if user double clicks on a country field you change the text element to select element using javascript. And once user has selected the country you can change back to text element. You can submit results back to server using Ajax (after user has selected the country) or using hidden fields a submit button. This way DOM will never contain more then 1 select element.
You can pass countries to javascript using inline JSON object/array (in script tags). To make things even more faster after user has edited the first element, just hide (css: display: none;) the first build select element and clone/move it around each time user wants to edit a row.
As you can see there are a lot of paths you can take using this approach, it all depends how much you want to optimize/work on it.

Web page field validation

I need to validate a date/time field on a webpage but want it to do it without reloading the page and would like 'instant' feedback for the users.
What's the best/easiest solution.
BTW: easiest scores 65% of total points
Edit:
What if best was 65% of total points?
If you would like to use JavaScript then it has built in date validation functions. However, if you do not want to go the JavaScript route, you could change the UI to dropdown controls which would limit the users ability to enter invalid data. You would still need to check server side to ensure nobody submits Feb 30th.
Check out this javascript date validation function.
It uses javascript, regular expressions and the 'onblur' event of a text input.
#David H. Aust
Using onblur for validation is problematic, because some folks use the enter key, not the mouse, to submit a form. Using onblur and the form's onsubmit event in conjunction could be a better solution. Back when I did JS validation for forms a lot more, I would run against keyup events. This gave the user instant feedback on whether or not their entry was correct. You can (and I did) also put checks in place so that the user doesn't receive an "incorrect" message until they've left the field (since you shouldn't tell them they're incorrect if they aren't done yet).
I would recommend using drop-downs for dates, as indicated above. I can't really think of any reason not to--you want the user to choose from pre-defined data, not give you something unique that you can't anticipate.
You can avoid February 30 with a little bit of Javascript (make the days field populate dynamically based on the month).
#Brian Warshaw
That is a really good point you make about not forgetting the users who navigate via the keyboard (uh, me).
Thanks for bringing our attention to that.
A simple javascript method that reads what's in the input field on submit and validates it. If it's not valid, return false so that the form is not submitted to the server.
... onSubmit="return validateForm();" ...
Make sure you validate on the server side too, it's easy to bypass javascript validation.
If you're using ASP.NET, it has validator controls that you can point to textboxes which you can then use to validate proper date/time formats.
There are a couple of date widgets available out in the aether. Then you can allow only valid input.
I've used this small bit of js code in a few projects, it'll do date quickly and easily along with a few others.
Link
Looks like there's a great video about the ASP.NET AJAX Control Toolkit provides the MaskedEdit control and the MaskedEditValidator control that works great. Not easy for beginners but VERY good and instant feedback.
Thanks for all the answers though!
asp.net
Unfortunately I can't accept this answer.