私はどのように私のjsコードと私のPHPコードを混ぜることができます

-2

私は、エンドユーザーがボタンを押したときに行を生成する動的テーブルを持っています。私は入力ボックスでそれを使用しても問題ありませんでした。今私は私のdbからデータを照会するコンボボックスに1つの入力を変更しようとしています。私が知っている問題は、phpコードとともにコンボボックスを動的に追加する方法です。私はどのように私のjsコードと私のPHPコードを混ぜることができます

$(document).ready(function(){ 
 
    var counter = 2; 
 
    $('.add-row').click(function() { 
 
     $(".item_form").append(
 
      '<tr><td><input type="text" name="serialnoa[]" placeholder="serial no.' + 
 
      counter + '"/></td></tr>' 
 
     ); 
 
     counter++; 
 
    }); 
 
    $('.del-row').click(function() { 
 
     if($(".item_form tr").length != 2) 
 
     { 
 
      $(".item_form tr:last-child").remove(); 
 
      counter--; 
 
     } 
 
     else 
 
     { 
 
      alert("You cannot delete first row"); 
 
     } 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html class="no-js" lang="en" dir="ltr"> 
 
    
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 

 
<link rel="stylesheet" type="text/css" href="_css/inventory.css?v=<?=time();?>"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    
 
<table class="item_form"> 
 
<tr> 
 
    <th>serial no.</th> 
 
    <th>brand<th> 
 
</tr> 
 

 
<tr> 
 
    <td><input type="text" placeholder="serial no.1" name="serialnoa[]"></td> 
 
    <td> 
 
\t <select name="show_brands[]"> 
 
\t <?php 
 
\t mysql_connect('localhost', 'root', 'adminpass'); 
 
\t mysql_select_db('my_db'); 
 
\t $sql = "SELECT DISTINCT brand FROM warehouse ORDER BY brand"; 
 
\t $result = mysql_query($sql); 
 

 
\t while ($brand=mysql_fetch_assoc($result)) { 
 
\t \t echo "<option value='".$brand['brand']."'>".$brand['brand']."</option>"; 
 
\t } 
 
\t ?> 
 
\t </select> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
<table> 
 
<tr> 
 
\t <td><a href="#" class="add-row"><div>+ Row</div></td> 
 
\t <td><a href="#" class="del-row"><div>- Row</div></td> 
 
\t \t \t \t \t \t \t \t \t 
 
</tr> 
 
</table> 
 
    
 
</body> 
 
</html>

出典

2016-11-18 bongoloids

することができます;'デフォルトでは非表示の状態でそれをロードし、ボタンのクリックでそれを公開したり、データベースの情報を取得するために、AJAXを使用するか、PHP –

を使用。 –

@JyothiBabuArajaあなたの提案しようとしているものはわかりません。コンボボックスを複製/追加することができます。問題に直面しているオプションと値を取り込むために渡す必要があるクエリです。最善のアプローチは何でしょうか？ – bongoloids

私はちょうどダイナミックselectボックスを移入するMOCKを使用。 server環境でそのモックを削除する必要があります。 DBが適切なデータを提供している場合は、そのデータをJavaScript Arrayに入力します。次に、その配列を使用して、動的なselectボックスを設定することができます。

function populateSelect(element){ 
 
    brands.forEach(function(brand){ 
 
    $('<option />', { 
 
     value: brand, 
 
     text: brand 
 
    }).appendTo($(element)); 
 
    }) 
 
} 
 
$(document).ready(function(){ 
 
    populateSelect('select'); //populating first select 
 
\t var counter = 2; 
 
    $('.add-row').click(function() { 
 
      $(".item_form").append('<tr><td><input type="text" name="serialnoa[]" id="serialno' + counter + '" placeholder="serial no.' + 
 
     \t counter + '"/></td><td><select id="select-serialno' + counter + '"></select></td></tr>'); 
 
     populateSelect("#select-serialno" + counter); //populating new select created 
 
\t \t \t counter++; 
 
    }); 
 
    $('.del-row').click(function() { 
 
     if($(".item_form tr").length != 2) 
 
     { 
 
      $(".item_form tr:last-child").remove(); 
 
      counter--; 
 
     } 
 
     else 
 
     { 
 
      alert("You cannot delete first row"); 
 
     } 
 
      \t }); 
 
}); 
 
</script>

<!DOCTYPE html> 
 
<html class="no-js" lang="en" dir="ltr"> 
 
    
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 

 
<link rel="stylesheet" type="text/css" href="_css/inventory.css?v=<?=time();?>"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <!--Uncomment below php code in your PHP environment --> 
 
    <!--<?php 
 
\t mysql_connect('localhost', 'root', 'adminpass'); 
 
\t mysql_select_db('my_db'); 
 
\t $sql = "SELECT DISTINCT brand FROM warehouse ORDER BY brand"; 
 
\t $result = mysql_query($sql); 
 
    echo '<script>'; //here starts creating new array of brands 
 
    echo 'var brands = []'; 
 
\t while ($brand=mysql_fetch_assoc($result)) { 
 
\t \t echo 'brands.push("'. $brand['brand'] .'")'; //adding new brand to brand array 
 
\t } 
 
    echo '</script>' 
 
\t ?> --> 
 
    <script> 
 
    //NOTE: a mock for your DB 
 
    var brands = ["brand1", "brand2"]; //removes this if your php codes works 
 
    </script> 
 
<table class="item_form"> 
 
<tr> 
 
    <th>serial no.</th> 
 
    <th>brand<th> 
 
</tr> 
 

 
<tr> 
 
    <td><input type="text" placeholder="serial no.1" name="serialnoa[]"></td> 
 
    <td> 
 
\t <select name="show_brands[]"> 
 
\t </select> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
<table> 
 
<tr> 
 
\t <td><a href="#" class="add-row"><div>+ Row</div></td> 
 
\t <td><a href="#" class="del-row"><div>- Row</div></td> 
 
\t \t \t \t \t \t \t \t \t 
 
</tr> 
 
</table> 
 
    
 
</body> 
 
</html>

出典

2016-11-18 08:10:21

は過去1時間にこれを手抜きしていました。残念ながら私はそれを動作させることができませんでした。とにかくおかげで、おそらく回避策を探すでしょう。 – bongoloids

データはdbから供給されますか？ –

は異なる方法でそれを見てみました。 PHPクエリーで最初に埋め込まれたコンボボックスをミラーリングする関数を追加しました。 `エコー「HERE 」で

var counter = 2; 
$('.add-row2').click(function() { 
$(".release_form").append('<tr><td><select name="show_brands[]" id="unique'+counter+'"></select></td><td><input type="text" name="serialnob[]" placeholder="serial no.' + 

    counter + '"/></td></tr>'); 
    $('#unique'+counter).append($('#unique').html()); 
    counter++; 
});

出典

2016-11-18 10:00:06 bongoloids

私はどのように私のjsコードと私のPHPコードを混ぜることができます

答えて

関連する問題