Check if the button has changed in Javascript?

Question

I'm trying to figure out how to get my Javascript code to check whether or not a button has been chosen. If it has, I would like to display the button's value.

I have the following HTML:

<li class="control-group">
        <label for="amount" class="control-label">Select an amount</label>
        <div class="controls">
            <div class="btn-group radioButtons amountButtons" data-toggle="buttons-radio">
                @if (Model.PresetValues.Count > 0){
                     foreach (int value in Model.PresetValues) {
                        <button type="button" data-value="@value" class="btn @(Model.chargeViewModel.ChargeAmount == value ? "active" : "")">$@value</button>
                     } 
                }                   
                <button type="button" data-value="other" class="btn toggleDiv toggleOnce" data-toggle-id="#manualAmount">Other</button>
            </div>               
            <input type="hidden" class="radioHidden validate required validateAmount" value="" id="amount" name="ChargeAmount">


        </div>
        <div class="controls hide resize" id="manualAmount">
            <div class="input-prepend input-append">
                <button class="btn minus" type="button"><i class="icon-minus"></i></button>
                <input class="span2 plusminus" data-max="100" data-min="10" data-increment="5" data-value="25" id="manualAmountInput" type="text" value="$25" disabled>
                <button class="btn plus" type="button"><i class="icon-plus"></i></button>
            </div>
        </div>
    </li>

Those are my two options for the button and I would like to edit the following span

<span class="help-block">Your card will automatically reload $<span id="autoAmount">0</span> when your balance is lower than your reload threshold.</span>

I have the following script which I was led to believe will change the value of the span as it is clicked, but I am having a difficult time connecting them together.

<script>
    javascript: void (document.getElementById("autoAmount").innerHTML = amount);
</script>

if anyone has any suggestions or ideas, it would be greatly appreciated. Thanks!

Answer 1

To expand on kyllo's answer a little bit...

First you would need to bind a click event to your button. You can set it as an onClick attribute:

<input type="button" onClick="captureAmount(e); return false;">

Including the 'e' inside captureAmount will pass the click event itself over to our function, which we can use to figure out which button was clicked (if you are using this function in more than one place).

You can also use jQuery if you've included that library, to attach the function to every button on the page at once.

$('input[type=button]').click(captureAmount(e));

Or, specify buttons with a particular class..

$('input.amountBtns').click(captureAmount(e));

And your function could look a little something like this:

function captureAmount(e){
  var clicked = e.target
  ,   clickedAmount = clicked.value
  ,   display = document.getElementById("autoAmount")
  ;

  display.innerHTML = clickedAmount;
}

Answer 2

If you want the innerHTML of the autoAmount span to change when you click a button, then you would need to bind an onclick event to that button, and then when the onClick event fires, you would do document.getElementById("autoAmount").innerHTML = amount.value

for example, in the button declaration you can add onclick="updateAmount()"

and then inside the script tags you would declare a javascript function that is called by the onclick event:

    function updateAmount(){
        document.getElementById("autoAmount").innerHTML = document.getElementById("amount").value
    }

(Keep in mind that your "amount" input box is hidden, though.)