リスト内にあるクローン入力の入力 'name'属性を指定します

これは私のケースです。私は順序付けられていないリストを持ち、リストの中には入力のセットとその中の4つをクローンできる1つのボタンがあります。データはバックエンドから来ているので、このリストセットまたは1000のいずれかが存在する可能性があります。リストのインデックス番号に基づいてリスト内の各入力に名前属性を動的に割り当てようとしています。クローン化された入力もあります。 pm-providerNum私はプロバイダ名に似たようなことをしています。リストの数を増やしていくと、プロバイダ名の自動変更のリストが増えます。ダイナミックに作成されたものを除いて、それぞれの入力に対して、番号1のために名前に戻ります。各入力名が追加場所のような動的な入力にこのリスト内にあるクローン入力の入力 'name'属性を指定します

ようになり、入力された名前は次のようになります。

<input type="text" name="p-address-0-dynamic#[dynamicnumber]" class="pm- 
    psubmit" placeholder="First Name" required="">

など.... dynamicnumberは、新しく作成された入力数を言う数です。追加の位置が1 /インデックス1をprovidorするために添加されていない場合ので、動的入力の各入力名は次のようになります

 <input type="text" name="p-address-0-dynamic#[0]" class="pm-psubmit" 
    placeholder="First Name" required="">

私は1つの追加の場所を追加した場合。私は1つの追加の場所を追加する場合、名前でしょうこれらの入力は、2 /インデックス2

<input type="text" name="p-address-1-dynamic#[0]" class="pm-psubmit" 
    placeholder="First Name" required="">

リストに

 <input type="text" name="p-address-0-dynamic#[1]" class="pm-psubmit" 
    placeholder="First Name" required="">

だろう。名前でしょうこれらの入力は

<input type="text" name="p-address-1-dynamic#[1]" class="pm-psubmit" 
    placeholder="First Name" required="">

私はこの質問を作成するいくつかの時間を費やすが、それがうまくいけば、混乱する可能性があるだろう、君たちは私が言うことを試みているものを得ました。私はこれを成功させることなく様々な方法で試しました。各「providor」グループでは、すべての入力された名前の属性がprovider[index]のようなもので始まり、その後、それぞれの特定のフィールドのを持っている持っている：うまくいけば、私はそれをこのように行うだろう

$('.pm-providerNum').each(function (index) { 
 
     $(this).html('Providor ' + (index + 1)); 
 
    }); 
 

 
    $("div.pm-providor-first-wrap").each(function (index) { 
 

 
     $(this).find('input').each(function() { 
 
      $(this).attr('name', $(this).attr('name')+ '-' + index); 
 

 
     }) 
 
    }); 
 

 
