...

View Full Version : File upload - have to click submit twice before form will submit



DougMck
12-04-2006, 02:18 AM
Hey guys, I have come accross an interesting problem which I hope one of you can provide a work around for or at least explain why it is happening.

A form I am creating for an intranet at work has a 'References' frame where the user can 'Attach' files (and add other Referecnes) to the record.

Because everyone using the form has access to the internal network instead of uploading files they must place the file in a specific place on the network and then use the file upload dialog on the form to select it so we can get and store the path in the DB.

This works fine except for one small thing; after the user has selected the file and clicks the Submit button for the form the form does not submit (and, I have discovered, the file input text box is simply cleared). The user has to click the submit button again before the form will submit.

The file input field is not used directly, it is hidden and a custom text box and browse button are used so that the value of the path can be edited, and because the user must be able to enter other reference numbers in to it.

When the user clicks the custom Browse button it calls the click(); method of the file input causing the open dialog to appear, after the user has made their selection the onChange of the fileinput sets the value of the custom text box to its value.

The text box value, not the file input value, is used after the form is submitted (as we just want to store the path) which is why it works ok after the user clicks the submit button the second time.

I would be nice to have it so that the user does not have to click submit twice, so I was wondering if anyone of you knows why this is happening? and is there a way to fix / work around this annoying little problem?

Note: Have posted the code below.

Cheers :)

brandonH
12-04-2006, 02:33 AM
can we see your source code please?

i want to say try doing an onbeforesubmit for grabbing the value.

DougMck
12-04-2006, 02:52 AM
Here is the source of the page, sorry if it is a little messy as we use mod perl to generate our pages.



<form method="post" action="/perl/dev_incident.pl?action=reference_details&amp;incident_id=33&amp;record_number=" enctype="application/x-www-form-urlencoded" target="helper_frame" name="reference_form">
<br />
<table border="0">
<tr>
<td>Reference Type</td>
<td><select name="reference_type" onchange="{parent.parent.main_frame.references_unsaved = 1; if (reference_type.value == 'AFI') browse.disabled = false; else browse.disabled = true;}">
<option selected="selected" value=""></option>
<option value="AFI">Attached File</option>
<option value="CSC">CSC Call</option>
<option value="CER">Certificate</option>
<option value="ISS">IS SCR</option>
<option value="INR">Incident Report</option>
<option value="OTH">Other</option>
<option value="FIL">Other File</option>
<option value="PTS">PPTS</option>
</select></td></tr>
<tr>
<td>Reference</td>
<td><input type="text" name="reference" size="42" maxlength="150" onchange="parent.parent.main_frame.references_unsaved = 1;" /> &nbsp; <input type="button" name="browse" value="Browse..." onclick="file_path.click();" disabled="1" style="{width: 80}" /></td></tr>
<tr><td /><td>
<table>
<tr>
<td><input type="submit" name="add" value="Add" style="{width: 80}" /></td>
<td>&nbsp;</td>
<td><input type="button" name="update" value="Update" onclick="add_update.value = 'U'; reference_form.submit();" style="{width: 80}" /></td>
<td>&nbsp;</td>
<td><input type="button" name="delete_but" value="Delete" onclick="add_update.value = 'D'; reference_form.submit();" style="{width: 80}" /></td>
<td>&nbsp;</td>
<td><input type="button" name="clear" value="Clear" onclick="location='dev_incident.pl?action=reference_details&amp;incident_id=33';" style="{width: 80}" /></td></tr></table></td></tr>
<tr>
<td>&nbsp;</td></tr>
<tr><td />
<td align="center"><input type="button" name="open_folder" value="Open Attachments Directory" onclick="window.open('file://filer/shared/incident_info/');" style="{width: 222}" /></td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td>
<td align="center">Please read the help file for instructions on attachments.</td></tr></table>

<input name="file_path" type="file" onchange="{reference.value = file_path.value; parent.parent.main_frame.references_unsaved = 1;}" size="10" force="1" style="{visibility: hidden}" />
<input type="hidden" name="add_update" value="A" />
<input type="hidden" name="action" value="add_update_reference" />
<input type="hidden" name="incident_id" value="33" />
<input type="hidden" name="record_number" value="" />
<input type="hidden" name="last_updated" value="" /><div></div></form>


If you want to run the code you will have to take out some of the Jscript as this page is displayed in a multi-frame page.

To see what I mean about how on the first submit the form is not submitted and the fileinput it simply cleared make the fileinput visible.

Also the problem is not grabbing the value because this is safely in the text field, the problem I am trying to overcome is why the user has to click the submit button twice when a file is added as a reference?

Thanks.

Arty Effem
12-04-2006, 03:13 AM
Here is the source of the page, sorry if it is a little messy as we use mod perl to generate our pages.

<input type="hidden" name="action" value="add_update_reference" />

It's not healthy to call a form element 'action'; it's overwriting the action attribute.

brandonH
12-04-2006, 03:23 AM
thank you for posting the source coe, but it is not all of it. i need all source code. or a link to the page so that i can play around with it.

DougMck
12-04-2006, 03:46 AM
Hello again. I can't give you a link to the page because it runs on an internal system, however the following code copied in to a .html file demonstrates the problem.

I have made the file input visible so you can see what happens, normally this is hidden.

Choose 'Attached File' from the list, then click the 'Browse' button (up the top), select a file, then click 'Add' to see what I mean about having to click it twice before the form submits.



