Returning undefined when accessing values from form with HTML and JavaScript

Question

I am having an issue with my form showing undefined. I am trying to dynamically grab the values for a form. However during my alert() it seems to fire twice and return a undefined. I am not sure how to fix this issue - or would it be best to add another form to the page?

HTML

<div class="container">
<form id="sasTokenOptions">
    <div class="row">
        <div class="col-xs-6">
            <div class="card">
                <div class="card-title">SAS Token Duration</div>
                <p></p>
                <p>Please select a the duration of the SAS Token.</p>
            </div>

            <div class="container">
                <div class="radio" id="">
                    <label><input type="radio" name="optradio" value="1" />1 hour</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio" value="24" />24 hours</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio" value="720" />30 days</label>
                </div>
            </div>
        </div>

        <div class="col-xs-6">

            <div class="card">
                <div class="card-title">SAS Token Access Permission</div>
                <p></p>
                <p>Please select the SAS Token's permission.</p>
            </div>
            <div class="container">
                <div class="checkbox">
                    <label><input type="checkbox" name="optcheck" value="Read">Read</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="optcheck" value="Write">Write</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="optcheck" value="List">List</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="optcheck" value="Delete">Delete</label>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-6 col-sm-4"><button type="button" class="btn btn-primary btn-sm" id="submit">Submit</button></div>
    </div>
</form>

JavaScript

    $("#sasTokenOptions input").on('change', function () {
    alert($('input[name=optradio]:checked', '#sasTokenOptions').val());
})

$("#sasTokenOptions input").on('change', function () {
    alert($('input[name=optcheck]:checked', "#sasTokenOptions").val());
})

spaceman · Accepted Answer · 2016-04-26 17:32:05Z

1

You have 2 on change handlers firing every time an input element is changed. One checks for the radio inputs and one checks for the checkbox inputs.

If there isn't an option checked on both types, one of your alerts is going to return undefined. Try clicking a checkbox first, it will alert undefined as no radio is selected then the value of the checkbox.

Try this

$('input[name=optradio]').on('change', function () {
    alert($('input[name=optradio]:checked', '#sasTokenOptions').val());
});

$('input[name=optcheck]').on('change', function () {
    $('input[name=optcheck]:checked', "#sasTokenOptions").each(function() {
        alert($(this).val());
    })
});

There is separate on change events for each input type and as multiple checkboxes can be selected, it alerts each value checked.

edited Apr 26, 2016 at 17:32

answered Apr 26, 2016 at 17:25

spaceman

1,1678 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Returning undefined when accessing values from form with HTML and JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related