Menu
I want to keep the authors that are added separately from the other authors that can be added by the jQuery. When I add an author I want to be able to link that Author to his books for example after I press the add author button I get a form for another author but in my code all the authors are in an array and all the books are in another. Not separating from authors and their books.
I want to send via post something like:
author1: {book1, book2, book3}
author2: {book4, book5}
author3: {book6, book7, book8, book9}
This is the code that I have so far:
<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 Links:
JSFiddle I
JSFiddle II (collaboration)
566
This is what I found I could have done!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<button onclick="addAuthor()" >Add Author</button><br><br>
<div id="addAuth"></div>
<br><br>
<button onclick="submit()" >Submit</button>
</div>
<div id="result" ></div>
</div>
<script type="text/javascript">
var authors = 0;
function addAuthor(){
authors++;
var str = '<br/>'
+'<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" placeholder="Author Name:"/>'
+'<br/>'
+'<button onclick="addMore(\'auth'+authors+'\')" >Add Book</button>'
+'</div>';
$("#addAuth").append(str);
}
var count=0;
function addMore(id){
count++;
var str = '<div id="bookDiv'+count+'">'
+'<input class="'+id+'" type="text" name="book'+id+'" placeholder="Book Name"/>'
// +'<span onclick="addMore(\''+id+'\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>'
+'<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>'
+'</div>';
$("#"+id).append(str);
}
function removeDiv(id){
//var val = confirm("Are you sure ..?");
//if(val){
$("#"+id).slideUp(function(){
$("#"+id).remove();
});
//}
}
function submit(){
var arr = [];
for(i=1; i<=authors; i++){
var obj = {};
obj.name = $("#author"+i).val();
obj.books = [];
$(".auth"+i).each(function(){
var data = $(this).val();
obj.books.push(data);
});
arr.push(obj);
}
$("#result").html(JSON.stringify(arr));
}
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With