Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2005
    Location
    New Zealand
    Posts
    76
    Thanks
    0
    Thanked 6 Times in 6 Posts

    Question File upload - have to click submit twice before form will submit

    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
    Last edited by DougMck; 12-04-2006 at 03:04 AM. Reason: Note about Code added below

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    can we see your source code please?

    i want to say try doing an onbeforesubmit for grabbing the value.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    May 2005
    Location
    New Zealand
    Posts
    76
    Thanks
    0
    Thanked 6 Times in 6 Posts

    Source

    Here is the source of the page, sorry if it is a little messy as we use mod perl to generate our pages.

    Code:
    <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.
    Last edited by DougMck; 12-04-2006 at 03:01 AM. Reason: Added some supporting comments

  • #4
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by DougMck View Post
    Here is the source of the page, sorry if it is a little messy as we use mod perl to generate our pages.
    Code:
    <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.

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #6
    New Coder
    Join Date
    May 2005
    Location
    New Zealand
    Posts
    76
    Thanks
    0
    Thanked 6 Times in 6 Posts

    test Page

    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.

    Code:
    <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.

  • #7
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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?
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #8
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    DougMck:
    Code:
    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.

  • #9
    New Coder
    Join Date
    May 2005
    Location
    New Zealand
    Posts
    76
    Thanks
    0
    Thanked 6 Times in 6 Posts

    In response to Ancora's post

    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?

  • #10
    New Coder
    Join Date
    May 2005
    Location
    New Zealand
    Posts
    76
    Thanks
    0
    Thanked 6 Times in 6 Posts

    Still have this problem

    Any ideas would be great.

  • #11
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #12
    New Coder
    Join Date
    May 2005
    Location
    New Zealand
    Posts
    76
    Thanks
    0
    Thanked 6 Times in 6 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •