синхронный ввод в input имеющий одинаковый class
 

первая группа input имеет class с меткой master

<input class="autosubmit master price_45s_1_fat" size="1" type="text" name="price" value="400">
......
<input class="autosubmit master price_45s_3_fat" size="1" type="text" name="price" value="430">
.....
<input class="autosubmit master price_45s_20_fat" size="1" type="text" name="price" value="400">


........

вторая группа input имеет class с меткой slave

<input class="autosubmit slave price_45s_1_fat" size="1" type="text" name="price" value="400">
......
<input class="autosubmit slave price_45s_3_fat" size="1" type="text" name="price" value="430">
.....
<input class="autosubmit slave price_45s_20_fat" size="1" type="text" name="price" value="400">


........

вот мне нужно как то сделать синхронный ввод чтобы при заполнения
input class ="master" то что я внес скопировалось в input class ="slave"

но с учетом что совпадает class price_Ns_N_fat (где N число)

т.е ввожу в

<input class="autosubmit master price_45s_1_fat" size="1" type="text" name="price" value="400">

- число 555


и в

<input class="autosubmit slave price_45s_1_fat" size="1" type="text" name="price" value="400">

- переносится число 555



Помогите пожалуйста составить красивый и лаконичный код на JQ :)

class autosubmit выполняется такой функций т.е после ввода цены происходит POST отправка формы через плагин jQuery Form Plugin

$('form.xject').ajaxForm({ });



 $(function () { 
      autosubmit();
   });

<script>
function connectMaterToSlave(masterClass, slaveClass, relatedClassBeginsWith) {
  const connection = ({target, target: { classList }}) => {
    if (!classList.contains(masterClass)) return;

    for (const className of classList) {
      if (className.startsWith(relatedClassBeginsWith)) {
        document.querySelectorAll(`input.${slaveClass}.${className}`).forEach(
          input => input.value = target.value
        );
        return;
      }
    }
  };
  
  document.addEventListener('input', connection, true);
  
  return () => {
    document.removeEventListener('input', connection, true);
  }
}

connectMaterToSlave('master', 'slave', 'price_');
</script>


<input class="autosubmit master price_45s_1_fat" size="1" type="text" name="price" value="400">
<input class="autosubmit master price_45s_3_fat" size="1" type="text" name="price" value="430">
<input class="autosubmit master price_45s_20_fat" size="1" type="text" name="price" value="400">


<br/>........<br/>


<input class="autosubmit slave price_45s_1_fat" size="1" type="text" name="price" value="400">

<input class="autosubmit slave price_45s_3_fat" size="1" type="text" name="price" value="430">
<input class="autosubmit slave price_45s_20_fat" size="1" type="text" name="price" value="400">

Вот без jq.

....вот что из этого сгенерил чатгпт в jq, если надо:

function connectMasterToSlave(masterClass, slaveClass, relatedClassBeginsWith) {
    $(document).on('input', '.' + masterClass, function(event) {
        var $target = $(event.target);
      
        var classList = $target.attr('class').split(/\s+/);
        $.each(classList, function(index, className) {
            if (className.startsWith(relatedClassBeginsWith)) {
                $('input.'+ slaveClass + '.' + className).val($target.val());
            }
        });
    });
}

интересно, надо попробовать ЧАТ GPT не думаю что он так умеет понимать задачи.

все работает спасибо! данные автоматические попадают в поля SLAVE

но как мне еще бы их передавать . т.е активировать после ввода значения autosubmit

т.е если сейчас вод на поле SLAVE в которое копировалось значение навести мышку и отвести оно да отправится в сохранения sql

function autosubmit() {

        function submitFormFor(element) {
            // get form 
            var formSelector = $(element).data("autosubmit-form"),
                $form = formSelector ?
                    $(formSelector) :
                    $(element).closest("form");

            if ($form.length > 0) { $form.submit();}
        }

        // wire-up autosubmit
        $("input.autosubmit[type='checkbox'],input.autosubmit[type='radio']").on("click", function () {
            submitFormFor(this);
        });
        $("select.autosubmit").on("change", function () {
            if ($(this).is(":focus")) {
                submitFormFor(this);
            }
        });
        $("input.autosubmit[type='text'],textarea.autosubmit").on("blur keyup", function (e) {
            if (e.type === "blur" || e.which === 13) {
                submitFormFor(this);
            }
        });

    }

в JQ есть вроде что то типа

$( ".target" ).trigger( "change" );

вот мне тоже надо после того как скрипт синхронно ввел значение в class="slave" он этот class="slave" дернул как будто обновил change


P/S для скрипта выше что без JQ (тот вариант что от ChatGPT у меня не заработал почему то) а вот что выше вы сделали отлично вводит данные но как еще отправку инициировать не могу сделать

input => input.value = target.value

->

input => {
  input.value = target.value;
  $(input).trigger( "change" );
}

А сгенереный вариант не рабоает потому что jquery не умеет ставить useCapture флаг(третий параметр при навешивании обработчика), а без него input событие на детях не ловится. Вот так нас и обманывает ИИ подсовывая вроде рабочий код на первый взгляд.)

$(input).trigger( "change" );

не помогает инициировать отправку

function autosubmit() {

        function submitFormFor(element) {
            // get form 
            var formSelector = $(element).data("autosubmit-form"),
                $form = formSelector ?
                    $(formSelector) :
                    $(element).closest("form");

            if ($form.length > 0) { $form.submit();}
        }

        // wire-up autosubmit
        $("input.autosubmit[type='checkbox'],input.autosubmit[type='radio']").on("click", function () {
            submitFormFor(this);
        });
        $("select.autosubmit").on("change", function () {
            if ($(this).is(":focus")) {
                submitFormFor(this);
            }
        });

        $("input.autosubmit[type='text'],textarea.autosubmit").on("blur keyup", function (e) {
            if (e.type === "blur" || e.which === 13) {
                submitFormFor(this);
            }

        });

    }

я так понимаю какое то действие тут должно быть которое поймет вот этот кусок кода

$("input.autosubmit[type='text'],textarea.autosubmit").on("blur keyup", function (e) {
            if (e.type === "blur" || e.which === 13) {
                submitFormFor(this);
            }

вот так тоже не работает

input => {
  input.value = target.value;
  
  $(input).trigger( "change" );
  
  $(input).addClass( "changered" );
  
  $(input).on({
    keyup: function() {myFunction('keyup')},
    blur: function() {myFunction('blur')},
   focus: function(){console.log('focus!');}
});

  

		
}

хотя когда на измененное поле мышкой наведу и уберу курсор - отправка происходит


нужный changered подчеркивается как вот еще форму бы отправить вокруг

<form class="xject" action="/login/obj_price/index.php?action=update_price&amp;id=2881" method="POST">

<input class="autosubmit slave price_45s_3_fat changered" size="1" type="text" name="price" >
<input style="display:none" type="submit" value="go ajax">

</form>

надо как то нажать средствами JS submit который рядом с измененным input чтобы отправка произошла

$(input).trigger( "change" );

->

$(input).trigger( "blur" );

Очевидно, вроде.


Ну или вынести

function submitFormFor(element) {
            // get form 
            var formSelector = $(element).data("autosubmit-form"),
                $form = formSelector ?
                    $(formSelector) :
                    $(element).closest("form");

            if ($form.length > 0) { $form.submit();}
        }

и руками вызывать без посредников

submitFormFor(input)

Спасибо вам большое! все теперь работает как я хотел... :dance: