PDA

View Full Version : Need help tweaking Ajax Contact Form


Eliteoomph
12-28-2010, 08:12 PM
I am modifying a contact form and I am having problems between IE and Firefox as always
My 2 main issues are
1. IE is aligned left

2. in IE and Firefox there seems to be borders around my images (message text area and submit button) even though I have deleted the borders.
also in IE the Submit image does not display properly (this is my biggest problem... I can live with the rest if I have to)

here it is in IE
http://www.bigcitymarketing.net/images/IEcontactform.bmp

and here is Firefox

http://www.bigcitymarketing.net/images/FOXContactform.bmp

here is the css


.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
background-image: url(http://www.bigcitymarketing.net/images/contactbody.jpg);
padding-top: 250px;
padding-left: px;
text-align: left;
margin-left: 10px;
margin-top: 10px;
width: 750px;
height: 1000px;
background-repeat: no-repeat;
font-family: Verdana, Geneva, sans-serif;
}

#contactarea {
width:380px;
height:380px;
margin:0px auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
background-image: url(images/contactform.jpg);
font-family: Verdana, Arial;
font-size: 12px;
background-repeat:no-repeat
}

#inputbox {
float: right;
margin-right: 25px;
width: 270px;
padding: 2px;
font-family: Verdana, Arial;
font-size: 12px;
}

#inputlabel {
font-weight: bold;
font-family: Verdana, Arial;
font-size: 12px;


}

#textarea {
background-image:url(images/textareapic.jpg);
font-family: Verdana, Arial;
font-size: 12px;
width: 330px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
color: #FFF;
}

#submitbutton {
background-image:url(images/submitbutton.jpg);
width: 150px;
height: 50px;



}
#contactarea p {
text-align: center;
}Script
<script language="javascript">

function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}

var http = createRequestObject();

function sendemail() {
var msg = document.contactform.msg.value;
var name = document.contactform.name.value;
var email = document.contactform.email.value;
var subject = document.contactform.subject.value;
document.contactform.send.disabled=true;
document.contactform.send.value='';

http.open('get', 'contact.php?msg='+msg+'&name='+name+'&subject='+subject+'&email='+email+'&action=send');
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();

if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];

}
}
}
</script>
<div class="fltlft">
<div id="contactarea">
<form name="contactform" id="contactform">
<span id="inputlabel">Name:</span> &nbsp;&nbsp;<input type="text" name="name" id="inputbox"><br /><br />
<span id="inputlabel">Email:</span> &nbsp;&nbsp;&nbsp;<input type="text" name="email" id="inputbox"><br /><br />
<span id="inputlabel">Subject:</span> <input type="text" name="subject" id="inputbox"><br /><br />
<span id="inputlabel">Message:</span><br />
<textarea name="msg" rows="10" id="textarea"></textarea>
<br /><br />
<input type="button" value="Send" name="send" onClick="sendemail();" id="submitbutton">
</form>
</div>here is the link also
http://www.bigcitymarketing.net/contactus.html

I am constantly trying to figure it out so the code may be different if you click link and view source...

Eliteoomph
12-28-2010, 09:02 PM
couple problems fixed...
IE left aligning and image not appearing in IE
I found container div wasn't closed
I learned I always need to validate my page and look for small errors before posting...
still trying to figure out the border problem though...

Eliteoomph
01-24-2011, 02:16 PM
Hey Kyle

thanks for you response.
please explain

gentleone
01-24-2011, 02:41 PM
Hey Kyle

thanks for you response.
please explain
Kyle can't explain, because Kyle is a bot and bots talk rubbish :)

Eliteoomph
01-24-2011, 02:57 PM
lol thats funny
ok

Corrosive
01-24-2011, 04:38 PM
lol thats funny


What's even more funny (and slightly bewildering) is that my colleague decided to point out the spam bot post but didn't delete it ;)

Eliteoomph
01-24-2011, 04:45 PM
maybe he just wanted bewilder you today ;o)
monday's are boring.... he is just trying to spice it up! lol

But while we are on my forum post... lol
if anyone knows how to get the borders around my send email button off
let me know :lol:

Corrosive
01-24-2011, 04:49 PM
Have you tried CSS;

a img {border: 0;}

at all?

Eliteoomph
01-24-2011, 05:54 PM
tried that it didn't work but gave me this idea

border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;

it worked! just have to adjust the image a little!
You would think not specifying a border would be enough lol

Thanks again man!

gentleone
01-24-2011, 06:28 PM
What's even more funny (and slightly bewildering) is that my colleague decided to point out the spam bot post but didn't delete it ;)
Oops! Indeed... sometimes I forget that I have now the power to kick bots to history :)

No, serious... it was not really a harmful post... that's why... but I kept an eye on him :twisted:

gentleone
01-24-2011, 06:40 PM
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;


only {border: 0;} should also do the trick instead of 8 separate lines of border properties. Did you tried that?

Eliteoomph
01-24-2011, 06:47 PM
yeah... but I probably did something wrong ;o)

Eliteoomph
01-24-2011, 06:50 PM
lol k i got it working that way
i put in
a img {border: 0;}
instead of just
border: 0;
;o)

Corrosive
01-24-2011, 07:10 PM
i put in
a img {border: 0;}
instead of just
border: 0;
;o)

Ha, ha. Yep, that's what I said to do ;)