CODEWITHSUNDEEP
javascriptjqueryjsfiddle
user1701484
user1701484

Reputation: 233

Number does not change after adding a value into a text input

I have a test application here which you can use:

Please follow steps below in order to use the app: Application

1. Open the application and you will see that "Total number of Marks Remaining" is 20. Click on the "Add Question" button, this will append a row underneath.

2. Now within the appended row you will see a text input. Type in the number 10 in the text input and click away. You will see that the "Total number of Marks Remaining" has changed from 20 to 10 which is correct (20-10=10)

3. Now within that same row there is a green plus button, click on this button and a modal window will appear with a search bar inside.

4. In the search bar type in 2+2 an then enter the search. A row will appear where under the "Number of Marks" column it shows the number 5, Click on the "Add" button to add the row.

5. This is where the problem is, you will see that in the appended row it says in the text input "5" but if you go back to the top it still says "Total number of Marks Remaining: 10". This should change to 15 as 20 - 5 = 15. But it does not change.

My question is that after the user has added a number into an appended row, how can I get the total marks number to change? Is it because I am using the "OnChange" attribute?

Below is a jsfiddle where it shows the whole code: (Jsfiddle is not a working example, it is just there so you can see the whole code):

http://jsfiddle.net/WZKrP/2/

Upvotes: 1

Views: 136

Answers (2)

prashanth
prashanth

Reputation: 2099

I think this code $('#mainTxtWeight').val(textWeight); is causing the problem.

According to W3C documentation, if you programmatically change the value of an input control, you have to manually fire the change event.

Try using a blur event or just manually fire the change event

Refer to my answer to another SO question for more information.

Upvotes: 0

VVV
VVV

Reputation: 7593

On the "add" button in the modal window, you're calling parent.addwindow(key_0,'5','1','A-D','Single','A'); but the function addWindow() in your javascript only has 1 parameter: addwindow(textWeight)... Youy are sending 5 parameters.

The function is being called correctly, you're just not doing anything with the data.

this is what you're sending to the function

enter image description here

Edit after comments

use $(plusbutton_clicked).closest('tr').find('input.txtWeightRow').val(textWeight).‌​trigger('change'); to trigger the change

Upvotes: 1

Related Questions