Как добавить новый div построчно при нажатии кнопки в php? - PullRequest
Новая
       23

Как добавить новый div построчно при нажатии кнопки в php?

0 голосов
/ 01 февраля 2020

У меня есть код html / php, как показано ниже:

Идея состоит в том, чтобы нажать кнопку PLUS (+) и создать новую строку с помощью HTML присутствует в функции newRow () . Код HTML / PHP имеет 2 поля ввода.

html / php код: 

<?php
$output = array();     
$output['en_desc']=$_POST['en_desc'];
$output['code']=$_POST['code'];

$fp = fopen('../feeds/ptp-ess_landing_committees.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);

if(file_exists('../feeds/ptp-ess_landing_committees.json')){
    $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
}
?>

<?php if($data) { ?>
<form method="post" id="myform" style="text-align: left;">

    <!-- Add New Row Button START -->
    <div class="plus-minus-button" style="text-align:center;">    
         <button type="button" onclick="rowAdd()">+</button>
    </div>
    <!-- Add New Row Button END -->

    <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <!-- Big div START -->

    <!-- Code START -->  
    <?php if (empty($data->code)) { ?>
         <input type="text" name="code[]" style="margin-right:10px;" value="">
          <?php } else {  ?>
        <?php  foreach ($data->code as $code){ ?>            <!-- Line A -->
          <input type="text" name="code[]" style="margin-right:10px;" value="<?php if($code) {echo $code;}?>">
         <?php }} ?>
    <!-- Code END -->

    <!-- EN Desc START -->  
    <?php if (empty($data->en_desc)) { ?>
         <input type="text" name="en_desc[]" value="">
          <?php } else {  ?>
        <?php  foreach ($data->en_desc as $en_desc){ ?>      <!-- Line B -->
          <input type="text" name="en_desc[]" value="<?php if($en_desc) {echo $en_desc;}?>">
         <?php }} ?>
    <!-- EN Desc END -->

    </div>  <!-- Big div END -->
</form>
<?php } else {
echo 'Cannot read JSON settings file';
}
?>

Вот JavaScript, который я использую для добавить div в JavaScript. 

 <script>       
        function rowAdd() {
          document.querySelector(".house-senate-committee:last-child").insertAdjacentHTML('afterend', newRow());
        }

        function newRow() {
              return `<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
                    <input type="text" name="code[]" style="margin-right:10px;" value="">   
                    <input type="text" name="en_desc[]" value="">
              </div>`;

         }  
</script>

Постановка задачи:

При Линия A и Линия B , я использую для l oop внутри div.house-senate-Committee , так что это может быть причиной, почему она не отображается так, как я хочу. Мне интересно, какие изменения я должен внести в Line A / B (для l oop) , чтобы я мог получить DOM так, как я хочу .

Приведенный выше код javascript показывает содержимое, но не добавление элемента div строка за строкой, как это : 

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <input type="text" name="code[]" style="margin-right:10px;" value="ABC">
    <input type="text" name="en_desc[]" value="DEF">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <input type="text" name="code[]" style="margin-right:10px;" value="QWE">
     <input type="text" name="en_desc[]" value="RTY">
</div>

Его добавление следующим образом (чего не хочу) : 

<div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <!-- Big div START -->
    <input type="text" name="code[]" style="margin-right:10px;" value="ABC">
    <input type="text" name="code[]" style="margin-right:10px;" value="QWE">

    <input type="text" name="en_desc[]" value="DEF">
    <input type="text" name="en_desc[]" value="RTY">
</div>                                                                           <!-- Big div END -->

Ответы [ 3 ]

1 голос
/ 03 февраля 2020

Если $data пусто, вам просто нужно напечатать один div с пустыми входами. Если у $data есть данные, вы должны перебирать свои данные, печатать div для каждой записи и заполнять поля ввода соответствующими значениями.

Как-то так должно работать: 

<?php
$output = array();     
$output['en_desc']=$_POST['en_desc'];
$output['code']=$_POST['code'];

$fp = fopen('../feeds/ptp-ess_landing_committees.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);

if(file_exists('../feeds/ptp-ess_landing_committees.json')){
    $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
}
?>

<?php if($data) { ?>
<form method="post" id="myform" style="text-align: left;">

    <!-- Add New Row Button START -->
    <div class="plus-minus-button" style="text-align:center;">    
         <button type="button" onclick="rowAdd()">+</button>
    </div>
    <!-- Add New Row Button END -->

<?php if(empty($data->code)){ ?>

    <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <!-- Big div START -->
         <input type="text" name="code[]" style="margin-right:10px;" value="">
         <input type="text" name="en_desc[]" value="">
    </div>

<?php }else { ?>

<?php foreach($data->code as $key=>$value){ ?>


    <div class="house-senate-committee" style="text-align:center; margin-top:15px;"> <!-- Big div START -->

         <input type="text" name="code[]" style="margin-right:10px;" value="<?=$data->code[$key]?>">
         <input type="text" name="en_desc[]" value="<?=$data->en_desc[$key]?>">


    </div>  <!-- Big div END -->

    <?php 
        } 
      }
    ?>

</form>
<?php } else {
echo 'Cannot read JSON settings file';
}
?>
0 голосов
/ 05 февраля 2020

Пожалуйста, попробуйте с кодом ниже 

<div class="plus-minus-button" style="text-align:center;">    
         <button type="button" id="addrow">+</button>
</div> 

<div id="main-div" style="text-align:center; margin-top:15px;">
</div>

<script>
     $(document).on('click','#addrow',function()
     {    
          $('#main-div').append('<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
              <input type="text" name="code[]" style="margin-right:10px;" value="">   
              <input type="text" name="en_desc[]" value="">
          </div>');    
     });
</script>
0 голосов
/ 01 февраля 2020 

/**
 * @param {String} HTML representing a single element
 * @return {Element}
 */
function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

function rowAdd() {
    document.querySelector("#house-senate-committee-parent-div").appendChild(htmlToElement(newRow)));
}

примечание Я выбираю родительский div строк (т.е. div, который вы используете в качестве контейнера для помещения строк)

^^ Это может даже не быть проблемой, которая мне просто не нравится как элемент был добавлен ранее.

PHP выглядит так: вместо добавления входных данных, обернутых div, вы просто добавляете входные теги. Вы хотите добавить div с входом в него каждый раз. Похоже, это определенно проблема с вашим php для каждого цикла. Добавьте div с входами внутри них в l oop, а не только во входы

enter image description here

^ Посмотрите, как вы добавляете все входные теги в один div вместо создания отдельного div каждый раз в l oop?

...