<html>
<body>
<form method="post" enctype="application/x-www-form-urlencoded" name="reference_form">
<br />
<table border="0">
<tr>
<td>Reference Type</td>
<td><select name="reference_type" onchange="{if (reference_type.value == 'AFI') browse.disabled = false; else browse.disabled = true;}">
<option selected="selected" value=""></option>
<option value="AFI">Attached File</option>
<option value="CSC">CSC Call</option>
<option value="CER">Certificate</option>
<option value="ISS">IS SCR</option>
<option value="INR">Incident Report</option>
<option value="OTH">Other</option>
<option value="FIL">Other File</option>
<option value="PTS">PPTS</option>
</select></td></tr>
<tr>
<td>Reference</td>
<td><input type="text" name="reference" size="42" maxlength="150"/> &nbsp; <input type="button" name="browse" value="Browse..." onclick="file_path.click();" disabled="1" style="{width: 80}" /></td></tr>
<tr><td /><td>
<table>
<tr>
<td><input type="submit" name="add" value="Add" style="{width: 80}" /></td>
<td>&nbsp;</td>
<td><input type="button" name="update" value="Update" onclick="add_update.value = 'U'; reference_form.submit();" style="{width: 80}" /></td>
<td>&nbsp;</td>
<td><input type="button" name="delete_but" value="Delete" onclick="add_update.value = 'D'; reference_form.submit();" style="{width: 80}" /></td>
<td>&nbsp;</td>
<td><input type="button" name="clear" value="Clear" onclick="" style="{width: 80}" /></td></tr></table></td></tr>
<tr>
<td>&nbsp;</td></tr>
<tr><td />
<td align="center"><input type="button" name="open_folder" value="Open Attachments Directory" onclick="window.open('file://filer/shared/incident_info/');" style="{width: 222}" /></td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td>
<td align="center">Please read the help file for instructions on attachments.</td></tr></table>

<input name="file_path" type="file" onchange="{reference.value = file_path.value;}" size="10" force="1" />
<input type="hidden" name="add_update" value="A" />
<input type="hidden" name="action" value="add_update_reference" />
<input type="hidden" name="incident_id" value="33" />
<input type="hidden" name="record_number" value="" />
<input type="hidden" name="last_updated" value="" /><div></div></form>
</body>
</html>


I might try changing the name of the hidden action input to make sure this is not interfering with things.

Thanks again for you help.

brandonH
12-04-2006, 04:11 AM
i dont know why it is doing that, but i do know that if you take out your custom file upload, it works just fine. take out the onchange on the actual file input as well. may i ask why you dont want to use the real one?

Ancora
12-04-2006, 06:47 PM
DougMck:


enctype="application/x-www-form-urlencoded

You don't need to encode a form, it's already a form. That code is used in AJAX to encode a POST string.

You shouldn't use tables for layout. Use CSS.
You shouldn't put divs inside a form. Nothing should be inside a form except form elements and labels.

Your form code is missing the <fieldset> and <legend> tags.

Unless your DOCTYPE is xhtml, do not use /> to close button and other input type tags, just use >

And I don't understand why you are copying the file upload value to another text box, and why you have two browse buttons.

Your form isn't working probably because its structure is non-standard.

DougMck
12-06-2006, 09:55 PM
You don't need to encode a form, it's already a form. That code is used in AJAX to encode a POST string.

You shouldn't use tables for layout. Use CSS.
You shouldn't put divs inside a form. Nothing should be inside a form except form elements and labels.

Your form code is missing the <fieldset> and <legend> tags.

Unless your DOCTYPE is xhtml, do not use /> to close button and other input type tags, just use >


As I explained in my second post we use ModPerl to generate our pages - we don't write HTML directly so that is why the output is as it is.



And I don't understand why you are copying the file upload value to another text box, and why you have two browse buttons.


The reasons why the file upload value is being copied to another text box (also explained in earlier posts) is so that the value can be edited by the user and set programatically. As a security feature the value of a file upload cannot be set in code or by Javascript, so this known work-around must be used instead.

The reason that there are two browse buttons is because the lower browse button is part of the file upload and is also hidden when the file upload is hidden which you would have realised had you bothered to read my posts insead of ranting on about how the HTML code is not up to the latest standards.

I don't think the code being 'non-standard' has anything to do with it because I have made most of the changes you suggested to the demo page and the same thing still happens.

It appears to be something to do with the file input browse button being clicked programatically because if it is clicked directly (which will not normally happen because it is hidden) then the form submits on the first click of the Add button.

Anyone else have any ideas?

DougMck
12-12-2006, 01:13 AM
Any ideas would be great.

dkerr88
03-07-2007, 07:34 AM
Hi there DougMck

did you manage to find a solution to your problem ? I'm getting exactly the same thing - programatically forcing the file browse button to define the file to be uploaded then causes the file input field to go blank when the submit button is pressed

any progress ?

thanks in advance

Damien - Sydney

DougMck
05-08-2007, 02:01 AM
G'Day.

No I have not come accross a solution to this. I basically stopped looking because I had to move on to the next projectand have been busy ever since.

The web form has been online for some months now and none of the users have complained about it - they probably just think that they did not click the button the first time.

Still, it would be good to find a solution to this, and I might have time after August to do some updates to this program so will look in to it again then.

If I do find/figure out the solution I will post it here.

If you or anyone else finds out / knows the answer it would be great if you could post it here.

Cheers,
DouG.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum