Question

How can I do an Ajax called based on a user updating a number in a text box?

I have something like the following. I removed surrounding code to make it easier to follow. I’m showing here two rows of a much larger grid.

           <div class="rep_tr0">
                <div class="rep_td0" id="2">0001</div>            
                <div class="rep_td0"><input id="position_1" name="position_1" size="5" type="text" value="0" /></div>                           
            </div>
            <div class="rep_tr0">
                <div class="rep_td0" id="2">0002</div>          
                <div class="rep_td0"><input id="position_2" name="position_2" size="5" type="text" value="0" /></div>
            </div>

What I need is when the user makes a change to one of the input fields named “position_x” then I need to

- get the value of the input field marked with "position_x"
- get the value that is stored in the div with id="x" 
- make an ajax call passing the two parameters.

Note that x marks the row number.

Answer 1

Something like this:

$("input[id^='position_']").change(function() {
    //get the value of the input field marked with "position_x"
    var posX = $(this).val();
    var idArr = $(this).attr("id");
    var idTmp = idArr.split("_");
    var id = idTmp[1];
        var divX = $("div[id='"+id+"']").html();    
    make an ajax call passing the two parameters.
    $.ajax({
        type: "POST",
        url : "your_url",
        data: "pos_x="+posX+"&div_x="+divX,
        success: function(response) {
            alert(response);
        }
    });
});