Sending input array with jQuery and Ajax

Question

I am trying to send a form field array through my form but am unsuccessfull :-/

I have a hidden field, generated from jQuery, looking like this:

$(".imghidden").html('<input type="hidden" name="pimage[]"  value="'+data.imgname+'">');

This is generated for each file uploaded to this post. When I then submit the form I do not get anything through the "pimage" form submission. All other fields return a value?!? Below is the jQuery Ajax I am trying to use:

var $form = $( this ),
    category = $form.find( "select[name='category']" ).val(),
    newcategory = $form.find( "input[name='newcategory']" ).val(),
    title = $form.find( "input[name='title']" ).val(),
    subtitle = $form.find( "input[name='subtitle']" ).val(),
    content = $form.find( "textarea[name='content']" ).val(),
    pimage = $form.find( "input[name='pimage']" ).val()

// Send the data using post
var posting = $.post( "data/mod/projects.php", { createnew: true, cat: category, newcat: newcategory, ti: title, sti: subtitle, con: content, pimg: pimage  });

What am I doing wrong. Any help is appreciated.

Thanks in advance :-)

Is the .imghidden element that you append the hidden element to within the $form? If you do console.log($form.find("input[name='pimage']").length) what value do you get? — Rory McCrossan
– Rory McCrossan, Commented Mar 7, 2015 at 11:27
You would have better to serialize the FORM instead of building FORM data manually: api.jquery.com/serialize — A. Wolff
– A. Wolff, Commented Mar 7, 2015 at 11:30

Edd Turtle · Accepted Answer · 2015-03-07 11:29:02Z

5

Your jQuery selector is looking for an input with name pimage... which doesn't exist. I haven't tested it, but it looks like your jQuery selector should be looking for pimage[] instead.

e.g.

pimage = $form.find( "input[name='pimage[]']" ).val()

answered Mar 7, 2015 at 11:29

Edd Turtle

1,5311 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ManoCarayannis Over a year ago

Great answer, thank you. I also found helpful to use the :checked pseudo-selector to get the checked values. E.g. pimage = $form.find( "input[name='pimage[]']:checked" ); To get an array of checked values: var pimages = $('input[name="pimage[]"]:checked').map(function(){ return this.value; }).get();

lshettyl · Accepted Answer · 2015-03-07 11:30:52Z

0

You are trying to find a selector that doesn't exist. Try

$form.find( "input[name^='pimage']" ).val()

answered Mar 7, 2015 at 11:30

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

Sending input array with jQuery and Ajax

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related