Jquery combining many option select in to one input on multiple lines and combinding a total sum

69
October 05, 2019, at 07:10 AM

So i made a little code that combine from multiple options select and a textarea to one input. But i want the code to run on 10 different lines exactly the same, but instead of having the jquery 10 times how do i it so i can use the same code to run of 10 different lines?

Second of all so if one option select is selected medium lets say 3 colors. And another line i get medium 1 color. So the total would be 4 medium how do i combine all those to one input?

And problem number 3, im trying to calculate if i got 4 medium and the next input to that total is price for medium how do i total medium*price=total? So like in the example 4 * 5 = 20 would be the output!

$(document).ready(function() { 
    sum(); 
    $("#totalsmall, #smallprice").on("keydown keyup", function() { 
        sum(); 
    }); 
    $("#totalmedium, #mediumprice").on("keydown keyup", function() { 
        sum(); 
    }); 
    $("#totallarge, #largeprice").on("keydown keyup", function() { 
        sum(); 
    }); 
}); 
 
function sum() { 
    var totalsmall = document.getElementById('totalsmall').value; 
    var smallprice = document.getElementById('smallprice').value; 
	var result = parseInt(smallprice) * parseInt(totalsmall); 
    if (!isNaN(result)) { 
        document.getElementById('totalsmallprice').value = result; 
    } 
} 
 
$(document).ready(function(){ 
    $('.combine').on('change', function(){ 
        var alltext = 'Location : ' + $('#location').val() + ', Print Size : ' + $('#size').val() + ', Print Colors : ' + $('#colors').val() + ', Description : ' + $('#description').val(); 
        $('#fillinput').val(alltext); 
    }); 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<SELECT class="combine" id="location"> 
    <option>Print Location</option> 
    <option>Front Body</option> 
    <option>Back Body</option> 
    <option>Left Arm</option> 
    <option>Right Arm</option> 
</SELECT> 
<SELECT class="combine" id="size"> 
    <option>Printing Size</option> 
    <option>Small</option> 
    <option>Medium</option> 
    <option>Large</option> 
</SELECT> 
<SELECT class="combine" id="colors"> 
    <option>Print Colors</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</SELECT> 
<textarea class="combine" id="description"></textarea> 
<input type="text" id="fillinput" value=""> 
<br> 
 
 
<SELECT class="combine1" id="location"> 
    <option>Print Location</option> 
    <option>Front Body</option> 
    <option>Back Body</option> 
    <option>Left Arm</option> 
    <option>Right Arm</option> 
</SELECT> 
<SELECT class="combine1" id="size"> 
    <option>Printing Size</option> 
    <option>Small</option> 
    <option>Medium</option> 
    <option>Large</option> 
</SELECT> 
<SELECT class="combine1" id="colors"> 
    <option>Print Colors</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</SELECT> 
<textarea class="combine1" id="description"></textarea> 
<input type="text" id="fillinput" value=""> 
 
<br> 
 
<SELECT class="combine2" id="location"> 
    <option>Print Location</option> 
    <option>Front Body</option> 
    <option>Back Body</option> 
    <option>Left Arm</option> 
    <option>Right Arm</option> 
</SELECT> 
<SELECT class="combine2" id="size"> 
    <option>Printing Size</option> 
    <option>Small</option> 
    <option>Medium</option> 
    <option>Large</option> 
</SELECT> 
<SELECT class="combine2" id="colors"> 
    <option>Print Colors</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</SELECT> 
<textarea class="combine2" id="description"></textarea> 
<input type="text" id="fillinput" value=""> 
 
<br> 
<br> 
 
Total Small : <input type="number" id="totalsmall" value="" placeholder="Total Small"> 
Price : <input type="number" id="smallprice" value="2"> 
Total Price : <input type="number" id="totalsmallprice" value="" readonly> 
<br> 
Total Medium : <input type="number" id="totalmedium" value="" placeholder="Total Medium"> 
Price : <input type="number" id="mediumprice" value="5"> 
Total Price : <input type="number" id="totalmediumprice" value="" readonly> 
<br> 
Total Large : <input type="number" id="totallarge" value="" placeholder="Total Large"> 
Price : <input type="number" id="largeprice" value="7"> 
Total Price : <input type="number" id="totallargeprice" value="" readonly> 
<br>

Any input would be much appreciated!

READ ALSO
I Have Dynamic content ,need to show like slider. for ex 100 line of content need to show each slider have 10 lines [on hold]

I Have Dynamic content ,need to show like slider. for ex 100 line of content need to show each slider have 10 lines [on hold]

I Have Dynamic content ,need to show like sliderfor ex 100 line of content need to show each slider have 10 lines

38
Push values of radio button to an array

Push values of radio button to an array

I need something like this:

92
ajax calls on multiple tabs increases time

ajax calls on multiple tabs increases time

I have a problem on my website when multiple ajax request is being made, the time of the request is getting higherThis is one tab open https://prnt

73
if conditional inside string

if conditional inside string

I need to set innerhtml of an element, but some part of the code is conditionalSince I cannot append to innerHtml I want to put a conditional

50