dcsimg


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 3 of 3

Thread: submit button vs this.form.submit()

  1. #1
    Join Date
    Oct 2008
    Posts
    1

    submit button vs this.form.submit()

    Hello all,

    I have a question I think may be more just javascript than ajax but here goes

    I have a from setup like this
    Code:
    <html>
    <head>
    	<script language="javascript" type="text/javascript">
            function myfunction() {
            alert("my function has been called");
            }
    	</script>
    </head>                                                         
    <body>
    
    <form action="upload_file.php" method="post" id="file_upload" name="file_upload" enctype="multipart/form-data" onsubmit="myfunction()"> 
    	<input type="file" name="attachment" id="attachment" onchange="this.form.submit()" />
    </form>
    
    </body>
    </html>
    however "myfunction" never gets called

    but... if i change the form to this

    Code:
    <html>
    <head>
    	<script language="javascript" type="text/javascript">
            function myfunction() {
            alert("my function has been called");
            }
    	</script>
    </head>                                                         
    <body>
    
    <form action="upload_file.php" method="post" id="file_upload" name="file_upload" enctype="multipart/form-data" onsubmit="myfunction()"> 
    	<input type="file" name="attachment" id="attachment" onchange="this.form.submit.click()" />
    <input type="submit"  name="submit" value="Submit" style="display: none;" />
    </form>
    
    </body>
    </html>
    it calls "myfunction" and I get to see my alert yay! only I don't want to have a hidden button...

    should they both accomplish the same thing ?

    any help would be greatly appreciated..

    mm

  2. #2
    Join Date
    Oct 2005
    Location
    Maady
    Posts
    1,819
    solution #1:
    call the function before submission:
    Code:
    <form action="upload_file.php" method="post" id="file_upload" name="file_upload" enctype="multipart/form-data"> 
    	<input type="file" name="attachment" id="attachment" onchange="myfunction();this.form.submit()" />
    </form>
    solution #2: [more proffesional]
    submit the form inside the function itself, you can even pass the "this" object as parameter to the function...
    Programmer&Cracker CS
    MyBlog:Blog.Amahdy.com
    MyWebsite:www.Amahdy.com

  3. #3
    Join Date
    Mar 2007
    Location
    Bangalore, India
    Posts
    247
    Quote Originally Posted by Amahdy
    you can even pass the "this" object as parameter to the function...
    You can call the function on behalf of "this" like so...
    Code:
    myfunction.call(this);
    The documentation of submit() method says that it won't call the event handler. See here. You will have to call it explicitly like Amahdy said, or, create a (hidden) submit button, and call the click() method of that button, like so:
    Code:
    <form action="upload_file.php" method="post" id="file_upload" name="file_upload" enctype="multipart/form-data" 
    
    onsubmit="myfunction();"> 
    	<input type="file" name="attachment" id="attachment" onchange="document.getElementById('su').click();" />
    <input type="submit" id="su" style="display:none;">
    </form>
    This is good if you want to show a submit button (then you'd remove display:none), but don't require the user to actually click it (but still enable users with JavaScript disabled to use it by clicking).

Similar Threads

  1. Pseudocode Problem
    By zobi316 in forum VB Classic
    Replies: 3
    Last Post: 03-10-2008, 07:05 AM
  2. Replies: 0
    Last Post: 06-04-2007, 07:43 AM
  3. button for submit is not working, why?
    By neomax() in forum ASP.NET
    Replies: 2
    Last Post: 07-03-2006, 10:29 AM
  4. Replies: 2
    Last Post: 04-28-2005, 09:31 AM
  5. submit form & open page with 1 button
    By Gregg in forum Architecture and Design
    Replies: 1
    Last Post: 05-17-2001, 11:44 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center