CODEWITHSUNDEEP
javascriptjquery
Ben
Ben

Reputation: 2564

Place JavaScript's variable into input type hidden

I have a form can let user upload image and drag image's position where user like.

I use jQuery find out the position.

var top=parseFloat($("#preview_image").css('top'));
var left=parseFloat($("#preview_image").css('left'));

<form action='image.php' method='post' enctype="multipart/form-data">
<input type='file'>
<input type='submit'>
</form>

Than I post the form in normal way, not use jQuery post. (because I have $_FILES[])

Here is the problem. How can I post var top, .left from JavaScript?

Is any way to put these 2 variable into input type hidden?

<input type='hidden' value='top'>

So I can post these 2 data to next page

Upvotes: 0

Views: 88

Answers (4)

Deepak Biswal
Deepak Biswal

Reputation: 4320

Put this codes in your document.ready and it will work:

$('form').append($('<input type="hidden" name="top"').val(top),$('<input type="hidden" name="left"').val(left));

Upvotes: 0

federicot
federicot

Reputation: 12341

This would be the easiest way. Create the inputs, assign their respective values and names and append them to the form.

var top = parseFloat($('#preview_image').css('top')),
    left = parseFloat($('#preview_image').css('left'));

$('<input>').attr({
    type: 'hidden',
    value: top,
    name: 'top'
}).appendTo('form');

$('<input>').attr({
    type: 'hidden',
    value: left,
    name: 'left'
}).appendTo('form');

Upvotes: 0

Trevor Dixon
Trevor Dixon

Reputation: 24382

$('form').append(
  $('<input type="hidden" name="top"').val(top),
  $('<input type="hidden" name="left"').val(left)
)

Upvotes: 1

user405398
user405398

Reputation:

Try something like this:

var top=parseFloat($("#preview_image").css('top'));
var left=parseFloat($("#preview_image").css('left'));

$('#preview_image_top').val(top);
$('#preview_image_left').val(left);

<form action='image.php' method='post' enctype="multipart/form-data">
<input type='file'>
<input type='hidden' value='' name='preview_image_top' id='preview_image_top'>
<input type='hidden' value='' name='preview_image_left' id='preview_image_left'>
<input type='submit'>
</form>

Upvotes: 1

Related Questions