如何在 javascript 中生成还包含并运行 php 代码的 html 代码（onclick 事件）

Question

首先，我知道这个问题本身有点错误，因为 php 无法从浏览器运行，但我这样问是为了让您了解我需要实现的目标。

嗯，我的问题很简单。 我得到了一个带有一些输入的表单。 （基本上是一个创建食谱的表单（名称，类型，蔬菜与否等，以及成分列表）我想要一个按钮，每次用户点击它时都会在表单中添加一个输入。问题是选择输入我需要创建包含需要运行以获取其内容的 php 代码，而且我显然不能将我的输入附加到 html 中。

我假设我需要使用 AJAX，但我从未使用过它，而且经过数小时的研究，我无法弄清楚如何进行，因为我可能没有想到正确的方法。

那么我的代码是这样的：

HTML/PHP 文件：

    <form>
        // some inputs

        <select name="ingredient1" id="ingredients"> <!-- my select input for the first ingredient -->
            <?php 
            foreach ($ingredients as $ingredient) { ?>
                <option value="<?php echo $ingredient['id']; ?>"><?php echo $ingredient['name']; ?></option>
            <?php } ?>
        </select>

        <div id="add_ingredient_button"></div> <!-- the button with the onclick event -->

    </form>

JS：

    $( document ).ready(function() {

        let ingredientCount = 1

        const addIngredientInput = function () {

            ingredientCount++
            let newSelect = // here let's say I try to concatenate my html and php to get the exact same code than the select input above in the html code plus the right ingredient count to get ingredients2, ingredients3 etc..
            $('#add_ingredient_button').before(newSelect)
            return ingredientCount

            }

        $('#add_ingredient_button').on('click', function(){
            addIngredientInput()
        })

     });

好吧，我知道这可能非常混乱，而且它不能像这样工作，因为 php 不会由客户端运行，而且它显然作为注释或纯文本插入到 dom 中，但我不知道如何生成我的AJAX中的输入代码

很抱歉挣扎，但我是网络开发的新手，我可能没有想到正确的方法

无论如何感谢您的时间和答案

Answer 1

如果它总是具有相同选项的相同选择元素，那么您可以简单地克隆选择元素。 像这样：

HTML/PHP：

<div id="selectors_container">
 <select name="ingredient1" class="ingredients">
  [your PHP code]
 </select>
</div>

JS：

// select the last element by class and get the last child
var item = document.getElementByClass("ingredients").lastChild;
// Copy the element and its child nodes
var clone = item.cloneNode(true);
// Append the cloned element to your container
document.getElementById("selectors_container").appendChild(clone);

有关更多详细信息，您可以查看： https : //www.w3schools.com/jsref/met_node_clonenode.asp或 ajax 请求： https : //www.w3schools.com/js/js_ajax_intro.asp

Answer 2

所以我不确定你到底想做什么。 如果您编写 PHP，它会在浏览器中转换为 html。 可以使用 Jquery 或 vanilla 检索该 html。 因此，在加载页面并创建 html 后，您可以从选择/下拉/输入中检索表单值。

我提供的代码允许您通过按下按钮添加新输入，更改选择值，然后打印最终结果。 最终结果可以转换为json并作为body参数与ajax传递。

 let ingredientCount = 0; $( document ).ready(function() { addInputEventListener(); handleFormCompletion(); }); const addInputEventListener = () => { $('#add-input').click(() => { ingredientCount += 1; $('#main-form').append(`<input name="ingredient-${ingredientCount}"></input>`) }) } handleFormCompletion = () => { let ingredients = {} $('#print-ingredients').click(() => { ingredients['select'] = $('select[name="ingredients"]').val() $('input').each(i => { ingredients[$('input').eq(i).attr('name')] = $('input').eq(i).val() }) console.log(ingredients) ///ajax post request here }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <form id="main-form"> <select name="ingredients" form="main-form"> <option value="organic">Organic</option> <option value="not organic">Not Organic</option> <option value="grapes">Grapes</option> <option value="pickles">Pickles</option> </select> </form> <button type="button" id="add-input">add Input</button> <button type="button" id="print-ingredients">print Ingredients</button> </html>

如何在 javascript 中生成还包含并运行 php 代码的 html 代码（onclick 事件）

问题描述

2 个解决方案

解决方案1
0 2019-12-23 21:00:53

解决方案2
0 2019-12-23 21:25:33

如何在 javascript 中生成还包含并运行 php 代码的 html 代码（onclick 事件）

问题描述

2 个解决方案

解决方案1 0 2019-12-23 21:00:53

解决方案2 0 2019-12-23 21:25:33

解决方案1
0 2019-12-23 21:00:53

解决方案2
0 2019-12-23 21:25:33