Question

I was given the following code:

accept

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);
        }
    });
});

I like to keep things simple. Is there a way that I can split this code into a function and then have the function be called here: $("input[id^='position_']").change(function() {

Also the function seems kind of complex. What I need is for when a user clicks an input field then I will get the value of that field along with the value of another field in the same row and then send to Ajax.

Can anyone see a way I could simplify this?

Answer 1

I don’t get what do you mean “simplify”. It does what it has to be. If you mean making code shorter below is a version of your code. It’s harder to read but does same work. And you can see how to use named function instead of anonymous function too.

$("input[id^='position_']").change(doTheMagic);

function doTheMagic() {
    $.ajax({
        type: "POST",
        url : "your_url",
        data: "pos_x=" + $(this).val() + "&div_x=" + $("div[id='" + $(this).attr("id").split("_")[1] + "']").html(),
        success: function(response) {
            alert(response);
        }
    });
}