locked
How to block Postback on Form Submit RRS feed

  • Question

  • User-72198832 posted

    I have code as shown below that works properly when placed in an HTML form.

    There are two buttons - one to browse for picture to upload and another to SUBMIT form for upload.
    Browse and Submit work properly.

    When I put same code it in an ASP.NET web page the SUBMIT causes postback and refreshes the form causing image captured by Browse Button to be lost.
    I then get message "No File Selected"

    How do I prevent postback when clicking Submit button?

    Help is appreciated.

    Lee

               <form enctype="multipart/form-data" action="savetofile.aspx" method="post">
                     <input runat="server" type="hidden" name="MAX_FILE_SIZE" value="100000" />
                     <input runat="server" ID="serialNum" name="serialNum" value="000001000" type="hidden"/>
                     Choose a file to upload: <input name="uploadedfile" type="file" style="width: 305px" />
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="submit"  value="Upload File" />
                    <br />&nbsp;
    
                 </form>          
    

    Thursday, February 15, 2018 6:59 AM

All replies

  • User475983607 posted

    Use a button element rather than a submit. 

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

    Thursday, February 15, 2018 12:00 PM
  • User-72198832 posted

    <button type="submit">Upload</Button>

    and

    <button>Upload</button>

    Both cause postback - still have same problem - need to prevent postback on button click.

    Thursday, February 15, 2018 2:25 PM
  • User475983607 posted

    <button type="submit">Upload</Button>

    and

    <button>Upload</button>

    Both cause postback - still have same problem - need to prevent postback on button click.

    Read the docs...

    Here is 4 ways to stop the post...

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebFormsDemo._default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Default</title>
    
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <script src="Scripts/jquery-ui-1.12.1.js"></script>
        <script type="text/javascript">
    
            $(function ()
            {
                $('#button1').click(function () {
                    console.log($(this).val());
                });
    
                $('#button2').click(function (e) {
                    e.preventDefault();
                    console.log($(this).val());
                });
    
                $('#button4').click(function () {
                    return false;
                });
                
            });
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <input id="button1" type="button" value="Click me"/>
    
            <button id="button2" type="submit">Upload</button>
    
            <button name="button3" onclick="return false">Click me</button>
    
            <input id="button4" type="submit" value="Submit"/>
        </form>
    </body>
    </html>
    
    
    
    

    Thursday, February 15, 2018 3:00 PM
  • User-72198832 posted

    mgebhard:

    your code suggestions do stop the postback but do not solve my problem.

    Postback is stopped but form submit does not occur. 

    I need form submit to happen before page is reloaded

    the <input name="uploadedfile" type="file /> command in my form captures an image but on return from postback the captured image is lost before the form can be posted.

    Need <input id"button4" type="submit" value="Upload" /> to cause form be posted without postback

    What am I missing here?

    Lee

    Thursday, February 15, 2018 4:02 PM
  • User475983607 posted

    Postback is stopped but form submit does not occur. 

    A postback and form submit are the same thing.  They are both an HTTP POST.

    I need form submit to happen before page is reloaded

    That's how the web fundamentally works.  The browser sends a request, the server sends a response, and the browser refreshes the page with the new content.

    the <input name="uploadedfile" type="file /> command in my form captures an image but on return from postback the captured image is lost before the form can be posted.

    Need <input id"button4" type="submit" value="Upload" /> to cause form be posted without postback

    What am I missing here?

    Maybe explain what you are trying to do at a high level.  Capturing an image with a JavaScript API?

    Thursday, February 15, 2018 4:27 PM
  • User-72198832 posted

    mgebhard:

    I appreciate your patience with me and this issue.

    Let's go back to square 1.

    The form code I show works properly in a html page.  It allows me to select a photo and when form is submitted, image is uploaded to "savetofile.aspx".

    When same code placed on ASPX page Im able to select photo but it's lost upon clicking submit - error msg "no file selected"

    as you said, post and postback are same.  I can breakpoint on formload and I do get there after clicking upload.  At that point my image is still available.  As soon as I finish the Form Load sub and return to my ASPX, the "no file selected" message appears.  This leads me to believe that reloading form after postback resets form.

    How do I make this work so that submit will post image to "savetofile.aspx" ?

    Lee

    Thursday, February 15, 2018 5:17 PM
  • User475983607 posted

    The best I can guess the current aspx page is not savetofile.aspx and you want to submit to the savetofile.aspx.

    <asp:Button ID="Button3" runat="server" Text="Button" PostBackUrl="savetofile.aspx" />

     

    trims30

    As soon as I finish the Form Load sub and return to my ASPX, the "no file selected" message appears... This leads me to believe that reloading form after postback resets form.

    Right, that's how web page fundamentally work.

    Thursday, February 15, 2018 6:08 PM
  • User-72198832 posted

    That does do postback to savetofile.aspx but nothing is transferred from form containing Button3.

    No Image("uploadedfile"), "max_file_size" field or "SerialNum" field.

    how do we get the fields between <form> and </form> posted to savetofile.aspx

    Thursday, February 15, 2018 8:09 PM
  • User475983607 posted

    TRIMS30

    That does do postback to savetofile.aspx but nothing is transferred from form containing Button3.

    No Image("uploadedfile"), "max_file_size" field or "SerialNum" field.

    how do we get the fields between <form> and </form> posted to savetofile.aspx

    All inputs within a form element are submitted to the savetofile.aspx page.   Again, this is a fundamental concept.  The fields can be found in the Request collection.  Use the Visual Studio debugger to view the Request contents.  You can also see the fields and values in the browser's developer tools (F12). 

    Request["fieldName"]

    In ASP Web Forms posting to another page is called Cross-Posting which is explained in the ASP docs.

    https://msdn.microsoft.com/en-us/library/ms178139.aspx

    However, I suggest that you do a postback to the current web page as that's the ASP Web Forms convention - postbacks.  You can always invoke a Response.Redirect("~/somepage.aspx) to a confirmation page if needed.

    https://msdn.microsoft.com/en-us/library/aa479405.aspx

    Thursday, February 15, 2018 8:36 PM