HTML - Input Type Image Not Working Properly
Hi all,
I've created a simple login with some free code i found online. I wanted to change the login button to an image, just for aesthetics, but no matter what i try, it wouldnt work - the form does make sure i'm entering the right user & password, but once i do enter them, i get the same page with an empty form. (if i try the original type="button" code, it works just fine) I've been googling it for hours, with no results... i've tried anything and everything. ANY help would do :-) this is the code: <script language="javascript"> <!--// function pasuser(form) {if (form.id.value=="1") {if (form.pass.value=="1") {location="MainPage.htm"} else {alert("Invalid Password")}} else {alert("Invalid UserID")}} //--> </script> these are the buttons: WORKING BUTTON: <input type="button" value="Login" onClick="pasuser(this.form)"> NOT WORKING BUTTON: <input type="image" value="Login" onClick="pasuser(this.form)" src="Materials/Login.png" alt="Login" /> Similar TutorialsThe following common code is not working in Firefox (3.0.11). It works in Safari (4.02) and IE7. When I say not working, I mean that when I click the submit button, the address does not change to the form processing url: Code: <!-- The data encoding type, enctype, MUST be specified as below --> <form enctype="multipart/form-data" action="uploader.php" method="POST"> <!-- MAX_FILE_SIZE must precede the file input field --> <input type="hidden" name="MAX_FILE_SIZE" value="30000" /> <!-- Name of input element determines name in $_FILES array --> Send this file: <input name="mp3file" type="file" /> <input type="submit" name="submit" value="Send File" /> </form> The file uploader.php does nothing, it is blank, I'm merely trying to establish communication. Once again, the code functions in IE and Safari so I dont think this is PHP related. I have the following tables coded in an e-mail which I send to new contacts to invite them to subscribe to our information network - there is more to the message but the rest seems to be working fine. When a contact receives the message and is just reading it, she or he can check the selections or the button to select the information category or the method of communication, but when she or he replies to or forwards the e-mail the selections disappear. Is there a way to retain the selections on the reply or forward? I also need this functionality for other e-mail requests. Any suggestions would be gratefully received. Please note: I am very much a novice and have inherited a lot of documents etc from my predecessor, i.e. the original e-mail is not of my own creation but one that I am attempting to modify to do what I need it to do. <TABLE class=resultscolor1> <TBODY> <FORM> <TR> <TD colSpan=5><BR> <DIV class=inputlabel1><FONT style="FONT-SIZE: 12pt; FONT-FAMILY: 'Times New Roman'" color=#0000ff size=4><B>Which of the following notices would you like to receive from GFTC? (Click to check a category; please select all that apply.) <BR></DIV></B></FONT> <TR> <TD vAlign=top><INPUT type=checkbox></TD> <TD><STRONG>Upcoming Courses & Events</STRONG></TD></TR> <TR> <TD vAlign=top><INPUT type=checkbox></TD> <TD><STRONG>GFTC Newsletter</STRONG> (Email editions in March & September. Print editions in June & December)</TD></TR> <TR> <TD vAlign=top><INPUT type=checkbox></TD> <TD><STRONG>Innovation Seminar Notices</STRONG> (events held for Members only; occasionally attendance is offered to Non-Members also; GFTC reserves the right to determine membership status)</TD></TR> <TR> <TD vAlign=top><INPUT type=checkbox></TD> <TD><STRONG>Industry Alerts</STRONG></TD></TR></FORM></TBODY></TABLE><TD colspan="5"><BR>How would you prefer to receive GFTC information updates? (Please select one.)<BR><BR> <DIV></DIV> <TABLE> <FORM> <TBODY> <TR> <TD><INPUT type=radio value="Email, Post" name=key4> </FONT>Email & Post<BR><INPUT type=radio value=Email name=key4> Email Only<BR><INPUT type=radio value="Fax, Post" name=key4> Fax & Post<BR><INPUT type=radio value=Fax name=key4> Fax Only<BR><INPUT type=radio value=Post name=key4> Post Only</TD></FORM></TR> </TBODY> </TABLE> Hi, I'm novice in webpage creating, and i have this kind of problem : I'm creating a webpage, where users could post some kind of a comment... I don't know did i choose rigth, but i'm using "input type="text" ...> users write there a comment, and press submit button. This comment is sent to mysql database and saved there, after submiting it. Next step is placing it in a webpage. It works, but ot that way as i want. A problem is : I've added a code like <input type="text" style="650px; height:150px" name="msg"> Input area is about height of 7-8 rows. I want that it worked like this : user types a text, and when it reaches the end of a line, cursor jumpt to the beneath row. Now, user is writing everything in one row, and when it reaches the end - scrollbar apear on the bottom. I would like that scrollbar would apear then, when user reaches the bottom of the input area. Moreover - i would like that user could press the ENTER button, to jump to next row. Now, when he does this - submit button is activated, and a written text is sent to the database. Should i use CSS? or ... i'm really green here, and don't know what to do .. hope anypne will answer to my SOS call Hi, I have got an anonymous emailer service but i want to change the input type into a drop down menu, How can I do this Here is my Code: Code: <!--Email Sender--> <h3>Your Email</h3> Select your email address from the list, Enter Subject, Then enter your text (use the additional header if you want). <div style="display: block; width: 1px; height: 10px;"><spacer type="block" width="1" height="10"></div> <form method=post action="https://riot.eu.org/cgi/remailer.cgi"> <label for="to" accesskey="r"></label> E-mail address:<br> <input TYPE="text" SIZE="20" NAME="to" id="to" MAXLENGTH="60"> <div style="display: block; width: 1px; height: 4px;"><spacer type="block" width="1" height="4"></div> Subject:<br> <input TYPE="text" SIZE="20" NAME="subject" MAXLENGTH="60"> <div style="display: block; width: 1px; height: 4px;"><spacer type="block" width="1" height="4"></div> Additional header (CC:,Bcc:,Newsgroup:..):<br> <textarea name="header" rows=3 cols=30></textarea> <div style="display: block; width: 1px; height: 4px;"><spacer type="block" width="1" height="4"></div> Message Text:<br> <textarea name="message" rows=10 cols=30 wrap=virtual></textarea> <div style="display: block; width: 1px; height: 6px;"><spacer type="block" width="1" height="6"></div> <div style="display: block; width: 1px; height: 8px;"><spacer type="block" width="1" height="8"></div> <input type="submit" value="Send" class="button"> </form> <div style="display: block; width: 1px; height: 20px;"><spacer type="block" width="1" height="20"></div> <table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td background="i/hr.gif"><div style="display: block; width: 1px; height: 1px;"><spacer type="block" width="1" height="1"></div></td></tr></table> <!--end Email Sender--> Thanks i have seen alot of place on web that sometimes programmers are using :- <input type="button" / > and sometimes <input type="button" > Is there any difference between the two? What is correct way of using <input> tag, is it with end slash '/' or not ? Hi guys, I'm trying to create a form which uploads an image from the user and saves it in the database. However with the code I have so far it seems the input isn't working. Any help would be appreciated. This is what I have: <html> <head><title>Store image into SQL Database</title></head> <body> PHP Code: <?php if ($_POST[submit]) { include("connect.php"); $data = addslashes(fread(fopen($_POST[form_data], "r"), filesize($_POST[form_data]))); $result=MYSQL_QUERY("INSERT INTO binary_data (description,bin_data,filename,filesize,filetype) ". "VALUES ('$_POST[form_description]','$_POST[data]','$_POST[form_data_name]','$_POST[form_data_size]','$_POST[form_data_type]')"); $id= mysql_insert_id(); MYSQL_CLOSE(); } else { ?> HTML Code: <form method="post" action="imageupload.php" enctype="multipart/form-data"> File Description:<br> <input type="text" name="form_description" size="40"> <input type="hidden" name="MAX_FILE_SIZE" value="1000000"> <br>File to upload/store in database:<br> <input type="file" name="form_data" size="40"> <p><input type="submit" name="submit" value="submit"> </form> <?php } ?> </body> </html> Any idea why the "theuploadedfile" input is not displayed when the program comes in after the submit ? PHP Code: <?php print 'Post=<pre>'; print_r($_POST);print '</pre>'; // PROBLEM $_POST['theuploadedfile'] IS NOT DISPLAYED (the text one is) ?> <form enctype="multipart/form-data" action="<?php print $_SERVER['PHP_SELF']; ?>" method="post"> <br>File to upload <input name="status" type="hidden" value="submitted"> <br>A<input name="thetexttype" type="text" size="100"> <br>B<input name="theuploadedfile" type="file" size="100" > <br><input name="submit" type="submit"> </form> Hi, Below is my line of input code where I pass a certain variable. What I want to know is - is it possible to leave that 'identifer' value out of the url string if a user does not enter anything in that field? It's for a hotel reservation system and if left blank, it causes an error. It works fine is a user enters a code though. Code: <input type="text" name="identifier" value="" style="width:70px; font-size:11px;" /> Any ideas? Thanks I have a HTML form that truncates the action parameter after the "?" mark - which is NOT the desired behavior I am looking for. I simply want to open the referenced URL within the same viewport. Here is a representative HTML snippet: HTML Code: <form action="http://www.spufalcons.com/index.aspx?tab=gymnastics&path=gym"> <input type="submit" value="Gymnastics"/> </form> In this case, the submit button takes you to the "http://www.spufalcons.com/index.aspx" page, effectively ignoring "?tab=gymnastics&path=gym" parameter. It appears that URL's using HTML and PHP pages referenced in the action=URL work as expected BUT (alas) this is not the case when the target page contains index.aspx. This behavior is consistent across all major browsers (IE, FF, Safari, Chrome, Opera). Has anyone seen this problem before? Or can suggest an alternative and/or workaround consistent with my "pure" CSS/HTML/PHP web development approach? I have tried replacing the special characters with HTML entity values with no impact. I REALLY don't want to use abandon my CSS-styled submit buttons by using Javascript or button PNG's or image maps. Environment: Web Server: Apache 2.2.14 PHP: 5.2.10 OS: Mac OS X 10.5.8 HTML document info: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> I have an html page and right above this page i placed an flash file by putting a layer above this file...now the problem is b/w IE and mozilla firefox. When i see my page in IE the links are working properly but in firefox links are not working properly becauz of flash file behind html page.....so can u plz help me out with this. Thanks in advance. Hello all! I was going to give my website a new structure, so i would be able to make more stylesheets, without making different HTML's. And to give my website more differences between the stylesheets, i decided to put the leftpanel buttons into the css stylesheet too, so i was able to give them different looks just by changing the css. So i changed the source (src) to an transperant .png file called "linky.png", and then i gave each button an id. Each ID was named the name of what the button refers to, and what it is (Example: ID="Homebutton"). Now as you can guess, each button can't be seen, only be pressed on. So i went to my stylesheet (Classic.css) and entered the names and gave them properties (look below to see an example). Code: #Homebut { background-color: #FFFFFF; background-image: url("Classic/Home.png"); background-repeat: no-repeat; } And i was really excited over the result. I opened index.html using Firefox, but my excitement was over. The buttons didnn't show up. All i could 'see' was my invisible button. I don't think that this is a really big and hard problem to solve, it's probaly just something i spelled wrong or wrote wrong. But i checked everything, and i couldn't find any things that looked like that at all. That's why i kindly ask you to help me. Download everything you need for solving my problem right here! If there is anything else you need to solve my problem*, just ask for it and i'll see what i can do. *=anything else than money xP I have an e-mail form on my site and when someone clicks the submit button I get sent two e-mails. Did I do something wrong or miss something? Here is the code I am using. Code: <form name="form1" method="post" action="http://wrathchild.edit-strike.nl/securemail.php"> <input type=hidden name="subject" value="Request from site"> <input type=hidden name="required" value="fullname,email"> <input type=hidden name="redirect" value="http://wrathchild.edit-strike.nl/thankyou.html"> Name:<br><input type=text name="fullname"> <P> E-mail:<br><input type=text name="email"> <P> What kind of graphic would you like ?<br> <select> <OPTION VALUE="signature">Signature <OPTION VALUE="spray">CS:S Spray/Logo <OPTION VALUE="Web Banner">Web Banner <OPTION VALUE="other">Other </select> <p> Details:<br><textarea name="details" rows="10" cols="50"> </textarea> <P> <P> <P> <input type="submit" name="Submit" value="Submit"><br> </form> Hello to all, I am new to the forum and I hope some of you experts can give me some advice. I use firefox and my website looks exactly how i want to in it, however I just noticed that in IE it seems as though my little spacer images arent working properly, is there any quick/easy fix for this? Im not exactly a "pro" so the easiest work around would be awesome, however i do have to get this fixed one way or another so any help is greatly appreciated. Here is the link for the site: http://infinityreinforcing.com/photos.html the projects line up perfectly in FF, but in IE it is a big ol mess, thanks in advance. I'm trying to design a website for my self and I have a problem. My default browser is Safari so I didn't notice the problem till now. I designed the site layout in photoshop and the site in dreamweaver and it works fine in IE and Safari but in Firefox the site layout gets split at the top of the page and you can see the background in a line. Now the layout has two CSS styles for content in the middle and sidebar on the left both have background color that matches the design #333 and #646464. These are noticeable in the split. The site is sv-photography.net Any one got any ideas on how to fix this? SebastjanV Hi, I've just finished creating the layout for my website. I was just wondering if anyone could tell me why my text does not fit in the boxes that I have created using layers while in Internet Explorer it seems to work fine. Here is the link: http://www.geocities.com/seto.chaos/ And here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Welcome to Gameplatforms</title> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <style type="text/css"> <!-- body { margin-top: 0px; margin-bottom: 0px; } --> </style></head> <body bgcolor="black" body link="yellow" vlink="purple" alink="red"> <div id="Layer5" style="position:absolute; background-color:#666666; left:10px; top:176px; width:211px; height:667px; z-index:5"><font size="2" face="Arial" color="Yellow"> </font> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:100px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:31px; top:6px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font> <a href="Reviews%20Page.htm">Reviews</a></font> </font></p> </div> <p><font color="Yellow" size="2" face="Arial"><br> <br> </font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:170px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font><a href="http://gameplatforms.proboards62.com">Forum</a></font> </p> </div> <p><font color="Yellow" size="2" face="Arial"><br> <br> </font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:240px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><a href="Videos%20Page.htm">Videos</a></font></p> </div> <p><font color="Yellow" size="2" face="Arial"><br> <br> </font></p> </div> <font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:31px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:50px; top:7px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><a href="News%20Page.htm"> News</a></font></p> </div> <p><br> <font color="Yellow" size="4" face="Arial"><br> </font></p> </div> </font></div> <font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; left:144px; top:143px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"> <a href="News%20Page.htm"> News </a></font></div> <div id="Layer3" style="position:absolute; left:10px; top:141px; width:1108px; height:26px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; left:440px; top:2px; width:6px; height:16px; z-index:4"><font color="Yellow" size="4" face="Arial"> <a href="Reviews%20Page.htm"> Reviews </a></font></div> </font> <div id="Layer4" style="position:absolute; left:687px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"><a href="http://gameplatforms.proboards62.com">Forum</a></font></div> <font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; left:916px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"> <a href="Videos%20Page.htm"> Videos </a></font></div> </font></div> <div id="Layer1" style="position:absolute; left:10px; top:14px; width:1108px; height:884px; z-index:1"> <p> </p> <p> </p> <p> </p> <p><br> </p> <p><br> </p> <div id="Layer3" style="position:absolute; left:0px; top:841px; width:1108px; height:40px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; background-color:#999999; left:9px; top:9px; width:1090px; height:24px; z-index:4"> <p><font color="Yellow" size="2" face="Arial">Contact us: <a href="mailto:kaibachaoschampion@gmail.com">Email:</a> <a href="mailto:kaibachaoschampion@gmail.com">kaibachaoschampion@gmail.com</a></font></p> </div> </font> </div> <div id="Layer5" style="position:absolute; background-color:#666666; left:948px; top:162px; width:160px; height:667px; z-index:5"><a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html"> </a> <a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html"><img src="http://www.play-asia.com/paOS-32-74-z.html" border=0 alt="Play-Asia.com - Buy Video Games for Consoles and PC - From Japan, Korea and other Regions!" width="160" height="600"></a> </div> <div id="Layer5" style="position:absolute; background-color:#666666; left:251px; top:162px; width:666px; height:667px; z-index:5"> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:110px; width:607px; height:87px; z-index:4"> <p><font size="2" face="Arial" color="Yellow">Text text text text text text text text text text text </font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:210px; width:607px; height:72px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"> Title</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:290px; width:607px; height:153px; z-index:4"> <p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:30px; width:607px; height:71px; z-index:4"> <p><font color="Yellow" size="6" face="Arial">Title</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:450px; width:607px; height:72px; z-index:4"> <p><font color="Yellow" size="6" face="Arial">Title</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:530px; width:607px; height:119px; z-index:4"> <p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text text text </font></p> </div> <font size="2" face="Arial" color="Yellow"></font></div> <p><br> </p> </div> <div id="Layer2" style="position:absolute; left:162px; top:14px; width:667px; height:123px; z-index:2"><img src="http://i5.photobucket.com/albums/y157/kaibachaoschampion/Logo.png" width="800" height="125"></div> </font> </body> </html> Thanks Myself and my co-worker have been staring and digging at this for a week. If anyone has any ideas, I would appreciate any feedback. http://rwshome.com/mega/index.html You will see in every browser the top nav and right side nav CSS image rollovers function just LOVELY. Butttttt...in IE6, they do not work at all. I have combed the code about 50 times. I cannot figure out why it isn't working. We are at our witts end on this issue, so I figured I would register and see if anyone here could shed some light. On an even better note, we have this same CSS rollover code on about 60 other webites and it works fine in IE6. Weeeeeeeee! Sometimes, a pair of fresh eyes just helps and it's something simple. I hope that is the case. Thanks Pete Hi, I have got an input form to upload files; the form also accepts some other user input. The upload works fine, but I need to display some filenames by default, but this does not work. I tried using: <input type="file" name="images[]" value="<?php echo $default_filename; ?>"... This did not work, so I tried: <input type="file" name="images[]" value="Testfile.jpg"..., but this does not work too. All this is in a <form action="<?php echo $_PHP_SELF; ?>" method="post" enctype="multipart/form-data">. It seems to me that in an input field of type "file", default values are not accepted, though they should be according to the documentation. Any help will be greatly appreciated as I need this feature. Thanks On my page, I have a form: HTML Code: <div id="upfile"> <input type="file" name="uploadform" size="30" id="fileupload2"> </div> Now, I'm wondering, is there any way that I can set a default value for this? Ex "C:\My Documents\file.txt". I tried value=, but I guess it doesn't work for the "file" type. I'd change it, but I need it to be "file".. Any help? Edit: Just realized that spelling mistake in the title.. Hi. I have a question regarding my site. If you click on the link using IE you will see that the images in my tables are cut off on the right, and haven't been scaled at all... In Google Chrome they appear fine. Here is the HTML code snippet: Code: <table> <tbody> -snip- <table> <tr> <td> <div class="large"> <a href="http://picasaweb.google.com/lh/photo/QnqiMcSvmlR_osQplmz-Iw?authkey=Gv1sRgCNbCzI295-KBIg&feat=directlink" target="_blank"> <img class="large" src="http://lh3.ggpht.com/_lPPWxJaDX_0/S1tmkLXjmBI/AAAAAAAAAVA/782xI-SkNVQ/s640/step1-2.jpg" alt="CashCrate offers page." title="CashCrate offers page."> </img> </a> </div> </td> </tr> </table> -snip- </tbody> </table> And here is some css code: Code: div.large { width: 100%; height: 200px; border: none; margin-top:6px; margin-bottom:6px; overflow: auto; } img.large { width: 98%; height-max: 600px; padding: 2px; border: ridge; border-color: #66E066; } I'm wanting to know what I need to add/change to make the images appear right in all browsers(I've only tested in IE and Chrome). If you need any more info about my page, ask . Thanks. |