Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2023, 07:21
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 202

синхронный ввод в 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
Ответить с цитированием
  #2 (permalink)  
Старый 27.05.2023, 07:31
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 202

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

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



 $(function () { 
      autosubmit();
   });
Ответить с цитированием
  #3 (permalink)  
Старый 27.05.2023, 07:45
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,567

<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());
            }
        });
    });
}
__________________
29375, 35

Последний раз редактировалось Aetae, 27.05.2023 в 09:24.
Ответить с цитированием
  #4 (permalink)  
Старый 27.05.2023, 07:58
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 202

интересно, надо попробовать ЧАТ 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 у меня не заработал почему то) а вот что выше вы сделали отлично вводит данные но как еще отправку инициировать не могу сделать

Последний раз редактировалось ufaclub, 27.05.2023 в 08:44.
Ответить с цитированием
  #5 (permalink)  
Старый 27.05.2023, 09:18
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,567

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


А сгенереный вариант не рабоает потому что jquery не умеет ставить useCapture флаг(третий параметр при навешивании обработчика), а без него input событие на детях не ловится. Вот так нас и обманывает ИИ подсовывая вроде рабочий код на первый взгляд.)
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 27.05.2023, 09:32
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 202

$(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);
            }
Ответить с цитированием
  #7 (permalink)  
Старый 27.05.2023, 09:34
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 202

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


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 чтобы отправка произошла

Последний раз редактировалось ufaclub, 27.05.2023 в 09:38.
Ответить с цитированием
  #8 (permalink)  
Старый 27.05.2023, 10:21
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,567

$(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)
__________________
29375, 35

Последний раз редактировалось Aetae, 27.05.2023 в 10:25.
Ответить с цитированием
  #9 (permalink)  
Старый 27.05.2023, 10:27
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 202

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ввод в input с кнопки Artur_Hopf Общие вопросы Javascript 14 05.04.2018 15:37
Добавлять class в div при вводе текста в input skwz Общие вопросы Javascript 9 06.01.2017 00:10
Проверка input с одинаковым class igorianru Events/DOM/Window 1 05.11.2013 23:49
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Синхронный ввод в 2 Input lericen AJAX и COMET 8 06.09.2011 09:52