2015-12-15 4 views
8

jQueryで追加できる他の作者とは別に作成された作者を残したいと思います。私が著者を追加するときに、著者を追加するボタンを押した後に、著者を彼の本にリンクさせたいと思っています。私は別の著者のためのフォームを手に入れますが、私のコードではすべての著者が配列であり、別の著者とその本から分離することはありません。書籍カタログの書籍の配列をそれぞれの著者に割り当てるにはどうすればよいですか?

私のようなポストに何かを経由して送信したい:

<div class="container"> 
    <form class="form-horizontal" role="form" action="next.php" method="post"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 


     <div class="input_fields_wrap"> 
      <button class="add_author">Add Author</button> 

      <div id="commonPart" class="commonPart"> 
       <br> 
      <div><input type="text" name="myAuthorText[]" placeholder="Auth name"></div> 

      <button class="add_book">Add Author Books</button> 
      <div><input type="text" class="bookname" name="myBooksText[]" placeholder="Book name"></div> 

      </div> 
     </div> 
     <input name="Send" class="submit" value="Send" type="submit"> 

    </form> 
</div> 
<script src="../js/jquery-2.1.4.min.js"></script> 
<script src="../js/bootstrap.min.js"></script> 
<script src="../js/jqBootstrapValidation.js"></script> 
<SCRIPT language="javascript"> 

$(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var commonPart  = $("#commonPart"); 
    var add_author  = $(".add_author"); //Add button ID 
    var add_subButton = $(".add_book"); //Add sub button ID 

    var x = 1; //initlal text box count 
    $(add_author).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      var htmlToAdd = commonPart.clone().attr("id","commonPart_"+x); 
      htmlToAdd.find(".addedDiv").remove(); 
      $(wrapper).append(htmlToAdd); //add input box 
      x++; //text box increment 
     } 
    }); 

    $(document).on("click",".add_book",function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(this).closest(".commonPart").append('<div class="addedDiv"><input type="text" class="bookname" name="myBooksText[]" placeholder="Book name"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

//http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery 
</SCRIPT> 

JSFiddleリンク::

JSFiddle I

これは私がこれまで持っているコードです

author1: {book1, book2, book3} 
author2: {book4, book5} 
author3: {book6, book7, book8, book9} 

JSFiddle II (collaboration)

答えて

3

これは私ができたことがわかったことです!

<!DOCTYPE html> 
 
    \t <html> 
 
    \t \t <head> 
 
    \t \t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    \t \t \t <style type="text/css"> 
 
    \t \t \t \t <!-- 
 
    \t \t \t \t #main { 
 
    \t \t \t \t \t max-width: 800px; 
 
    \t \t \t \t \t margin: 0 auto; 
 
    \t \t \t \t } 
 
    \t \t \t \t --> 
 
    \t \t \t </style> 
 
    \t \t </head> 
 
    \t \t <body> 
 
    \t \t \t <div id="main"> 
 
    \t \t \t \t <h1>Add or Remove text boxes with jQuery</h1> 
 
    \t \t \t \t \t <button onclick="addAuthor()" >Add Author</button><br><br> 
 
    \t \t \t \t \t <div id="addAuth"></div> 
 
    \t \t \t \t \t <br><br> 
 
    \t \t \t \t \t <button onclick="submit()" >Submit</button> 
 
    \t \t \t \t </div> 
 
    \t \t \t \t 
 
    \t \t \t \t <div id="result" ></div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <script type="text/javascript"> 
 
    \t \t \t \t var authors = 0; 
 
        
 
    \t \t \t \t function addAuthor(){ 
 
    \t \t \t \t \t authors++; 
 
    \t \t \t \t \t var str = '<br/>' 
 
            +'<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" placeholder="Author Name:"/>' 
 
    \t \t \t \t \t \t \t \t +'<br/>' 
 
            +'<button onclick="addMore(\'auth'+authors+'\')" >Add Book</button>' 
 
    \t \t \t \t \t \t \t \t +'</div>'; 
 
    \t \t \t \t \t $("#addAuth").append(str); 
 
    \t \t \t \t } 
 
    \t \t \t \t 
 
    \t \t \t \t var count=0; 
 
    \t \t \t \t function addMore(id){ 
 
    \t \t \t \t \t count++; 
 
    \t \t \t \t \t var str = '<div id="bookDiv'+count+'">' 
 
    \t \t \t \t \t \t \t +'<input class="'+id+'" type="text" name="book'+id+'" placeholder="Book Name"/>' 
 
//  \t \t \t \t \t \t \t +'<span onclick="addMore(\''+id+'\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>' 
 
    \t \t \t \t \t \t \t +'<span onclick="removeDiv(\'bookDiv'+count+'\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">Remove</span>' 
 
//        +'<a href="#" class="remove_field">Remove</a></div>' 
 
    \t \t \t \t \t \t \t +'</div>'; 
 
    \t \t \t \t \t $("#"+id).append(str); 
 
    \t \t \t \t } 
 
    \t \t \t \t 
 
    \t \t \t \t function removeDiv(id){ 
 
    \t \t \t \t \t //var val = confirm("Are you sure ..?"); 
 
    \t \t \t \t \t //if(val){ 
 
    \t \t \t \t \t \t $("#"+id).slideUp(function(){ 
 
           $("#"+id).remove(); 
 
          }); 
 
    \t \t \t \t \t //} 
 
    \t \t \t \t } 
 
    \t \t \t \t 
 
    \t \t \t \t function submit(){ 
 
    \t \t \t \t \t var arr = []; 
 
    \t \t \t \t \t for(i=1; i<=authors; i++){ 
 
    \t \t \t \t \t \t var obj = {}; 
 
    \t \t \t \t \t \t obj.name = $("#author"+i).val(); 
 
    \t \t \t \t \t \t obj.books = []; 
 
    \t \t \t \t \t \t $(".auth"+i).each(function(){ 
 
    \t \t \t \t \t \t \t var data = $(this).val(); 
 
    \t \t \t \t \t \t \t obj.books.push(data); 
 
    \t \t \t \t \t \t }); 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t arr.push(obj); 
 
    \t \t \t \t \t } 
 
    \t \t \t \t \t 
 
    \t \t \t \t \t $("#result").html(JSON.stringify(arr)); 
 
    \t \t \t \t } 
 
    \t \t \t </script> 
 
    \t \t </body> 
 
    \t </html>

関連する問題