You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by Gordon Hu <go...@gmail.com> on 2005/08/22 23:02:17 UTC
question about Struts html tags and Javascript getElementById
I am having difficulties referencing struts html tags through Javacript.
I am trying to validate 10 file upload boxes to see if the user has at least
uploaded 1 file and also to validate the extension of the file (.jpg).
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles[0]"
accept="image/jpg, image/jpeg"></html:file></tr>
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles[1]"
accept="image/jpg, image/jpeg" ></html:file></tr>
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles[2]"
accept="image/jpg, image/jpeg" ></html:file></tr>
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles[3]"
accept="image/jpg, image/jpeg" ></html:file></tr>
..........and so on
I am trying to set up a Javascript function like the following:
document.form.getElementById("uploadedFiles");
But it does not work.
Any ideas?
Re: question about Struts html tags and Javascript getElementById
Posted by Ross Gibb <ra...@ucalgary.ca>.
According to the docs,
http://struts.apache.org/userGuide/struts-html.html#file, the html:file
tag will render and id tag with the attribute styleId. Also, when I use
getElementById I just call it on the document. So what I think you are
trying to do is so:
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles[0]"
styleId="uploadedFiles1" accept="image/jpg, image/jpeg"></html:file></tr>
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles[1]"
styleId="uploadedFiles2" accept="image/jpg, image/jpeg"></html:file></tr>
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles[2]"
styleId="uploadedFiles3" accept="image/jpg, image/jpeg"></html:file></tr>
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles[3]"
styleId="uploadedFiles4" accept="image/jpg, image/jpeg"></html:file></tr>
In javascript you should be able to get a reference to those nodes by
calling document.getElementById("uploadedFiles1"), for example.
That being said, what I showed you is not the way I would do it. Also,
your property attributes look funny to me. I would do this.
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles"
accept="image/jpg, image/jpeg"></html:file></tr>
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles"
accept="image/jpg, image/jpeg"></html:file></tr>
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles"
accept="image/jpg, image/jpeg"></html:file></tr>
<tr><html:file name="uploadFilesActionForm" property="uploadedFiles"
accept="image/jpg, image/jpeg"></html:file></tr>
(I think you'll want <td></td> surrounding the html:files, I omitted
them for space).
Even without the id attribute you can still easily get a reference to
these nodes in javascript
You could call a javascript function when the form submits, i.e.
<html:submit onclick="return verify(this.form);"/>. In the javascript
you could get the reference to the html:file nodes like so:
function verify(form){
/* this will return an array of the html:file nodes with
property="uploadedFiles" */
var fileInputs = form['uploadedFiles'];
}
Some of my syntax could be wrong, but the jist of it should be correct.
Ross
Gordon Hu wrote:
>I am having difficulties referencing struts html tags through Javacript.
>I am trying to validate 10 file upload boxes to see if the user has at least
>uploaded 1 file and also to validate the extension of the file (.jpg).
> <tr><html:file name="uploadFilesActionForm" property="uploadedFiles[0]"
>accept="image/jpg, image/jpeg"></html:file></tr>
><tr><html:file name="uploadFilesActionForm" property="uploadedFiles[1]"
>accept="image/jpg, image/jpeg" ></html:file></tr>
><tr><html:file name="uploadFilesActionForm" property="uploadedFiles[2]"
>accept="image/jpg, image/jpeg" ></html:file></tr>
><tr><html:file name="uploadFilesActionForm" property="uploadedFiles[3]"
>accept="image/jpg, image/jpeg" ></html:file></tr>
>..........and so on
> I am trying to set up a Javascript function like the following:
> document.form.getElementById("uploadedFiles");
> But it does not work.
>Any ideas?
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: question about Struts html tags and Javascript getElementById
Posted by Sudhaker Raj <su...@gmail.com>.
This works in IE, Hope this helps. Thanks.
<form name="myForm" onsubmit="return checkMe(this);">
<tr><input type="file" name="uploadedFiles[0]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[1]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[2]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[3]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[4]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[5]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[6]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[7]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[8]" accept="image/jpg,
image/jpeg" value=""></tr>
<input type="submit"/>
</form>
<script>
var checkMe = function(thisForm) {
alert(thisForm.elements['uploadedFiles[0]'].value);
return false;
};
</script>
On 8/22/05, Dave Newton <ne...@pingsite.com> wrote:
> Gordon Hu wrote:
>
> ><tr><input type="file" name="uploadedFiles[0]" accept="image/jpg,
> >image/jpeg" value=""></tr>
> >
> >
> I was asking as a subtle hint that there is nothing with an id of
> "uploadedFiles" making your JavaScript not do what you want it to.
>
> >On 8/22/05, Dave Newton <ne...@pingsite.com> wrote:
> >
> >
> >>Gordon Hu wrote:
> >>
> >>
> >>><tr><html:file name="uploadFilesActionForm" property="uploadedFiles[0]"
> >>>accept="image/jpg, image/jpeg"></html:file></tr>
> >>>I am trying to set up a Javascript function like the following:
> >>>document.form.getElementById("uploadedFiles");
> >>>Any ideas?
> >>>
> >>What does the generated file upload HTML look like if you view source?
> >>
> >>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: question about Struts html tags and Javascript getElementById
Posted by Dave Newton <ne...@pingsite.com>.
Gordon Hu wrote:
><tr><input type="file" name="uploadedFiles[0]" accept="image/jpg,
>image/jpeg" value=""></tr>
>
>
I was asking as a subtle hint that there is nothing with an id of
"uploadedFiles" making your JavaScript not do what you want it to.
>On 8/22/05, Dave Newton <ne...@pingsite.com> wrote:
>
>
>>Gordon Hu wrote:
>>
>>
>>><tr><html:file name="uploadFilesActionForm" property="uploadedFiles[0]"
>>>accept="image/jpg, image/jpeg"></html:file></tr>
>>>I am trying to set up a Javascript function like the following:
>>>document.form.getElementById("uploadedFiles");
>>>Any ideas?
>>>
>>What does the generated file upload HTML look like if you view source?
>>
>>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: question about Struts html tags and Javascript getElementById
Posted by Gordon Hu <go...@gmail.com>.
<tr><input type="file" name="uploadedFiles[0]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[1]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[2]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[3]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[4]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[5]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[6]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[7]" accept="image/jpg,
image/jpeg" value=""></tr>
<tr><input type="file" name="uploadedFiles[8]" accept="image/jpg,
image/jpeg" value=""></tr>
On 8/22/05, Dave Newton <ne...@pingsite.com> wrote:
>
> Gordon Hu wrote:
>
> > <tr><html:file name="uploadFilesActionForm" property="uploadedFiles[0]"
> >accept="image/jpg, image/jpeg"></html:file></tr>
> > I am trying to set up a Javascript function like the following:
> > document.form.getElementById("uploadedFiles");
> >Any ideas?
> >
> >
> What does the generated file upload HTML look like if you view source?
>
> Dave
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
Re: question about Struts html tags and Javascript getElementById
Posted by Dave Newton <ne...@pingsite.com>.
Gordon Hu wrote:
> <tr><html:file name="uploadFilesActionForm" property="uploadedFiles[0]"
>accept="image/jpg, image/jpeg"></html:file></tr>
> I am trying to set up a Javascript function like the following:
> document.form.getElementById("uploadedFiles");
>Any ideas?
>
>
What does the generated file upload HTML look like if you view source?
Dave
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org