Поля формы из массива

Тема в разделе "JavaScript", создана пользователем yaski, 16 ноя 2020.

  1. yaski

    yaski

    Moderator
    Регистр.:
    21 фев 2010
    Сообщения:
    639
    Симпатии:
    454
    Помогите создать поля формы из массива по клику
    Есть такой массив
    Код:
    Array ( [radio] => zdravie [select-type] => type-u-1 [o-neduzhnih] => 1 [na-mogilke] => 4 [svechi_type] => svechi_zdravie [svechiSantName1] => sant_nicolay [svSNbig] => 10 [svSNmedium] => 5 [svSNsmall] => 10 [svechiSantName2] => mother_of_God [svMGbig] => 10 [svMGmedium] => 15 [svMGsmall] => [svSaviorbig] => [svSaviormedium] => [svSaviorsmall] => [svIRbig] => [svIRmedium] => [svIRsmall] => [svechiSantName5] => icon_feast [svIFbig] => 2 [svIFmedium] => 3 [svIFsmall] => 4 [svKANUNbig] => [svKANUNmedium] => [svKANUNsmall] => [submitnotes] => [pometka] => Array ( [0] => пометка1 [1] => пометка2 [2] => пометка3 [3] => пометка4 [4] => пометка5 [5] => [6] => [7] => [8] => [9] => [10] => [11] => [12] => [13] => [14] => [15] => [16] => [17] => [18] => [19] => [20] => [21] => [22] => [23] => ) [names] => Array ( [0] => Имя1 [1] => Имя [2] => Имя [3] => Имя [4] => Имя [5] => [6] => [7] => [8] => [9] => [10] => [11] => [12] => 112 [13] => [14] => [15] => [16] => [17] => [18] => [19] => [20] => [21] => [22] => [23] => ) [itogsumm] => 8680 [my_treba] => Сорокоуст [my_period] => ) 
    Код:
    Array
    (
        [radio] => zdravie
        [select-type] => type-u-1
        [o-neduzhnih] => 1
        [na-mogilke] => 4
        [svechi_type] => svechi_zdravie
        [svechiSantName1] => sant_nicolay
        [svSNbig] => 10
        [svSNmedium] => 5
        [svSNsmall] => 10
        [svechiSantName2] => mother_of_God
        [svMGbig] => 10
        [svMGmedium] => 15
        [svMGsmall] =>
        [svSaviorbig] =>
        [svSaviormedium] =>
        [svSaviorsmall] =>
        [svIRbig] =>
        [svIRmedium] =>
        [svIRsmall] =>
        [svechiSantName5] => icon_feast
        [svIFbig] => 2
        [svIFmedium] => 3
        [svIFsmall] => 4
        [svKANUNbig] =>
        [svKANUNmedium] =>
        [svKANUNsmall] =>
        [submitnotes] =>
        [pometka] => Array
            (
                [0] => пометка1
                [1] => пометка2
                [2] => пометка3
                [3] => пометка4
                [4] => пометка5
                [5] =>
                [6] =>
                [7] =>
                [8] =>
                [9] =>
                [10] =>
                [11] =>
                [12] =>
                [13] =>
                [14] =>
                [15] =>
                [16] =>
                [17] =>
                [18] =>
                [19] =>
                [20] =>
                [21] =>
                [22] =>
                [23] =>
            )
    
        [names] => Array
            (
                [0] => Имя1
                [1] => Имя
                [2] => Имя
                [3] => Имя
                [4] => Имя
                [5] =>
                [6] =>
                [7] =>
                [8] =>
                [9] =>
                [10] =>
                [11] =>
                [12] => 112
                [13] =>
                [14] =>
                [15] =>
                [16] =>
                [17] =>
                [18] =>
                [19] =>
                [20] =>
                [21] =>
                [22] =>
                [23] =>
            )
    
        [itogsumm] => 8680
        [my_treba] => Сорокоуст
        [my_period] =>
    )
    Нужно создать такую форму
    HTML:
    <form action="index.php" method="post" id="myform"">
        <input type="hidden" name="radio" value="zdravie" />
        <input type="hidden" name="select-type" value="type-u-1" />
        <input type="hidden" name="o-neduzhnih" value="1" />
        <input type="hidden" name="na-mogilke" value="1" />
        <input type="hidden" name="email" value="site@yandex.ru" />
        <input type="hidden" name="itogsumm" value="50" />
        <input type="hidden" name="my_treba" value="Молитва на могилке" />
        <input type="hidden" name="my_period" value="2" />
        ...
        <button type="submit" name="submitnotes">Продолжить</button>
    </form>
     
    Последнее редактирование: 16 ноя 2020
  2. borodatych

    borodatych

    Регистр.:
    24 июн 2016
    Сообщения:
    162
    Симпатии:
    98
    Если правильно понял, поглядите в сторону jsonForm
    Сам не проверял как работает, но похоже на правду
    Перебираете массив в JS и собираете schema для jsonForm
     
    yaski нравится это.
  3. yaski

    yaski

    Moderator
    Регистр.:
    21 фев 2010
    Сообщения:
    639
    Симпатии:
    454
    Хотелось бы без сторонних скриптов, например используя document.createElement("input");
     
  4. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    577
    Симпатии:
    448
    PHP:
    <?php

    $array 
    = Array ( 'radio' => 'zdravie''select-type' => 'type-u-1''o-neduzhnih' => 1'pometka' => Array ( '0' => 'пометка1''1' => 'пометка2''2' => 'пометка3''3' => 'пометка4',  '22' => '','23' =>'' ));

            echo(
    '<script>var obj = ' json_encode($array))   .   ';</script>';
    ?>
      <a href="#" id="create_fields">создать поля формы</a>
    HTML:
    document.getElementById('create_fields').addEventListener('click', ()=>{
      if(document.getElementById('myform')){
        return false;
      }
      let form = document.createElement('form');
      form.action = 'index.php';
      form.method = 'post';
      form.id = 'myform';
      for(let key in obj){   
        let input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        if(typeof obj[key] == 'object'){
          input.value = Object.values(obj[key]).join();
        } else {
          input.value = obj[key];
        }
        form.appendChild(input);
      }
      let submit = document.createElement('button');
      submit.type = 'submit';
      submit.name = 'submitnotes';
      submit.textContent = 'Продолжить';
      form.appendChild(submit);
      document.body.appendChild(form);
    });
     
    yaski нравится это.