Submit form on change event in tigra slider control

Free Javascript/DHTML component for the websites that adds vertical and horizontal trackbar capability to the HTML forms similarly to the controls widely used in desktop applications. The position of the handler is translated into the value from specified range and placed in existing input box of the HTML form

Submit form on change event in tigra slider control

Postby chemari » Wed Nov 28, 2012 10:08 am

Hi all! I was wondering if it was possible to make my form submit after moving the slider without press any submit button.
Finally I made it by changing the javascript code:

First of all I added a parameter n_submitonchange to the slider initialization:

Code: Select all
           
var A1_TPL = {
                'b_vertical' : true,
      'b_watch': true,
      'n_controlWidth': 16,
      'n_controlHeight': 120,
      'n_sliderWidth': 15,
      'n_sliderHeight': 16,
      'n_pathLeft' : 1,
      'n_pathTop' : 1,
      'n_pathLength' : 103,
      's_imgControl': 'img/bluev_bg.gif',
      's_imgSlider': 'img/bluev_sl.gif',
      'n_zIndex': 1
            }
           
var A1_INIT = {
                's_form' : 'formpricemin',
                's_name': 'sliderValueMin',
                'n_minValue' : 0,
                'n_maxValue' : 600,
                'n_value' : <? echo $filter['minprice'] ? $filter['minprice'] : '0' ?>,
                'n_step' : 1,
                'n_submitonchange': 1
            }

            new slider(A1_INIT, A1_TPL);


This way I can make my changes only affect the form I want to by setting this parameter 1 or 0.

Now we go to the main JS file slider.js and add modify the function f_sliderMouseUp (just new 4 lines):

Code: Select all
function f_sliderMouseUp (e_event, b_watching) {

   if (window.n_activeSliderId != null) {
      var o_slider = window.A_SLIDERS[window.n_activeSliderId];
      o_slider.f_setValue(o_slider.n_minValue + (o_slider.b_vertical
         ? (o_slider.n_pathLength - parseInt(o_slider.e_slider.style.top) + o_slider.n_pathTop)
         : (parseInt(o_slider.e_slider.style.left) - o_slider.n_pathLeft)) / o_slider.n_pix2value);
      if (b_watching)   return;

                var form_name = window.A_SLIDERS[window.n_activeSliderId].s_form;  // We get the form name and store it
                var submitonchange = window.A_SLIDERS[window.n_activeSliderId].n_submitonchange; // we get the submitonchange parameter

      window.n_activeSliderId = null;
      window.n_mouseOffset = null;
               
                if (submitonchange=='1') {
                    document.forms[form_name].submit(); //Submit the form!
                }
               

   }
   if (window.f_savedMouseUp)
      return window.f_savedMouseUp(e_event);
}


Ready to go!
Now if you touch the slider the form will automatically be submited.
chemari
 
Posts: 1
Joined: Wed Nov 28, 2012 9:54 am

Return to Tigra Slider Control

cron