Develop Reference

Setting hidden input value to a blob to be subbmited using form method

I'm trying to submit a form with a blob appended to one of the hidden input tags like so.
<form method="POST" action="api/save/image">
<input id="p_id" type="hidden" name="p_id" value=""/>
<input id="image" type="hidden" name="image" value=""/>
<button type="submit">Save Photo</button>
</form>
And my Javascript looks something like this.
$(document).ready(function(){
$('#p_id').val("444666"); //set hidden input
var croppedPhoto = $('#crop_stage').cropper('getCroppedCanvas');
croppedPhoto.toBlob(function (blob) {
$('#image').val(blob); //set blob to form hidden input
}
});
My issue is that I am unable to submit this because the blob isn't getting saved to the hidden field, instead it's the value [object Blob].
How do I append my blob so it can be submitted to the server?
Also please note that I am not able to use formData(); since I have to support IE8/IE9.
Thank you for your help.

Getting an input from outside the form to submit with it

Okay, so I have an input
<input class="r" type="file" accept="image/*" id="work" capture="camera" name="Picture">
Later in the document i have a form
<form action="enterforms.php" method="post" onSubmit="return validate()">
which contains a hidden input
<input id="pic" type="file" name="Picture">
i need a way of either submitting the orginal input with the form or copying the first form into the second.
Some observations:
neither clone nor moving the original input will make it maintain the value of the file in the form
I can get a "URL" of the file that will work as a src tag for an image
I can't move input into the form because they're on separate pages in this pretty complex structure.
Basically, submitting the image is creates the form, but it pushes the input away from the user. (Its actually more complex but really hard to explain, if I need to I can go more into detail)
Thanks for any help!

How to remove/enhance/change the form submit data using standard submit event and jquery, before the actual submit happens?

Is it possible to extract data from a form, say:
<form action="/search/search" data-remote="true" data-type="json" id="search_form" method="get">
<div class="input-group">
<span class="input-group-addon">
<input name="search[req][text][e]" type="hidden" value="false">
<input id="search_req_text_e" name="search[req][text][e]" type="checkbox" value="true">
</span>
<input id="search_req_text_v" name="search[req][text][v]" type="text" value="">
</div>
<button id="fire_search" type="submit">Search</button>
</form>
I thought about jQuery's .submit() method. But how to extract and change the url from the event?
$('#search_flickr_panel_body form').submit(function(e) {
console.log(e)
}
I don't see in Chrome DevTools any url in the printed event object
I would like to remove the text fields which are unchecked.
Maybe .attr('disabled', 'true') would be a variant for remove, but how to change the data, without change it in the text field, only in submit url?
Update:
I have over 100 such input fields in the form, so to just send all of them even if only one is checked is not so nice (too much useless data making the communication overhead)
Update2:
I want not only be able to remove the unchecked data from the submit data, but also be able to change this data before submit(e.g. add a prefix to the values, add new parameters), so that I can effect the resulted url (with data).

This will disable all the text fields that have associated checkboxes unticked...
$(function() {
$('#search_form').submit(function(e) {
e.preventDefault();
$(".input-group").each(function() {
$(this).find("input:text").prop("disabled", !$(this).find("input:checkbox")[0].checked);
});
this.submit();
$(".input-group input:text").prop("disabled", false);
}
});
The disabled ones should not be submitted with the rest of the form.

HTML: Copy form fields to another form including FILE input field?

I came to see that form file input field value cannot be set with javascript for security reasons.
I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?
UPDATE: my code:
function prepareUpload( filevalue ){
document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}
<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />
<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
<p><input type="hidden" name="logo" id="logo" /></p>
</form>
Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?

Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:
Can’t get the complete address while uploading a file
How to get the file path from HTML input form in Firefox 3
UPDATE:
The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file"> representation.
Further to the update, I assume you meant something like this:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="file" id="hidden_file" value="" />
<input type="submit" />
</form>
Unfortunately the above does not work. Firefox will return "Security error code: 1000" if you try the above example.
As for some workarounds, you may want to the check David Dorward's suggestions:
Using cloneNode
Moving the input field with appendChild before submitting the form

You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.

I haven't tested this in depth, but it appears to work in Firefox.
Use cloneNode
var copy = file_input.cloneNode(1);
form2.appendChild(copy);

Very much similar to cloneNode except in jQuery
In an xulrunner browser (like firefox) I have successfully used something like the following:
$('input:file').clone().appendTo($('#mainform'));
This should copy all file input objects into the form with id=mainform.
Avoid using the id attribute in the objects to be cloned. id's should always be unique.

I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]

How to cancel edit/disable cached input (of type text) value?

I have an input of type text, from which I have already entered value 1234
it has been saved in cache as shown below.
The problem here is that, it is extremely frustrating to select the textbox in the next row.
Is there a way to not to display that 12334 (highlighted in the screenshot) from ever being displayed through HTML markup or javascript?

As #John pointed out, on modern browsers you can use the HTML5 valid autocomplete attribute, in your screenshot I see many textboxes, if you want to disable autocompletion on the whole form you can set this attribute directly at the form element:
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.action">
[...]
</form>
More info:
How to Turn Off Form Autocompletion

<input type="text" name="input" autocomplete="off" />

To apply this to all input controls, write the code below (using jQuery):
$(document).ready(function () {
$('input[type=text], input[type=password]').attr('autocomplete', 'off');
});