javascript - 动态添加表单输入时在 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

是否无法在Javascript代码中实现empty、isset等PHP代码？我认为 PHP 代码只是 Javascript 中的一大块字符串。

Answer 1

PHP 在服务器端执行。执行后，结果被发送到用户的Web浏览器。 PHP 绝对不会在用户的浏览器中运行，因此这样做根本行不通。

您面临的问题有两种解决方案:
1)你可以只使用JS来做你想做的事情。
2) 您可以向服务器发出 ajax 请求，让 PHP 渲染一些 HTML 供您使用，然后检索结果并使用 JS 插入它。

第一个解决方案显然更好，因为第二个解决方案要复杂得多，而且完成相同任务时效率低下。

试着这样记住:PHP 是用来设置网页或 ajax 请求结果的初始状态，而不是事后修改它。