HTML表单调用javascript函数

Question

这将是一个愚蠢的问题，只是试图弄清楚我的Javascript函数与HTML表单交互的方式，并且无法使其正常工作。

非常简单，放在小提琴中

$('#test').submit(function(){
    var battery = $('#battery').value();
    $('#output').text(battery);
});

<form id="test" action="">
    <fieldset>
        <label for="battery">Cell Count</label><br />
        <input type="number" size="3" name="battery" id="battery" /><br />
        <input type="submit" name="submit" id="submit" onclick="submit()" />
    </fieldset>
</form>

<div id="output">

</div>​​​​

总是返回错误，我不知道为什么。 玩弄了其他东西，总是让它无法正常工作。

Answer 1

错误可能是.value()不是函数。 您需要.val() 。

Answer 2

jQuery返回input元素值的函数是val() ，而不是value() 。 您的代码应为：

$('#test').submit(function(){
    var battery = $('#battery').val();
    $('#output').text(battery);
});

<form id="test" action="">
    <fieldset>
        <label for="battery">Cell Count</label><br />
        <input type="number" size="3" name="battery" id="battery" /><br />
        <input type="submit" name="submit" id="submit" onclick="submit()" />
    </fieldset>
</form>

<div id="output">

</div>​​​​

Answer 3

如果您使用适当的开发人员工具（例如Firefox中的Firebug），则可以轻松地在此找出问题所在，因为在控制台中，它会向您显示以下内容：

Uncaught TypeError: Object [object Object] has no method 'value'

这意味着没有value方法，而应该使用val()代替。

Answer 4

要使用jQuery从输入中检索值，您需要使用.val（）

更改：

var battery = $('#battery').value();

至：

var battery = $('#battery').val();

Answer 5

我不确定这是否正确，但我认为您的JavaScript代码看起来像php，并且引号中的action=""字段中没有任何内容。 另外，我认为值应该是val。

Answer 6

正确的函数是jQuery中的val（）no value（）。

通过使用.submit方法，请保留“ return false”以不运行您未考虑的“表单”的“操作” 。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).on('ready', function() {
        $('#test').submit(function(){
            var battery = $('#battery').val();
            $('#output').text(battery);
            return false;
        });        
    })

</script>

如果使用的是jQuery，则在输入对象中不需要onclick =“ submit（）”参数

<form id="test" action="#">
    <fieldset>
        <label for="battery">Cell Count</label><br />
        <input type="number" size="3" name="battery" id="battery" /><br />
        <input type="submit" name="submit" id="submit"/>
    </fieldset>
</form>
<div id="output"></div>​​​​

问候