sudhakar sudhakar - 1 month ago 11
HTML Question

how to get ol value in sortable jquery

I am trying to get the

ol
values. If I click add button it will create a new
div
with
li
, if I sort that
div
value is stable but
ol
's value is changing. I wanted that if user click submit button that
div
tag is also go to change with that
li
value.

Jquery and HTML code



<html>
<head>
<title>Insert</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<script type="text/javascript">
$(document).ready(function () {

var counter = 1;

$("#addButton").click(function () {
counter++;
var nextOne = '<div class="well" id="row-' + counter +'"><div class="row"><div class="col-xs-10"><li id="item-' + counter +'"><input type="text" name="textbox' + counter +'" class="form-control" ></li></div><div class="col-xs-2"><select class="form-control" name="contentType' + counter +'"><option value="improvement">Improvement</option><option value="fix">Fix</option><option value="feature">Feature</option><option value="new">New</option></select></div></div></div>'
$("#sortable").append(nextOne);
$('#hide').val(counter);
console.log(counter);


});

$('ol').sortable({
axis: 'z',
stop: function (event, ui) {
var data = $(this).sortable('serialize');
// $('#sud').text(data);
/*$.ajax({
data: oData,
type: 'POST',
url: '/your/url/here'
});*/
}
});

$("#removeButton").click(function () {

if(counter==1){
alert("No more textbox to remove");
return false;
}



$('#hide').val(counter);
console.log(counter);
$("#row-" + counter).remove();
counter--;

});






});



</script>





</head>
<body>

<div class="container">






<form action="../process.php" method="post">



<div class="row"><div class="col-xs-10"></div><div class="col-xs-1"><button type="button" class="btn btn-success" id="addButton">add</button></div><div class="col-xs-1"><button type="button" class="btn btn-danger" id='removeButton'>remove</button></div></div>

<br/>
<ol id="sortable">

<div class="well" id="row-1"><div class="row"><div class="col-xs-10"><li id="item-1"><input type="text" name="textbox1" class="form-control" ></li></div><div class="col-xs-2"><select class="form-control" name="contentType1"><option value="improvement">Improvement</option><option value="fix">Fix</option><option value="feature">Feature</option><option value="new">New</option></select></div></div></div>


</ol>

<hr/>

<input type="hidden" id="hide" name="count" value='1'></input>


<input type="submit" id="submit" class="btn btn-primary" value="Submit The Data">

</form>


</div>

</body>
</html>




Answer

Finally I found the answer for my question:

<html>
<head>
	<title>Insert</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    

    <script type="text/javascript">
		$(document).ready(function () {
		    
		     var counter = 1;
						
			 $("#addButton").click(function () {
			 	counter++;
			    var nextOne = '<li id="item-' + counter +'"><div class="well" id="row-' + counter +'"><div class="row"><div class="col-xs-10"><input type="text" name="textbox' + counter +'" class="textboxName form-control" ></div><div class="col-xs-2"><select class="contentTypeName form-control" name="contentType' + counter +'"><contentTypeName option value="improvement">Improvement</option><option value="fix">Fix</option><option value="feature">Feature</option><option value="new">New</option></select></div></div></div></li>';
		    	$("#sortable").append(nextOne);	
		    	$('#hide').val(counter);
		    	console.log(counter);
				
					
			});

			$('ol').sortable({
		        axis: 'z',
		        stop: function (event, ui) {
			        var data = $(this).sortable('serialize');
		            // $('#sud').text(data);
		            /*$.ajax({
		                    data: oData,
		                type: 'POST',
		                url: '/your/url/here'
		            });*/
				}
		    });

			$("#removeButton").click(function () {

		    	if(counter==1){
		          alert("No more textbox to remove");
		          return false;
		       }  
		       

		       
		       $('#hide').val(counter);
		       console.log(counter);
		       $("#item-" + counter).remove();
		       $("#row-" + counter).remove();
		       counter--;
					
			});

			$('#submit').click( function (){

			 	
				$("#sortable li").each(function () {
				var indexingNo = $(this).index();
				indexingNo = indexingNo+1;
				            console.log($(this).find( ".textboxName" ).attr('name' ,'textbox'+indexingNo));
				            console.log($(this).find( ".contentTypeName" ).attr('name' ,'selectbox'+indexingNo));

				        });









			 });




			



		        
		});

		

	</script>





</head>
<body>

	<div class="container">



		


		<form action="#" method="post">

			

			<div class="row"><div class="col-xs-10"></div><div class="col-xs-1"><button type="button" class="btn btn-success" id="addButton">add</button></div><div class="col-xs-1"><button type="button" class="btn btn-danger" id='removeButton'>remove</button></div></div>    

			<br/>
			<ol id="sortable">

			    <li id="item-1"><div class="well" id="row-1"><div class="row"><div class="col-xs-10"><input type="text" name="textbox1" class="textboxName form-control" ></div><div class="col-xs-2"><select class=" contentTypeName form-control" name="contentType1"><option value="improvement">Improvement</option><option value="fix">Fix</option><option value="feature">Feature</option><option value="new">New</option></select></div></div></div></li>    
			    
		
			</ol>

			<hr/>

			<input type="hidden" id="hide" name="count" value='1'></input>


			

		</form> 


		<input type="submit" id="submit" class="btn btn-primary" value="Submit The Data">


	</div>

</body>
</html>