|
HTML - Form Issues
I'm thinking this is the right section, but since I have several questions, I'll just go along as they're answered, or moved so not to irritate all of you.
I'm designing a product form for a website at the moment, the basics of it are all there and completed, I've just run into a few snags with things that should've been very simple. First off I'm trying to design a preview area which takes its information from a bunch of dropdowns. Theres just one tiny problem, I know its tiny, but I can't seem to find it. If anyone could shed some light on this I'd greatly appreciate it. Now I'm going to warn you, theres alot of alert boxes that'll pop up if you test this in a browser, thats for my own purposes until its all done. So you may wanna turn your sound off if you look at it. Similar TutorialsI have a photography website that is set up for purchasing prints. I had one of you wonderful people help me out with a form problem some time ago. I needed information to be inserted into the form based on the particular page (or photo) that the person was on. It needed to insert the photo name in the form that came up when you clicked the purchase link. All was working great until a few weeks ago. Now, when you click the link, it inserts the name, but the form thinks the field is blank. Since its a required field, the user still has to type it. Is there a easy fix for this? Here is the site: http://www.sthompsonphoto.com/galler...p?showimage=59 I cant figure it out! Any help would be great! Thanks! Hi... Trying to get this site running but had to use somebody else's code for the forms and I cannot seem to get them working... Here's the link... http://artinludlow.com/joe/index.html Do not go to the main "com/index.html" page, use the "joe/index.html" directory. thanks G'day guys, I'm having trouble getting my submit button aligned to the right edge of the textarea above it. Could you please tell me what I'm doing wrong, (still a bit raw when it comes to CSS). Here's the link: http://csusap.csu.edu.au/~jpress03/impel/contactus.html Here's my CSS code: Code: #frmwrap {
border: 1px dashed #8DBA2C;
padding: 10px;
width: 350px;
}
form {
font-family: Arial, Sans-serif;
}
input, textarea {
border: 1px solid #gray;
font-family: Arial, Sans-serif;
}
label {
display: block;
float: left;
width: 100px;
}
form div {
margin-top: 3px;
}
.button {
background: #f1f1f1;
border: 1px solid gray;
}
Any help is greatly appreciated. Cheers, Jamie If you look here at http://www.babyjai.com/quote.php you will see the form validates before it tries to push it thru, how come when you look at http://dinasky.me/contact.php it doesnt do it, it just pushed it thru, i cannot figure it out! I have never had this error before until now, where I am trying to submit a jQuery validated form, yet my submit button won't work, I currently am not using the input type submit button, even when I do use it though I get the same error as using a <a> link that calls a javascript function to submit the form, I have a duplicate of this code and it works fine on another page, but just not here. Here is my mess: http://motb.isgreat.org/ It probably is easier to just check the whole source, since my code is scattered. This website is targeted for WEBKIT BROWSERS ONLY! To navigate to the issue on the page itself, press the gold login button on the RIGHT, and try submitting the form, I know the join form doesn't work, since I am not done with the page yet. But the login form should target to http://motb.isgreat.org/login.php which has a duplicate of my form but it works, im really confused, it may be with my JavaScript. Any Help is appreciated. I know my code is messy, my excuse is only being 15, but yeah… at least most of it functions <DIV id=regform style="BOTTOM: 60px; RIGHT: 411px; POSITION: absolute"> <FORM action=sendmail.php method=post>sitename.com<b style="COLOR: black;font-family:arial;font-size:20%;"></b> <BR><INPUT size = 15 name=email> <INPUT type=submit value=Submit></FORM></DIV> This code makes my email box move dependent on the size of your web browser window. How can I stop this ? Really appreciate help here. Thankyou. I am attempting to incorporate a contact form that will send an email to a particular email address with the filled out info. Also, I need that contact form to transfer to another page of the site that will allow for payment to be collected via paypal. I understand the protocol to make the contact form to send an email but getting that form to also transfer to another page is where I am stuck. I also know how to incorporate the paypal button to receive payment. I just do not know how I can incorporate both to make it a smoother process. Unless there's a way I can put the paypal button on the contact form so that it sends the email with the info and sends them to paypal to finish the transaction? Any ideas? Here the html for my contact form: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Preview Form</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" CONTENT="text/javascript">
<script type="text/javascript"> window.onload = function() { document.getElementById("form1").onsubmit = function() { return checkRegex(); } } function checkRegex() { var isValid = true; var thisValid = new Array(); var ids = new Array(); var texts = new Array(); var regex = new Array(); var errorMsg = new Array(); ids[0] = new Array("box1","address1","state","city1","zip1","email1"); texts[0] = new Array("Name","Address","State","City","Zip Code","Email"); regex[0] = /^[^/\s].*/; errorMsg[0] = "[label] cannot be blank"; ids[1] = new Array("zip1"); texts[1] = new Array("Zip Code"); regex[1] = /^[0-9]+$/; errorMsg[1] = "[label] must be a number"; ids[2] = new Array("box1","city1","state"); texts[2] = new Array("Name","City","State"); regex[2] = /^[a-zA-Z\s]+$/; errorMsg[2] = "[label] can only contain letters/spaces"; ids[3] = new Array("address1"); texts[3] = new Array("Address"); regex[3] = /^[a-zA-Z0-9\s]+$/; errorMsg[3] = "[label] can only contain letters/numbers/spaces"; ids[4] = new Array("box1"); texts[4] = new Array("Name"); regex[4] = /^[\w]+$/; errorMsg[4] = "[label] can only contain letters/numbers/underscore"; ids[5] = new Array("email1"); texts[5] = new Array("Email"); regex[5] = /^[_A-Za-z0-9-]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*$/; errorMsg[5] = "[label] must be an email address"; for (var i = 0; i < 6; i++) thisValid[i] = applyRegex(regex[i], ids[i], texts[i], errorMsg[i]); for (i = 0; i < thisValid.length; i++) isValid = isValid && thisValid[i]; return isValid; } function applyRegex(regex, ids, texts, errorMsg) { var obj, thisValid = true; for (var i = 0; i < ids.length; i++) { obj = document.getElementById(ids[i]); removeErrorDiv(ids[i]); if (obj.value.match(regex) == null) { var errorStr = errorMsg.replace("[label]", texts[i]); addErrorDiv("contains_" + ids[i], errorStr, "98%"); thisValid = false; } } return thisValid; } function addErrorDiv(domID, msg, width) { var add = true; var target = document.getElementById(domID); var errorDiv = document.createElement("div"); var errorDivID = "error_" + domID; if (document.getElementById(errorDivID)) return; errorDiv.setAttribute("id", errorDivID); errorDiv.className = "validation_error"; errorDiv.style.width = width; errorDiv.style.padding = "1%"; errorDiv.innerHTML = msg; target.appendChild(errorDiv); } function removeErrorDiv(domID) { var errorDivID = "error_contains_" + domID; if (document.getElementById(errorDivID)) { var child = document.getElementById(errorDivID); var parent = document.getElementById("contains_" + domID); parent.removeChild(child); } } </script> <style type="text/css">
div#preview {
width: 400px;
margin: 40px auto;
}
div#preview div#back {
width: 400px;
float: left;
clear: both;
padding-top: 40px;
text-align: center;
}
form#form1 {float: left; margin: 0; padding: 0; display: inline; width: 400px; } form#form1 div {float: left; margin: 0; padding: 0; display: inline; } form#form1 p {float: left; margin: 0; padding: 0; display: inline; } form#form1 label {float: left; margin: 0; padding: 0; display: inline; overflow: hidden; } form#form1 input {float: left; margin: 0; padding: 0; display: inline; } form#form1 p#contains_box1 {clear: both; width: 400px; } form#form1 p#contains_box1 label {clear: both; width: 400px; } form#form1 p#contains_box1 input {clear: both; width: 396px; } form#form1 p#contains_address1 {clear: both; width: 400px; } form#form1 p#contains_address1 label {clear: both; width: 400px; } form#form1 p#contains_address1 input {clear: both; width: 396px; } form#form1 p#contains_city1 {clear: both; width: 400px; } form#form1 p#contains_city1 label {clear: both; width: 400px; } form#form1 p#contains_city1 input {clear: both; width: 396px; } form#form1 p#contains_state {clear: both; width: 400px; } form#form1 p#contains_state label {clear: both; width: 400px; } form#form1 p#contains_state input {clear: both; width: 396px; } form#form1 p#contains_zip1 {clear: both; width: 400px; } form#form1 p#contains_zip1 label {clear: both; width: 400px; } form#form1 p#contains_zip1 input {clear: both; width: 396px; } form#form1 p#contains_email1 {clear: both; width: 400px; } form#form1 p#contains_email1 label {clear: both; width: 400px; } form#form1 p#contains_email1 input {clear: both; width: 396px; } form#form1 p#contains_submit1 {clear: both; width: 400px; } form#form1 p#contains_submit1 input {clear: both; width: 400px; } form#form1 div.validation_error { padding: 1%; } </style>
</head>
<body>
<div id="preview">
<form id="form1" name="sub" method="get" action="collect" enctype="application_x-www-form-urlencoded"> <p id="contains_box1"> <label for="box1">Name</label> <input id="box1" type="text" name="box1" /> </p> <p id="contains_address1"> <label for="address1">Address</label> <input id="address1" type="text" name="address1" /> </p> <p id="contains_city1"> <label for="city1">City</label> <input id="city1" type="text" name="city1" /> </p> <p id="contains_state"> <label for="state">State</label> <input id="state" type="text" name="state" /> </p> <p id="contains_zip1"> <label for="zip1">Zip Code</label> <input id="zip1" type="text" name="zip1" /> </p> <p id="contains_email1"> <label for="email1">Email</label> <input id="email1" type="text" name="email1" /> </p> <p id="contains_submit1"> <input type="submit" name="submit1" id="submit1" value="Submit" /> </p> </form> <div id="back">
</div>
</div>
</body>
</html>
To start off, I'm having problems figuring out what to look for, let alone research it myself. If I'm posting in the wrong place, or there's a page you can link me to, please do that. I'm trying to do a webpage for my band, and what I'm trying to do is similar to blogging sites, like tumblr. I'm trying to make a page that my bandmates and I can go on, type what we want, add photos, ect, and submit it so it appears on our home page as a news article. So, a simple 1 page with form section to submit, and it appearing on another page as a new article, above the old ones. Thanks in advance for the help! Hello, I just made my new site for my company and I tried to keep it extremely simple. I used wordpress to do the basic layout automatically and made some simple edits with some basic html i picked up along the way this week. There seems to be two problems though: 1) the form is inside a table which doesnt seem to align properly within any of the popular browsers (firefox/IE/chrome) .... it should look like 1 image instead of 3 separate pieces 2) i eventually got the form to align slightly better but the spot where I "Enter my zip code" doesnt align with the background image behind it.....sometimes it doesnt even say "enter zip code" which is very bad for a user experience. in firefox it doesnt say it, but in chrome it does say it....either way, both are aligned very poorly..... I put my code into this site: http://w3schools.com/html/tryit.asp?...=tryhtml_intro ...and after editing it, i've come to find that it works perfectly within that html editor and looks exactly how i want it to look. but then when i put the code back into my wordpress site, the alignment messes up again...... so i did some research and found out that wordpress has "deprecated" some of the html tags and that they dont work anymore...if i understand correctly. so now i have to find a way to pick new tags or use CSS...this is just so confusing and i thought maybe somebody here might be able to offer me some assistance to help me fix up this form/table problem. my site's url is: http://www.allautoinsurance.org my code that I'm editing is on the right sidebar, where the alignment messes up: <div style="text-align: center;"><span style="font-size: 14pt; font-family: Georgia; color: rgb(0, 0, 0);"><span style="font-size: 14pt;"><span style="font-size: 14pt;">Our free online service instantly browses the best rates in your zip code area at the click of a button. We've helped thousands of people quickly and easily save money on their auto insurance:</span></span></span><br /> <br /> <form action="http://network.mossaffiliatemarketing.com/z/61/CD62/&subid3= "method="post"> <table border="0" cellpadding="0" cellspacing="0" width="225"> <tr> <td colspan="2"><img src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/top.jpg"></td> </tr> <tr> <td class="background1" valign="middle" height="54" width="153"> <style> .background1 { background-image: url(http://www.allautoinsurance.org/wp-c...tom_left.jpg); background-repeat: no-repeat; } </style> <input type="text" name="subid1" value="ENTER ZIP CODE" style="margin-left:30px; margin-bottom:5px; width:110px; border-width:0px; font-size:14px; font-family: Arial, Helvetica, sans-serif;" onClick="javascript:this.value='';"> </td> <td> <input type="image" src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/bottom_right.jpg"></td> </tr> </table> </form> </div> <div style="text-align: left;"><span style="font-size: 12pt;"><span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 1)</span> Input your zip code and click the button above to begin browsing the auto insurance providers in your area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 2)</span> Select the auto insurance provider you're most comfortable with by clicking their picture<span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;"> </span></span></span></span><br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">Warning</span>: Dont <span style="font-style: italic; font-size: 12pt;">always </span>go with the cheapest in the area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 3)</span> Continue with the providers process if they meet your requirements</span></span></span></span><br /> </div> <div style="margin-left: 40px;"><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"></span></span></div><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"><br /> <span style="font-size: 12pt;">***We've been showing people how to get insurance quickly and easily for years. We respect your privacy, it is just as important to us as it is to you.</span></span></span> .....thanks for any help, i really appreciate your time and effort. if this code doesnt look smart at all its cuz i used some free WYSIWYG editor to generate it. i actually am very confused lol. thanks again. Best, Kyle P Hi All - I'm new to the forums and also somewhat new to web development. I'm trying to scrape together a website for my wedding and have managed my way through most of it, however the RSVP form is killing me. I believe the page is working fine with FF3 - at least it does what I want it to do. In IE7 however, when the submit button is pressed IE appears to hang, and status bar reads "waiting for rsvp2.php". The page never appears, however the file creation on the back end does complete successfully, so it IS doing something. I have changed the form method to "get" and IE seems to proceed normally, but I don't want to use this as a permanent solution. The URL is below and any help would be greatly appreciated. If there isn't enough information please let me know! www.nikiandzack.com/rsvp.php Thanks, Zack Arg... IE is bugging me as usual.... Now I've been working on the fantasy football site the past few days getting ready for the fantasy season... but when I look at the site on IE we have a few issues going on... here they a 1. text rendering on the image switcher... why does the text look bold? The info there is using the default font-size of 13px which I set... I'm assuming that probably has something to do with it. 2. The poll part 1 Why on earth is the question indented 6px? The links in the "newest articles" section are set to indent 6px... but I set that on the list... the question of the poll isn't even in a list and it somehow got indented... 3. More crappy text rendering on the poll answers... now I'm seeing the results because I voted and the text looks absolutely horrendous... no idea why either. Any help with these IE crazy things would be greatly appreciated... thanks! Right then... Problem is, uploaded website, thought that it was ok, checked in Firefox, Safari and even icab... did not check IE (rookie) and did IE have problems? Of course. Basically Some of pics are not showing up - mainly in the shop and one or two on the main pages. I cannot work out how to fix, def not broken links, really boring I know, but can anyone help? Link to site: http://www.thefrenchpantry.co.uk much appreciated... I'm experiencing an issue when using DIVs in DIVs.. I have a container-DIV and a content-DIV, and I would like the container-DIV to stretch vertically as necessary based on how much content is in the content-DIV. Code: <html>
<header>
<style type="text/css">
#divContainer{
position:absolute;
top:10px;
left:10px;
height:100%;
width:200px;
background-color:#CCC;
}
#divContent{
position:absolute;
top:10px;
left:10px
width:180px;
background:color:#BBB;
}
</style>
</header>
<body>
<div id="divContainer">
<div id="divContent">
<!-- Fill me with content -->
</div>
</div>
</body>
</html>
This is basically the code I'm using... whenever the content amount pushes the divContent lower than the bottom of the divContainer, it just overflows out and down the page. What am I doing wrong? Edit: OOPS I set height to 100px on the divContainer, it was supposed to be 100% http://www.farewell-travel.com/newsl...rch2012_2.html Why does this look like crap in Internet Explorer? (Specifically talking about the "Highlights" box) It looks fine in firefox but not on IE. I've tried everything to fix it, I don't know what to do! The width dimensions for some reason are way off. It bloats up to 272px when it should be 200px! Please help! Thanks -Please note this is an e-mail newsletter, that is the reason I'm using tables! Hello! I'm having quite a problem implementing multiple backgrounds into my website. Simply put I want to have a top bar, that will function as header, and a bottom bar, that will function as a footer. I've tried the following solution but it just doesn't seem to work. The div id "bgBottomDiv" just won't show. I was hoping someone could help me out. HTML: HTML Code: <body> <div id="wrapper"> <div id="bgBottomDiv"> "Content goes here " </div> </div> CSS: Code: #wrapper{
position:relative;
margin:0 auto;
width:1100px;
}
body {
background-image:url(/images/Styler_top.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}
#bgBottomDiv{
background-image: url(images/Styler_top.png);
background-repeat: repeat-x;
background-position: bottom;
}
Thanks in advance! I have a page I created in dream weaver. It displays fine in IE7, but in IE6 it does not. Here is a link to the page: Problem Page If anyone has any ideas, I'd really appreciate it. Alright, so I have this site on which I need a certain part of the site (the content part where the main text bit is) to extend down to the bottom (and preferably no longer), so that if the window is smaller or bigger the text will still just go all the way down to the bottom of the page, and when the text is further down that div will have a scrollbar so you can scroll through the text. The main issue is making it so the end of the div is always on the bottom of the page. (I've tried height=100% on that div but then it just goes below the bottom for some reason.) This is the site. And here's the code: Code: CSS:
div.main { position: absolute;
top: 181px;
left: 110px;
width: 510px;
height: 1500px;
background: url("images/Content Box Bit.png"); }
div.news { position: absolute;
top: 25px;
left: 15px;
width: 494px;
height: 372px;
overflow-x: hidden;
overflow-y: auto; }
Code: HTML:
<div class="main">
<img src="images/News and Updates.png"><div class="news">
<span class="f4"><?php include('sitemapbase.php'); ?></span></div>
</div>
The reason the height of main=1500px is that that's not gonna be scrollable anyway, and I just added a random value to assure that went to the bottom no matter what. Thanks for any help. Wasn't really sure where to put this, sorry if it's the wrong place.. EDIT: Just encountered an additional issue, being that the navigation menus (to the left) look off in IE. The background seems not to start where the div starts. Suggestions? Ok im working on the website for the company I work for and Im having some issues. Lastnight everything was perfect and now I see in FireFox and SeaMonkey I get a "side to side" scroll bar on the bottom which Im sure wasnt there lastnight. As im sure its no supprise that IE7 has not cooperated with me in this endevour but oddly enough IE7 is the only one not showing the scrollbar. The page I would like any of you to view is being hosted on my last clients server. here it is. http://www.millermachinecompany.com/test2.htm please feel free to look at the code to. any advice to make the code better would be GREATLY appreceated. Thank you all so much for the help. I have designed my site with Divs nesting and divs floating left and right to get a strict layout. It is flawless in firefox / safari but when I open it in IE it seems that some borders are enlarged or something because objects are obviously sent to the next line because their width exceeded that of the parent div. http://www.nativboardriding.com/media.htm check out how the video and div box won't fit on the same page in IE but work fine in the other browsers. How can i prevent this? |
|||||||