これは私のケースです。私は順序付けられていないリストを持ち、リストの中には入力のセットとその中の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>
私は何にとして明確ではないですので、あなたが 'name'の属性を設定していること、あなたのコードで表示されませんあなたは尋ねているか、問題が何であるか。記述した方法で 'name'属性を設定する方法を尋ねていますか?これまで何をしようとしていますか? –
@DrewGはい、動的に追加するのはHTMLではなく、クライアントに基づくリストが多いためです。私の試みは面倒だったし、クローンを壊していた。私はきれいなスニペットを出したいと思っていました。申し訳ありません –
私はあなたがより良いデータセットを扱う方法を見つけることをお勧めしますすべてのセルに一意のIDを与える。これをPHPで処理している場合は、 'name =" myfield [] "という配列のような構文を割り当てただけで、動的に追加されたデータを処理する方法があります。 'name =" id [] "'またはそれに類するものである。 – James