дубликат формы со значением JavaScript

Question

У меня есть форма в файле php, и я хочу добавить дубликат формы вместе со значениями на JavaScript.

<div class="form-group">
    <div class="col-sm-12">
        <div class="input-group">
            <div class="input-group-addon"><?php _e('Taxonomy', 'textdomain'); ?></div>
            <div class="select">
                <select name="categoryxpath_tax" id="select-taxonomy-type" class="form-control" ng-model="model.categoryxpath_tax">
                    <option value=""><?php _e('Please select a taxonomy', 'textdomain'); ?></option>
                    <?php
                    if (get_post_meta($post_object->ID, 'sc_post_type', true) == "") {
                        $taxonomies = get_object_taxonomies('post', 'objects');
                    } else {
                        $taxonomies = get_object_taxonomies(get_post_meta($post_object->ID, 'sc_post_type', true), 'objects');
                    }
                    foreach ($taxonomies as $taxonomy) { ?>
                    <option value="<?php echo $taxonomy->name; ?>"><?php echo $taxonomy->labels->name; ?></option>
                    <?php } ?>
                </select>
            </div>
        </div>  
    </div>
</div>

Я добавил форму на JavaScript, но Я не могу получить значения внутри foreach l oop:

if (type == 'taxonomy_field') {
    var taxonomy_value = document.getElementById('select-taxonomy-type');
    var taxonomy_field_name = taxonomy_value.options[taxonomy_value.selectedIndex].text;
    var taxonomy_field_value = taxonomy_value.options[taxonomy_value.selectedIndex].value;
    $($event.target).closest('.form-group').before($compile(
        '<div class="form-group">' +
            '<div class="col-sm-12">' +                         
                '<div class="input-group">' +
                    '<div class="input-group-addon">' + translate.Taxonomy + '</div>' +
                    '<div class="select">' +
                        '<select name="categoryxpath_tax" class="form-control">' +
                            '<option value="">' + translate.Please_select_a_taxonomy + '</option>' +
                            '<option value="' + taxonomy_field_value + '">' + taxonomy_field_name + '</option>' +
                        '</select>' +   
                    '</div>' +  
                    '<span class="input-group-btn"><button type="button" class="btn btn-primary btn-block" ng-click="remove_field($event)"><i class="icon ion-trash-a"></i></button></span>' +
                '</div>' +
            '</div>' +  
        '</div>'
    )($scope));
}

Как я могу это сделать?

Answer 1

Я рекомендую клонировать элемент целиком, используя cloneNode(). Это ссылка . В настоящее время я делаю это в проекте, и мне нужно явно очистить текущее значение, чтобы оно делало именно то, что вы хотите. Вот то, что я сейчас имею в своем коде в качестве примера. `

 var table = document.getElementById("form_table");

    var qty = document.getElementById('qty');
    var c_qty = qty.cloneNode(true);

    c_qty.setAttribute('name', 'qty'+num);
    c_qty.id = 'qty'+num;

    var row = table.insertRow(0);
    var qty_cell  = row.insertCell(0);
    qty_cell.style = "width:12%;padding-left:15px";

    qty_cell.appendChild(c_qty);

`

Answer 2

cloneNode () - это то, что вы ищете.

const clonedForm = document.querySelector("form").cloneNode(true); document.querySelector("#someOtherElement").appendChild(clonedForm); И не используйте inline PHP, это плохая практика.

Answer 3

Вы можете (глубоко) клонировать форму, например:

const originalForm = document.querySelector("form");
const formClone = originalForm.cloneNode(true);
//                             ^ clone here
const msgOriginal = document.createElement("span");
msgOriginal.textContent = " Original form, select value: " +
  originalForm.querySelector("select").value;
const msgClone = document.createElement("span");
msgClone.innerHTML = " <i>Cloned form</i>, select value: " +
  formClone.querySelector("select").value;
originalForm.appendChild(msgOriginal);
formClone.appendChild(msgClone);

// add clone to document (above original form)
document.body.insertBefore(formClone, originalForm);


// lets clone the selector with value of the cloned form
const selectrClone = document.forms[1].querySelector("select").cloneNode(true);
const msgSelectrClone = document.createElement("span");
msgSelectrClone.innerHTML = " <i>Cloned selector</i>, select value: " +
  selectrClone.value;
  
document.body.insertBefore(selectrClone, formClone);
document.body.insertBefore(msgSelectrClone, formClone);

body {
  font: 12px/15px normal verdana, arial;
  margin: 2rem;
}
form, select {
  margin: 1rem;
}

<form>
  <input type="text" value="test123">
  <select>
    <option value="first">first</option>
    <option value="second">second</option>
    <option value="third" selected>third</option>
  </select>
</form>