Changing value of my hidden field with Javascript

Question

I'm having a hard time understanding this code that I was given to work on as I am a newbie at Javascript/HTML/C# Razor

Currently I have the following

<li class="control-group">
        <label for="autoReload" class="control-label">Auto Reload</label>
        <div class="controls">
            <div class="btn-group radioButtons radioToggleCollapse" data-toggle-id="#autoReloadExtra" data-toggle="buttons-radio">
                <button type="button" data-value="no" class="btn active">No</button>
                <button type="button" data-value="yes" class="btn">Yes</button>
            </div>
            <input type="hidden" class="radioHidden" value="'$'+@(Model.IsAutoReload ? "True" : "False")" id="autoReload" name="IsAutoReload">
        </div>
</li>

What I'm looking to do is when I click the button No, change the value in that text box to False, or if I click true then I want that value to be changed to true

I have found the following Javascript,

   <script>
        $(document).ready(function(){

            $("#autoReload").on('change',function(){
                if ($(this).val() == 'yes') {
                    $(".saveCardSwitch button[data-value='true']").trigger('click');
                    $(".saveCardSwitch button").each(function(){
                        $(this).addClass('disabled').prop('disabled',true);
                    });
                }
                if ($(this).val() == 'no') {
                    $(".saveCardSwitch button").each(function(){
                        $(this).removeClass('disabled').prop('disabled',false);
                    });
                }
            });

        });
   </script>

Now I've tried switching the actual data-values on my buttons to true/false, but when I do that the hidden message that I have open doesnt show anymore so I'm kind of stuck at this point. I'd also like to clarify, when I call @(Model.IsReload ? "True" : "False" that passes the value back to my controller in the post method right?

Answer 1

As you are using Jquery, You can do it the following way:

$('.btn').click(function(){
   $('.radioHidden').val($(this).attr('data-value') === 'yes');
});

Fiddle

Answer 2

From what I understand all you need is a function to set a value on a specific element. You can do that with the following code

<li class="control-group">
<label for="autoReload" class="control-label">Auto Reload</label>
<div class="controls">
    <div class="btn-group radioButtons radioToggleCollapse" data-toggle-id="#autoReloadExtra" data-toggle="buttons-radio">
        <button type="button" data-value="no" onclick="setValue(false, 'autoReload');" class="btn active">No</button>
        <button type="button" data-value="yes" onclick="setValue(true, 'autoReload');" class="btn">Yes</button>
    </div>
    <input type="hidden" class="radioHidden" value="" id="autoReload" name="IsAutoReload">
</div>

and your function setValue can be something like:

var setValue = function(value, id)
{
    var domEl = document.getElementById(id);
    domEl.value = value;
}

Answer 3

You don't appear to have any events bound to the buttons that you want to use to toggle that is the first thing you need, an onclick event you can do this

<button type="button" data-value="no" onclick="updateHidden(this.dataset.value)" class="btn active">No</button>
<button type="button" data-value="yes" onclick="updateHidden(this.dataset.value)" class="btn">Yes</button>

then the code to update the hidden input is

function updateHidden(value){
value = value==="yes"?"TRUE":"FALSE";
document.getElementById("autoReload").value = value;
}