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

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

1 个答案: