ブートストラップとjqueryを使用してユーザーデータベースシステムを設計します。問題は、ボタンが押されるたびに、ユーザーが入力するための追加のフィールドが追加されることです。
フィールドの最初の配列の配列名ref_title[0]が追加ボタンを押した後のものであるとすると、同じ属性を持つ別のテキストフィールドが表示されますが、配列値はになりますref_title[1]。
ただし、コード自体では、のみが表示されref_title[]ます。新しいフィールドは配列に追加され続けるので、これは問題ありませんref_title[]。私は正しいですか？
次に、[変更を保存]ボタンをクリックすると、を使用してデータをjsに送信します onclick="newdata('<?php echo $row['drug_id']; ?>')"
'drug_id' は一意の番号です（例：1、2、3）。
最初のボックスの入力フィールドを調べると、
<input class="form-control" id="ref_title3" name="ref_title[]" placeholder="Reference Title" type="text">
ただし、2番目のボックス（追加ボタンを押して追加のボックスが表示された後）
<input class="form-control" id="ref_title" name="ref_title[]" placeholder="Reference Title" type="text">
を見てくださいid="ref_title"。値3はエコーアウトされません。
HTML：
<input type="text" class="form-control" id="ref_title<?php echo $row['drug_id'];?>" name="ref_title[]" placeholder="Reference Title">
<button type="button" onclick="newdata('<?php echo $row['drug_id']; ?>')" class="btn btn-primary" data-dismiss="modal">Save changes</button>
JS：
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" class="form-control" id="ref_title<?php echo $row['drug_id'];?>" name="ref_title[]" placeholder="Reference Title"/></div>"><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
オンリック
function newdata(str){
var ref = $('#ref_title'+str).val(); // !!Only can read the first array
var datas="&ref="+ref;
$.ajax({
type: "POST",
url: "update.php",
data: datas
}).done(function( data ) {
$('#info').html(data);
viewdata();
});
};
あなたの質問に対する正確な答えではありませんが、あなたが何ができるかについての提案です。
前提条件：test.php
<pre><?php var_export($_POST); ?></pre>
入力コントロールに[...]phpを含む名前を付けると、データは配列であるかのように扱われます。例えば
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta charset="utf-8" />
</head>
<body>
<form method="post" action="test.php">
<input type="hidden" name="foo[a]" value="a" />
<input type="hidden" name="foo[b]" value="b" />
<input type="hidden" name="foo[bar][]" value="bar1" />
<input type="hidden" name="foo[bar][]" value="bar2" />
<input type="hidden" name="foo[bar][]" value="bar3" />
<div>
<input type="submit" />
</div>
</form>
</body>
</html>
test.phpの出力は次のようになります
<pre>array (
'foo' =>
array (
'a' => 'a',
'b' => 'b',
'bar' =>
array (
0 => 'bar1',
1 => 'bar2',
2 => 'bar3',
),
),
)</pre>
すなわち名前
name="foo[a]"
name="foo[b]"
name="foo[bar][]"
name="foo[bar][]"
name="foo[bar][]"
phpに次のような_POST配列を構築させました
$_POST = array();
$_POST['foo']['a'] = 'a';
$_POST['foo']['b'] = 'b';
// $_POST['foo'][bar] = array()
$_POST['foo']['bar'][] = 'bar1';
$_POST['foo']['bar'][] = 'bar2';
$_POST['foo']['bar'][] = 'bar3';
ここで、次のように入力コントロールの名前を作成することをお勧めします。
[drugs][145][add][]
hte phpスクリプトに、ドラッグアイテムで機能することになっていることを伝えます。これは、（事実上）任意の量のアイテムを追加できるように、何かに加えて[]を追加する必要があることを示します。
したがって、POST本文は次のようになります。
drugs[145][add][]=drug145.1&drugs[145][add][]=drug145.2&drugs[22][add][]=drug22.1
（ええ、ええ、エンコーディングはオフです...）
につながるだろう
_POST==$_POST = array(
'drugs' = >array(
'145' => array(
'add' => array(
'drug145.1',
'drug145.2'
),
'22' => array(
'add' => 'drug22.1'
)
)
);
phpスクリプトに、2つの説明drug145.1とdrug145.2アイテム145およびdrug22.1アイテム22を追加/追加するように指示します。
そして、ここであなたはどのように例を示しますすることができ、HTML / JavaScriptを/ jQueryを使ってこれを行います
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta charset="utf-8" />
<style type="text/css">
.adddrugdesc {
margin-left: 1em;
cursor: pointer;
background-color: Cornsilk;
border: 1px solid silver;
}
</style>
</head>
<body>
<form method="post" action="test.php">
<div class="druglist">
<!-- note the drugid as an data-* attribute, see e.g. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes
Your php script is supposed to output this id when serving the html document
-->
<fieldset><legend data-drugid="3">Drug A</legend></fieldset>
<fieldset><legend data-drugid="7">Drug B</legend></fieldset>
<fieldset><legend data-drugid="145">Drug C</legend></fieldset>
<fieldset><legend data-drugid="22">Drug D</legend></fieldset>
</div>
<input type="submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var dl = $(".druglist");
// add some kind of edit/add button to each fieldset/legend
dl.find("fieldset legend").each(function(x) {
$(this).append('<span class="adddrugdesc">add description</span>');
});
// add an event handler for all edit/add buttons
dl.on('click', '.adddrugdesc', function(e) {
var me = $(this); // this will be the span element the usr clicked on
var legend = me.parent('legend'); // this will be the legend element in which the span is located
var fset = legend.parent('fieldset'); // same as with legend
var drugid = legend.data()['drugid']; // access the data-* attribute of the element via data() and pick the element "drugid"
var newinput = $('<input type="text" />');
newinput.attr("name", "drugs["+drugid+"][add][]");
fset.append(newinput);
});
});
</script>
</body>
</html>
（「理解できる」状態に保つのは少し冗長です。そして...これは単なる例です。少しきれいで、より堅牢なものもあります）
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加