1

I'm dabbling in JQuery, and have run up against an issue I'm not quite able yet to figure out. Here is the context:

I have a HTML form, utilising MySQL & PHP, used to edit a CMS post. This post would have a list of attachments (eg. images for a gallery, or downloadable files). Using JQuery, the user can click on these list item elements and edit the details of each attachment in a revealed div (eg. delete image, add capton, etc).

Currently when the user opts to delete an attachment, I simply fade its opacity and provide a new option to the user to 'undo' the delete. Upon submission of the complete parent form (the CMS post), I want to gather all the attachments still marked for deletion, and submit their GUID's to the PHP script that is doing all the rest of the post updating for me.

Option A:

Is it possible to submit a JQuery array to a PHP script alongside the data being sent naturally to the action script by the form inputs?

Option B:

Is it possible to fill / empty a (hidden) form input array dynamically with JQuery, which could then be submitted naturally to the action script with everything else?

I am currently at the stage where I am filling a Javascript array with the necessary GUIDs, but now don't know what to do with it.

//populate deleted attachments array
$(document).ready(function() {
  $('#post-editor').submit(function() {
    var arrDeleted = [];    
    $('.deleted-att').each(function(){
      arrDeleted.push({guid: $(this).attr("data-guid")});
    });
    //do something with array
  });
});
1
  • You could use one of jQuery's Ajax functions to send and receive data from your PHP scripts. It isn't complicated and jQuery offers many shorthand methods. api.jquery.com/jQuery.ajax Jan 16, 2013 at 13:39

4 Answers 4

2

JSON.stringify the arrDeleted and put them in a hidden field in the form, that will be submitted.

$('#post-editor').submit(function() {
    var arrDeleted = [];    
    $('.deleted-att').each(function(){
        arrDeleted.push({guid: $(this).attr("data-guid")});
    });
    $('#post-hidden').val(JSON.stringify(arrDeleted));
});

Somewhere in your html:

<form id="post-editor">
    <input type="hidden" id="post-hidden" name="post-hidden" />
    <!-- ... other fields ... -->
 </form>

Then json_decode($_POST['post-hidden']) on the server to get the array.

2
  • That's looks great - does it submit then as an array at all, or just one long string? EDIT: Nevermind - just tried it out, its perfect :)
    – Eamonn
    Jan 16, 2013 at 13:46
  • Yes, technically it sends bytes which have a string in them which has an json-encoded array in it. :) Jan 16, 2013 at 14:30
1

create a hidden field in your form..put the arrDeleted value in your input through jquery and post the form..use json_decode() to get the posted value...

<input  type="hidden" id="hidden"/>

JQUERY

$(document).ready(function() {
   $('#post-editor').submit(function() {
   var arrDeleted = [];    
   $('.deleted-att').each(function(){
    arrDeleted.push({guid: $(this).attr("data-guid")});
  });
   $('#hidden').val(JSON.stringify(arrDeleted));
 });
});
1
  • Thanks bipen, as both answers are essentially the same, I'll accept Emil's as being the first :)
    – Eamonn
    Jan 16, 2013 at 13:49
1

The easiest to do what you want would be to add a hidden input field to your HTML form

Then in jQuery do something like this

$('form').submit(function() {
    $('#hidden_id_field').val( arrDeleted.join(',') );
});

arrDeleted in this case being your array you've already setup. It would sent a comma separated list then in your PHP you split up the values and act as you want.

Usually I just do AJAX and send JSON to my app. But the above approach will work if you really want to go about it like that. And it has the advantage of not actually deleting anything on the server until you submit the form.

1
  • Tried this and it returns [arrDeleted] => Array ( [0] => [object Object],[object Object],[object Object] )...
    – Eamonn
    Jan 16, 2013 at 13:54
0

You may be looking to do this with a traditional form submit and refresh, but if you're willing to submit the request asynchronously, you can use jQuery to submit the form and serialize the array of deleted items:

var form = $('#post-editor');
form.submit(function() {
  var arrDeleted = [];    
  $('.deleted-att').each(function(){
    arrDeleted.push({ // The format $.serializeArray produces.
      name: "deleted",
      value: $(this).attr("data-guid")
    });
  });

  var formData = form.serializeArray();
  // Add values to existing form data
  formData = formData.concat(arrDeleted);

  $.ajax({
    url: form.attr('action'),
    data: formData
    // Other ajax options
  });
});

On the PHP side, referring to $_REQUEST['deleted'] will return an array of GUIDs.

1
  • This is interesting to me - asynchronous submission is where I want to be heading, but am nowhere near proficient enough for it to be dependable for the moment. At least not until I can spell 'asynchronous' without having to think very hard about it :D
    – Eamonn
    Jan 16, 2013 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.