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.

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

"image-upload.asp?caption=[value of caption field]"

And submit the form.

Can anyone help?

Add an ‘onsubmit’ attribute to your form tag, and set it equal to your submitform() function. Then in the function, do this:


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

Presumably you mean:

document.getElementById("form5").action = "image-upload.asp?caption="+document.getElemetByID("caption").value

Or something?

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.

You seem to have understood what I want really well, but sadly I’m still having a problem:

Here’s my submitform() function

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

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

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:

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.

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:


<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>

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.