logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 12-28-2010, 08:12 PM   #1
Eliteoomph
 
Join Date: Aug 2010
Posts: 168
Default Need help tweaking Ajax Contact Form

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


and here is Firefox



here is the css

HTML Code:
.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
HTML Code:
<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 is offline   Reply With Quote
Old 12-28-2010, 09:02 PM   #2
Eliteoomph
 
Join Date: Aug 2010
Posts: 168
Default

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 is offline   Reply With Quote
Old 01-24-2011, 02:16 PM   #3
Eliteoomph
 
Join Date: Aug 2010
Posts: 168
Default

Hey Kyle

thanks for you response.
please explain
Eliteoomph is offline   Reply With Quote
Old 01-24-2011, 02:41 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by Eliteoomph View Post
Hey Kyle

thanks for you response.
please explain
Kyle can't explain, because Kyle is a bot and bots talk rubbish
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 01-24-2011, 02:57 PM   #5
Eliteoomph
 
Join Date: Aug 2010
Posts: 168
Default

lol thats funny
ok
Eliteoomph is offline   Reply With Quote
Old 01-24-2011, 04:38 PM   #6
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by Eliteoomph View Post
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
Corrosive is offline   Reply With Quote
Old 01-24-2011, 04:45 PM   #7
Eliteoomph
 
Join Date: Aug 2010
Posts: 168
Default

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
Eliteoomph is offline   Reply With Quote
Old 01-24-2011, 04:49 PM   #8
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Have you tried CSS;

Code:
a img {border: 0;}
at all?
Corrosive is offline   Reply With Quote
Old 01-24-2011, 05:54 PM   #9
Eliteoomph
 
Join Date: Aug 2010
Posts: 168
Default

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!
Eliteoomph is offline   Reply With Quote
Old 01-24-2011, 06:28 PM   #10
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by Corrosive View Post
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
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:58 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com