Вызов функции после изменения в поле ввода, которое производится с помощью select

#javascript #php #jquery

#javascript #php #jquery

Вопрос:

У меня есть поле выбора, которое после изменения запускает скрипт (и изменяет дату в текстовом поле ввода):

 $(window).load(function() {
  datum = function() {
    var platba = document.getElementById('payment').value;
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()   1; //January is 0!
    var yyyy = today.getFullYear();

    today = dd   '.'   mm   '.'   yyyy;
    if (payment = 'yes') { datet = today; }
    document.getElementById('datepayment').value = datet;
  

Это отлично работает, но теперь мне нужно вызвать функцию jQuery, которая сохраняет новое значение в dtb…

Это делается с помощью следующего скрипта (который работает автоматически после изменения полей ввода в целом виде):

 <!--JQUERY-->
<script type='text/javascript'>
// JQUERY: Plugin 'autoSumbit'
(function($) {
    $.fn.autoSubmit = function(options) {
        return $.each(this, function() {
            // VARIABLES: Input-specific
            var input = $(this);
            var column = input.attr('name');

            // VARIABLES: Form-specific
            var form = input.parents('form');
            var method = form.attr('method');
            var action = form.attr('action');

            // VARIABLES: Where to update in database
            var where_val = form.find('#where').val();
            var where_col = form.find('#where').attr('name');

    // ONBLUR: Dynamic value send through Ajax
            input.bind('blur', function(event) {

                // Get latest value
                var value = input.val();

                // AJAX: Send values
                $.ajax({
                    url: action,
                    type: method,
                    data: {
                        val: value,
                        col: column,
                        w_col: where_col,
                        w_val: where_val
                    },
                    cache: false,
                    timeout: 10000,
                    success: function(data) {
                        // Alert if update failed
                        if (data) {
                            alert(data);
                        }
                        // Load output into a P
                        else {
                            $('#notice').text('Updated');
                            $('#notice').fadeOut().fadeIn();
                        }
                    }

                });
                // Prevent normal submission of form

      return false; 
            })
         //  
        });

    }
})(jQuery);
// JQUERY: Run .autoSubmit() on all INPUT fields within form
$(function(){
  $('#ajax-form INPUT').autoSubmit();
  $('#ajax-form SELECT').autoSubmit(); 
  $('#ajax-form TEXTAREA').autoSubmit();         
});
</script>
  

Вопрос в том, как сохранить значение в поле datepayment в базу данных, не нажимая на него? Спасибо за комментарии!

Ответ №1:

Вместо

 input.bind('blur', function(event) 
  

Попробуйте

 input.on('input', function() {
  

Вот простой пример:

 <input type="text" id="input1"/> 
<input type="text" id="input2"/> 
<select id="input3">
<option value="ABC">ABC</option>
<option value="XYZ">XYZ</option>
</select>

$(document).ready(function() {
  $("#input1").on('input', function() { //'input' listener
    alert($("#input1").val());
  });
  $("#input2").on('input', function() { //'input' listener
    alert($("#input2").val());
  });
  $("#input3").on('change', function() { //'change' listener
    alert($("#input3").val());
  });
});
  

ссылка на jsfiddle: https://jsfiddle.net/kannanore/xdat6axa /

Комментарии:

1. Спасибо! Я пробовал это, но это не помогло. Я предполагаю, что изменение (новое значение) в текстовом поле не является «изменением» 🙂

2. Все еще не работает. Возможно, проблема в том, что скрипт должен запускаться дважды — первый раз, чтобы сохранить SELECT #payment и второй раз, чтобы сохранить текстовое поле #datepayment…

3. Оно должно запускаться для каждого поля. Вы можете попробовать добавить прослушиватель ввода во все необходимые поля вашей формы

4. Извините, но теперь я не понимаю, что вы имеете в виду (под слушателем ввода)… Спасибо за вашу любезную помощь.

5. Теперь посмотрите на код в ответе, у каждого поля (т.Е. input1, input2 и input3) есть слушатель. у input1 и input2 есть прослушиватель «ввода», а у input3 есть прослушиватель «изменения».