CODEWITHSUNDEEP
javascriptjqueryhtml
Július Ľuptovec
Július Ľuptovec

Reputation: 337

JQueryUI Sortable - new order to string

I'm using JQueryUi Sortable to sort gallery with user friendly drag and drop.

Thing im sorting looks like :

 <div id="gallery"><div class="wrapper" data-id="//here is name of picture like :2017554352.jpg">
      //actual picture and desc.. etc.
  </div>
  <div class="wrapper" data-id="//here is name of picture like :2017554352.jpg">
      //actual picture and desc.. etc.
  </div><div>

and here actual simple sorting script:

<script> 
       $( function() {
       $( "#gallery" ).sortable();

       });
</script>

I want to create php string by inputing data-id's of divs into hidden input in this form. How would function what can do this looks like ?

<form name="sortForm" action="sortPics_submit.php" method="post">
         <input type="hidden" id="sortOrder" name="sortOrder">
        <button type="submit" class="submit3" name="submit"><span>Save&Continue...</span></button>
</form>

Thank You for any advice !

Upvotes: 2

Views: 258

Answers (1)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23778

You can use the below function to concatenate all the data-id of the sortable divs in a comma separated format and then add it to the form input. see the demo below

function getData() {
  var string = '';
  $("#gallery>div[data-id]").each(function() {
    string += $(this).data('id') + ',';
  });
  return string.substr(0, string.length - 1);
}
$("#sortOrder").val(getData());
console.log(getData());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="gallery">
  <div class="wrapper" data-id="2017554352.jpg">

  </div>
  <div class="wrapper" data-id="2017550052.jpg">

  </div>
</div>

<form name="sortForm" action="sortPics_submit.php" method="post">
  <input type="text" id="sortOrder" name="sortOrder">
  <button type="submit" class="submit3" name="submit"><span>Save&Continue...</span></button>
</form>

Upvotes: 1

Related Questions