Hello everyone, I have a question regarding the following code. What does
a href="javascript:mailsent();
do? I am completely new to web design!
I am trying to create a contact form and found one I liked at http://www.moozedesign.com/
But I am confused about how it works. From most tutorials online, they use PHP and this one doesn’t seem to.
<div id="contForm">
<div id="fDiv"><form method="POST" name="form1">
<ul>
<li><input type="text" class="input-main"
name="Name" /></li>
<li><input type="text" class="input-main" name="Company" /></li>
<li><input type="text" class="input-main" name="Email" /></li>
<li><input type="text" class="input-main" name="Mobile" /></li>
<li class="forTA"><textarea class="textarea-main" cols="100" rows="3" name="Comments"></textarea></li>
</ul></form>
</div>
<div style="clear:both"></div>
<div id="subForm"><[COLOR="Red"]a href="javascript:mailsent();[/COLOR]"></a></div>
<div style="clear:right"></div>
</div>
Here are the fDiv css which contains the text boxes to fill out
#fDiv{
width:670px;
margin-top:5px;
float:right;
background:url(../images/form_bg.png) top left no-repeat;
}
#fDiv ul{
padding-left:140px;
padding-top:20px;
list-style:none;
}
#fDiv ul li{
width:465px;
text-align:center
}
#fDiv ul li .input-main{
background:url(../images/input_n.png) center no-repeat;
padding-left:18px;
padding-right:18px;
height:46px;
width:440px;
border:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:40px;
}
#fDiv ul li .input-main-h{
background:url(../images/input_o.png) center no-repeat;
padding-left:18px;
padding-right:18px;
height:46px;
width:440px;
border:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:40px;
}
.forTA{
height:100px;
width:465px;
padding-left:7px;
padding-right:18px;
padding-top:10px;
background:url(../images/textarea_n.png) no-repeat scroll 7px 0 transparent;
}
.forhTA{
height:100px;
width:465px;
padding-left:7px;
padding-right:18px;
padding-top:10px;
background:url(../images/textarea_o.png) no-repeat scroll 7px 0 transparent;
}
#fDiv ul li .textarea-main{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:transparent;
line-height:18px;
height:76px;
width:440px;
border:none;
overflow:hidden;
padding:0px;
}
#fDiv ul li .textarea-main-h{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:transparent;
line-height:18px;
height:76px;
width:440px;
border:none;
overflow:hidden;
padding:0px;
}
Here is the subForm css which contains the image for the submit button
#subForm{
background:url(../images/submitBtn.png) top left no-repeat;
width:100px;
height:30px;
display:block;
float:right;
margin-right:60px;
margin-bottom:40px;
}
Thank you very much for your help!
Raffles
November 16, 2010, 10:54pm
2
All the CSS is just for presentation - that’s what CSS does: it makes your HTML look pretty.
JavaScript allows you to interact with the webpage. It is primarily event-driven. That is, the webpage does things when you do things, like click, type, move the mouse, or whatever.
What that code does is launch a function called “mailsent()” when you click the link. The way they have coded it is horrible and frowned upon (for details on this, search for “unobtrusive javascript”).
I you view the source of the page, you will see this function at the top of the page:
<script>
function mailsent()
{
document.form1.action="index.php?act=sent#mContact";
document.form1.submit();
}
</script>
It does something very simple. It modifies the “action” attribute of the form, and then submits it.
This is completely pointless because javascript is not needed for this - a simple <input type=“image”> would have sufficed. That is, unless this is some anti-spam technique, which it could well be, as spammers tend not to have javascript enabled.
Regardless, the “javascript:” pseudo-protocol in links should not be used.
system
November 16, 2010, 10:55pm
3
coldmail590:
Hello everyone, I have a question regarding the following code. What does
a href="javascript:mailsent();
do?
when you click that link, a javascript function called mailsent() is executed. you will need to look at the code in mailsent() to see exactly what it does.
<script>
function mailsent()
{
document.form1.action="index.php?act=sent#mContact";
document.form1.submit();
}
</script>
So after I click on the submit button, the file index.php would take in user input and sends an email?
Thank you very much for your help!
Raffles
November 16, 2010, 11:29pm
5
Yes, that’s right. The PHP file should certainly sanitize the input before doing anything with it, though.
Thank you Raffles for your replies!
I decided to look for a simple PHP Contact form tutorial and came across this
http://www.kirupa.com/web/php_contact_form.htm
Particularly
<form method="POST" action="mailer.php">
<input type="text" name="name" size="19"><br>
<br>
<input type="text" name="email" size="19"><br>
<br>
<textarea rows="9" name="message" cols="30"></textarea>
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
Following that format I revised my code to the following
<div id="contForm">
<div id="fDiv">
<form method="POST" action="mailer.php">
<ul>
<li><input type="text" class="input-main" name="name" /></li>
<li><input type="text" class="input-main" name="email" /></li>
<li class="forTA"><textarea class="textarea-main"
cols="100" rows="3" name="message"></textarea></li>
</ul>
</form>
</div>
<div style="clear:both"></div>
<div id="subForm"><input type="submit" name="submit"></div>
<div style="clear:right"></div>
</div>
The question I have now is the Submit button.
Thanks again!
system
November 17, 2010, 8:26am
7
one option is to use an image input type as the submit button