如何使用ajax将动态克隆的表单与其他数据一起插入数据库

Question

我根据用户输入克隆了我的一部分结帐，我想将其与其他数据一起插入数据库。这是我的html结帐。 Class eventdetail是克隆的部分。它显示在id eventdisplay。如何使用Ajax将克隆的部分与其他部分一起插入数据库？

这是jquery；我还想检查是否所有字段都已填写，但将其发送到eventdetail.php。

$("#book").click(function() {
        var data = {
           totalamount: $('#etamt').val(),
           venue: $('#cvenue').val(),
            //de: document.getElementById('des').innerHTML,
            oname:$('#coname').val(),
          // name: document.getElementById('ctitle').innerHTML,
             frdate: $('#cedate').val(),
            todate: $('#ctodate').val(),
            // byno: $('#buynumber').val(),
            // byemail: $('#buymail').val(),
            // byname: $('#buyname').val(),
             num: $('#etqty').val(),

        }
       $.ajax({
            async: true,
            url: "eventdetail.php",
            method: "POST",
            data: $(data).serialize(),
            // $('.eventdetail').serialize(),
            success: function(rt) {

            }
        });
        console.log(data);
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "col-12">
			     
		 <div class= "row">
		    <div class= "col-6">
               <div class="form-group border-dark">
                   <label><strong>Info:     TEST</strong></label><br>
			       <input id="cinfo"  value="TEST" type = "hidden"><br>
			    </div>
		    </div>
		    <div class= "col-6">
                <div class="form-group border-dark">
			      <label><strong>Organized by:    Jochuks </strong></label><br>
                   <input id="coname" value="Jochuks" type = "hidden"><br>
                </div>
		    </div>
		 </div>
         <div class="form-group border-dark" id="datediv">
		      <label><strong>Date and Time:</strong></label><br>
                <label><strong>From:    5th June 2019</strong></label>
                <input id="cedate"  value="5th June 2019" type = "hidden"><br>
			    <label><strong>To:   23rd June 2019</strong></label>
              <input id="ctodate" value="23rd June 2019" type = "hidden"><br>
         </div>
         <div class="form-group border-dark" id="vendiv">
            <label><strong>Venue:    StackOver</strong></label><br>
            <input id="cvenue"  value="StackOver" type = "hidden"><br>
         </div>
		 
	
		 <div class = "eventdetail">
		     <div class="card" style="padding-left:0px;">
		        <div class="card-body">
		          
			        <label><b>Individual Details:</b></label>
			
			        <div class="form-inline">
			 
		                 <div class="form-group border-dark">
                            <input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
                         </div>
			             <div class="form-group border-dark">
                            <input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
                         </div>
			             <div class="form-group border-dark">
                            <input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
                         </div>
				     </div>
				    <section class="row">
                         <div align="center">
                             <a class="btn btn-outline-dark remove" >Remove Ticket</a>
                         </div>
                     </section>							
	             </div>

	         </div>
	     </div>
  <div class="card" style="padding-left:0px;">
		        <div class="card-body">
		          
			        <label><b>Individual Details:</b></label>
			
			        <div class="form-inline">
			 
		                 <div class="form-group border-dark">
                            <input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
                         </div>
			             <div class="form-group border-dark">
                            <input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
                         </div>
			             <div class="form-group border-dark">
                            <input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
                         </div>
				     </div>
				    <section class="row">
                         <div align="center">
                             <a class="btn btn-outline-dark remove" >Remove Ticket</a>
                         </div>
                     </section>							
	             </div>

	         </div>
 <div class="card" style="padding-left:0px;">
		        <div class="card-body">
		          
			        <label><b>Individual Details:</b></label>
			
			        <div class="form-inline">
			 
		                 <div class="form-group border-dark">
                            <input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
                         </div>
			             <div class="form-group border-dark">
                            <input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
                         </div>
			             <div class="form-group border-dark">
                            <input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
                         </div>
				     </div>
				    <section class="row">
                         <div align="center">
                             <a class="btn btn-outline-dark remove" >Remove Ticket</a>
                         </div>
                     </section>							
	             </div>

	         </div>
 <div class="card" style="padding-left:0px;">
		        <div class="card-body">
		          
			        <label><b>Individual Details:</b></label>
			
			        <div class="form-inline">
			 
		                 <div class="form-group border-dark">
                            <input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
                         </div>
			             <div class="form-group border-dark">
                            <input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
                         </div>
			             <div class="form-group border-dark">
                            <input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
                         </div>
				     </div>
				    <section class="row">
                         <div align="center">
                             <a class="btn btn-outline-dark remove" >Remove Ticket</a>
                         </div>
                     </section>							
	             </div>

	         </div>
	     <div id = "eventdisplay">
		 </div>
	    <div class="card" style="padding-left:0px;">
		     <div class="card-body">
		 
		         <div class="form-group border-dark pull-right">
                    <label><strong>   Total Amount:  20340</strong></label><br>
                     <input id="etamt"  value="20340" type = "hidden"><br>
                 </div>
		         <div class="form-group border-dark pull-right">
                    <label><strong>Qty:   4</strong></label><br>
                    <input id="etqty"  value="4" type = "hidden">
			     </div>
		     </div>
		</div>
	    
		    <button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="book">BOOK</button>
            <button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="back1">BACK</button>  
     	
     </div>

Answer 1

这不会解决您的问题，但这是一个片段，其中我注释了不起作用的部分。尝试将这样的代码段与所需的内容一起放入您的问题中，您将能够看到什么是有效的，什么是无效的。您还可以使用https://codepen.io/来构建这些内容并进行更多测试。

考虑使用jQuery以外的其他工具，因为这些日子已经很老了！ 如果您想尝试反应，create-react-app是一个不错的起点。

从头开始编写验证库是一项艰巨的任务，现在可以使用许多工具和插件来避免从头开始：

• 对于jquery：https://jqueryvalidation.org/
• 为了回应一些见解： https://www.telerik.com/blogs/up-and-running-with-react-form-validation

如果您只是为了学习如何使用jQuery解决此问题而感到高兴，那就太好了！随时对此答案发表评论，我会对其进行更新以尝试为您提供帮助。这是供您参考的摘要示例：

$("#book").click(function() {
        var data = {
            totalamount: document.getElementById('etamt').innerHTML,
            venue: document.getElementById('cvenue').innerHTML,
            email: $('#cvemail').val(),
            // de: document.getElementById('des').innerHTML,
            // oname: document.getElementById('coname').innerHTML,
            name: document.getElementById('ctitle').innerHTML,
            // frdate: document.getElementById('cedate').innerHTML,
            // todate: document.getElementById('ctodate').innerHTML,
            // byno: $('#buynumber').val(),
            // byemail: $('#buymail').val(),
            // byname: $('#buyname').val(),
            // num: document.getElementById('etqty').innerHTML,
        }
        $.ajax({
            async: true,
            url: "eventdetail.php",
            method: "POST",
            data: $(data).serialize(),
            // $('.eventdetail').serialize(),
            success: function(rt) {

            }
        });
        console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
  <input type="hidden" class="form-control" id="userid">
  <input type="hidden" class="form-control" id="id">
  <input type="hidden" class="form-control" id="cvemail">
  <div class="row">
    <div class="col-6">
      <div class="form-group border-dark">
        <label><strong>Info:</strong></label><br>
        <label id="cinfo"></label><br>
      </div>
    </div>
    <div class="col-6">
      <div class="form-group border-dark">
        <label><strong>Organized by:</strong></label><br>
        <label id="coname"></label><br>
      </div>
    </div>
  </div>
  <div class="form-group border-dark" id="datediv">
    <label><strong>Date and Time:</strong></label><br>
    <label><strong>From:</strong></label>
    <label id="cedate"></label><br>
    <label><strong>To:</strong></label>
    <label id="ctodate"></label><br>
  </div>
  <div class="form-group border-dark" id="vendiv">
    <label><strong>Venue:</strong></label><br>
    <label id="cvenue"></label><br>
  </div>


  <div style="display:none" class="eventdetail">
    <div class="card" style="padding-left:0px;">
      <div class="card-body">
        <label class="pull-right" id="none"></label>
        <label id="con"></label><br>
        <label><b>Individual Details:</b></label>

        <div class="form-inline">

          <div class="form-group border-dark">
            <input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
          </div>
          <div class="form-group border-dark">
            <input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
          </div>
          <div class="form-group border-dark">
            <input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
          </div>
        </div>
        <section class="row">
          <div align="center">
            <a class="btn btn-outline-dark remove">Remove Ticket</a>
          </div>
        </section>
      </div>

    </div>
  </div>
  <div id="eventdisplay">
  </div>
  <div class="card" style="padding-left:0px;">
    <div class="card-body">

      <div class="form-group border-dark pull-right">
        <label><strong>   Total Amount:</strong></label><br>
        <label id="etamt"></label><br>
      </div>
      <div class="form-group border-dark pull-right">
        <label><strong>Qty:</strong></label><br>
        <label id="etqty"></label>
      </div>
    </div>
  </div>

  <button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="book">BOOK</button>
  <button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="back1">BACK</button>

</div>