Jump to:

23483 Posts in 18976 Topics by 2878 members

General Questions

SilverStripe Forums » General Questions » JavaScript / AJAX / dynamically changing values on forms

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1
Go to End
Author Topic: 2093 Views
  • timcole
    Avatar
    Community Member
    32 Posts

    JavaScript / AJAX / dynamically changing values on forms Link to this post

    I have a specific question - but also a general point to! ;-)

    General: when looking at the docs on Forms, I have not really come across anything that shows me how I can add javascript calls to my form fields. Pretty 101 if you are familiar with HTML, but using SS to build forms leaves me a bit stumped. Something to think about (or give me a link to if I just haven't found it!! )

    Specific: I have a set of related dataObjects - Song, Theme and SubTheme. Each song can have MANY sub themes and each THEME can have many SubThemes. (i.e. Song related to SubTheme (MM), SubTheme related to Theme (MO) by association song is related to a theme via SubTheme.Theme.fieldName) All very lovely. I am currently building a search form allowing users to search for a song by Title (Text field) Author (Text field), Lyrics (Text field). Also lovely and working fine. I've added two drop down sto allow searching by theme and subtheme and am populating them from the DataObjects. What I really want to do is this:

    1. User is presented with form with the text boxes and drop down for THEME.
    2. If user selects a THEME (i.e. changes the drop down box) I want to then show the second drop down containing ONLY the related subthemes.
    3. I don't care how this is done (page refresh, no refresh - not really fussed) I'd usually do an onChange() using javascript and fire Theme.ID at a PHP query to get the relevant list of SubThemes. Can't work out how using the Forms stuff in SS. Have looked at the Ajax docs and also the FormResponse.... not much to go on and leaving me a little lost.

  • timcole
    Avatar
    Community Member
    32 Posts

    Re: JavaScript / AJAX / dynamically changing values on forms Link to this post

    Here is the code for the form (in case it helps!!)

    class SongLibrary_Controller extends Page_Controller {
       
       public function SearchForm() {
          $context = singleton('Song')->getCustomSearchContext();
          
          $TopOption = array('' => 'Any Theme');
          $SubThemeList = array_merge($TopOption, Dataobject::get("SubTheme","","Title ASC")->toDropdownMap("Title", "Title"));
          
          $fields = new FieldSet(
             new TextField("Title", "Song Title"),   
             new TextField("Lyrics", "Lyrics"),   
             new TextField("Author", "Author"),   
             new DropdownField(
                'SubThemes__Title',
                'Please Select a theme from the list below:',
                $SubThemeList
                )
             );
       
          // $fields = $context->getSearchFields();
          
          $form = new Form($this, "SearchForm",
             $fields,
             new FieldSet(
                new FormAction('doSearch','SEARCH')
             )
          );
          
          return $form;
       }

    public function doSearch($data, $form) {
       $context = singleton('Song')->getCustomSearchContext();
       $results = $this->getResults($data);
       return $this->customise(array(
          'Results' => $results
       ))->renderWith(array('SongSearch_results', 'Page'));
    }
       
       function getResults($searchCriteria = array()) {
       $start = ($this->request->getVar('start')) ? (int)$this->request->getVar('start') : 0;
       $limit = 10;
          
       $context = singleton('Song')->getCustomSearchContext();
       $query = $context->getQuery($searchCriteria, null, array('start'=>$start,'limit'=>$limit));
       $records = $context->getResults($searchCriteria, null, array('start'=>$start,'limit'=>$limit));
       if($records) {
          $records->setPageLimits($start, $limit, $query->unlimitedRowCount());
       }
          
       return $records;
    }

  • wildflower1975
    Avatar
    Community Member
    59 Posts

    Re: JavaScript / AJAX / dynamically changing values on forms Link to this post

    I just made a copy of silverstripe/sapphire/forms/TextField.php in mysite/code/MyField.php

    renamed the class to MyField and added an onChange value to the attributes array, this is passed to the createTag function that makes the HTML, now I have an onChange attribute in my element that fires when I edit the field in IE8.

    Your Mileage My Vary

    class MyField extends FormField {

    function Field() {
          $attributes = array(
             'type' => 'text',
             'class' => 'text' . ($this->extraClass() ? $this->extraClass() : ''),
             'id' => $this->id(),
             'name' => $this->Name(),
             'value' => $this->Value(),
             'tabindex' => $this->getTabIndex(),
             'maxlength' => ($this->maxLength) ? $this->maxLength : null,
             'size' => ($this->maxLength) ? min( $this->maxLength, 30 ) : null,
             'onChange' => "collapse('adresses2');return false"
          );
          
          if($this->disabled) $attributes['disabled'] = 'disabled';
          
          return $this->createTag('input', $attributes);
       }
    }

    collapse() is a javascript function that is in my custom form/page template, I haven't progressed to an include .js file yet

    2093 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.