動的にフォーム入力を追加するときにJavascriptでPHPコードを使用する

Question

商品の詳細を登録するためのフォームを作成しようとしています。 「追加」ボタンをクリックするたびに、ユーザが入力欄を追加して製品を入力する必要がありました。

コードは次のようになります。

<form id="myform"> 
<label>Product Name</label> 
<input type="text" name="productname0" value="> 
<?= !empty($data["error_productname0"]) ? "<p class=\"help is-danger\">". $data["error_productname0"] ."</p>": ""; ?> 
</form> 

<script> 
    $("button.add").click(function(){ 
     let inputNumber = $("#myform").children("input").length; 
     $("#myform").append(returnNewInput(inputNumber)); 
    }); 


    function returnNewInput(n) { 

     return `<input type="text" name="productname${n}" value=""> 
       <?= !empty($data["error_productname${n}"]) ? "<p class="help is-danger">$data["error_productname${n}"]</p>": ""; ?>`; 

    } 
</script> 

しかし、私はinputNumber変数を使用する際に問題がありました。私はそれをreturnNewInput関数に渡すことはできません。エラーは、

Notice: Undefined variable: n 

などのPHPコードを実装することは不可能ですか？Javascriptコードでは？私はPHPコードがJavascriptの文字列のちょうどチャンクだと思った。

Answer 1

PHPはサーバ側で実行されます。実行後、結果はユーザーのWebブラウザーに送信されます。 PHPはユーザーのブラウザで実行されることは絶対にありません。このようなことは単に動作しません。

あなたが直面している問題の解決策は2つあります：
1）JSを使って、何をしようとしているのですか？
2）あなたのサーバーにajaxリクエストを行い、PHPで使用できるようにHTMLをレンダリングし、結果を取得してJSを使用して挿入することができます。

第1の解決法は明らかに優れています。第2の解決法は、同じタスクを達成するためにはるかに複雑で非効率的です。

このように覚えておいてください。PHPは、Webページまたはajaxリクエストの結果の初期状態を設定するためのものであり、あとでそれを変更するものではありません。