Schieberegler als Auswahlmenü

[matthiasschnueriger]

Aloha!

Ich habe auf dhtmlgoodies.com folgendes Script gefunden: Link
Damit lässt sich wunderbar ein Schieberegler erstellen. Ich bin jetzt dran, diesen für meine Zwecke anzupassen.

Mein aktuelles HTML-Gerüst (regler.php):

<form action="regler2.php" method="post" name="regler">
	<table>
		<tr>
			<td width="100">Saison:</td>			
			<td id="slider_target"></td>
			<td><input type="hidden" name="season" size="3" value="2" onkeyup="document.regler.submit()"></td>
			<td></td>
			<td rowspan="3" id="colorPreview" width="100"></td>
		</tr>
		<tr>
			<td width="100">Typ:</td>	
			<td id="slider_target2"></td>
			<td><input type="hidden" name="activepassive" size="3" value="2" onkeyup="document.regler.submit()"></td>		
			<td></td>	
		</tr>
		<tr>
			<td width="100">Indoor/Outdoor</td>	
			<td id="slider_target3"></td>
			<td><input type="hidden" name="inout" size="3" value="2" onkeyup="document.regler.submit()"></td>	
			<td></td>		
		</tr>
	</table>		
</form>

Darunter der entsprechende Javascript-Code.

<script type="text/javascript">
// Javascript for example 1
form_widget_amount_slider('slider_target',document.regler.season,200,1,3,"document.regler.submit()");
form_widget_amount_slider('slider_target2',document.regler.activepassive,200,1,4,"document.regler.submit()");
form_widget_amount_slider('slider_target3',document.regler.inout,200,1,3,"document.regler.submit()");

</script>

Beim Event "onchange" (also wenn der Wert im jeweiligen Input-Feld ändert), soll das Formular an regler2.php gesendet werden, wo dann die entsprechenden input-values per PHP eingelesen werden.

Das Problem ist jedoch, dass der Slider nicht bis zum entsprechenden "onchange" wartet, sondern beim kleinsten Schiebevorgang das Formular absendet.

Ich gehe davon aus, dass dies in der mitgelieferten Javascript-Datei (dhtmlgoodies_slider.js) geregelt wird. Da heisst es z.B.

function startMoveSlider(e)
{
	if(document.all)e = event;
	if(!slideInProgress)return;
	var leftPos = handle_start_x/1 + e.clientX/1 - event_start_x;
	if(leftPos<0)leftPos = 0;
	if(leftPos/1>sliderObjectArray[currentSliderIndex]['width'])leftPos = sliderObjectArray[currentSliderIndex]['width'];
	document.getElementById('slider_handle' + currentSliderIndex).style.left = leftPos + 'px';
	adjustFormValue(currentSliderIndex);
	if(sliderObjectArray[currentSliderIndex]['onchangeAction']){
		eval(sliderObjectArray[currentSliderIndex]['onchangeAction']);
	}

Ich rate jetzt mal, dass hier drin steht, dass sich der Slider bei jeder Pixelabweichung bewegen soll, richtig?
Folgefrage: Wie kann ich den Slider weniger "anfällig" machen? Kan ich z.B. auch sagen, dass es nur 3 oder 4 Abstufungen gibt oder der Slider dann auf die eine oder andere Seite "fällt"?

Falls das alles etwas viel ist, entschuldige ich mich bereits jetzt. Ich freue mich natürlich auch über die Hilfe von Teilproblemen

 

[Sven Mintel]

Moin Matthias,

das ist etwas ungenau beschrieben dort,

when a value is changed

damit ist sicher nicht der value des Formularfeldes gemeint, sondern die Position des Sliders(wird also bei jeder Verschiebung aufgerufen).

Lösung: speichere den Wert des Inputs irgendwo zwischen, und prüfe bei jedem Aufruf der onchange-Funktion an deren Ende, ob sich der value des Inputs geändert hat(falls ja, sende halt den Request)