I have a page that has a form on it. One of the things I need to include on the page is the ability to upload a file. I am trying to do this by using another form with an in it. When the user selects the file, I want to get the file name and then perform the actual upload. From what I read, I cannot submit a form within a form, because the submit button in the inner form will also submit the outer form. I have tried looking for options and found the following page.
Can I trigger a form submit from a controller?
I thought that if I used this type of directive, then submitted it with the commit, then it should work....my problem is that for some reason when I try to access the form in my controller, it is showing as undefined. I think I need the form so that I can get the file name of the selected file...there may be a different way to achieve this than what I have tried but I haven't found it yet...
The latest controller, directive, and HTML files are below.
Controller:
$scope.uploadIt = function($form) {
console.log($form);
if ($form.$valid) {
$form.commit();
}
};
HTML:
<form editable-form name="editableForm" onaftersave="update" >
<tr>
: other fields here....
</tr>
<tr>
<td>
<form ng-form-commit name='fileForm' action="scripts/upload_file.php" method="post" enctype="multipart/form-data">
<label for="exampleInputFile">File input</label>
<input type="file" id="file" name="file">
<p class="help-block">Upload a file to link it with this project.</p>
<input type="text" name="prgGuid" id="prgGuid" value="{{programId}}" style="display:none;">
<input type="button" ng-click="uploadIt(fileForm)" name="submit" value="Upload File" class="btn btn-default">
</form>
</td>
</tr>
</form>
Directive:
app.directive("ngFormCommit", [function(){
return {
require:"form",
link: function($scope, $el, $attr, $form) {
$form.commit = function() {
$el[0].submit();
};
}
};
}]);
One more this that I will need to do....when the file is actually uploaded, I will actually be changing the file name so it is unique. Once the file is uploaded, I will need to pass back the new file name to my controller so I can store/display it. So I will need the original name the user selected and the new name...my php file will pass it back. I was thinking at first that maybe I could use a $http.post to submit the form and get the information back, but I couldn't get the file name the user selected. I was thinking if I could use the http.post to process the php file, then I wouldn't run into the form inside form, submit issue.
Please can someone tell me the easiest way to accomplish uploading a file with the form inside form constraints I have? I have been trying various things from posts I have seen but on here but I haven't found anything similar....please help. Thanks.
Related
I was doing an application form and the form is not working. When I click the submit button it doesn't even run the if statement to POST the variables.
My form tag looks like this:
<form method="post" enctype="multipart/form-data">
My submit button looks like this:
<button name="submeter" type="submit" class="btn btn-gfort">Submeter</button>
And the if statement in my form looks like this:
if(isset($_POST['submeter'])) {
I even tried to run a JS alert just to see if it actually enters the if statement but it doesn't. No console errors as well.Any help is appreciated
Have you added method="post" to the <form>-tag?
Well your codes looks fine. it seems you are submitting the form using post method on some php file. Please share the complete form element and the codes of the target file that you have defined in the action attribute of form tag.
the submit button sends the data to server and there you can process the data using any server side scripting language. your codes must look something like
<form action="process.php" method = "post">
<!-- your form controls -->`
<button name="submeter" type="submit" class="btn btn-gfort">Submeter</button>
</form>
then create another file on same location where html/php file containing this form is saved with name process.php, in which you can use following codes.
if(isset($_POST['submeter'])) {
// php codes
}
in case you want to subimt the form on the same page. make sure your file is php use action="#" in form tag and place the file of your webserver as you can not run php files directly from your filesystem but you need to run it through your webserver
i use a form in which i get a file from user and submit it with button and take the values to another page with help of post(method). On the other page i have some business to do with that file beside that i have another form on that page. Now i want when submit that form (as it execute the php self script) so i want beside the new values i get that same file again. i try different technique like putting the tmp name in a variable but that doesnot work and even i create another file button in the form of that page but i am unable to give it a value. In short i need idea how to get the file on submittion of that second page form which is send from first page ?
For simplicty let me show you an example so you understand my problem,
//the first page form
<form method="post" enctype="multipart/form-data" action="uploadExcelData">
<label for="csv_file">Upload CSV File</label>
<input type="file" id="csv_file" name="csv_file" />
<input type="submit" name="upload" class="btn btn-primary"
value="upload" />
</form>
//on submit it goes to another page which have this php code and html form
<?php
$file = $_FILES['csv_file']['tmp_name'];
if (isset($_POST['save'])) { // the second form on submit
echo $file; //this show nothing
}
?>
<form method="post" enctype="multipart/form-data">
<input type="submit" name="save" class="btn btn-primary btn-block"
value="Upload" />
</form>
keeping above code in mind i hope somebody will understand the problem and suggest me something but i just summarize my code too much the second form also have many combobox etc and also i tryed to have a second file tag in second form but the problem is i cant even assign the file value to it so that it is selected automatically.
i want to get the file as output which have that shitty excel data!!
As part of a class I've been asked to create a simple file upload system that uploads files in a single button to a folder called ./files. I've been able to do this and I have been able to keep it all contained in one a3.php file with this:
<form action="a3.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload" name="submitFile">
</form>
Which opens up a file dialog and only requires the user to press two buttons
I use the following function to run the upload function.
if(isset($_POST['submitFile']))
{
uploadFile();
}
The uploadFile() function simply uses move_uploaded_file to move to file to the ./files folder. Currently without any questions asked.
My issue is that my attempts to make the buttons for the file upload a single one have been stymied. I have attempted to use the following code to resolve the issue:
<form name="frm" action="a3 - Copy.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" onchange="frm.submit();">
</form>
Which, while it refreshes the page as if an action is being performed, appears to do nothing. I have attempted to look into how exactly .submit() works but haven't gotten any closer to understanding any intricacies it may have while a part of onchange.
I've looked around and I've found code that can upload in a single button, and I've found code that can upload using an internal php function, but none that does both.
You can try using a button but not displaying it. When the file input is changed, using javascript trigger a click on the hidden button, like in the code below:
<form name="frm" action="a3 - Copy.php" method="post" enctype="multipart/form-data">
<input type="submit" name="submitFile" style="display:none" id="submit">
<input type="file" name="uploadFile" onchange="document.getElementById('submit').click()">
</form>
<?php
if(isset($_POST['submitFile']))
{
uploadFile();
}
?>
You're basically looking for an ajax upload. You can do this using javascript (on modern browser), and the easiest thing would probably be using a library like jquery. Otherwise, you can do it using an iframe.
Here are a few similar questions with example scripts-
Using HTML5 file uploads with AJAX and jQuery
jQuery Ajax File Upload
I'm trying to get my form to require certain fields be filled out before the form can be submitted.
I searched and found that the command is supposed to be this simple command
<input type="text" name="name" id="name" placeholder="Name" required />
But for some reason on my form it submits it even when specified fields are not completed.
I even tried creating a brand new file in Dreamweaver with a new form with just a required input item and submit button and tried it in different browsers and it didn't work in Chrome or Safari. I copied it exactly from a YouTube video I found here with no luck http://www.youtube.com/watch?v=M73FroYgkt0
Here is my site so you can examine the code. The form is at the bottom.
http://www.YourFlyersDelivered.com
The problem with your form isn't your html, it is your javascript.
On line 33 of config.js, you have the following line:
jQuery('form .form-button-submit').click(function(e) { e.preventDefault(); jQuery(this).closest('form').submit(); });
This line is preventing the default action of your submit button, bypassing the required attribute on your input element, and submitting the form. If you remove this line, I'm sure it will work.. Examples:
Your current method of form submission: http://jsfiddle.net/Daedalus/2FY9g/ <- does not work
Without the default action prevented: http://jsfiddle.net/Daedalus/2FY9g/1/ <- works
i would use js to validate the entries
a simple validate.js file that contains something like:
function validate username(){
var user = document.getElementsByName("username")[0];
if(user.value == "") return false; }
sorry about the formatting.. im new to this forum and still getting used to it :)
Try this, add runat="server" to form......
<form id="form1" runat="server">
<input id="name" required />
<input type="submit" value="Search" />
</form>
I try to create an upload progress bar with PHP and jQuery. However, I have a problem when I bring it to the form data. The code is similar like this:
<form method="post" action="upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">
Suburb:<input type="text" name="txtSuburb" id="txtSuburb">
Picture:
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="button" name="submit" value="Upload!">
<iframe id="upload-frame" name="upload-frame">
</iframe>
<input type="submit" name="DataSubmit" value="Submit Data"/>
</form>
As you can see, I got 2 submit buttons. If I keep the form like this then the form can't submit data to server. It just submits the file to iFrame. If I change the action and target of the form then the upload progress function will not work.
Could anyone please help me to find the solution for this?
I want the user can click on upload button to upload their file. Then they can take the rest to fill the form. When everything is done, they can click on another submit data button to submit their data (included the file) to the server.
Make sure that you have only one input element of type submit within your form.
If you want the first button to trigger some Javascript, use a regular input element or even a styled link and attach a Javascript event to it's onclick event, then prevent it's default behavior, e.g. by returning false.
Like this only the second button will actually submit your form which should do what you're describing.
In general I'd second #Treffynnon's suggestion to use a existing library for this purpose. These hacks have a tendency to get pretty nasty, especially when it comes to crossbrowser compatibility.