Code_Help Code_Help - 2 months ago 6
Javascript Question

How can I change radio buttons to Bootstrap buttons

I've been trying to change radio buttons in php to buttons from bootstrap. I have experience with perl and I edited PHP but I don't have much experience with web technologies.

I'd also like to get rid of the submit button at the bottom of the page and have these submit the answer but I'd like to at least get this working.

Thanks

enter image description here

This code works but it uses radio buttons:

<div id='javatbd<?php echo $myfname; ?>' class='col-xs-12 form-group answer-item radio-item radio' <?php echo $sDisplayStyle; ?> >
<input
class="radio"
type="radio"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
<label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label>
<div class="label-text label-clickable" id="label-answer<?php echo $name.$code; ?>">
<?php echo $answer; ?>
</div>
</div>
.
.
.
<div class="col-xs-6 save-all text-right">
<button type="submit" id="movesubmitbtn" value="movesubmit" name="movesubmit" accesskey="l" class="submit button btn btn-lg btn-primary">Submit</button>
</div>


I've tried this but it does not send the value.
enter image description here

<div id='javatbd<?php echo $myfname; ?>' class='col-xs-12 form-group answer-item radio-item btn' <?php echo $sDisplayStyle; ?> >

<div class="container-fluid">
<input
class="btn btn-primary btn-block"
type="button"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
</div>
</div>


[enter image description here][3]

Answer

You can use the Bootstrap buttons radio component to make a radio button look like normal button.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Option 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
    </label>
</div>

You can see the live example, and other options here - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-stateful-buttons.php

Comments