如何使用 php 和 mysqli 在动态字段中存储数据答案

【问题标题】：how can i store data in dynamic field using php and mysqli如何使用 php 和 mysqli 在动态字段中存储数据
【发布时间】：2022-08-21 16:26:35
【问题描述】：

我正在创建一个动态简历表单，其中我在 java 脚本的帮助下创建了动态添加删除字段，但我不知道将这个动态表单的输入值存储在数据库中我在下面给出一些代码 -

动态添加删除脚本代码简历.js

$(document).ready(function(){
    var maxField = 5; //Input fields increment limitation
    var addButton = $(\'.add_button\'); //Add button selector
    var wrapper = $(\'.field_wrapper\'); //Input field wrapper
    var fieldHTML = 
    \'<div class=\"field_wrapper\"><div class=\"mb-3\"><input type=\"text\" name=\"skills[]\" value=\"\"class=\"form-control\" /><a href=\"javascript:void(0);\" class=\"remove_button\"><img class=\"my-2\" src=\"images/remove.png\"/ width=\"32\" height=\"32\" style=\"float: right;\" title=\"Delete\"/></a></div>\'; //New input field html 
    var x = 1; //Initial field counter is 1
    
    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); //Add field html
        }
    });
    
    //Once remove button is clicked
    $(wrapper).on(\'click\', \'.remove_button\', function(e){
        e.preventDefault();
        $(this).parent(\'div\').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

    // *************** Hobby******************
    
    $(document).ready( function(){

    var maxhobby = 4;
    var addHobby = $(\'.add_hobby\');
    var hobby_wrapper = $(\'.hobby_wrapper\');

    var hobbyHTML = \'<div class=\"hobby_wrapper\"><div class=\"mt-sm-0\"><input type=\"text\" name=\"myhobby[]\" value=\"\"class=\"form-control\" /><a href=\"javascript:void(0);\" class=\"remove_hobby\"><img class=\"my-2\" src=\"images/remove.png\"/ width=\"32\" height=\"32\" style=\"float: right;\" title=\"Delete\"/></a></div>\';

    var x = 1;

    $(addHobby).click( function(){
        if (x < maxhobby) {
            x++
            $(hobby_wrapper).append(hobbyHTML);
        }
    });

    // Once Remove Button Click
    
    $(hobby_wrapper).on(\'click\', \'.remove_hobby\', function(e){
        e.preventDefault();
        $(this).parent(\'div\').remove();
        x--;
    });
});

    // *************** Job Objective******************
    
    $(document).ready( function(){

    var maxjob = 4;
    var addjob = $(\'.add_job\');
    var job_wrapper = $(\'.job_wrapper\');

    var jobHTML = \'<div class=\"job_wrapper\"><div class=\"mt-sm-0\"><input type=\"text\" name=\"myjob[]\" value=\"\"class=\"form-control\" /><a href=\"javascript:void(0);\" class=\"remove_job\"><img class=\"my-2\" src=\"images/remove.png\"/ width=\"32\" height=\"32\" style=\"float: right;\" title=\"Delete\"/></a></div>\';

    var x = 1;

    $(addjob).click( function(){
        if (x < maxjob) {
            x++
            $(job_wrapper).append(jobHTML);
        }
    });

    // Once Remove Button Click
    
    $(job_wrapper).on(\'click\', \'.remove_job\', function(e){
        e.preventDefault();
        $(this).parent(\'div\').remove();
        x--;
    });
});

    // *************** Education ******************
    
$(document).ready( function(){

    var maxedu = 10;
    var addEdu = $(\'.add_edu\');
    var edu_wrapper = $(\'.edu_wrapper\');

    var eduHTML = \'<div class=\"edu_wrapper\"><hr><div class=\"d-flex justify-content-between mb-lg-3\"><div class=\"col-md-6\"><label class=\"form-label\">School/University</label><input type=\"text\" name=\"school_name[]\" class=\"form-control\" required></div><div class=\"col-md-6 ms-2\"><label class=\"form-label\">Degree/Course</label><input type=\"text\" name=\"degree[]\" class=\"form-control\" required></div></div><div class=\"col-md-12\"><label for=\"exampleInputEmail1\" class=\"form-label\">Marks/Grade/CGPA</label><input type=\"text\" name=\"mark[]\" value=\"\" class=\"form-control\"/></div><div class=\"d-flex justify-content-between\"><div class=\"col-md-6\"><label class=\"form-label\">Start Date</label><input type=\"text\" name=\"start_date[]\" class=\"form-control\" required></div><div class=\"col-md-6 ms-2\"><label class=\"form-label\">End Date</label><input type=\"text\" name=\"end_date[]\" class=\"form-control\" required></div></div><a href=\"javascript:void(0);\" class=\"remove_edu\"><img class=\"my-2\" src=\"images/remove.png\"/ width=\"32\" height=\"32\" style=\"float: right;\" title=\"Delete\"/></a></div>\';

    var x = 1;

    $(addEdu).click( function(){
        if (x < maxedu) {
            x++
            $(edu_wrapper).append(eduHTML);
        }
    });

    // Once Remove Button Click
    
    $(edu_wrapper).on(\'click\', \'.remove_edu\', function(e){
        e.preventDefault();
        $(this).parent(\'div\').remove();
        x--;
    });

这是我的简历表格代码表单.php

<script src=\"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js\"></script>
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>
<form action=\"create-resumecv\" method=\"post\" enctype=\"multipart/form-data\" name=\"add_name\" id=\"add_name\">
       <!-- Start Education -->
             <div class=\"card bg-light p-3 mb-3\">    
                <h4 class=\"text-warning\">Education & Qualification</h4>
                <div class=\"edu_wrapper\">
                <div class=\"d-flex justify-content-between mb-lg-3\">
                    <div class=\"col-md-6\">
                        <label class=\"form-label\">School/University</label>
                        <input type=\"text\" name=\"schoolname[]\" class=\"form-control\" >
                    </div>
                    <div class=\"col-md-6 ms-2\">
                        <label class=\"form-label\">Degree/Course</label>
                        <input type=\"text\" name=\"degree[]\" class=\"form-control\" >
                    </div>
                </div>                 
                    <div class=\"col-md-12\">                        
                        <label for=\"exampleInputEmail1\" class=\"form-label\">Marks/Grade/CGPA</label>   
                        <input type=\"text\" name=\"mark[]\" value=\"\" class=\"form-control\"/>
                    </div>
                    <div class=\"d-flex justify-content-between mt-3\">
                    <div class=\"col-md-6\">
                        <label class=\"form-label\">Start Date</label>
                        <input type=\"date\" name=\"startdate[]\" class=\"form-control\" >
                    </div>
                    <div class=\"col-md-6\">
                        <label class=\"form-label\">End Date</label>
                        <input type=\"date\" name=\"enddate[]\" class=\"form-control\" >
                    </div>                    
                </div>
                </div>
                <div class=\"mt-3\" align=\"center\">
                        <a  href=\"javascript:void(0);\" class=\"add_edu\" title=\"Add More Eduction\"><img src=\"images/add.png\"/ width=\"28\" height=\"28\"/></a >
                    </div>
              </div>
            <!-- End Education -->
              <!-- About Me -->
            <div class=\"card bg-light\' p-3 mb-3\">    
                <h4 class=\"text-warning\">About Me</h4>
                <div class=\"form-floating\">
                    <textarea class=\"form-control\" id=\"editor\" name=\"aboutme\"></textarea>
                </div>
            </div>
            <!-- End -->

            <!-- Start My Skill -->
            <div class=\"card bg-light p-3 mb-3\">    
                <h4 class=\"text-warning \">Skills</h4>
                <p class=\"text-muted\">Add More Skill Max:5 and don\'t press enter button</p>
                <div class=\"mb-auto\">                    
                   <div class=\"field_wrapper\">
                    <div class=\"mb-3\">                        
                        <label for=\"exampleInputEmail1\" class=\"form-label\">Enter Skill</label>             
                        <input type=\"text\" name=\"skills[]\" value=\"\" class=\"form-control\"/>
                    </div>                     
                 </div>
                 <div class=\"mb-3\" align=\"center\">
                <a  href=\"javascript:void(0);\" class=\"add_button\" title=\"Add Skill\"><img class=\"mb-2\" src=\"images/add.png\"/ width=\"28\" height=\"28\"/></a >
                </div>
                </div>                
            </div>
            <!--End My Skill  -->

             <!-- Start My Skill -->
            <div class=\"card bg-light p-3 mb-3\">    
                <h4 class=\"text-warning \">Job-Objective</h4>
                <p class=\"text-muted\">Add More Job Objective Max:5 and don\'t press enter button</p>
                <div class=\"mb-auto\">                    
                   <div class=\"job_wrapper\">
                    <div class=\"mb-3\">                        
                        <label for=\"exampleInputEmail1\" class=\"form-label\">Job Objective</label>             
                        <input type=\"text\" name=\"myjob[]\" value=\"\" class=\"form-control\"/>
                    </div>                     
                 </div>
                 <div class=\"mb-3\" align=\"center\">
                <a  href=\"javascript:void(0);\" class=\"add_job\" title=\"Add Skill\"><img class=\"mb-2\" src=\"images/add.png\"/ width=\"28\" height=\"28\"/></a >
                </div>
                </div>                
            </div>
            <!--End My Skill  -->
            <!-- My Hobbies -->
            <div class=\"card bg-light\' p-3 mb-3\">    
                <h4 class=\"text-warning\">Hobbies</h4>
               <div class=\"mb-3\">                
                   <div class=\"hobby_wrapper\">
                    <div class=\"mb-3\">               
                        <label for=\"exampleInputEmail1\" class=\"form-label\">Enter Hobby</label>             
                        <input type=\"text\" name=\"myhobby[]\" value=\"\" class=\"form-control\"/>
                    </div>                     
                 </div>
                 <div class=\"mt-3\" align=\"center\">
                        <a  href=\"javascript:void(0);\" class=\"add_hobby\" title=\"Add hobby\"><img class=\"mb-2\" src=\"images/add.png\"/ width=\"28\" height=\"28\"/></a >
                    </div>
                </div> 
            </div>
            <!-- end My Hobbies -->

                        <!--Start Experience  -->
            <div class=\"card bg-light\' p-3 mb-3\">    
                <h4 class=\"text-warning\">Experience</h4>
                <div class=\"expe_wrapper\">
                <div class=\"mb-3\">
                    <label for=\"exampleInputEmail1\" class=\"form-label\">Title</label>
                    <input type=\"text\" name=\"experience_title\" class=\"form-control\">
                </div>
                <div class=\"mb-3\">
                <div class=\"form-floating\">
                    <label for=\"exampleInputEmail1\" class=\"form-label\">Description</label>
                    <textarea class=\"form-control\" name=\"experience_des\" id=\"editor2\"></textarea>
                </div>
                </div>
            </div>      
            </div>
            <!-- end Experience -->

          <div class=\"text-center\">
          <button type=\"submit\" title=\"Submit your form for generate Resume\" class=\"btn btn-success mb-5\" name=\"create-resume\" id=\"submit\"> <img src=\"<?php echo BASE_URL . \'reg-users/images/resume.png\' ?>\" style=\"width: 20px; height: 20px;\"> Create Resume</button>
        </div>          
       </form>

添加或删除动态输入字段没有任何问题，它可以正常工作，但不知道将动态添加字段表单值存储在 mysqli 数据库中。

请告诉我如何使用 PHP 在数据库中存储动态输入字段值。

如果您谈论的是数组（技能、爱好等），那么通常的做法是循环这些数组以插入到相应的表中。
是的！你是对的，但我没有写代码的想法。请帮我

标签： javascript php html mysqli dynamicform

【解决方案1】：

最后我找到了解决方案，所以我发布了答案。看，当我们想将表单的输入值以数组的形式存储在数据库中，那么我们只要简单的定义一个字符串到数组，就是一件简单的事情。

我在这个解决方案中使用了php的implode和explode功能，然后我得到了完美的解决方案。如果需要，您也可以使用此功能。

implode(",", $array); // defined or predefined.

implode() 函数从数组的元素中返回一个字符串。

explode(",", $array); // you want break array to string.

explode() 函数将一个字符串分解为一个数组。

感谢您的帮助...请访问my website - rkonline

【讨论】：