HTML表单调用javascript函数

HTML form calling javascript function

本文关键字：函数 javascript 调用 表单 HTML      更新时间：2023-09-26

这将是一个愚蠢的问题，只是试图找出我的方式围绕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>​​​​

总是返回一个错误，我不知道为什么。玩了很多东西，都不能正常工作，总是出错

错误可能是.value()不是一个函数。你想要.val()

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>​​​​

如果您使用适当的开发工具(例如Firefox中的Firebug)，那么您可以轻松地找出这里的问题，因为在控制台中它会显示如下内容:

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

这意味着没有value方法，val()是应该使用的。

要使用jQuery从输入中检索值，您需要使用。val()

改变: 

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

: 

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

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

jquery中正确的函数是val() no value()

通过在"return false"中使用.submit方法来不运行"form"的"action" 您没有考虑过的"action" 。

<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>​​​​

对

相关文章：