Calculate and submit form values with jquery and ajax and add calculated values to specific div

mickbrancco Published at Dev

mickbrancco

I can not figure out how to calculate different form values and submit calculated values to an empty div on another page. I don't have any php or similar, this should be just a dummy page.

Any help would be appreciated.

Here's my current html and jquery code:

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

Keerthi Kumar P

This should probably work and satisfy your need. Not tested though:

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

Collected from the Internet

Please contact [email protected] to delete if infringement.