Question

115

Auto calculate values onkeyup with JS/Jquery

rated 0 times [ 121] [ 6] / answers: 1 / hits: 5178 / 11 Years ago, sat, january 11, 2014, 12:00:00

I need help with auto counting (without refresh) javascript/jquery function which let me count me by the formula:

Chance = Sum (input by person) * Number.

The problem is, that is a lot of fields, about ~100, but i need to calculate the Chance for every separately.
Here is the code, for question to be understood:

<table>

<tr>

    <th></th>

    <th>Name</th>

    <th>Number</th>

    <th>Chance</th>

    <th>Sum</th>

</tr>

<tr>

    <td><input type=checkbox name=check[] value=id1 /></td>

    <td>test1</td>

    <td>0.5</td>

    <td><span id=chance1 >NEED AUTO VALUE AFTER COUNTING HERE!</span></td>

    <td><input type=text onkeyup=some function? name=sum1 /></td>

</tr>



<tr>

    <td><input type=checkbox name=check[] value=id2 /></td>

    <td>test2</td>

    <td>0.7</td>

    <td><span id=chance2 >NEED AUTO VALUE AFTER COUNTING HERE!</span></td>

    <td><input type=text onkeyup=some function? name=sum2 /></td>

</tr>



<tr>

    <td><input type=checkbox name=check[] value=id3 /></td>

    <td>test3</td>

    <td>0.9</td>

    <td><span id=chance3 >NEED AUTO VALUE AFTER COUNTING HERE!</span></td>

    <td><input type=text onkeyup=some function? name=sum3 /></td>

</tr>

</table>

http://jsfiddle.net/5xch9/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elishaannac

Add To Favorites

Follow

Total Points: 28

Total Questions: 97

Total Answers: 101

Location: Samoa

Member since Mon, Nov 8, 2021

3 Years ago

elishaannac questions

1 Getting warning in 'eslint-plugin-react-settings' while running eslint

Fri, Mar 11, 22, 00:00, 2 Years ago

1 React-router-dom (v6) with Framer Motion (v4)

Sun, Dec 5, 21, 00:00, 3 Years ago

1 can I display custom javascript in streamlit web app

Mon, Jun 14, 21, 00:00, 3 Years ago

1 Handling state with multiple checkboxes in React Native

Mon, Jul 22, 19, 00:00, 5 Years ago

1 How to add custom row on the end of the table (b-table)

Mon, Jul 8, 19, 00:00, 5 Years ago

View All

answered 11 Years ago sienad · Accepted Answer

You can use the parents method to find the relevant tr row for the sum input in question, and then find the number and chance cells inside that row.

$('input[name^=sum]').on(keyup, function(){

    var $this = $(this);

    var $parent = $this.parents('tr');

    var $chance = $parent.find('.chance');

    var $number = $parent.find('.number');    

    $chance.text($number.text() * $this.val());

});

(caching the different nodes(td/span tags) isn't necessary, I wrote it like this to improve readability)

You can modify the markup to something like:

<tr>

    <td>test1</td>

    <td class=number>0.5</td>

    <td><span class=chance id=chance1 >NEED AUTO VALUE AFTER COUNTING HERE!</span></td>

    <td><input type=text name=sum1 /></td>

</tr>

(adding .number and .chance classes makes it easier to find the desired nodes inside the row)

DEMO