SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically set the action of a form.

    Hi

    As a Javascript Noob I'm having a bit of problem writing some javascript that will dynamically update the 'action' of a form when the form is submitted.

    Its for an Image Upload script which performs a binary read on the uploaded image, meaning I have to POST the form, but must pass any additional parameters to the Image Upload script via the querystring.

    Code:
    <form id="form5" name="form5" method="post" enctype="multipart/form-data" >
    Caption:<input name="caption" type="text" id="caption" />  
    File path: <input name="filepath" type="file" id="filepath" style="width: auto;" />
          <input name="Upload" type="submit" class="submit" id="Upload" value="Upload" onclick="submitform()" />
    </form>

    My submitform() function needs to set the action of form5 to :

    Code:
    "image-upload.asp?caption=[value of caption field]"
    And submit the form.

    Can anyone help?
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add an 'onsubmit' attribute to your form tag, and set it equal to your submitform() function. Then in the function, do this:

    Code:
    function submitform() {
      document.getElementById("form5").action = "image-upload.asp?caption=[value of caption field]";
      return true;
    }

  3. #3
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bhawk90 View Post
    Add an 'onsubmit' attribute to your form tag, and set it equal to your submitform() function. Then in the function, do this:

    Code:
    function submitform() {
      document.getElementById("form5").action = "image-upload.asp?caption=[value of caption field]";
      return true;
    }
    Presumably you mean:

    Code:
    document.getElementById("form5").action = "image-upload.asp?caption="+document.getElemetByID("caption").value
    Or something?
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that's what I meant.

    Actually, you only want the image POSTed, right? Because the way it's set up now, since the caption input is part of the form and has a name attribute, the caption will be POSTed along with the image, as well as submitted via the query string because of the JavaScript.

    So you should probably get rid of the name attribute in the caption input, since name attributes are only needed to tell the browser to send that information along to the server-side script specified in the form tag's action attribute. That way, the caption will only be sent in the query string and not in the POST.

  5. #5
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bhawk90 View Post
    Yeah, that's what I meant.

    Actually, you only want the image POSTed, right? Because the way it's set up now, since the caption input is part of the form and has a name attribute, the caption will be POSTed along with the image, as well as submitted via the query string because of the JavaScript.

    So you should probably get rid of the name attribute in the caption input, since name attributes are only needed to tell the browser to send that information along to the server-side script specified in the form tag's action attribute. That way, the caption will only be sent in the query string and not in the POST.
    Thanks will give it a try.
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  6. #6
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bhawk90 View Post
    Yeah, that's what I meant.

    Actually, you only want the image POSTed, right? Because the way it's set up now, since the caption input is part of the form and has a name attribute, the caption will be POSTed along with the image, as well as submitted via the query string because of the JavaScript.

    So you should probably get rid of the name attribute in the caption input, since name attributes are only needed to tell the browser to send that information along to the server-side script specified in the form tag's action attribute. That way, the caption will only be sent in the query string and not in the POST.
    You seem to have understood what I want really well, but sadly I'm still having a problem:

    Here's my submitform() function

    Code:
    <script type="text/javascript" language="javascript">
    function submitform() {
      document.getElementById("form5").action = "image-upload.asp?caption="+document.getElemetByID("caption").value;
      return true;
    }
    
    </script>
    and I have my form set-up as follows:

    Code:
    <form id="form5" name="form5" method="post" enctype="multipart/form-data" action="image-upload.asp" onsubmit="submitform()" >
    But the caption value is still not appended to the the querystring of image-upload.asp after the form is submitted.
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the code you've provided for the submitform() function is a copy and paste from your code, then you're missing an 'n' in the word Element in the call to document.getElementById() that accesses the caption, and the 'D' in 'ID' should be a 'd'.

  8. #8
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bhawk90 View Post
    If the code you've provided for the submitform() function is a copy and paste from your code, then you're missing an 'n' in the word Element in the call to document.getElementById() that accesses the caption, and the 'D' in 'ID' should be a 'd'.

    Yeah sorry I copy-pasted my mis-spelled code from my prev forum post but the actual code I have is:

    Code:
    function submitform() {
      document.getElementById("form5").action = "image-upload.asp?caption="+document.getElementById("caption").value;
      return true;
    }
    And it don't pass the caption value in the querystring

    PS: Glad you mentioned it though, JavaScript case-sensitivity does my head in and you just helped me spot a glitch in another piece of code I was working on.
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Dartmouth, MA, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I see the rest of your HTML then? Because I made a simple test file on my own computer using the code that you've posted and it works for me:

    Code HTML4Strict:
    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript">
    function submitform() {
      document.getElementById("form5").action = "submittest.html?caption="+document.getElementById("caption").value;
      return true;
    }
    </script>
    </head>
    <body>
    <form id="form5" name="form5" method="post" enctype="multipart/form-data" onsubmit="submitform()" action="submittest.html">
    Caption:<input name="caption" type="text" id="caption" />  
    File path: <input name="filepath" type="file" id="filepath" style="width: auto;" />
          <input name="Upload" type="submit" class="submit" id="Upload" value="Upload" onclick="submitform()" />
    </form>
    </body>
    </html>

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Check the Error Console of your browser to see if what you're doing is causing a Javascript error somewhere else, which could prevent that bit from wroking.


Bookmarks

Posting Permissions

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