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

Question

我无法弄清楚如何计算不同的表单值并将计算值提交给另一页上的空白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> 

的jQuery：

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

Answer 1

这或许应该工作，并满足您的需求。未测试虽然：

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> 
<div id="result-container" style="display:none"> 
</div> 

的jQuery：

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