CODEWITHSUNDEEP
phpjquery
Eamonn
Eamonn

Reputation: 1320

Submit JQuery array alongside PHP form data to PHP script

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
  });
});

Upvotes: 1

Views: 1201

Answers (4)

James van Dyke
James van Dyke

Reputation: 5070

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.

Upvotes: 0

Kansha
Kansha

Reputation: 570

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.

Upvotes: 1

bipen
bipen

Reputation: 36531

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));
 });
});

Upvotes: 1

Emil Ivanov
Emil Ivanov

Reputation: 37633

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.

Upvotes: 2

Related Questions