当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Dynamicly add html fields then multiply the select values and add up a total

问题描述:

I have a simple form consisting of two text fields and two select fields that allows another set of inputs to be added dynamically by the user.

The two select fields are multiplied together and the result is displayed.

What I need is to be able to add as many lines as needed and multiply together the select values for each line, then add up the totals.

E.G. (q and s are select values)

q1 * s1 = z1

q2 * s2 = z2

q3 * s3 = z3

total = z1+z2+z3

But this is dynamic so there maybe 100 values or there may be 2.

Here is my code so far;

<form>

<div id="addinput"> <span>

<input type="text" id="p_new_1" size="20" name="p_new_1" value="" />

<select id="q_new_1" name="q_new_1">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<input type="text" id="r_new_1" size="20" name="p_new_1" value="" />

<select id="s_new_1" name="s_new_1">

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

<a href="#" id="addNew">Add</a> <br />

</span> </div>

</form>

//Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>

<script type="text/javascript">

$(function() {

var addDiv = $('#addinput');

var i = $('#addinput').size() + 1;

$('#addNew').live('click', function() {

$('<span><input type="text" id="p_new_' + i +'" size="20" name="p_new_' + i +'" value="" /><select id="q_new_' + i +'" name="q_new' + i +'"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><input type="text" id="r_new_' + i +'" size="20" name="r_new_' + i +'" value="" /><select id="s_new_' + i +'" name="s_new' + i +'"><option value="4">4</option><option value="5">5</option><option value="6">6</option></select><a href="#" id="remNew">Remove</a><br /></span>').appendTo(addDiv);

i++;

return false;

});

$('#remNew').live('click', function() {

if( i > 2 ) {

$(this).parents('span').remove();

i--;

}

return false;

});

});

var x, y, z;

x = document.getElementById("q_new_1"),

xvalue = x.value;

y = document.getElementById("s_new_1"),

yvalue = y.value;

z = xvalue * yvalue;

document.write (z);

网友答案:

I would start off by structuring the HTML rows as such:

<div class="inputs">
    <input type="text" name="p_new_3" size="20" value="" />
    <select name="q_new_3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></select>
</div>

Then you can loop through the rows in a click event and sum up the values of their children like so:

$("#getTotal").click(function() {
    $(".inputs").each(function() {
       textValue = parseFloat($(this).find("input").val());
       selectValue = parseFloat($(this).find("select").val());
       total += textValue * selectValue;
        $("#total").html(total);
    });
});

Here is a working jsfiddle demo.

<form>
    <div id="addinput">

<div class="inputs">
    <input type="text" name="p_new_1" size="20" value="" />
    <select name="q_new_1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></select>
</div>

<div class="inputs">
    <input type="text" name="p_new_2" size="20" value="" />
    <select name="q_new_2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></select>
</div>

<div class="inputs">
    <input type="text" name="p_new_3" size="20" value="" />
    <select name="q_new_3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></select>
</div>

<a href="#" id="addValues">Add</a> -
<a href="#" id="getTotal">Get total</a>

Total: <span id="total"></span>
<br />

</div>
</form>

Javascript:

var total = 0.0;

$(function() {
    var addDiv = $('#addinput');
    var i = $('#addinput').size() + 1;
    $('#addNew').live('click', function() {
         $('#addinput').append('<div class="inputs"><input type="text" name="p_new_' + i + '" size="20" value=""><select name="q_new_' + i + '"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div>');
         i++;
     return false;
    });

    $('#remNew').live('click', function() {
         if( i > 2 ) {
             $(this).parents('span').remove();
             i--;
         }
         return false;
    });

    $("#getTotal").click(function() {
        $(".inputs").each(function() {
           textValue = parseFloat($(this).find("input").val());
           selectValue = parseFloat($(this).find("select").val());
           total += textValue * selectValue;
            $("#total").html(total);
        });
    });
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: