Forum Moderators: open

Message Too Old, No Replies

Reasonably simple JS issue

         

Numberman

8:31 pm on Apr 3, 2006 (gmt 0)

10+ Year Member



I'm new to JavaScript (I hate client-side scripting and much prefer using server-side stuff to get the job done), and I appear to have run into a snag.

What I'm trying to do seems reasonable simple; I've got a PHP script that gets a list of items from a database and displays them in a table. Next to each should be a textbox containing a number, and two buttons (one to increase, one to decrease). The catch is, there's a finite number of items, so I've got a textbox at the top showing the max. Each row has a unique ID.

Now, what I want to happen is that when the increase button is pressed for a specific row, that row's textbox increases by one, and the max textbox decreases by one. Now, I've gotten the max textbox to increase fine, because the function only needs to reference a specific, pre-named field. However, I'm having trouble referencing any of the row textboxes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Clicker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="javascript">
function readTotal (form)
{
totalVar = form.txtTotal.value;
alert(totalVar);
}

[b]function readSkill (form,skill)
{
txtSkill = skill;
skillVar = form.txtSkill.value;
alert(skillVar);
}[/b]

function increaseTotal (form)
{
totalVar = form.txtTotal.value;
totalVar++;
form.txtTotal.value = totalVar;
}

function decreaseTotal (form)
{
totalVar = form.txtTotal.value;
totalVar--;
form.txtTotal.value = totalVar;
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>Total:
<input name="txtTotal" type="text" value="60">
</p>
<p>&nbsp;</p>
<p>Skill 1
<input name="txtSkill1" type="text" value="0">
<input name="btnSkill1Up" type="button" value="&#9650;" onClick="readSkill(this.form,txtSkill1)">
<input type="button" name="btnSkill1Down" value="&#9660;" onClick="decreaseTotal(this.form)">
</p>
</form>
</body>
</html>

That's the code for the testing page I'm using. While there's only one row on it, on the dynamic page there's be many, named txtSkill1, txtSkill2, txtSkill3 etc. Now, what I'm having a real problem with is emboldened. In short, I can't figure out how to pass the name of the current row into the function. Probably a stupid question, but a question none-the-less.

Thanks for any help

hlkgen

2:08 am on Apr 4, 2006 (gmt 0)

10+ Year Member



Maybe add something like this:

var skill_val; //global skill value

function readSkill(skill) {
txtSkill = skill;
alert(skill);
setValue(++skill);
}
function getValue() {
return skill_val;
}
function setValue(row) {
skill_val=row;
}

and then hitting the up button does this:
<input type="button" name="btnSkill1Up" value="&#9650;" onClick="readSkill(txtSkill1.value);form1.txtSkill1.value=getValue();">

Then use txtSkill2, txtSkill3, etc for your next sets.
Is this maybe what you are trying to do?