我如何克隆HTML代码组框并更改其名称和ID

时间:2019-06-30 01:11:55

标签: jquery html forms

我在表单中使用此代码。我实际上找到了一些用jQuery克隆的代码,但是我无法通过更改每个盒的名称和ID来克隆所有代码,请帮我解决这个问题。

<!-- table -->

                    <div class="pozisyon-kapsa deneyimForm">
                        <div class="col-md-8 col-md-8k">
                            <div id="isim" class="col-xl-6">
                                <div class="submit-field">
                                    <h5>İsim</h5>
                                    <input type="text" class="with-border">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pozisyon-kapsa deneyimForm">
                        <div class="col-md-8 col-md-8k">
                            <div id="soyisim" class="col-xl-6">
                                <div class="submit-field">
                                    <h5>Soyisim</h5>
                                    <input type="text" class="with-border">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pozisyon-kapsa deneyimForm">
                        <div class="col-md-8 col-md-8k">
                            <div id="soyisim" class="col-xl-6">
                                <div class="submit-field">
                                    <h5>Doğum Yeri</h5>
                                    <input type="text" class="with-border">
                                </div>
                            </div>
                        </div>
                    </div>  

                    <div class="pozisyon-kapsa deneyimForm">
                        <div class="col-md-8 col-md-8k">
                            <div class="submit-field">
                                <h5>Doğum Tarihi</h5>   
                            </div>
                            <div class="date-cl">
                                <input type="date" id="inputMDEx1" class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="pozisyon-kapsa deneyimForm">
                            <div class="col-md-8 col-md-8k">
                                <div class="submit-field">
                                    <h5>cinsiyet</h5>
                                    <select class="chosen with-border" data-size="7" title="Select Job Type">
                                        <option selected disabled style="display:none"> Seçiniz </option>
                                        <option>Erkek</option>
                                        <option>Kadın</option>
                                    </select>
                                </div>
                            </div>  
                        </div>

                    <!-- table -->

我也有一些很好的消息来源

  1. http://jsfiddle.net/ambiguous/yEaw6/
  2. Increment index of a Javascript function's argument name dynamically
  3. How to add name attribute of input field dynamically using Javascript/Jquery

1 个答案:

答案 0 :(得分:0)

如果您使用的是jquery,并且仅对所有元素进行克隆,那么您可以通过这种方式对其进行克隆

var cloneElements = $('.deneyimForm').clone();

由于我们不知道要更改哪个元素名称或ID。
所以我只是将输入作为您要选择的元素。

 cloneElements.each(function(){
    var inputElement = $(this).find('input');
    if(inputElement.length > 0){ //check if input element exist
        inputElement.attr('id','inputID');
        inputElement.attr('name','inputName');
    }
 });

现在,克隆元素中的所有输入元素(全部)具有相同的输入名称和输入ID。