Javascript 使用jquery和ajax计算并提交表单值，并将计算出的值添加到特定的div中

我不知道如何计算不同的表单值并将计算出的值提交到另一页上的空div。我没有任何php或类似的，这应该只是一个虚拟页面

任何帮助都将不胜感激

以下是我当前的html和jquery代码：

HTML:

<form class="wrapper" id="form" action="" name="">
    <input class="input" type="range" min="18" max="90" value="22" id="age" data-amount>
    <select class="input" name="" id="" data-amount>
        <option value="50">Old</option>
    </select>
    <input class="input" type="radio" name="" value="40" id="" data-amount>   
    <input class="button" type="submit" value="Find best match">
</form>

$(document).ready(function() {
    $('#form').submit(function(e){
    e.preventDefault();

    var total = 0;
    var amount = '[data-amount]';

    $(amount).each(function(index){
        total += parseInt($(this).val());
    });

    $.ajax({
        cache: false,
        url: "result.html",
        amount: total,
        success: function(html) {
            $('#result').html(html);
        }
    });
    return false;
    })
});

---

这应该可以满足你的需要。但未经测试：

HTML:

---

你到底想达到什么目的？您是否将值从ajax异步发布到其他页面？ajax的要点是您不会离开当前页面，因此如果您需要在新页面上显示结果，则不应使用ajax“提交到另一页面上的空div”是什么意思？您正在尝试更改服务器上的“result.html”吗？如果没有后端，这将无法工作。感谢快速响应的家伙。如果在没有后端的情况下无法重定向到另一个页面，例如result.html，我可以简单地将计算出的内容加载到当前页面，在本例中为index.html。然后重点是从index.html中隐藏现有内容（设计），并显示设计完全不同的计算结果。我认为这是一个演示表单（单个选项和单个单选按钮？）。。你试过采取行动吗？可能会有帮助..谢谢@pathrik这很有效！

<form class="wrapper" id="form" action="" name="">
    <input class="input" type="range" min="18" max="90" value="22" id="age" data-amount>
    <select class="input" name="" id="" data-amount>
        <option value="50">Old</option>
    </select>
    <input class="input" type="radio" name="" value="40" id="" data-amount>   
    <input class="button" type="submit" value="Find best match">
</form>
<div id="result-container" style="display:none">
</div>

$(document).ready(function() {
    $('#form').submit(function(e){
    e.preventDefault();

    var total = 0;
    var amount = '[data-amount]';

    $(amount).each(function(index){
        total += parseInt($(this).val());
    });

    $("#result-container").html(total);
    $("#result-container").show();
    $("form").hide();
    return false;
    })
});