Submit form with hidden field value from radio button group

Question

User379720387 posted

This is my form:

<form method="get" id="qcktxnform" class="form-horizontal" role="form" action="https://www.sandbox.paypal.com/cgi-bin/webscr">
                        @AntiForgery.GetHtml()
                        
                        <input type="hidden" id="radioSelection" name="a3" value="????" />

<div class="radio">
                                    <label>
                                        <input type="radio" id="rdb1" name="planprice" value="@currentPlans.ElementAt(0).planCurrentPrice">
                                        @currentPlans.ElementAt(0).planNamePrice
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" id="rdb2" name="planprice" value="@currentPlans.ElementAt(1).planCurrentPrice" checked>
                                        @currentPlans.ElementAt(1).planNamePrice
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" id="rdb3" name="planprice" value="@currentPlans.ElementAt(2).planCurrentPrice">
                                        @currentPlans.ElementAt(2).planNamePrice
                                    </label>
                                </div>

And this is my js:

<script>
    $(document).ready(function () {
        $('#rdb1').click(function () {
            $('#@currentPlans.ElementAt(0).planCurrentPrice').val(@currentPlans.ElementAt(0).planCurrentPrice);
        });

        $('#rdb2').click(function () {
            $('#@currentPlans.ElementAt(1).planCurrentPrice').val(@currentPlans.ElementAt(1).planCurrentPrice);
        });

        $('#rdb3').click(function () {
            $('#@currentPlans.ElementAt(2).planCurrentPrice').val(@currentPlans.ElementAt(2).planCurrentPrice);
        });

        $(':submit').click(function () {
            alert($('#radioSelection').val());
            document.getElementById('qcktxnform').submit();
            return false;
        });
    });
</script>

How do I set the value of hidden field "a3?

Answer 1

User475983607 posted

Your design is not clear.  Why do you need to set a hidden field when you have the value of the radio button?

How do I set the value of hidden field "a3?

$('#radioSelection').val('theValue');

Answer 2

User379720387 posted

Not understanding.

What is theValue?

Answer 3

User475983607 posted

Not understanding.

What is theValue?

That's up to you.  Your code is a little confusing.  I think you are after code similar to the following.

<form method="get" id="qcktxnform" class="form-horizontal" role="form" action="https://www.sandbox.paypal.com/cgi-bin/webscr">

    <input type="hidden" id="radioSelection" name="a3" value="????" />

    <div class="radio">
        <label>
            <input type="radio" id="rdb1" name="planprice" value="1">
            1
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" id="rdb2" name="planprice" value="2" checked>
            2
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" id="rdb3" name="planprice" value="3">
            3
        </label>
    </div>
</form>

    <script>
        //Set the hidden field when the page loads
        $('#radioSelection').val($(this).val());

        //handler
        $(':radio[name="planprice"]').click(function () {
            //Debug
            console.log($(this).val());
            //Set the input value
            $('#radioSelection').val($(this).val());

        });
    </script>

Keep in mind, the radio button has the state.  It's not clear why you are making a second copy of the radio button list value.

Answer 4

User379720387 posted

Thanks for pointing out my errors in the script, this is what I ended up with:

<input type="hidden" id="radioSelection" name="a3" value="" />

Note that the value attribute is ""

<script>

    $(document).ready(function () {

        $('#rdb1').click(function () {

            $('#radioSelection').val(@currentPlans.ElementAt(0).planCurrentPrice);

        });

 

        $('#rdb2').click(function () {

            $('#radioSelection').val(@currentPlans.ElementAt(1).planCurrentPrice);

        });

 

        $('#rdb3').click(function () {

            $('#radioSelection').val(@currentPlans.ElementAt(2).planCurrentPrice);

        });

 

        $(':submit').click(function () {

            alert($('#radioSelection').val());

            document.getElementById('qcktxnform').submit();

            return false;

        });

    });

</script>