2013-06-01 3 views
5

Я просто пытаюсь добавить код в этот javascript, чтобы получить значения слайда для ввода type = "hidden", но я не могу получить значение в input type = "hidden", что я делаю неправильно? В любом случае, спасибо за вашу помощь!Получить значение с Javascript для типа ввода Скрыто

Это код JavaScript:

// <![CDATA[ 
var hWidth, bWidth; 

function setBgPos(v) { 
    var off = v * hWidth; 
    var pos = -bWidth + (v * bWidth); 
    $('slider').setStyle({backgroundPosition: Math.round(pos - off) + 'px'}); 
} 

function setSlideOutput(v) { 
    $('percent').innerHTML = Math.round(v * 100) + '%'; 
} 

Event.observe(window, 'load', function() { 
    hWidth = $('slider-handle').getWidth(); 
    bWidth = $('slider-bar').getWidth(); 
    var slide = new Control.Slider('slider-handle', 'slider-bar', { 
     sliderValue: 0.25, 
     onSlide: 
      function(v) { 
       setBgPos(v); 
       setSlideOutput(v); 
       $('percentage').value = Math.round(v * 100) + '%'; 
      }, 
     onChange: 
      function(v) { 
       setBgPos(v); 
       setSlideOutput(v); 
       $('percentage').value = Math.round(v * 100) + '%'; 
      } 
    }); 
    setBgPos(slide.value); 
    setSlideOutput(slide.value); 
}); 
// ]]> 

Html:

<!DOCTYPE html> 
    <html lang="nl"> 
    <head> 
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script> 
<style> 
#slider, #slider-bar, #slider-handle { 
    border: 0; 
    padding: 0; 
    margin: 0; 
} 
#slider { 
    width: 300px; 
    height:42px; 
    background: url(img/bg.gif) no-repeat -300px; 
    margin-left: 42px; 
} 
#slider-bar { 
    width:300px; 
    height:42px; 
    background: url(img/track.png) no-repeat; 
} 
#slider-handle { 
    width:42px; 
    height:42px; 
    cursor:move; 
    background: url(img/gripper.png) no-repeat; 
} 
#percent { 
    font-size: 75%; 
    font-family: arial; 
    font-weight: bold; 
    text-align: center; 
    padding-top: 1.1em; 
} 
</style> 
    </head> 
    <body> 
    <div id="slider"> 
    <div id="slider-bar"> 
    <div id="slider-handle"><p id="percent"></p></div> 
    </div> 
    </div> 
    <input type="hidden" id="percentage" name="percentage" value="0" /> 
    </body> 
    </html> 
+1

Работает - http://jsbin.com/ubazod/2/edit. почему вы говорите, что это не так? – Diode

+0

Двойная проверка, чтобы убедиться, что у вас есть только один элемент с идентификатором «процент» и, возможно, добавить 'console.log()' внутри событий onChange', onSlide', чтобы подтвердить, что вы получаете значения. Другой способ установить значение для элемента - использовать 'setValue()' ie '$ ('percent'). SetValue (Math.round (v * 100) + '%');' –

+0

@Geek Num 88, yes, вы правы, и это было хорошим советом, чтобы начать добавлять значение в javascript, поэтому я узнал, как добавить значение в javascript, и теперь он работает. Большое спасибо за ваш совет! –

ответ

0

UPDATE: Решено добавить SetValue, это действительно помогало мне: http://www.ruby-forum.com/topic/143329. Спасибо за все советы ребятам и спасибо за Geek Num 88!

0

вы должны использовать $('#percentage') вместо $('percentage')

+0

@tracevipin Да, его работа, но это не то, что я имею в виду. Я хочу получить значение ползунка в

+0

Нет, это дело, потому что, как вы можете видеть, в другом id = "" это работает и я уже сделал это раньше. –

+0

Попробуйте использовать .val вместо .value – mrida

0

Попробуйте использовать $('#percentage')[0].value

Что вам нужно, это DOM элемент, не объект jquery.

Или, как вариант, использовать $('#percentage').val('')

+0

Да, это не jQuery. Мне не нужно много работать с Scriptaculous, но я хочу отправить значение для скрытого ввода, чтобы получить значение. Можете ли вы показать пример, как и где вы это положили? Спасибо –

+0

Используйте сценарий, который вы предоставили, вместо $ ('percent'). Value = Math.round (v * 100) + '%'; используйте $ ('# percent') [0] .value = Math.round (v * 100) + '%'; –

+0

Извините, я понял, что это jQuery на $. Кажется, что ваш скрипт уже правильный ... –

Смежные вопросы