mitch123
13 May 2012, 05:36 PM
Hi guys,
I'm having a breakdown over this problem. I want to have two forms on a page. One for visitors to submit their email address for a mailing list and another form for them to send me information (a contact us form), which will send me their name, email address and their comments.
The problem I'm having is that the submit buttons are triggering the same Javascript file I'm using to validate and send a respond div ("Thank you for getting in touch, etc...") once they click the submit button. I have one Javascript file for the mailinglist form and another for the contact us form.
What 'I think' I need to do is specify to the submit buttons which javascript file to put into action once it's been clicked.
<form id="one">
<div id="mailingList">
<div id="mailingList-Info">
<p>
Please enter your email address below if you would like to be added to our mailing list:
</p>
</div><!--mailingList-Info-->
<div id="mailingList-Input">
<input type="text" id="email" class="textstyle"/>
</div><!--mailingList-Input-->
<div id="mailingList-Button">
<input type="submit" src="" value="" id="button1">
</div><!--mailingList-Button-->
<div id="mailingList-response"></div><!--ResponseClosingDiv-->
</div><!--mailingList-->
</form>
<form id="two">
<div id="EmailerWrapper">
<div id="first_name_wrapper">
<div class="contact-text" id="field_first_name"><p>Your Name:</p>
<input id="first_name" type="text" class="textstyle" />
</div><!--field_first_nameClosingDiv-->
</div><!--first_name_wrapperClosingDiv-->
<div id="email_wrapper">
<div class="contact-text" id="field_email"><p>Your Email:</p>
<input id="email" type="text" class="textstyle" />
</div><!--field_emailClosingDiv-->
</div><!--email_wrapperClosingDiv-->
<div id="comments_wrapper">
<div class="contact-text" id="field_comments"><p>Your message:</p>
<textarea id="message" class="textstyle"></textarea>
</div>
</div><!--field_commentsClosingDiv-->
</div><!--comments_wrapperClosingDiv-->
<div id="submit_wrapper">
<div id="submit">
<input type="submit" value="Send" id="button">
</div><!--submitClosingDiv-->
</div><!--submit_wrapperClosingDiv-->
</div><!--EmailerwrapperClosingDiv-->
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="sender.js"></script>
<script type="text/javascript" src="contact.js"></script>
Javascript sender.js
$(document).ready(function()
{
$("#one").submit(function()
{
var sendersName=$("#first_name").val();
var sendersEmail=$("#email").val();
var sendersMessage=$("#message").val();
$("#mailingList-response").load("sendmailMailingList.php",{email:sendersEmail});
return false;
});
});
PHP sendmailMailingList.php
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "my@email.com";
$email_subject = "Email Subject Line";
function died($error) {
// your error code can go here
echo $error."<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['email']) ||
!isset($_POST['message'])) {
died('');
}
$first_name = $_POST['first_name']; // required
$email_from = $_POST['email']; // required
$comments = $_POST['message']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= '<div id="mailingList-response"><p>The email you entered does not appear to be valid.</p></div>';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Hi, I'd love it if you were to add me to your mailing list and let me know about all of the wonderful things you have planned for the future. Thank you.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "My email is: ".clean_string($email_from)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
<!--This will be posted once they submit a valid email address-->
<div id="mailingList-response"><p>
Thank you for submitting your email address. <br />You will hear from us very soon.
</p></div>
<?php
}
?>
I'd be extremely grateful if you could help me out.
M.
I'm having a breakdown over this problem. I want to have two forms on a page. One for visitors to submit their email address for a mailing list and another form for them to send me information (a contact us form), which will send me their name, email address and their comments.
The problem I'm having is that the submit buttons are triggering the same Javascript file I'm using to validate and send a respond div ("Thank you for getting in touch, etc...") once they click the submit button. I have one Javascript file for the mailinglist form and another for the contact us form.
What 'I think' I need to do is specify to the submit buttons which javascript file to put into action once it's been clicked.
<form id="one">
<div id="mailingList">
<div id="mailingList-Info">
<p>
Please enter your email address below if you would like to be added to our mailing list:
</p>
</div><!--mailingList-Info-->
<div id="mailingList-Input">
<input type="text" id="email" class="textstyle"/>
</div><!--mailingList-Input-->
<div id="mailingList-Button">
<input type="submit" src="" value="" id="button1">
</div><!--mailingList-Button-->
<div id="mailingList-response"></div><!--ResponseClosingDiv-->
</div><!--mailingList-->
</form>
<form id="two">
<div id="EmailerWrapper">
<div id="first_name_wrapper">
<div class="contact-text" id="field_first_name"><p>Your Name:</p>
<input id="first_name" type="text" class="textstyle" />
</div><!--field_first_nameClosingDiv-->
</div><!--first_name_wrapperClosingDiv-->
<div id="email_wrapper">
<div class="contact-text" id="field_email"><p>Your Email:</p>
<input id="email" type="text" class="textstyle" />
</div><!--field_emailClosingDiv-->
</div><!--email_wrapperClosingDiv-->
<div id="comments_wrapper">
<div class="contact-text" id="field_comments"><p>Your message:</p>
<textarea id="message" class="textstyle"></textarea>
</div>
</div><!--field_commentsClosingDiv-->
</div><!--comments_wrapperClosingDiv-->
<div id="submit_wrapper">
<div id="submit">
<input type="submit" value="Send" id="button">
</div><!--submitClosingDiv-->
</div><!--submit_wrapperClosingDiv-->
</div><!--EmailerwrapperClosingDiv-->
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="sender.js"></script>
<script type="text/javascript" src="contact.js"></script>
Javascript sender.js
$(document).ready(function()
{
$("#one").submit(function()
{
var sendersName=$("#first_name").val();
var sendersEmail=$("#email").val();
var sendersMessage=$("#message").val();
$("#mailingList-response").load("sendmailMailingList.php",{email:sendersEmail});
return false;
});
});
PHP sendmailMailingList.php
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "my@email.com";
$email_subject = "Email Subject Line";
function died($error) {
// your error code can go here
echo $error."<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['email']) ||
!isset($_POST['message'])) {
died('');
}
$first_name = $_POST['first_name']; // required
$email_from = $_POST['email']; // required
$comments = $_POST['message']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= '<div id="mailingList-response"><p>The email you entered does not appear to be valid.</p></div>';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Hi, I'd love it if you were to add me to your mailing list and let me know about all of the wonderful things you have planned for the future. Thank you.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "My email is: ".clean_string($email_from)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
<!--This will be posted once they submit a valid email address-->
<div id="mailingList-response"><p>
Thank you for submitting your email address. <br />You will hear from us very soon.
</p></div>
<?php
}
?>
I'd be extremely grateful if you could help me out.
M.