javascriptでappend（）を使用してPHPコードの選択フォーム

私は動的に入力フォームを追加するためにJavaScriptを使用しようとしています。javascriptでappend（）を使用してPHPコードの選択フォーム

たとえば、「Add More Fields」ボタンをクリックすると、別の選択入力フォームが自動的に追加されます。

私はそれにPHPコードを持つ私の選択入力フォームで試してみました。それは仕事をしません。

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <div class="input_fields_wrap"> 
      <button class="btn btn-primary add_field_button" type="button">Add More Fields</button> 
      <div> 
       <select class="form-control" name="findings[]"> 
        <?php 
         $option = '<option value="'.$row->id.'">'.$row->illness.'</option>'; 
         foreach($findings->result() as $row) 
         { 
          echo '<option value="'.$row->id.'">'.$row->illness.'</option>'; 
         } 
        ?> 
       </select> 
      </div> 
     </div> 
    </body> 
</html>

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> < select class = "form-control" 
        name = "findings[]" > 
        <?php 
         foreach($findings->result() as $row) 
         { 
          echo "<option value="$row->id">$row->illness</option>"; 
         } 
        ?> < /select> 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--; 
     }) 
    });

出典

2016-12-25 guwop69

「と、以下のように使うよりも、選択オプションのためのPHPを使用したい場合私はそれにPHPコードを持っている私の選択入力フォームでそれを試してみました。それは仕事をしません。それは私にUncaught SyntaxErrorのエラーをもたらしました：無効であるか予期しないトークンです。 "これは、ブラウザでphpが実行されないためです。 – quarterpi

@quarterpiありがとうございましたJavaScriptを使用してPHPを使用する知識はほとんどありません – guwop69

問題ありません。このように...サーバがyourpage.phpのリクエストを受け取ると、そのファイル内のPHPコード（タグ内のすべて）を検索して実行します。通常はHTMLの束をレンダリングします（必ずしも何かである必要はありません）それはクライアントのブラウザに送信されます。クライアントのブラウザは、PHPに堪能ではありませんが、html、css、JavaScriptなどを話します。レンダリングする最初のものはhtmlです。（これはhtmlから来ています）CSSでスタイルを設定しています（私はあなたがこれを既に知っていたことを知っています...私は冗長になっています...） – quarterpi

私はあなたのための例を実装しました：

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 
     $(".aaaa").first().clone().appendTo(".input_fields_wrap"); 
     } 
    }); 
    $(wrapper).on("click", ".remove_field", function(e) { 
     e.preventDefault(); 
     if($(".aaaa").length > 1) { 
     $(this).parent('div').remove(); 
     } else { 
     alert('You can not delete all elements'); 
     } 
    }) 
});

HTMLコード：

<div class="input_fields_wrap"> 
      <button class="btn btn-primary add_field_button" type="button">Add More Fields</button> 
      <div class="aaaa"> 
       <select class="form-control" name="findings[]"> 
        <option value="a">aaaaaa</option> 
        <option value="b">bbbbbb</option> 
        <option value="c">ccccccc</option> 
       </select> 
       <button class="remove_field">Remove</button> 
      </div> 
     </div>

あなたは

<select class="form-control" name="findings[]"> 
<option value="">Select an option</option> 
<?php 
if($findings->result()) { 
    foreach($findings->result() as $row) { 
     echo '<option value="'.$row->id.'">'.$row->illness.'</option>'; 
    } 
} 
?> 
</select>

出典

2016-12-25 05:16:06

ありがとうございます。出来た。次の課題は、複数の入力を保存してデータベースに挿入することです。 – guwop69

同じクラスとJavaScriptを別の入力フォームに使用できますか？ – guwop69

いいえ、削除機能でエラーが発生する可能性があります。 –

既にページにある複数のフィールドを追加したい場合は、この方法で追加することはできませんそれは私Uncaught SyntaxError: Invalid or unexpected token

PHP/HTMLのエラーを与えましたあなたは$（ "＃element"）を使ってクローンを取ることができます。クローン（）関数は、あなたが望む場所に同じものを追加します。

出典

2016-12-25 04:18:04 Naveen

javascriptでappend（）を使用してPHPコードの選択フォーム

答えて

関連する問題