getting selected value of radio button in case of action [duplicate]

Asked 13/12, 2011 at 16:50 Answered 23/5, 2016 at 13:22

Hi here is the codes bellow, I've tried many things but I couldnt get value of selected radio button.As you can see I need to get that value for diffrent situations.

  <div style="display: inline-block">
        <div>
                <a href="/Login/LogOut">Log Out</a><span> Welcome </span>YS User 1 noName        </div>
        <br />
        <br />
        <br />
        <br />
        <input type="button" onclick="submitCreate();" value="New Survey" /><br />
        <input type="button" onclick="submitEdit();" value="Edit Survey" /><br />
        <input type="button" onclick="submitDelete();" value="Delete Survey" /><br />
        <input type="button" onclick="submitPreview();" value="Preview Survey" />
    </div>
    <div style="display: inline-block">
<div>
    <table class="MyTable"><thead><tr class="columnHead"><th scope="col"></th><th scope="col"><a href="/User/Index?sort=UserID&amp;sortdir=ASC">CreatedBy</a></th><th scope="col"><a href="/User/Index?sort=CreatedDate&amp;sortdir=ASC">Created Date</a></th><th scope="col"><a href="/User/Index?sort=IsRunning&amp;sortdir=ASC">Is Running</a></th></tr></thead><tbody><tr><td> <input name="selected" id="1" 

      type="radio" value="1" /></td><td>1</td><td>12/12/2011 3:43:57 PM</td><td>False</td></tr><tr class="altRow"><td> <input name="selected" id="2" 

      type="radio" value="2" /></td><td>1</td><td>12/13/2011 4:42:37 PM</td><td>False</td></tr><tr><td> <input name="selected" id="3" 

      type="radio" value="3" /></td><td>1</td><td>12/13/2011 6:27:38 PM</td><td>False</td></tr></tbody></table>
</div>
    </div>
</body>
</html>
<script type="text/javascript">
    //   var value = $$('input[name=selected]:checked')[0].get('value');
//    var selectFoo;
//    $$('input[name=selected]').each(function (el) {
//        if (el.checked == true) {
//            selectFoo = el.value;
//        }
//    });

    function getCheckedValue(radioObj) {
        if (!radioObj)
            return "";
        var radioLength = radioObj.length;
        if (radioLength == undefined)
            if (radioObj.checked)
                return radioObj.value;
            else
                return "";
        for (var i = 0; i < radioLength; i++) {
            if (radioObj[i].checked) {
                return radioObj[i].value;
            }
        }
        return "";
    };

    function submitCreate() {
        var adress = "/User/CreateSurvey/";
        document.location = adress;
    };

    function submitEdit() {
        var adress = "/Den/Index/" + getCheckedValue('selected');
        document.location = adress;
    };

    function submitDelete() {
        var adress = "/User/DeleteSurvey/" + getCheckedValue('selected');
        document.location = adress;
    };

    function submitPreview() {
        var adress = "/User/PreviewSurvey/" + getCheckedValue('selected');
        document.location = adress;
    }; 
</script>

Chuffy answered 13/12, 2011 at 16:50 Comment(0)

You can use document.getElementsByName(<button_name>) or document.getElementsByTagName("input") to get an array of input elements. Loop through those elements to check which is checked.

Here is an example of how to get the value of the checked button from a set of radio buttons with the name "selected":

<html>
    <head>
        <script type="text/javascript">
          function get_radio_value() {
            var inputs = document.getElementsByName("selected");
            for (var i = 0; i < inputs.length; i++) {
              if (inputs[i].checked) {
                return inputs[i].value;
              }
            }
          }

          function onSubmit() {
            var id = get_radio_value();
            alert("selected input is: " + id);
          }
        </script>
    </head>
    <body>
        <form onsubmit="onSubmit();">
            <input name="selected" value="1" type="radio"/>1<br/>
            <input name="selected" value="2" type="radio"/>2<br/>
            <input name="selected" value="3" type="radio"/>3<br/>
            <input type="submit" value="submit"/>
        </form>
    </body>
</html>

Binder answered 13/12, 2011 at 17:7 Comment(2)

Thanks sudocode. it helped me, but it wasn't exaxtly what I've looked. I've solved the problem with that codes. Hope it helps someone... function get_radio_value() { for (var i = 0; i < document.getElementsByName('selected').length; i++) { if (document.getElementsByName('selected')[i].checked) { var id = document.getElementsByName('selected')[i].value; return id; } } }; – Chuffy 13/12, 2011 at 22:6

@Chuffy That is rather horrible, because you do document.getElementsByName() to get your array of inputs three times in total (twice within your for loop). You should do that DOM lookup once only. – Binder 14/12, 2011 at 9:1

I choose let number of code for a required function. The one worked for me is given below from api.jquery.com. Hope this helps others.

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

JavaScript

var selectedOption = $("input:radio[name=option]:checked").val()

The variable selectedOption will contain the value of the selected radio button (i.e) o1 or o2

Megaera answered 23/5, 2016 at 13:22 Comment(0)

Recommended topics

Hot tags