Question

我正在开发一个项目来创建一个动态添加所需表单字段的表单生成器。我已经使用JQuery在单击按钮时动态地向字段添加字段或append fields。包括脚本在内的整个机制在the html code is added条件（处理会话）的php if/else之前工作正常。 Php以某种方式阻止脚本运行。我已经尝试重新安排代码但没有用。

发生追加或预览的文件（build_form.php）：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="build_form.css">       
    </head>
    <body>
        <?php
            $k=1;
            if($k==1)
            {

        ?>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript" src="build_form.js"></script>

        <div id="full">
            <div id="left">
                <div id="formElements">FORM ELEMENTS</div>
                <div id="name">
                    <button class="formButtons" id="btnName" onclick="appendName()">Name</button>
                </div>
                <div id="email">
                    <button class="formButtons" id="btnEmail" onclick="appendEmail()">Email</button>
                </div>
                <div id="address">
                    <button class="formButtons" id="btnAddress" onclick="appendAddress()">Address</button>
                </div>
                <div id="Phone">
                    <button class="formButtons" id="btnPhone" onclick="appendPhone()">Phone</button>
                </div>
                <div id="Submit">
                    <button class="formButtons" id="btnSubmit" onclick="appendSubmit()">Submit</button>
                </div>
            </div>
            <div id="right">
                <div id="yourForm">YOUR FORM</div>
                <div id="preview"></div>
                <script>$("#preview").sortable();</script> <!-- makes the divisions inside the division with id #preview sortable-->
                <div>
                    <form method="post" action="build_file.php" id="form1">
                        Enter form name:<input type="text" name="f_name"><input type="submit" value="Create Form" onclick="createForm()">
                    </form>
                </div>
            </div>
        </div> 

    </body>
        <?php
        }
        ?>
</html>

build_form.js

var name=1;
var email=1;
var address=1;
var phone=1;
//$("#preview").sortable();
function appendName()
{
    var code="<div class='preBox'><label>Name</label><input type='text' name='name"+name+"'><button class='temp' onclick='remove(this)'>Remove</button></div>";
    $('#preview').append(code);
    name = +name + 1;      // + is used to show that the variable is a number
}
function appendEmail()
{
    $('#preview').append("<div class='preBox'><label>Email</label><input type='email' name='email"+email+"'><button class='temp' onclick='remove(this)'>Remove</button></div>");
    email = +email + 1;
}
function appendAddress()
{
    $('#preview').append("<div class='preBox'><label>Address</label><input type='text' name='address"+address+"'><button class='temp' onclick='remove(this)'>Remove</button></div>");
    address = +address + 1;
}
function appendPhone()
{
    $('#preview').append("<div class='preBox'><label>Phone</label><input type='text' name='phone"+phone+"'><button class='temp' onclick='remove(this)'>Remove</button></div>");
    phone = +phone + 1;
}
function appendSubmit()
{
    $('#preview').append("<div class='preBox'><button type='submit' form='form2'>SUBMIT</button><button class='temp' onclick='remove(this)'>Remove</button></div>");
}
function remove(btnId)
{
    var divId=btnId.parentNode;
    $(divId).remove();
}
function createForm()
{
    $(".temp").remove();
    var fCode=$("#preview").html();
    $('#form1').append("<div><input type='hidden' name='fCode' value='"+fCode+"'></div>");
}

添加html代码时，整个机制停止工作 build /form.php中的if / else条件。文件名或扩展名不是问题，但条件陈述是问题（测试它）。

它应该像图像中显示的那样工作。单击左侧按钮时应添加字段，但在使用if/else条件时停止工作。

重要提示：即使我稍后删除了php代码，代码也无法运行（当我删除文件并粘贴新副本时开始工作）。这就像是永久性的影响。

当html代码放入php if / else条件时，JQuery脚本不起作用

0 个答案: