mixing id s and names ???

@DaveinLondonJun 06.2006

Is it ok to mix doc.getElementById stmts
with document.main_fm.upLoad1.value stmts im the same form. ?

This is what I am trying to do below but my onclick cmd doesn’t change the contents of the browse box (it should clear it).

[CODE]<form name=”main_fm” enctype =”multipart/form-data” action=”a_picts.php” method=”POST”> <input type = ‘hidden’ name=’run’ value=”on”> <input type=”hidden” name =”MAX FILE SIZE” value=”500000″> <input type = ‘hidden’ name=’adref’ value=”<?php echo $A_ref ?>”>

<div style=’position:absolute; left:40px; top:320px’ > <b>First image:</b><br /> <input type=”file” size=”50″ id = “u1″ name=”upLoad1″ onchange=”showImg1()”><br /> <input type=”text” size=”50″ id = “n1″ name=”fName1″ readonly> <input type=”button” value =”reset” onclick=”document.getElementById(‘u1’).value=”;document.main_fm.upLoad1.value=”;document.getElementById(‘image1’).src=”;document.getElementById(‘image1′).style.display=’none'”> </div>

<div style=’position:absolute; left:500px; top:262px’ > <img height=’160′ width=’160′ id=”image1″ style=’display:none’ /> </div>[/CODE]

Any ideas about where I am going wrong ?
Thanks

to post a comment

JavaScript

23 Comments(s) _↴

@DaveinLondonauthorJun 06.2006 — #I tried using the submit type oinstead of button and it worked - but them of course it submitted the form - which I didn't want to happen !

@phpnoviceJun 06.2006 — #Security protocols does not allow this:

document.getElementById('u1').value='';

The value of INPUT TYPE=FILE form elements is protected by security protocols.

INPUT TYPE=RESET is required for this.

@DaveinLondonauthorJun 06.2006 — #The problem with the reset button is that it resets ALL five of my file boxes.

I was trying to develop a way to clear them individually.

Is there a way to stop the submit button from acting on the form after it has down all the onclick cmds ?? (that would do the trick ? )

@phpnoviceJun 06.2006 — #Nope. Your only other choice is separate forms with each having their own reset button. But, that may interfere with your overall plan, too.

@DaveinLondonauthorJun 06.2006 — #You know that this is only a problem with IE ?

Moz FF clears both boxes very nicely !

@DaveinLondonauthorJun 06.2006 — #The downside is ofcourse - Moz FF doesn't displat the image but IE does

(IE 6 not IE 7)

@phpnoviceJun 06.2006 — #Moz FF clears both boxes very nicely ![/QUOTE]
Oo, oo, oo... Talk about a security breach! Man! and people talk about IE having security holes. THAT IS A BIG ONE! :rolleyes:

@phpnoviceJun 06.2006 — #The downside is ofcourse - Moz FF doesn't displat the image but IE does

(IE 6 not IE 7)[/QUOTE]
Because you're trying to use a local path:

C:folderfilename.ext

You would have to convert that to this:

file:///C:/folder/filename.ext

@DaveinLondonauthorJun 06.2006 — #BTW does it mean that

in <input type="text" size="50" id = "n1" name="fName1" readonly>

document.main_fm.fName1.value='';

and

document.getElementById('n1').value='';

are identical stmts ?

@phpnoviceJun 06.2006 — #Same result -- yes.

The first is generally used when you have a FORM tag involved.

The second is generally used when there is no FORM tag involved.

@DaveinLondonauthorJun 06.2006 — #Thanks

- I'll post my finished script in about 10 mins

its pretty long - and it doesn't do everything I want but its not bad !

Maybe you'll see a better way of doing it ?

@DaveinLondonauthorJun 06.2006 — #Well here it is - with all 5 functions !

The picture positions need adjusting.

I think that if I use the fName element in the php then

because that box gets cleared by both browsers,

I can make sure that I don't take a cleared image file name by mistake !

Anyway - look forward to your thoughts !

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <script type="text/javascript">
 
 var IE = true;
 if (navigator.appName != "Microsoft Internet Explorer"){IE = false}
 
 function showImg1(){
 var fullName = document.main_fm.upLoad1.value;
 var fileName = fullName.match(/[^/\]+$/);
 var splitName = fullName.split(".");
 var fileType = splitName[1];
 fileType = fileType.toLowerCase();
 if (fileType == 'gif' || fileType == 'jpg' || fileType == 'jpeg')
 {
 if (IE)
 {
 document.getElementById('image1').style.display = '';
 document.getElementById('image1').src = fullName;
 }
 document.main_fm.fName1.value = 'Picture file name: '+fileName;
 } 
 else   	{
 alert('Invalid file type');
 }
 }
 function showImg2(){
 var fullName = document.main_fm.upLoad2.value;
 var fileName = fullName.match(/[^/\]+$/);
 var splitName = fullName.split(".");
 var fileType = splitName[1];
 fileType = fileType.toLowerCase();
 if (fileType == 'gif' || fileType == 'jpg' || fileType == 'jpeg')
 {
 if (IE)
 {
 document.getElementById('image2').style.display = '';
 document.getElementById('image2').src = fullName;
 }
 document.main_fm.fName2.value = 'Picture file name: '+fileName;
 } 
 else   	{
 alert('Invalid file type');
 }
 }
 
 function showImg3(){
 var fullName = document.main_fm.upLoad3.value;
 var fileName = fullName.match(/[^/\]+$/);
 var splitName = fullName.split(".");
 var fileType = splitName[1];
 fileType = fileType.toLowerCase();
 if (fileType == 'gif' || fileType == 'jpg' || fileType == 'jpeg')
 {
 if (IE)
 {
 document.getElementById('image3').style.display = '';
 document.getElementById('image3').src = fullName;
 }
 document.main_fm.fName3.value = 'Picture file name: '+fileName;
 } 
 else   	{
 alert('Invalid file type');
 }
 }
 function showImg4(){
 var fullName = document.main_fm.upLoad4.value;
 var fileName = fullName.match(/[^/\]+$/);
 var splitName = fullName.split(".");
 var fileType = splitName[1];
 fileType = fileType.toLowerCase();
 if (fileType == 'gif' || fileType == 'jpg' || fileType == 'jpeg')
 {
 if (IE)
 {
 document.getElementById('image4').style.display = '';
 document.getElementById('image4').src = fullName;
 }
 document.main_fm.fName4.value = 'Picture file name: '+fileName;
 } 
 else   	{
 alert('Invalid file type');
 }
 }
 function showImg5(){
 var fullName = document.main_fm.upLoad5.value;
 var fileName = fullName.match(/[^/\]+$/);
 var splitName = fullName.split(".");
 var fileType = splitName[1];
 fileType = fileType.toLowerCase();
 if (fileType == 'gif' || fileType == 'jpg' || fileType == 'jpeg')
 {
 if (IE)
 {
 document.getElementById('image5').style.display = '';
 document.getElementById('image5').src = fullName;
 }
 document.main_fm.fName5.value = 'Picture file name: '+fileName;
 } 
 else   	{
 alert('Invalid file type');
 }
 }
 
 </script>
 </head>
 <body>
 <!-- Using a linked stylesheet -->
 <link rel="STYLESHEET" type="text/css" href="yodbod.css">
 <img alt="header (13K)" src="flashtest1.jpg" height="130" width="920" />
 
 <div style='width:600px; position:absolute; left:40px; top:160px' >
 <b><big>Adding pictures to your advert.</big></b><br>
 <b>Select your picture files from your computer using the browse buttons.</b><br />
 You can have up to five photos for all catagories except Jobs and Careers<br />
 which excepts only one (we couldn't see any reason for more!).<br />
 </div>
 
 <form name="main_fm" enctype ="multipart/form-data" action="a_picts.php" method="POST">
 <input type = 'hidden' name='run' value="on">
 <input type="hidden" name ="MAX FILE SIZE" value="500000">
 <input type = 'hidden' name='adref' value="<?php echo $A_ref ?>">
 
 <div style='position:absolute; left:40px; top:320px' >
 <b>First image:</b><br />
 <input type="file" size="50" id = "u1" name="upLoad1" onchange="showImg1()"><br />
 <input type="text" size="50" id = "n1" name="fName1" readonly>
 <input type="button" value ="Clear" onclick=";document.main_fm.upLoad1.value='';document.main_fm.fName1.value='';document.getElementById('image1').src='';document.getElementById('image1').style.display='none'">
 </div>
 
 <div style='position:absolute; left:500px; top:262px' >
 <img height='160' width='160' id="image1" style='display:none' />
 </div>
 
 <div style='position:absolute; left:40px; top:440px' >
 <b>Second image:</b><br />
 <input type="file" size="50" name="upLoad2" onchange="showImg2()"><br />
 <input type="text" size="50" name="fName2" readonly>
 <input type="button" value ="Clear" onclick=";document.main_fm.upLoad2.value='';document.main_fm.fName2.value='';document.getElementById('image2').src='';document.getElementById('image2').style.display='none'">
 </div>
 
 <div style='position:absolute; left:500px; top:382px' >
 <img height='160' width='160' id="image2" style='display:none' />
 </div>
 
 <div style='position:absolute; left:40px; top:560px' >
 <b>Third image:</b><br />
 <input type="file" size="50" name="upLoad3" onchange="showImg3()"><br />
 <input type="text" size="50" name="fName3" readonly>
 <input type="button" value ="Clear" onclick=";document.main_fm.upLoad3.value='';document.main_fm.fName3.value='';document.getElementById('image3').src='';document.getElementById('image3').style.display='none'">
 </div>
 
 <div style='position:absolute; left:500px; top:502px' >
 <img height='160' width='160' id="image3" style='display:none' />
 </div>
 
 <div style='position:absolute; left:40px; top:680px' >
 <b>Forth image:</b><br />
 <input type="file" size="50" name="upLoad4" onchange="showImg4()"><br />
 <input type="text" size="50" name="fName4" readonly>
 <input type="button" value ="Clear" onclick=";document.main_fm.upLoad4.value='';document.main_fm.fName4.value='';document.getElementById('image4').src='';document.getElementById('image4').style.display='none'">
 </div>
 
 <div style='position:absolute; left:500px; top:622px' >
 <img height='160' width='160' id="image4" style='display:none' />
 </div>
 
 <div style='position:absolute; left:40px; top:800px' >
 <b>Fifth image:</b><br />
 <input type="file" size="50" name="upLoad5" onchange="showImg5()"><br />
 <input type="text" size="50" name="fName5" readonly>
 <input type="button" value ="Clear" onclick=";document.main_fm.upLoad5.value='';document.main_fm.fName5.value='';document.getElementById('image5').src='';document.getElementById('image5').style.display='none'">
 </div>
 
 <div style='position:absolute; left:500px; top:742px' >
 <img height='160' width='160' id="image5" style='display:none' />
 </div>
 
 <div style='position:absolute; left:370px; top:280px' >
 <input type="submit" value="Upload All Images">
 </div>
 
 </form>
 </body>
 </html>[/code]

@phpnoviceJun 06.2006 — #This:

var IE = true;

if (navigator.appName != "Microsoft Internet Explorer"){IE = false}

can be changed to this:

var IE = (navigator.appName == "Microsoft Internet Explorer");

However, some people claim that some browsers spoof IE via the [b]navigator.appName[/b] property. To totally be 100% absolutely positive that you're actually and unequivocably executing in IE, you can do the following:

<script>var IE = false;</script>



This, of course, is guarunteed to work only if some other browser doesn't decide to supports IE Conditional HTML Comment tags. ?

@phpnoviceJun 06.2006 — #Otherwise... Why did you decide to go with 5 copies of your function?

@DaveinLondonauthorJun 06.2006 — #I couldn't find the solution to my 'this' problem and all the variables

i.e. fName, upLoad, image that needed to be dealt with

@DaveinLondonauthorJun 06.2006 — #BTW I am running my apache server on d: drive

and when I run this little file upload I get an error saying that I don't have permission to do the move. Is this because my server is on d: and I requested a move to c: drive ?

This is the Error:

Warning: move_uploaded_file(c:a_test) [function.move-uploaded-file]: failed to open stream: Permission denied in D:WebDWDWyodboda_picts.php on line 124

@DaveinLondonauthorJun 06.2006 — #Nope - it wasn't that - sorted the error - everything moved nicely !

So I am a happy bunny ?

Thanks again for your help -

any further refinments gratefully accepted !

@phpnoviceJun 06.2006 — #Nothing worse than duplicate code. ?

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <!-- Using a linked stylesheet -->
 <link rel="STYLESHEET" type="text/css" href="yodbod.css">
 <script type="text/javascript">
 var IE = (navigator.appName == "Microsoft Internet Explorer");
 //
 function showImage(f, idx){
 var fullName = f.elements["upLoad"+idx].value;
 var fileName = fullName.match(/[^/\]+$/);
 var splitName = fullName.split(".");
 var fileType = splitName[1];
 fileType = fileType.toLowerCase();
 if (fileType == 'gif' || fileType == 'jpg' || fileType == 'jpeg')
 {
 f.elements["fName"+idx].value = 'Picture file name: '+fileName;
 if (IE)
 {
 document.images["image"+idx].style.display = '';
 document.images["image"+idx].src = fullName;
 }
 } 
 else
 {
 alert('Invalid file type');
 return false;
 }
 return true;
 }
 function clearImage(f, idx) {
 f.elements["upLoad"+idx].value='';
 f.elements["fName"+idx].value='';
 document.images["image"+idx].src='';
 document.images["image"+idx].style.display='none';
 return true;
 }
 </script>
 </head>
 
 <body>
 <img alt="header (13K)" src="flashtest1.jpg" height="130" width="920" />
 
 <div style='width:600px; position:absolute; left:40px; top:160px' >
 <b><big>Adding pictures to your advert.</big></b><br>
 <b>Select your picture files from your computer using the browse buttons.</b><br />
 You can have up to five photos for all catagories except Jobs and Careers<br />
 which excepts only one (we couldn't see any reason for more!).<br />
 </div>
 
 <form name="main_fm" enctype ="multipart/form-data" action="a_picts.php" method="POST">
 <input type="hidden" name="run" value="on">
 <input type="hidden" name="MAX FILE SIZE" value="500000">
 <input type="hidden" name="adref" value="<?php echo $A_ref ?>">
 
 <div style='position:absolute; left:40px; top:320px' >
 <b>First image:</b><br />
 <input type="file" size="50" name="upLoad1" onchange="return showImage(this.form, 1)"><br />
 <input type="text" size="50" name="fName1" readonly>
 <input type="button" value="Clear" onclick="return clearImage(this.form, 1)">
 </div>
 
 <div style='position:absolute; left:500px; top:262px' >
 <img height='160' width='160' name="image1" style='display:none' />
 </div>
 
 <div style='position:absolute; left:40px; top:440px' >
 <b>Second image:</b><br />
 <input type="file" size="50" name="upLoad2" onchange="return showImage(this.form, 2)"><br />
 <input type="text" size="50" name="fName2" readonly>
 <input type="button" value="Clear" onclick="return clearImage(this.form, 2)">
 </div>
 
 <div style='position:absolute; left:500px; top:382px' >
 <img height='160' width='160' name="image2" style='display:none' />
 </div>
 
 <div style='position:absolute; left:40px; top:560px' >
 <b>Third image:</b><br />
 <input type="file" size="50" name="upLoad3" onchange="return showImage(this.form, 3)"><br />
 <input type="text" size="50" name="fName3" readonly>
 <input type="button" value="Clear" onclick="return clearImage(this.form, 3)">
 </div>
 
 <div style='position:absolute; left:500px; top:502px' >
 <img height='160' width='160' name="image3" style='display:none' />
 </div>
 
 <div style='position:absolute; left:40px; top:680px' >
 <b>Forth image:</b><br />
 <input type="file" size="50" name="upLoad4" onchange="return showImage(this.form, 4)"><br />
 <input type="text" size="50" name="fName4" readonly>
 <input type="button" value="Clear" onclick="return clearImage(this.form, 4)">
 </div>
 
 <div style='position:absolute; left:500px; top:622px' >
 <img height='160' width='160' name="image4" style='display:none' />
 </div>
 
 <div style='position:absolute; left:40px; top:800px' >
 <b>Fifth image:</b><br />
 <input type="file" size="50" name="upLoad5" onchange="return showImage(this.form, 5)"><br />
 <input type="text" size="50" name="fName5" readonly>
 <input type="button" value="Clear" onclick="return clearImage(this.form, 5)">
 </div>
 
 <div style='position:absolute; left:500px; top:742px' >
 <img height='160' width='160' name="image5" style='display:none' />
 </div>
 
 <div style='position:absolute; left:370px; top:280px' >
 <input type="submit" value="Upload All Images">
 </div>
 
 </form>
 </body>
 </html>[/code]

@phpnoviceJun 06.2006 — #Additional refinement added above.

@phpnoviceJun 06.2006 — #Eliminated a bunch more duplicate code above.

@DaveinLondonauthorJun 08.2006 — #Well - looks very concise.

I will have to look at it carefully to understand it before amending my version.

Thanks for you input, this will no doubt help me to create similar functions.

Good work ?

@felgallJun 08.2006 — #Of course many Opera users have their userAgent set to report the appName as Internet Explorer so if you want to know for sure whether it is IE or not then use the conditionals mentioned earlier and forget about testing a user settable field like appName.

@DaveinLondonauthorJun 08.2006 — #Do you mean this test ?

<script>var IE = false;</script>

Also in #JavaScript _↴

javascript degrading Javascript conditions.Which iframe has the focus

Success!

Help @DaveinLondon spread the word by sharing this article on Twitter...

Tweet This

mixing id s and names ???

23 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

mixing id s and names ???

23 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

Also in #JavaScript _↴