Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I have been able to resolve my own issue however I had to take a different approach. However I will not accept this answer as it does not toggle as it is supposed to. The button stays selected until it is out of focus.</p> <p>Instead of using <code>@Html.RadioButtonFor(...)</code> I went back and I used buttons as my two radio options.</p> <p>Since when those buttons are clicked, there is no action being taken I had to create a hidden input field, and use javascript to update its value whenever a "radio button" was clicked. </p> <p>All in all here was my form code:</p> <pre><code>@Html.HiddenFor(model =&gt; model.searchType) &lt;div class="btn-group" data-toggle="buttons-radio"&gt; &lt;button type="button" id="radiobutton1" data-toggle="button" name="search" value="Radiobutton1" class="btn btn-primary"&gt;Radiobutton1&lt;/button&gt; &lt;button type="button" id="radiobutton2" data-toggle="button" name="search" value="radiobutton2" class="btn btn-primary"&gt;Radiobutton2&lt;/button&gt; &lt;/div&gt; &lt;script&gt; var buttons= ['radiobutton1', 'radiobutton2']; for (var i = 0; i &lt; btns.length; i++) { document.getElementById(buttons[i]).addEventListener('click', function () { document.getElementByID('searchType') = this.value; }); } &lt;/script&gt; </code></pre> <hr> <p><strong>EDIT:</strong></p> <p>I have solved the entire issue now.</p> <p>I have removed my old Javascript with this jquery code:</p> <pre><code>&lt;script type="text/javascript"&gt; $(function () { $("#searchDiv :button").click(function () { $("#searchDiv :button").removeClass('active'); $(this).addClass('active'); $("#searchType").val($(this).attr("value")) }); }); &lt;/script&gt; </code></pre> <p>Buttons now toggle correctly. And the value is passed to the hidden field.</p> <p>This seems to be a little more complicated than it needed to be, but its all good.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload