This topic is locked

Spin control to edit a value ?

7/13/2011 3:58:58 AM
PHPRunner General questions
S
sakisl author

It appears that the easiest (and most time-saving) way to edit a specific variable in my "Add record" page, is to calculate an average value and then use a spin control for the user to input the exact value.
Eg. for the user's height, I calculate (based on his age, sex, etc) that the average should be 175 cm, so I want to use a spin control with values from say, 145 cm to 220 cm for the height.
I am looking for a way to do this, since my Javascript knowledge is limited...
Any help will be appreciated

C
cgphp 7/13/2011
var average = 175; // this is your calculated average value

var offset = 30;

var start_value = average - offset;

var end_value = average + offset;

var selectbox_obj = $("#my-select-height"); //this is the selector of your spin/select control
for(var i = start_value;i < end_value; i++)

selectbox_obj.append("<option value='" + i + "'>" + i + "</option>");


You can enable your select only when the average value is available.

S
sakisl author 7/14/2011


var average = 175; // this is your calculated average value

var offset = 30;

var start_value = average - offset;

var end_value = average + offset;

var selectbox_obj = $("#my-select-height"); //this is the selector of your spin/select control
for(var i = start_value;i < end_value; i++)

selectbox_obj.append("<option value='" + i + "'>" + i + "</option>");


You can enable your select only when the average value is available.


Thank you Christian, and I guess I did not make my point very clear.
I am using a spin control to edit a value like this :

<html>

<head>

<title>iSpin</title>
<meta http-equiv="Content-Type" content="text/html;">
<script language="JavaScript">
// Weight values split in two values, integer and decimal part

var v1=79;

var v1min=45;

var v1max=150;
var v2=1;

var v2min=0;

var v2max=9;


function IncreaseValue1()

{

if (v1 < v1max)

{

v1++;

}

else

{

v1 = v1min;

}

WriteValue1();

}
function DecreaseValue1()

{

if (v1 > v1min)

{

v1--;

}

else

{

v1 = v1max;

}

WriteValue1();

}
function IncreaseValue2()

{

if (v2 < v2max)

{

v2++;

}

else

{

v2 = v2min;

}

WriteValue2();

}
function DecreaseValue2()

{

if (v2 > v2min)

{

v2--;

}

else

{

v2 = v2max;

}

WriteValue2();

}
function WriteValue1()

{

var v1TextField = document.getElementById('value1');

v1TextField.innerHTML = v1;

}
function WriteValue2()

{

var v2TextField = document.getElementById('value2');

v2TextField.innerHTML = v2;

}
function WriteValues()

{

WriteValue1();

WriteValue2();

}
</script>
</head>
<body bgcolor="#dddddd"" onLoad="WriteValues()">
<table border="0" cellspacing="0" cellpadding="0" style="font-family: verdana; font-size: 5em; font-weight: 900;">
<tr>

<td align="center"><img onMouseDown="IncreaseValue1()" src="images/spin_p.gif" width="64" height="64" border="0" alt=""></td>

<td></td>

<td align="center"><img onMouseDown="IncreaseValue2()" src="images/spin_p.gif" width="64" height="64" border="0" alt=""></td>

</tr>
<tr>

<td id="value1" align="center"width="200"></td>

<td align="center">,</td>

<td id="value2" align="center"></td>

</tr>
<tr>

<td align="center"><img onMouseDown="DecreaseValue1()" src="images/spin_m.gif" width="64" height="64" border="0" alt=""></td>

<td></td>

<td align="center"><img onMouseDown="DecreaseValue2()" src="images/spin_m.gif" width="64" height="64" border="0" alt=""></td>

</tr>
</table>
</body>

</html>


My problem is, this is a normal HTML page and works , but how can I set a specific variable in my "Add" page to use the spin control ?

C
cgphp 7/14/2011

My problem is, this is a normal HTML page and works , but how can I set a specific variable in my "Add" page to use the spin control ?


Starting from your code is very easy to accomplish what you want. Try the following code but I haven't tested it.

If something is missing, probably I need more info about your app.
In the visual editor insert a new PHP snippet for the add page and paste in it the following code:



echo "<table>";
echo "<tr>";

echo "<td><img id='spin_int_up' src='images/spin_p.gif' width='64' height='64' border='0' alt=''></td>";

echo "<td><img id 'spin_int_down' src='images/spin_p.gif' width='64' height='64' border='0' alt=''></td>";

echo "<td><label id ="spin_int_value"></label></td>";

echo "</tr>";
echo "<tr>";

echo "<td><img id='spin_dec_up' src='images/spin_m.gif' width='64' height='64' border='0' alt='' /></td>";

echo "<td><img id='spin_dec_down' src='images/spin_m.gif' width='64' height='64' border='0' alt='' /></td>";

echo "<td><label id ="spin_dec_value"></label></td>";

echo "</tr>";
echo "</table>";


In the Javascript OnLoad event of the Add page paste the following code:

// Weight values split in two values, integer and decimal part

var v1=79;

var v1min=45;

var v1max=150;
var v2=1;

var v2min=0;

var v2max=9;
var weight_obj = $("#input_text_id_for_weight"); // this is the input text id for the weight. This is filled based on the click on the spin control

var label_int_obj = $("#spin_int_value");

var label_dec_obj = $("#spin_dec_value");
$("img#spin_int_up").click(function(e){

if (v1 < v1max)

{

v1++;

}

else

{

v1 = v1min;

}

label_int_obj.text(v1);

weight_obj.val(v1 + '.' + v2);

});
$("img#spin_int_down").click(function(e){

if (v1 > v1min)

{

v1--;

}

else

{

v1 = v1max;

}

label_int_obj.text(v1);

weight_obj.val(v1 + '.' + v2);

});
$("img#spin_dec_up").click(function(e){

if (v2 < v2max)

{

v2++;

}

else

{

v2 = v2min;

}

label_dec_obj.text(v2);

weight_obj.val(v1 + '.' + v2);

});
$("img#spin_dec_down").click(function(e){

if (v2 > v2min)

{

v2--;

}

else

{

v2 = v2max;

}

label_dec_obj.text(v2);

weight_obj.val(v1 + '.' + v2);

});