Question

我的表单显示undefined时出现问题。我试图动态获取表单的值。但是在我的alert()期间，它似乎会触发两次并返回undefined。我不确定如何解决这个问题 - 或者最好是在页面中添加另一个表单？

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());
})

Answer 1

每次更改输入元素时，您都会在更改处理程序上触发2。一个检查无线电输入，一个检查复选框输入。

如果没有选中这两种类型的选项，则其中一个提醒将返回undefined。首先尝试点击一个复选框，它会提醒undefined，因为没有选择广播，然后是复选框的值。

试试这个

$('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());
    })
});

每种输入类型都有单独的更改事件，并且可以选择多个复选框，它会警告每个检查的值。

使用HTML和JavaScript访问表单中的值时返回undefined

1 个答案: