как вставить динамически клонированную форму в базу данных вместе с другими данными, используя 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-реакции-приложение - хорошая отправная точка, если вы хотите попробовать реагировать.

Написание проверочных библиотек с нуля - огромная задача, теперь вы можете использовать так много инструментов и плагинов, чтобы не начинать с нуля:

• для 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>