0

I have a form in the php file and I want to add a duplicate of the form along with the values by 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>

I added the form by JavaScript but I can't get the values inside the foreach loop:

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));
}

How can I do this?

mohsen
  • 11
  • 1
  • Does this answer your question? [How to Deep clone in javascript](https://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript) – matek997 Apr 30 '20 at 15:28
  • No, I just want to get the foreach loop values in my JavaScript code. But I can't. can you help me? Everything is correct, only the values are not get. – mohsen May 01 '20 at 00:03

2 Answers2

0

I recommend cloning the element as a whole using cloneNode(). This link. I current do this in a project and I have to explicitly clear the current value so it should do exactly what you want. Here's what I currently have in my code as an example. ` 

 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);

`

Ryan Deckard
  • 78
  • 6
0

cloneNode() is what you are looking for.

const clonedForm = document.querySelector("form").cloneNode(true); document.querySelector("#someOtherElement").appendChild(clonedForm); And don't use inline PHP, it's bad practise.

matek997
  • 349
  • 1
  • 12