Как считать данные построчно из элементов input и преобразовать в массив?

Question

Вот такая конструкция:

<form action="action">
        <!--*****данные другие*******-->
        
        <div class="container">
            @foreach($param_default as $parameter)
                    <div class="row">
                        <div class="col-lg-1">
                            <input name="print" type="text" value="{{$parameter->print}}" style="width: 100%;">
                        </div>
                        <div class="col-lg-5">
                            <input name="inspection" type="text" value="{{$parameter->inspection}}" style="width: 100%;">
                        </div>
                        <div class="col-lg-3">
                            <input name="method" type="text" value="{{$parameter->method}}" style="width: 100%;">
                        </div>
                        <div class="col-lg-3">
                            <input name="result" type="text" value="{{$parameter->result}}" style="width: 100%;">
                        </div>
                    </div>
            @endforeach
                    <a href="#" class="btn btn-success save">Save Parameters</a>
                    
            <input type="submit" value="Save">
        </div>
    </form>

Как сначала сохранить данные параметров по клику "Save Parameters" а потом только все остальные?

Понимаю, что нужно Ajax запрос, только как считать по клику? Каждую row в которой 4 поля, чтобы получить на сервере массив строк:

[
  ['print' => '1', 'inspection' => 'inspection', 'method' => 'method', 'result' => 'result'],
  ['print' => '1', 'inspection' => 'inspection', 'method' => 'method', 'result' => 'result'],
['print' => '1', 'inspection' => 'inspection', 'method' => 'method', 'result' => 'result'],
]

Answer 1

Если необходимо сначала собрать данные для каждого элемента input в родителе row, то можно реализовать таким образом (см. комментарии с пояснениями):

    var saveParams = document.getElementsByClassName('save'); // Берём кнопку по классу
    var NewArr = []; // Массив куда всё сложим
    saveParams[0].addEventListener('click', function () { // Прослушиваем нажатие кнопки
        var Rows = document.getElementsByClassName('row'); // Получаем все элементы с классом row
        for (let i=0;i<Rows.length;i++){ // Перебираем их
            var tempArr = []; // Создаём временный массив
            var inputs = Rows[i].getElementsByTagName('input'); // Получаем все поля input из элемента с классом row
            for (let z=0;z<inputs.length;z++){ // Перебираем их
                var name = inputs[z].getAttribute("name"); // Получаем имя элемента input
                tempArr[name] = inputs[z].value; // Во временный массив добавляем ключ name и значение в значение
            }
            NewArr.push(tempArr); // Добавляем временный массив в основной массив для каждого элемента с классом row
        }
    })

<form action="action">
        <!--*****данные другие*******-->
        
        <div class="container">
            @foreach($param_default as $parameter)
                    <div class="row">
                        <div class="col-lg-1">
                            <input name="print" type="text" value="{{$parameter->print}}" style="width: 100%;">
                        </div>
                        <div class="col-lg-5">
                            <input name="inspection" type="text" value="{{$parameter->inspection}}" style="width: 100%;">
                        </div>
                        <div class="col-lg-3">
                            <input name="method" type="text" value="{{$parameter->method}}" style="width: 100%;">
                        </div>
                        <div class="col-lg-3">
                            <input name="result" type="text" value="{{$parameter->result}}" style="width: 100%;">
                        </div>
                    </div>
            @endforeach
                    <a href="#" class="btn btn-success save">Save Parameters</a>
                    
            <input type="submit" value="Save">
        </div>
    </form>

БЛОГ НА HUSL

Как считать данные построчно из элементов input и преобразовать в массив?

Ответы (1 шт):