$(document).on("click", ".pm-add-loc-Class", function() { 
 
    var $sect = $(this).closest(".pm-loc-section"); 
 
    $sect.find(".pm-loc-inputWrapper").eq(0).clone().show().insertBefore($sect.find(".pm-loc-controls")).find('input').val(''); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
\t </script> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
\t <div class="col-sm-12 pm-submitProvidor"> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
\t \t \t \t <div class=""> 
 
\t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
\t \t \t \t \t <div class="pm-providor-first-wrap"> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
\t \t \t \t \t \t <div class="pm-loc-section"> 
 
\t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
\t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
\t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <div class=""> 
 
\t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
\t \t \t \t \t <div class="pm-providor-first-wrap"> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
\t \t \t \t \t \t <div class="pm-loc-section"> 
 
\t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
\t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
\t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <div class=""> 
 
\t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
\t \t \t \t \t <div class="pm-providor-first-wrap"> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
\t \t \t \t \t \t <div class="pm-loc-section"> 
 
\t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
\t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
\t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-10-16 Anu Rajan

私は何にとして明確ではないですので、あなたが 'name'の属性を設定していること、あなたのコードで表示されませんあなたは尋ねているか、問題が何であるか。記述した方法で 'name'属性を設定する方法を尋ねていますか？これまで何をしようとしていますか？ –

@DrewGはい、動的に追加するのはHTMLではなく、クライアントに基づくリストが多いためです。私の試みは面倒だったし、クローンを壊していた。私はきれいなスニペットを出したいと思っていました。申し訳ありません –

私はあなたがより良いデータセットを扱う方法を見つけることをお勧めしますすべてのセルに一意のIDを与える。これをPHPで処理している場合は、 'name =" myfield [] "という配列のような構文を割り当てただけで、動的に追加されたデータを処理する方法があります。 'name =" id [] "'またはそれに類するものである。 – James

いくつかの洞察を得ることができます

：

次に、お住まいの地域のフィールドのために、それはの一部だどの場所グループを示すために、最後に追加のインデックスを追加provider[1][firstname]、provider[1][lastname]など：名前が二次元入力します

provider[1][city][1]
provider[1][state][1]
provider[1][city][2]
provider[1][state][2]

など

またprovidorインデックスを格納する.DATA（）関数を使用することができますし、あなたが後でもっと簡単につかむことができる方法で位置インデックスを作成します。ここで

は実施例である：

$('.pm-providerInputGroup').each(function (index) 
 
{ 
 
    
 
    \t var inputGroupId = index + 1; 
 
    \t var groupEl = $(this); 
 
    \t 
 
    \t groupEl.data('groupId', inputGroupId); 
 
    \t 
 
    \t groupEl.find('.pm-providerNum').html('Providor ' + inputGroupId); 
 
    \t 
 
    \t groupEl.find('.pm-psubmit').each(function() 
 
    \t { 
 
    \t \t var cleanName = $(this).attr('placeholder').toLowerCase().replace(/[^a-z0-9]+/g, ''); 
 
    \t \t $(this).attr('name', 'providor[' + inputGroupId + '][' + cleanName + ']'); 
 
    \t }); 
 
    \t 
 
    \t groupEl.find('.pm-loc-section .pm-loc-inputWrapper').each(function(index2) 
 
    \t { 
 
    \t \t var locGroupId = index2 + 1; 
 
    \t \t 
 
    \t \t $(this).data('locGroupId', locGroupId); 
 
    \t \t 
 
    \t \t $(this).find('.pm-psubmit').each(function() 
 
    \t \t { 
 
    \t \t \t var curName = $(this).attr('name'); 
 
    \t \t \t $(this).attr('name', curName + '[' + locGroupId + ']'); 
 
    \t \t }); 
 
    \t }); 
 
    
 
}); 
 
    
 
    
 
$(document).on("click", ".pm-add-loc-Class", function() 
 
{ 
 
    var $sect = $(this).closest(".pm-loc-section"); 
 
    
 
    var lastLocGroup = $sect.find(".pm-loc-inputWrapper").eq(-1); 
 
    
 
    \t var lastLocGroupId = lastLocGroup.data('locGroupId'); 
 
    
 
    var newLocGroup = lastLocGroup.clone(); 
 
    
 
    \t var newLocGroupId = lastLocGroupId+1; 
 
    
 
    newLocGroup.show().insertBefore($sect.find(".pm-loc-controls")).find('input').val(''); 
 
     
 
    newLocGroup.data('locGroupId', newLocGroupId); 
 
    
 
    newLocGroup.find('.pm-psubmit').each(function(index2) 
 
    \t { 
 
    \t \t var curName = $(this).attr('name'); 
 
    \t \t var newName = curName.replace(/(\w+\[[^\]]+\]\[[^\]]+\])(\[[^\]]+\])/, '$1[' + newLocGroupId + ']'); 
 
    \t \t $(this).attr('name', newName); 
 
    \t }); 
 
}); \t

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    \t <title></title> 
 
</head> 
 
<body> 
 
    \t <div class="col-sm-12 pm-submitProvidor"> 
 
    \t \t <ul> 
 
    \t \t \t <li> 
 
    \t \t \t \t <div class="pm-providerInputGroup"> 
 
    
 
    \t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
    
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="First Name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="M" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Last Name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Date of birth" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Personal Phone #" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Personal Email" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Degree" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Date" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Data of board exam" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="NRI #" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Primary Speciality" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Secondary Speciality" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Phone #" required="" type="text"> 
 
    
 
    \t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
    \t \t \t \t \t \t <div class="pm-loc-section"> 
 
    \t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
    \t \t \t \t \t \t \t \t <div class="row"> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
    \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
    \t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 
    \t \t \t </li> 
 
    \t \t \t <li> 
 
    \t \t \t \t <div class="pm-providerInputGroup"> 
 
    
 
    \t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
    
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="First Name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="M" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Last Name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Date of birth" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Personal Phone #" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Personal Email" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Degree" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Date" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Data of board exam" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="NRI #" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Primary Speciality" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Secondary Speciality" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Phone #" required="" type="text"> 
 
    
 
    \t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
    \t \t \t \t \t \t <div class="pm-loc-section"> 
 
    \t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
    \t \t \t \t \t \t \t \t <div class="row"> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
    \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
    \t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t </div> 
 
    
 
    \t \t \t \t </div> 
 
    \t \t \t </li> 
 
    \t \t </ul> 
 
    \t </div> 
 
    
 
</body> 
 
</html>

出典

2017-10-16 19:22:08

これは魅力的です。唯一の問題は、jqueryコードを既存のjsファイルに追加するときです。クローンの名前は機能しません。私は "未定義の"の代わりに 'プロパティを'読み替えることができませんエラーが発生しています。ここに私のバイブルがあります。フィドルの追加ボタンは新しい入力を作成していませんが、私のローカルにあるので、正しく名前をつけません。 https://jsfiddle.net/jaisil007/dscynarr/4/ –

そのフィドルは私に負荷に関する無関係のエラーを与えています： TypeError：$（...）。accordionは関数ではありません " –

うーん、別の質問として投稿する必要があるかもしれません。私のローカルでは、私はjquery UIを持っていて、アコーディオンは動作しています。私がアコーディオンを取り除くとjfiddleで動作します。助けをありがとう:) –

リスト内にあるクローン入力の入力 'name'属性を指定します

答えて

関連する問題