jQuery input on change when ajax send request

Question

Have problem on input on change, when ajax send request to php file it implements information in inputs.

HTML:

    <div class="col-xs-8">
    <div class="form-group" id="kalb1">
        <input type='text' id="galutinis2" name='mer[]' value="-" disabled>
        <input type='text' name='ker[]' value="-" disabled>
        <input type='text' name='ser[]' value="-" disabled>
        <input type='text' name='per[]' value="-" disabled>
    </div>

jQuery:

$(document).on('input', '#galutinis2', function() {
    var galutinis = $(this).attr('id');
    alert(galutinis);
});

PHP implements inputs:

 if(isset($_POST['per']))) {
     $produktas = $_POST['per'];
     $infos = CalSkaiciuokle::where("id", $produktas);

      foreach ($infos as $info) {
         echo "<input type='text' id='galutinis2' name='mer[]' value=" .$info->name. " disabled>";
         echo "<input type='text' name='ker[]' value=".$info->surname." disabled>";
         echo "<input type='text' name='ser[]' value=".$info->city." disabled>";
         echo "<input type='text' name='per[]' value=".$info->address." disabled>";
     }
     exit;
}

AJAX:

$(document).on('change', '.subcategory', function() {
var subcategory_id = $(this).attr('id');
//alert($("#"+subcategory_id).val());
$.ajax({
    type: 'post',
    url: 'ajaxLoader.php',
    data: {
        per:$("#"+subcategory_id).val()
    },
    success: function (response) {
        document.getElementById("kalb"+parseInt(subcategory_id.match(/[0-9]+/)[0], 10)).innerHTML=response;
    }
});

}); Where can be a problem for not alerting the value ?

input is not a jquery event. Also you haven't included your ajax call — Mike
– Mike, Commented Apr 6, 2016 at 17:02
I'm trying to pick up input value that was inserted in input after ajax request. — Kintamasis
– Kintamasis, Commented Apr 6, 2016 at 17:12

Uzbekjon · Accepted Answer · 2016-04-06 17:20:05Z

2

I guess you are replacing the original form and no events related to "input value change" (blur, change, etc.) are called. You can trigger them yourself in your AJAX callback.

success: function(){
    document.getElementById("kalb"+par ...
    $('#galutinis2').trigger('input'); // or better use builtin events
}

answered Apr 6, 2016 at 17:20

Uzbekjon

11.8k5 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kintamasis Over a year ago

It worked when i change trigger('input') to trigger('change'); Thanks :)

cssyphus · Accepted Answer · 2016-04-06 17:11:58Z

0

Have you wrapped your jQuery code in a document.ready? Example:

$(document).ready(function(){
    $(document).on('blur', '#galutinis2', function() {
        var galutinis = $(this).attr('id');
        alert(galutinis);
    });
}); //END document.ready

Also, note that you must leave the input field for a blur() event to fire.

If you wish to catch individual keystroke activity, try .keyup()

$(document).ready(function(){
    $(document).on('keyup', '#galutinis2', function() {
        var galutinis = $(this).attr('id');
        alert(galutinis);
    });
}); //END document.ready

answered Apr 6, 2016 at 17:11

cssyphus

40.5k21 gold badges104 silver badges125 bronze badges

1 Comment

Kintamasis Over a year ago

yes I'm wrapped my code with document.ready. This code didn't catch new inserted value too. And I'm not inserting with key, I'm inserting values from database.

cssyphus · Accepted Answer · 2016-04-06 17:22:29Z

0

Something like this?

<script>
    var subcategory_id;
    $(document).ready(function(){

        $(document).on('change', '.subcategory', function() {
            subcategory_id = this.id;
            //alert($("#"+subcategory_id).val()); <-- does this work??
            $.ajax({
                type: 'post',
                url: 'ajaxLoader.php',
                data: {
                    per:$("#"+subcategory_id).val()
                },
                success: function (response) {
                    var num = parseInt(subcategory_id.match(/[0-9]+/)[0], 10);
                    alert('Num: '+num);
                    $('#kalb'+num).val(response);
                }
            });
        });

    }); //END document.ready
</script>

Note that the var subcategory_id is not available in your AJAX success function, so must be declared globally (outside the functions in which it is being used)

Also, you may wish to test what you are receiving in the ajaxLoader.php file, by just echoing back the POST data:

<?php
    die( $_POST['per'] );

And modify success function:

success: function (response) {
alert(response);

answered Apr 6, 2016 at 17:22

cssyphus

40.5k21 gold badges104 silver badges125 bronze badges

6 Comments

Kintamasis Over a year ago

ajax function working good, it return all information in my input field. Maybe the problem is that I append my old html tag with new from ajaxLoader (PHP code on my question) and jquery don't catch that?

cssyphus Over a year ago

Did you do the test I suggest at bottom of my answer (new content)? Does the ajax success function alert the correct data here: alert(response) ?

cssyphus Over a year ago

Does this alert('Num: '+num); (note its location in the ax success fn) alert the correct number for this control $('#kalb'+num). Also, add this alert below the other: alert( $('#kalb'+num).length );

Kintamasis Over a year ago

Yes, but that are your trying to do?

cssyphus Over a year ago

Note updated comment above (refresh page). Trying to establish that the $('#kalb'+num) element exists, and is being correctly populated by response variable

|

Collectives™ on Stack Overflow

jQuery input on change when ajax send request

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related