Does this possible without javascript ?

A

Asterbing

Hi all,

Don't know where to ask my question because the way to go is included in
the possible answer itself by nature... You'll understand better below :

Well, I have an HTML page containing a form in which an options group
provides two ways to submit content of a file :

- 1st way : base64 data in a textarea field.
- 2nd way : path to local file in a file field

So, to achieve this, when user click on a checkbox of this option group,
a javascript code manages to create and remove appropriated form fields.
And this works well until now.

Here is a test page showing this switching :
--------------------------------------------
http://yohannl.tripod.com/file_form_switcher/file_form_switcher.htm

And here is the source of the page :
------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function addrem(id,op)
{
var area = document.getElementById('ftest');
var elt;

if (op == 1){ // add field
if (id == "base64"){
elt = document.createElement('textarea');
elt.cols = "60";
elt.rows = "10";
elt.value = "(paste Base64 data here)";}
else {
elt = document.createElement('input');
elt.type = "file";}
elt.id = id;
elt.name = "file";
area.appendChild(elt);}
else { // remove field
elt = document.getElementById(id);
if (elt != null){
area.removeChild(elt);}}
}
</script>
</head>
<body>
<h3>File Form Switcher</h3>
<input type="submit" value="Submit">
<form id="ftest" action="/bin/engine.pl" method="post"
enctype="multipart/form-data">
<input type="radio" name="file" value="0" onclick="addrem
('local',0);addrem('base64',1);"> Base64 Data<br>
<input type="radio" name="file" value="1" onclick="addrem
('base64',0);addrem('local',1);"> Local Path<br><br>
</form>
</body>
</html>

So, my question is :
--------------------
Is there a way to achieve this same objective without any javascript
code (for browsers with disabled javascript support of course) ?

Knowing the two ways shouldn't be available in the same time (to avoid
user pastes a base64 data in first field AND indicates a local file path
in the second one, both) : one or another according to user choice using
option checkboxes.

Do you have an idea ?
 
S

Skye Shaw!@#$

Well, I have an HTML page containing a form in which an options group
provides two ways to submit content of a file :

- 1st way : base64 data in a textarea field.
- 2nd way : path to local file in a file field

So, to achieve this, when user click on a checkbox of this option group,
a javascript code manages to create and remove appropriated form fields.
And this works well until now.

So, my question is :

I like your attitude
Do you have an idea ?

Fall back to the file input field for non-js enabled browsers.
When js is enabled, write out the required parts in a script block
with document.writeln()

