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

問候