Getting an input from outside the form to submit with it - javascript

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!

Related

Submit form with Javascript then handle with PHP

Not sure how I did this last time or else I wouldnt asking here but here is what I'm trying to do.
I have the usual basic form with a javascript function that will submit the form. Question is that after the form is submitted, I have an if statement in PHP that echos a that the form has been submitted. Any help would be greatly appreciated.
//PHP
if($_POST['submitDelete']){
echo "welcome, You form has been submitted";
}
//HTML
<form id="form_id" action="" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" TYPE="submit">
</form>
<button type="button" onclick="myFunction()">Submit</button>
//JAVASCRIPT
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
I can't seem to trigger the if statement in PHP. I also tried using the form name in the if statement and that didnt work either.
A form element must be told where to submit its data to when the submit event takes place. This is accomplished by setting the action attribute value for the form. Leaving that attribute empty does not implicitly set the form to post back to the current page. So, if you want to have a single page form/form processor, you need the action to be set to the current page file name:
<form action="currentPageFileName.php" method="post">
Next, there's no reason a single page can't have multiple forms on it. In that case you would need multiple submit buttons, each tied to a specific form. For this reason, you can't just drop a submit button anywhere on the page that you like unless you add the form attribute to the button to tie it back to the form it is supposed to trigger the submit for. Also, if you simply place the submit button within the form element it "belongs" to, you don't have to worry about this.
Also, you have some invalid HTML with:
<input type="hidden" name="submitDelete" TYPE="submit">
An element may not have the same attribute repeated within it (the case that you type the attribute in makes no difference since HTML is not case-sensitive). So, that code would wind up simply creating a submit button.
Lastly, if all you want to do with your submit button is cause its related form to be submitted, there is no need for JavaScript at all. That is what submit buttons do by default.
So, in the end, you can get rid of the JavaScript in your code completely and change your HTML to this:
<form id="form_id" action="currentFileName.php" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" value="true">
</form>
<button type="submit" form="form_id">Submit</button>

Submit form method=post with multiple different value=xxx with similar name=x?

I need to retype a bunch of names written on a paper and make a digital copy of it to a computer (a txt file). Then copy/paste each name and submit it again into a website one by one. Type one name then submit, wait until the page reloads, then repeat again. I saved the html file of the website but I don't have access to website's server. I was thinking I could modify the html file I saved so I'll just copy/paste once then click submit once. I'm not sure if it's possible to copy the names from the text file and embed it in the html code or maybe make a code to read the names from the txt file.
Honestly, I don't mind copy and pasting the names one by one into the website. What slows me down is the page reload time and the website only has one input field. It takes a few seconds to reload after submitting one name. So I want to be able to copy paste all then submit it once. I saved a local copy of the html file of the website and added action="website.com/xxxx" so it submits it to the website even if the html file is saved on my computer. The code below is a part of the website's html code:
<form method="post" action="website.com/xxxx">
<input type="text" name="t" style="width:250px">
<button type="submit"><p>Submit<img src="submit.png" style="width:32px;vertical-align:middle"></p></button>
</form>
I was thinking if I could modify it like this:
<form method="post" action="website.com/xxxx">
<input type="text" name="t" style="width:250px" value="jane">
<input type="text" name="t" style="width:250px" value="jenny">
<input type="text" name="t" style="width:250px" value="mark">
<input type="text" name="t" style="width:250px" value="ben">
<input type="text" name="t" style="width:250px" value="cathy">
<button type="submit"><p>Submit<img src="submit.png" style="width:32px;vertical-align:middle"></p></button>
</form>
If you have PHP with HttpRequest installed, you can try something like this
<?php
$url = 'http://website.com/xxxx'; // url of the form action, not the form itself
$names = file('names.txt');
for($names as $name){
$request = new HttpRequest($url, HTTP_METH_POST);
$request->addPostFields(array('t' => trim($name)));
$request->send();
}
If you have PHP but no HttpRequets, you can use cURL, but I have absolutely no idea how it is working.
Other languages should have similar possibilities.

How to not send an input field in a <form>?

Relating to my last question. I have an upload field where the user can choose a picture and this becomes resized (client-side via JavaScript), base64 encoded (JavaScript as well) and sent via a hidden field. I do this in order to save bandwidth of the user (e.g. usage with a 3G connection).
But I don't know how to not send the user upload file <input type="file" name="file" id="file" class="span4"> within the <form> tags. The obvious solution would be to exclude the file upload field from the form but this would kill my layout. Is this possible?
Just delete name="file" attribute.
You can do the following with jQuery to disable your input field:
$('#file').prop('disabled', true);
Altogether you might have this:
// domReady handler
$(function() {
// provide an event for when the form is submitted
$('#myform').submit(function() {
// Find the input with id "file" in the context of
// the form (hence the second "this" parameter) and
// set it to be disabled
$('#file', this).prop('disabled', true);
// return true to allow the form to submit
return true;
});
});
If you can add the attribute "disabled" to the input, it won't be submitted along with the form:
<input type="file" name="file" id="file" class="span4" disabled="disabled">
You can set this attribute in your js-script...
I needed the form and the input to have a name tag so what i have to do was to set a method tag on my form. This way, my inputs can be enabled and have a tag name.
<form name="form" method="post">

Customizing the appearance of a file input in an HTML form

I've been trying to figure out how to customize the appearance of a file input in an HTML form so that the button will match with the rest of the buttons on my site. Looking around here I found a solution that I would expect to work, but it's having some strange behavior.
I took my file input and set display:none, and created a new text input and button within the form.
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()">
<input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(50 characters remaining)</p>
<input type="file" id="ImageFile" name="ImageFile" style="display:none;" />
<input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" />
<button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button>
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(image to represent your entry, jpg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
Make my entry private.
<button id="new-entry-save">save</button>
</form>
Then my javascript to handle the ImageFileButton button being clicked:
function HandleFileButtonClick() {
document.getElementById("ImageFile").click();
document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value;
}
It appears to work fine. I click the button, the window pops up for me to select a file. When I select a file, it appears in the text box.
The weird behavior comes when I hit the save button on the form. I noticed that it has to be clicked twice to actually submit for some reason now. And, when it submits it is no longer posting the file.
So I made the file input visible again to see what was happening. If I use the ImageFileButton button to select a file, the file shows up in the file input. But when save is clicked, the file input clears and the form doesn't submit. You then have to click again to submit, and of course now there is no file.
Anybody know what is happening here?
No, its not possible. File inputs are generally browser dependant. You might have to use JavaScript replacement or Flash replacement like uploadify.
Article: Input File
Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.

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" ... /]

Categories

Resources