Passing values from javascript to form

Question

I have a button (input type=button)that toggles through 3 states using a bit of simple bit of javascript, this works well but I find that when I submit the form I cant pass the current value of the button.

<input type=button ID="1" value="$decMake" name=decMake onclick="toggle(this);">

The JS:

function toggle(button) {
  if(document.getElementById("1").value==""){
    document.getElementById("1").value="Strength";
  }
  else if(document.getElementById("1").value=="Strength"){
    document.getElementById("1").value="Opportunity";
  }
  else if(document.getElementById("1").value=="Opportunity"){
    document.getElementById("1").value="";
  }
}

I'm trying to do this with a simple input "hidden" statement but I think this is not enough and needs to be a bit cleverer then that, whats the best way of doing this

Thanks

Answer 1

A hidden input is probably the best way to do this.

<input type="hidden" id="buttonValue" value=""/>
<input type=button ID="buttonToggle" value="$decMake" name="buttonToggle" onclick="toggle(this);">

Also change the button id to something more descriptive.

function toggle(button) {
    var value=button.value;
    switch(value){
        case "": value="Strength"; break;
        case "Strength": value="Opportunity"; break;
        default : value=""; 
    }
    button.value = value;
    document.getElementById("buttonValue").value = value;
}