如何在数据库中存储html表单，其中一些字段是动态生成的，所以首先明确我需要存储整个html表单

How to store html form in database that some of the filed is dyanmically generated,So firstly clear i have need to store whole html form

本文关键字：存储 html 表单 动态 数据库 字段      更新时间：2023-09-26

我需要在mysql数据库中存储整个html表单使用php与动态生成的输入框也需要存储在数据库中，首先我采取所有html代码在php变量和存储在数据库中的数据存储在数据库中，但问题是，如果我动态创建任何输入框它不存储。

 <HTML>
    <HEAD>
        <script src="js/jquery-3.1.0.min.js"></script>
        <SCRIPT language="javascript">
           var i=1;
            function add(type) 
            {
                var element = document.createElement("input");
                if(type=="text")
                {
                    element.setAttribute("type", type);
                    element.setAttribute("value", type);
                    element.setAttribute("name", "text-"+i);
                    i++;
                    $('#fooBar').append("<p style='width:130px;'contenteditable='true'></p>");
                    $("#fooBar").append(element);
                }
            }
        </SCRIPT>
    </HEAD>
        <BODY oncontextmenu="return false">
            <FORM name="dform" id="dformid">
            <H2>Dynamic Form Element</H2>
            <BR/>
            <SELECT name="element">
                <OPTION value="text">Textbox</OPTION>
            </SELECT>
            <INPUT type="button" value="Add Form Element" onclick="add(document.forms[0].element.value)"/>
            <span id="fooBar">
             </br>
            </span>
            </span>
            <!--<input type="text" id="boxx">
            <div id="d"></div>-->
            </FORM>
        </BODY>
</HTML>

看看如何调用ajax 

<HTML>
<HEAD>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <SCRIPT language="javascript">
       // Ajax Call 
        jQuery(document).ready(function($){
        $(document.body).on('click', 'button.submittoDB', function(e) {
        e.preventDefault();
        var htmlForm = $('form#dformid').html();
        jQuery.ajax({
            type: "POST",
            url: yourfilepath/ajax.php,
            data: {
                formData: htmlForm // you can get this data with $_POST['formData'] in your ajax.php file
            },
            success: function(data) {
                console.log(data);
            }
            });
        });
    });

       var i=1;
        function add(type) 
        {
            var element = document.createElement("input");
            if(type=="text")
            {
                element.setAttribute("type", type);
                element.setAttribute("value", type);
                element.setAttribute("name", "text-"+i);
                i++;
                $('#fooBar').append("<p style='width:130px;'contenteditable='true'></p>");
                $("#fooBar").append(element);
            }
        }
    </SCRIPT>
</HEAD>
    <BODY oncontextmenu="return false">
        <FORM name="dform" id="dformid">
        <H2>Dynamic Form Element</H2>
        <BR/>
        <SELECT name="element">
            <OPTION value="text">Textbox</OPTION>
        </SELECT>
        <INPUT type="button" value="Add Form Element" onclick="add(document.forms[0].element.value)"/>
        <span id="fooBar">
         </br>
        </span>
        </span>
        <!--<input type="text" id="boxx">
        <div id="d"></div>-->
        </FORM>
        <button class="submittoDB">Submit</button>
    </BODY>

相关文章：