jQuery - Füllen Formulareingabe mit Daten aus html

Question

Ich habe eine Liste von Elementen

jeweils enthalten "Titel", "loc" und "Schaltfläche hinzufügen".

Wenn ich auf "add button" Ich möchte, dass die richtigen "li" Werte in das Formular unten angezeigt (jeder Wert identifiziert haben: "data-type =")

<li> 
    <div class="timeline-badge"> 
    </div> 
    <div class="timeline-panel-pointer"> 
     <div class="timeline-heading"> 
      <h4 class="timeline-title dropdown"> 
       <span data-type="title">some text here</span> 
      </h4> 
      <p><small class="text-muted"><span data-type="loc">Rome</span></small></p> 
     </div> 
     <p class="mt20"> 
      <button type="button" class="btn btn-info secBtn" data-act="new" data-toggle="modal" data-target="#manageSec-model">New Section</button> 
     </p>           
    </div> 
</li> 

<li> 
    <div class="timeline-badge"> 
    </div> 
    <div class="timeline-panel-pointer"> 
     <div class="timeline-heading"> 
      <h4 class="timeline-title dropdown"> 
       <span data-type="title">some text here 2</span> 
      </h4> 
      <p><small class="text-muted"><span data-type="loc">Milan</span></small></p> 
     </div> 
     <p class="mt20"> 
      <button type="button" class="btn btn-info secBtn" data-act="new" data-toggle="modal" data-target="#manageSec-model">New Section</button> 
     </p>           
    </div> 
</li> 

FORM:

<!-- Modal --> 
<div class="modal fade" id="manageSec-model" role="dialog"> 
    <div class="modal-dialog modal-md"> 

     <!-- Modal content--> 
     <form id="manageSec-form" class="modal-content" action="index.php?page=itinPage&itinID=<?PHP echo $_GET['itinID'] ?>" method="post" enctype="multipart/form-data" > 
      <div class="modal-body"> 

       <div class="form-group"> 
        <label for="exampleInputEmail1">LOCATION</label> 
        <input type="text" name='sec_details[loc]' value="" class="form-control" /> 
       </div> 

       <div class="form-group"> 
        <label for="exampleInputEmail1">TITLE</label> 
        <div class='input-group'> 
         <input type="text" class="form-control" name='sec_details[title]' value="" > 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

SCRIPT

$(document).on('click','.secBtn',function(e) { 


     alert($(this).parents("li").find("data-type=title").val()); 

}); 

Answer 1

Sie benötigen Sie jQuery zu ändern. Finde das Snippet unten.

$(document).on('click','.secBtn',function(e) { 
 

 
    var title = jQuery(this).parent().parent().find('span[data-type="title"]').html(); 
 
    var location = jQuery(this).parent().parent().find('span[data-type="loc"]').html(); 
 

 
    jQuery('#manageSec-model').find('input[name="sec_details[loc]"]').val(location); 
 
    jQuery('#manageSec-model').find('input[name="sec_details[title]"]').val(title); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<li> 
 
    <div class="timeline-badge"> 
 
    </div> 
 
    <div class="timeline-panel-pointer"> 
 
     <div class="timeline-heading"> 
 
      <h4 class="timeline-title dropdown"> 
 
       <span data-type="title">some text here</span> 
 
      </h4> 
 
      <p><small class="text-muted"><span data-type="loc">Rome</span></small></p> 
 
     </div> 
 
     <p class="mt20"> 
 
      <button type="button" class="btn btn-info secBtn" data-act="new" data-toggle="modal" data-target="#manageSec-model">New Section</button> 
 
     </p>           
 
    </div> 
 
</li> 
 

 
<li> 
 
    <div class="timeline-badge"> 
 
    </div> 
 
    <div class="timeline-panel-pointer"> 
 
     <div class="timeline-heading"> 
 
      <h4 class="timeline-title dropdown"> 
 
       <span data-type="title">some text here 2</span> 
 
      </h4> 
 
      <p><small class="text-muted"><span data-type="loc">Milan</span></small></p> 
 
     </div> 
 
     <p class="mt20"> 
 
      <button type="button" class="btn btn-info secBtn" data-act="new" data-toggle="modal" data-target="#manageSec-model">New Section</button> 
 
     </p>           
 
    </div> 
 
</li> 
 

 

 
<!-- Modal --> 
 
<div class="modal fade" id="manageSec-model" role="dialog"> 
 
    <div class="modal-dialog modal-md"> 
 

 
     <!-- Modal content--> 
 
     <form id="manageSec-form" class="modal-content" action="index.php?page=itinPage&itinID=<?PHP echo $_GET['itinID'] ?>" method="post" enctype="multipart/form-data" > 
 
      <div class="modal-body"> 
 

 
       <div class="form-group"> 
 
        <label for="exampleInputEmail1">LOCATION</label> 
 
        <input type="text" name='sec_details[loc]' value="" class="form-control" /> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label for="exampleInputEmail1">TITLE</label> 
 
        <div class='input-group'> 
 
         <input type="text" class="form-control" name='sec_details[title]' value="" > 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </div> 
 
</div>