1

I am having a problem trying to get the value from checked checkboxes. I can get a value from the radio buttons, but I cannot get a value from the checkboxes.

Code

<html>
<head>
    <script language="javascript">

        function subscription() {
            var subamount = document.querySelector('input[name="sublvl"]:checked').value;
            $('input:checked').each(function () {
                // To pass this value to its nearby hidden input
                $(this).parent('td').next('input').val($(this).val());
            });

            alert(subamount);
        }

    </script>
</head>
<body>
    <h3>
        <span style="color: #ff0000;">Step 1: Choose your donation amount</span></h3>
    <form name="pclvl" action="#" method="get">
    <label>
        <input type="radio" name="sublvl" value="10" />
        Pathfinder Chronicler Supporter $10.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="15" />
        Pathfinder Chronicler Bronze Supporter $15.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="20" />
        Pathfinder Chronicler Silver Supporter $20.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="30" />
        Pathfinder Chronicler Gold Supporter $30.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="40" />
        Pathfinder Chronicler Platinum Supporter $40.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="45" />
        Pathfinder Chronicler Jewel Supporter $45.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="50" />
        Pathfinder Chronicler Diamond Supporter $50.00 USD</label>
    <br>
    </p>
    </form>
    <h3>
        <span style="color: #ff0000;">Step 2: Choose your donation reward</span></h3>
    <p>
        <form name="donations" action="#" method="get">
        <input type="checkbox" name="reward" value="1" />
        Vol. I Package ($10 value) A print copy of Pathfinder Chronicler Volume I (shipping
        charges not included)<br />
        <input type="checkbox" name="reward" value="2" />
        Vol. II Package ($10 value) A print copy of Pathfinder Chronicler Volume II (shipping
        charges not included)
        <br />
        <input type="checkbox" name="reward" value="3" />
        Vol. III Package ($10 value) A print copy of Pathfinder Chronicler Volume III (shipping
        charges not included)
        <br />
        <input type="checkbox" name="reward" value="4" />
        Vol. I Package + Vol. I Poster ($15 value) A print copy of Pathfinder Chronicler
        Volume I with a 11x17 Poster of Volume I Source Art by Eva Widermann (shipping charges
        not included)<br />
        <input type="checkbox" name="reward" value="5" />
        Vol. II Package + Vol. II Poster ($15 value) A print copy of Pathfinder Chronicler
        Volume II with a 11x17 Poster of Volume II Source Art by Carolina Eade (shipping
        charges not included)<br />
        <input type="checkbox" name="reward" value="6" />
        Vol. III Package + Vol. III Poster ($15 value) A print copy of Pathfinder Chronicler
        Volume II with a 11x17 Poster of Volume III Source Art by Carolina Eade (shipping
        charges not included)<br />
        <input type="checkbox" name="reward" value="7" />
        Complete Package ($50 value) Print copies of Pathfinder Chronicler Volume I, II
        and III with 11x17 Posters of Volume I, II, III, and IV Source Art, by Eva Widermann
        and Carolina Eade (shipping charges not included)<br />
        <input type="checkbox" name="poster" value="poster" />
        Poster Package ($20 value) 11x17 Posters of Volume I, II, III, and IV Source Art,
        by Eva Widermann and Carolina Eade (shipping charges not included)<br />
    </p>
    <input type="button" value="test click" onclick="subscription(this.form)">
    </form>
</body>
</html>
Improve this question
7
  • .next('input') should probably be .next('input:hidden'). But why are you duplicating that anyway, aren't your checkboxes submitted? Commented Jul 1, 2013 at 23:43
  • How do you intend to handle multiple selections of the reward? Commented Jul 1, 2013 at 23:44
  • 2
    Why are you using both jQuery and native DOM selectors? Commented Jul 1, 2013 at 23:45
  • 1
    In this line: $(this).parent('td').next('input').val($(this).val()); You are looking for a parent <td> element, but your html doesn't have any <td> elements. Commented Jul 1, 2013 at 23:48
  • ok, I am sorry i have been away from from web programming from awhile. what is the best way to go about this. Commented Jul 1, 2013 at 23:49

1 Answer 1

Reset to default
1

If you are going to use jQuery, may as well stick to jQuery. I am including plenty of comments since you have been away from web programming for a while and might use the refresher.

Edit: Just saw your edit, changed to get the checkboxes

function subscription() {

    // Create an array of checkbox inputs that are checked
    var $inputs = $('input[type="checkbox"]:checked');

    // Iterate through all the checked inputs, you could use
    // jQuery's $each here but it's horribly slow
    for (var i = 0; i < $inputs.length; i++) {

        // Assign the value
        var inputValue = $($inputs[i]).val();

        // Please note I cannot see the hidden field on your markup, but let's
        // just target the first hidden field available if that is what you want
        // If you include the hidden field on the markup, we could target it
        // specifically also...
        $('input:hidden').val(inputValue);

    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

how would i output these then?
ok let me ask you this i need to get the info from the radio buttons and the checkboxes and then send to paypal what is the best way to do this, with out leaving the page.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.