Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Form Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

How to add javascript actions (like "onkeyup") to FormFields?


Go to End


5 Posts   5261 Views

Avatar
Tama

Community Member, 138 Posts

6 September 2010 at 1:35pm

Howdy

I've been working on a form that uses validation from our internal systems. To get it running I statically coded it and now I'd like to build it using the SS Form object.

There's two things I'm still trying to work out how to do:

  • A few of the TextFields and NumericFields require a "onkeyup" action which trigger the validation javascript. In HTML this would look like
    onkeyup="validateValuationNumber(this.value)"
    but I'm not sure what to add to this entry
    new TextField('ValuationNumber', 'Valuation Number', '' ),

  • I want to be able to place an empty DIV between two of the formfields which I can populate with dynamic information.

I'm guessing that these are both possible but after wading about the documentation and forums I still can't work out how I'm supposed to do it.

Any suggestions would be greatly appreciated.

Cheers
Tama

Avatar
Willr

Forum Moderator, 5523 Posts

6 September 2010 at 7:17pm

The form field API doesn't support adding events. I recommend you use jQuery to add event handlers to your form eg http://api.jquery.com/keyup/

Avatar
Tama

Community Member, 138 Posts

8 September 2010 at 1:52pm

Thanks Will - adding this works well:

<script name="javascript">
$('#Form_PaymentForm_ValuationNumber').keyup(function(validateValuationNumber) {
...

I also want to place an empty div between two of the formfields I can use for the custom validation. I know I can use a Read Only field to place a span but this will require DHTML after the load to make it invisible. Is there a tidier way?

Cheers
Tama

Avatar
Willr

Forum Moderator, 5523 Posts

8 September 2010 at 6:23pm

also want to place an empty div between two of the formfields I can use for the custom validation

document.appendElement to add an empty div then via javascript. You could also try using the RightTitle value. I think it puts the right title in a div (which then you add another div inside of).

Avatar
Tama

Community Member, 138 Posts

13 September 2010 at 11:00am

To append the a new div called "valuationValidation" after the div "ValuationNumber" I used the following code:

jQuery('#ValuationNumber').after($('#valuationValidation').append('<div>'));

I ended up using the "jQuery" prefix instead of "$" as their seemed to be a conflict (with Prototype?)