<script type="text/javascript">
document.writeln('<input type="radio" name="file" value="0"
onclick="addrem(\'local\',0);addrem(\'base64\',1);">Base64 Data<br>');
//....
</script>
<noscript>
<input type="file" id="some-data"/>
</noscript>
 
A

Asterbing

Fall back to the file input field for non-js enabled browsers.
When js is enabled, write out the required parts in a script block
with document.writeln()

<script type="text/javascript">
document.writeln('<input type="radio" name="file" value="0"
onclick="addrem(\'local\',0);addrem(\'base64\',1);">Base64 Data<br>');
//....
</script>
<noscript>
<input type="file" id="some-data"/>
</noscript>

Hum, thanks Skye, but it means user w/o javascript will have no choice
between base64 and file submitting...

Is there any way to preserve the choice even w/o javascript ?

Maybe something going through CSS ? Don't know...
 
T

Tim B

Asterbing said:
Hi all,

Don't know where to ask my question because the way to go is included in
the possible answer itself by nature... You'll understand better below :

Well, I have an HTML page containing a form in which an options group
provides two ways to submit content of a file :

- 1st way : base64 data in a textarea field.
- 2nd way : path to local file in a file field

So, to achieve this, when user click on a checkbox of this option group,
a javascript code manages to create and remove appropriated form fields.
And this works well until now.

Not for me. I get a js error from this page. Also, when I click more than
once in a row on either
radio button, I get multiple testfields or file inputs.
 
A

Asterbing

Not for me. I get a js error from this page. Also, when I click more than
once in a row on either
radio button, I get multiple testfields or file inputs.

OK, but this test page is just a piece extracted from the real page
which has been well tested under IE, Netscape, FireFox, Mozilla and
Opera for Windows. So, I'll check against the real page if I get any
error if you tell me what's your own context : what browser ? what
version ? what operating system do you use ?

Also, do you have an idea for the question of this topic : how to
achieve the same without javascript ?
 
A

Asterbing

Also, when I click more than
once in a row on either
radio button, I get multiple testfields or file inputs.

Corrected. Below is new javascript code (updated in online test page
too). However, the question remains the same :

How to do this same choice without javascript ?

--
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function addrem(id,op)
{
var area = document.getElementById('ftest');
var elt = document.getElementById(id);

if (op == 1){ // add field
if (elt != null){
return;}
if (id == "base64"){
elt = document.createElement('textarea');
elt.cols = "60";
elt.rows = "10";
elt.value = "(paste Base64 data here)";}
else {
elt = document.createElement('input');
elt.type = "file";}
elt.id = id;
elt.name = "file";
area.appendChild(elt);}
else { // remove field
if (elt != null){
area.removeChild(elt);}}
}
</script>
</head>
<body>
<h3>File Form Switcher</h3>
<input type="submit" value="Submit">
<form id="ftest" action="/bin/engine.pl" method="post"
enctype="multipart/form-data">
<input type="radio" name="file" value="0" onclick="addrem
('local',0);addrem('base64',1);"> Base64 Data<br>
<input type="radio" name="file" value="1" onclick="addrem
('base64',0);addrem('local',1);"> Local Path<br><br>
</form>
</body>
</html>
--
 
T

Tim B

Asterbing said:
Corrected. Below is new javascript code (updated in online test page
too). However, the question remains the same :

How to do this same choice without javascript ?


I think you would need to display both the textfield and the file input when
the user has not enabled javascript. Preventing a user from submitting both
would not be possible; you would need to inform the user that one and only
one method can be used at a time, and do server side validation to enforce
that rule.
 
S

Skye Shaw!@#$

Hum, thanksSkye, but it means user w/o javascript will have no choice
between base64 and file submitting...

Is there any way to preserve the choice even w/o javascript ?

In the cases where there is no js, just show both options/radio
buttons.
Although if there is no js, you wont be able to base64 encode the
text.

That aside, If you really, really, want to show just one at a time,
use the noscript/javascript element technique
to generate a form with, say, the file upload field, and a submit
button that will submit the form to the server so it can generate the
alternate upload form, if the user wants to use that method.

As for CSS, maybe some hover, display:block type tactics will work.
 
A

Asterbing

I think you would need to display both the textfield and the file input when
the user has not enabled javascript. Preventing a user from submitting both
would not be possible; you would need to inform the user that one and only
one method can be used at a time, and do server side validation to enforce
that rule.

Yes, it's what I suspected and the reason why of my question here... In
case someone else would has another way in mind... My problem is that
I'm not the one in charge of the server-side, but I have to adjust
things on client-side :-(
 
A

Asterbing

In the cases where there is no js, just show both options/radio
buttons.
Although if there is no js, you wont be able to base64 encode the
text.

Oh, no, don't worry about this, this base64 field is provided because in
the framework this form arrives, user may have directly a base64 data
block to paste in my textarea field ; not any encoding to do by code
here.
That aside, If you really, really, want to show just one at a time,
use the noscript/javascript element technique
to generate a form with, say, the file upload field, and a submit
button that will submit the form to the server so it can generate the
alternate upload form, if the user wants to use that method.

Good idea, maybe ! I keep it in mind ! Also, It push me another idea :
just provide two forms on screen ; so, even if user fill-in bot textarea
and file field, there will be not in the same form...
As for CSS, maybe some hover, display:block type tactics will work.

A little bit more confuse for me, but I've posted my question in
comp.infosystems.www.authoring.html : maybe some idea will come using
this way.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,774
Messages
2,569,596
Members
45,143
Latest member
SterlingLa
Top