CODEWITHSUNDEEP
javascriptjquery
Glenn
Glenn

Reputation: 121

How to Capture changing value of textbox

I have a webpage with a small survey. I want to pre populate some of the answers based on user inputs to previous question.

In the below code, if value of id QR~QID3 depends upon value of QID1_Total. However after the page loaded and even if the condition is met the textbox is not populated with correct value.

.addOnload(function()
{
    if(document.getElementById("QID1_Total").value>15) {
        document.getElementById("QR~QID3").value = "Good";
        }

    else{
        document.getElementById("QR~QID3").value = "Average";
    }

});

Upvotes: 3

Views: 265

Answers (3)

Martiens Kropff
Martiens Kropff

Reputation: 118

You need to add an event listener to the "QID1_Total" element. If you want to run the check while the user changes the input, i.e. after each keypress use the oninput event. If you want to run the check after the user has completed the input, use the onchange event. The onchange event will only fire after the input loses focus.

You can bind the event listeners by using the addEventListener() function like this:

document.getElementById("QID1_Total").addEventListener("input", function(){ //Code goes here });

Here is a JSFiddle showing both methods.

You also have to use the parseInt() function on the textbox values before you can perform mathematical functions with them.

Upvotes: 1

ameenulla0007
ameenulla0007

Reputation: 2683

$("#QID1_Total").on("input", function() {
   //statements goes here
});

use of on("input" will track every inputting event, include drop and paste.

know more about onInput : https://mathiasbynens.be/notes/oninput

Here is an Fiddle Example to know how trigger works : https://jsfiddle.net/5sotpa63/

An Assumption

Let Us Say you are using a function, which holds this statement show Good and Average according to users Input.

var targetElem  = document.getElementById("QID1_Total");
var showComment = (targetElem,value>15) ? "Good" : "Average";
document.getElementById("QR~QID3").value = showComment;

Above code is the shorter method of your own statement mentioned in your question.

Now on Change of the target QR~QID3 you need to load some content. you utilize the below code as follows.

$("#QR~QID3").on("input", function() {
  //your next question loading statements goes here,
  //statements to proceed when you show some comment Good or Average
}).trigger("input");

Hope! this could be helpful.

Upvotes: 4

Moulika Pinapathruni
Moulika Pinapathruni

Reputation: 31

$('#QID1_Total').keydown(function () {

//ur code

});

as the mouse key is pressed in the input field the function is called

Upvotes: 1

Related Questions