[RESOLVED] How can I add multiple comment boxes on a webpage? html/php

[obelizk]

Hey guys. I got my contact form to work, but now I ran into a different issue.

For people purchasing something on my website, I'm having them directed to a page where they can input information in comment boxes, and when they hit submit, the information is sent to my e-mail address.

I'm using HTML for the page itself, but it's working with PHP to make the e-mail go through to my e-mail.

The problem i'm having is - I have 4 comment boxes on the page I made, and everything works on the page. I even get the e-mail sent to me with the information that the person has entered, but I don't get ALL the information they entered. I'm only getting the information they entered in the first comment box.

Please follow me through this:::

There is 4 boxes. To test the page, I've entered in "aaa" in box 1, "bbb" in box 2, "ccc" in box 3, and "ddd" in box 4.

When I get the e-mail saying someone has entered their information on the page, the e-mail shows this:

Name: John Doe
phone: [phone]
*Email: [e-mail]
Comment: aa
Comment1: aa
Comment2: aa
Comment3: aa

instead of showing each of the comment boxes being unique. I must be doing something wrong with the code.

When I created this new 'project info' page, I basically copied the boxes from the contact page I had, and then edited the code to make them work. This is the only thing that isn't working. What makes these comment boxes unique?

Here is my code for the comment boxes in the HTML:

<p style="left: 0px; top: -58px"><span lang="EN">
							<strong>Tell us a bit about your business and your 
							products</strong></span>
&nbsp;<textarea class="text-area" name="contact-comment1" id="message" cols="20" rows="1"></textarea>&nbsp;
                            <span class="comment-required"></span></p>

                        <br>

                    	<p style="left: 1px; top: -64px"><span lang="EN">
						<strong>Tell us a bit about the demographics you target(type of customers, average age, male or female?, etc). 
						</strong></span>
<textarea class="text-area1" name="contact-comment2" id="message0" cols="20" rows="1"></textarea>&nbsp;
                        	<span class="comment2-required"></span></p>

                    	<br>

                    	<p style="left: 1px; top: -64px"><span lang="EN">
						<strong>Please provide us with a list of your 5 favorite websites in terms of styling. In other words, which 5 websites do you feel have the best styling/presentation? 
						</strong></span>
<textarea class="text-area2" name="contact-comment3" id="message1" cols="20" rows="1"></textarea>&nbsp;
                        	<span class="comment3-required"></span></p>

                    	<br>

						<p style="left: 1px; top: -64px"><span lang="EN">
						<strong>If you have any other comments or ideas, please communicate them here. 
						</strong></span>
<textarea class="text-area3" name="contact-comment4" id="message2" cols="20" rows="1"></textarea>&nbsp;
                        	<span class="comment4-required"><br><br></span></p>

                    	<p class="under-shadow" style="left: 167.5px; top: -78px; width: 97px;">
						<input class="send" id="submit-form" name="submit1" type="submit" value="Send" style="width: 93px" /></p>



                    <div class="clear"></div>
                        <p style="left: 4px; top: -500px">&nbsp;<p style="left: 4px; top: -450px">
						&nbsp;<p style="left: 4px; top: -400px">&nbsp;
						</div>

               <p>&nbsp;</p>
                    </form>

                <div class="clear">
				</div>

            </div><!-- Grid 12 end -->

And here is my PHP page:

<?php
 $names = $_POST['names'];
 $phone = $_POST['phone'];
 $email = $_POST['email_address'];
 $comment = $_POST['comment'];
 $comment1 = $_POST['comment1'];
 $comment2 = $_POST['comment2'];
 $comment3 = $_POST['comment3'];
 $to ='[e-mail]';

 $message = "";
 $message .= "*Name: " . htmlspecialchars($names, ENT_QUOTES) . "<br>\n";
 $message .= "*phone: " . htmlspecialchars($phone, ENT_QUOTES) . "<br>\n";
 $message .= "*Email: " . htmlspecialchars($email, ENT_QUOTES) . "<br>\n";
 $message .= "Comment: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
 $message .= "Comment1: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
 $message .= "Comment2: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
 $message .= "Comment3: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
 $lowmsg = strtolower($message);

 $headers = "MIME-Version: 1.0\r\nContent-type: text/html; charset=iso-8859-1\r\n";
 $headers .= "From: \"" . $names . "\" <" . $email . ">\r\n";
 $headers .= "Reply-To: " .  $email . "\r\n";
 $message = utf8_decode($message);  mail($to, "PURCHASE ORDER", $message, $headers);

 if ($message){
   echo 'sent';
 }else{
    echo 'failed';
 }
?>

There is also this JS involved :

<!-- JS Start //-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.2.min.js'>\x3C/script>")</script>
<script type="text/javascript">
	var $ = jQuery.noConflict();
</script>
<script type="text/javascript" src="js/jquery.detectbrowser.js"></script> 
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.infieldlabel.min.js"></script>
<script type="text/javascript" src="js/jquery.twitter.js"></script>
<script type="text/javascript" src="js/jquery.supersubs.js"></script>
<script type="text/javascript" src="js/jquery.superfish.js"></script>
<script type="text/javascript" src="js/jquery.quovolver.js"></script>
<script type="text/javascript" src="js/jquery.tipTip.minified.js"></script>
<script type="text/javascript" src="js/jquery.totop.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="js/redirection_mobile.min.js"></script>

<!-- Custom Functions - Main Js file -->
<script type="text/javascript" src="js/functions.js"></script> 

<!-- Redirect if mobile device -->
<script type="text/javascript">
	SA.redirection_mobile ({
	  noredirection_param:"noredirection",
	  mobile_url : "hogash.com/ammon_html/iphone/", // put here your own link
	  mobile_prefix : "http",
	  cookie_hours : "2" 
	});

$(document).ready(function() {

// load hidden map
loadHiddenMap();

//process the contact form
$('#submit-form').click(function(){
	var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	var names  = $('#contact-form [name="contact-names"]').val();
	var phone  = $('#contact-form [name="contact-phone"]').val();
	var email_address = $('#contact-form [name="contact-email"]').val();
	var comment  = $.trim($('#contact-form #message').val());
	var comment1  = $.trim($('#contact-form #message0').val());
	var comment2  = $.trim($('#contact-form #message1').val());
	var comment3  = $.trim($('#contact-form #message2').val());
	var data_html ='' ;

	if(names == ""){
		$('.name-required').html('Please enter your name.');
	}else{
		$('.name-required').html('');
	}
	if(names == ""){
		$('.phone-required').html('Please enter your phone.');
	}else{
		$('.phone-required').html('');
	}
	if(email_address == ""){
		$('.email-required').html('Your email is required.');
	}else if(reg.test(email_address) == false){
		$('.email-required').html('Invalid Email Address.');
	}else{
		$('.email-required').html('');
	}

	if(comment == ""){
		$('.comment-required').html('Comment is required.');
	}else{
		$('.comment-required').html('');
	}

	if(comment != "" && names != "" && reg.test(email_address) != false) {
		data_html = "names="+ names + "&phone="+ phone + "&comment=" + comment + "&email_address="+ email_address;
		//alert(data_html);
		$.ajax({
			type: 'POST',
			url: 'php-includes/contact_send3.php',
			data: data_html,
			success: function(msg){
				if (msg == 'sent'){
					$('#success').html('<div class="success">Message sent!</div>')  ;
					$('#contact-form [name="contact-names"]').val('');
					$('#contact-form [name="contact-phone"]').val('');
					$('#contact-form [name="contact-email"]').val('');
					$('#contact-form #message').val('');
					$('#contact-form #message0').val('');
					$('#contact-form #message1').val('');
					$('#contact-form #message2').val('');
				}else{
					$('#success').html('<div class="error">Mail Error. Please Try Again!</div>')  ; 
				}
			}
		});

	}
	return false;
});

});
</script>
<!-- JS End //--> 

I'm sorry this is so long. I hope someone knows what I'm trying to figure out here and is able to help.

Thanks a ton though in advance.

-obelizk

[obelizk]

Basically my question comes down to -

How do you add more than one comment box on a contact form?

Does anyone know a tutorial for this? or anything? I feel like I'm just missing a line of code somewhere or something isn't labeled right

[bradgrafelman]

Take a look at your code that builds the e-mail string:

$message .= "Comment: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
 $message .= "Comment1: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
 $message .= "Comment2: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
 $message .= "Comment3: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";

Specifically, take a look at which variable(s) you're concatenating in that string all four times; I think you'll understand right away why you're only getting the information from the first box repeated four times. 😉

[obelizk]

ah i saw this! and I changed it to, but it still didn't work. I figure this out earlier today after i posted.

I changed it to:

$message .= "Comment: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
$message .= "Comment1: " . htmlspecialchars($comment1, ENT_QUOTES) . "<br>\n";
$message .= "Comment2: " . htmlspecialchars($comment2, ENT_QUOTES) . "<br>\n";
$message .= "Comment3: " . htmlspecialchars($comment3, ENT_QUOTES) . "<br>\n"; 

The e-mail i receive still looks like :

Name: John Doe
phone: [phone]
*Email: [e-mail]
Comment: aa
Comment1: aa
Comment2: aa
Comment3: aa

[bradgrafelman]

Are you sure you actually saved/uploaded your changes?

If so, you can try doing a [man]print_r/man on the $_POST array to view its contents.

[obelizk]

this is what i have now. It has been saved, and i'll post the e-mail it gives me as well. I don't follow what you said about doing the print_r. Can you tell me more? I'll try it for sure.

Here is what I have now:

<?php
 $names = $_POST['names'];
 $phone = $_POST['phone'];
 $email = $_POST['email_address'];
 $comment = $_POST['comment'];
 $comment2 = $_POST['comment2'];
 $comment3 = $_POST['comment3'];
 $comment4 = $_POST['comment4'];
 $to ='[e-mail]';

 $message = "";
 $message .= "*Name: " . htmlspecialchars($names, ENT_QUOTES) . "<br>\n";
 $message .= "*phone: " . htmlspecialchars($phone, ENT_QUOTES) . "<br>\n";
 $message .= "*Email: " . htmlspecialchars($email, ENT_QUOTES) . "<br>\n";
 $message .= "Comment: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
 $message .= "Comment2: " . htmlspecialchars($comment2, ENT_QUOTES) . "<br>\n";
 $message .= "Comment3: " . htmlspecialchars($comment3, ENT_QUOTES) . "<br>\n";
 $message .= "Comment4: " . htmlspecialchars($comment4, ENT_QUOTES) . "<br>\n";
 $lowmsg = strtolower($message);

 $headers = "MIME-Version: 1.0\r\nContent-type: text/html; charset=iso-8859-1\r\n";
 $headers .= "From: \"" . $names . "\" <" . $email . ">\r\n";
 $headers .= "Reply-To: " .  $email . "\r\n";
 $message = utf8_decode($message);  mail($to, "PURCHASE ORDER", $message, $headers);

 if ($message){
   echo 'sent';
 }else{
    echo 'failed';
 }
?>

and this is the email I receive:

Name: John Doe
phone: [phone]
*Email: [e-mail]
Comment: aa
Comment2:
Comment3:
Comment4:

[bradgrafelman]

The next problem would be your JavaScript code that makes the AJAX request:

data_html = "names="+ names + "&phone="+ phone + "&comment=" + comment + "&email_address="+ email_address;
			//alert(data_html);

Note that you're missing a few of the fields in there.

However, a bigger problem (IMHO) is the complexity of all of that JS. Why go through all of that code of creating local variables to contain the values from the form, building your own POST string (quite improperly, too, I might add), and then sending that (obviously error-prone) custom POST string?

Instead, why not simply use AJAX to POST that form as-is (perhaps after some of the basic validation you're doing)?

[obelizk]

This is the complete JS for this thing:

//process the contact form
$('#submit-form').click(function(){
var reg = /^{([A-Za-z0-9-.])+@([A-Za-z0-9-.])+.([A-Za-z]{2,4})$/;}
var names = $('#contact-form [name="contact-names"]').val();
var phone = $('#contact-form [name="contact-phone"]').val();
var email_address = $('#contact-form [name="contact-email"]').val();
var comment = $.trim($('#contact-form #message').val());
var comment2 = $.trim($('#contact-form #message2').val());
var comment3 = $.trim($('#contact-form #message3').val());
var comment4 = $.trim($('#contact-form #message4').val());
var data_html ='' ;

	if(names == ""){
		$('.name-required').html('Please enter your name.');
	}else{
		$('.name-required').html('');
	}
	if(names == ""){
		$('.phone-required').html('Please enter your phone.');
	}else{
		$('.phone-required').html('');
	}
	if(email_address == ""){
		$('.email-required').html('Your email is required.');
	}else if(reg.test(email_address) == false){
		$('.email-required').html('Invalid Email Address.');
	}else{
		$('.email-required').html('');
	}

	if(comment == ""){
		$('.comment-required').html('Comment is required.');
	}else{
		$('.comment-required').html('');
	}

	if(comment != "" && names != "" && reg.test(email_address) != false) {
		data_html = "names="+ names + "&phone="+ phone + "&comment=" + comment + "&email_address="+ email_address;
		//alert(data_html);
		$.ajax({
			type: 'POST',
			url: 'php-includes/contact_send3.php',
			data: data_html,
			success: function(msg){
				if (msg == 'sent'){
					$('#success').html('<div class="success">Message sent!</div>')  ;
					$('#contact-form [name="contact-names"]').val('');
					$('#contact-form [name="contact-phone"]').val('');
					$('#contact-form [name="contact-email"]').val('');
					$('#contact-form #message').val('');
					$('#contact-form #message2').val('');
					$('#contact-form #message3').val('');
					$('#contact-form #message4').val('');
				}else{
					$('#success').html('<div class="error">Mail Error. Please Try Again!</div>')  ; 
				}
			}
		});

	}
	return false;
});

});
</script>
<!-- JS End //-->

And here is the relevant code:

<div id="container">
	    <div class="container-wrap container_12">
        	<div class="grid_12 alpha">
                <div class="breadcrumb">
                    <a href="index.php">Home</a> » Project Info</div>
            </div>
            <div class="clear"></div>
            <div class="separator"></div>

        <div class="main-content">
        	<div class="grid_12 alpha omega" style="left: 0px; top: 0px; height: 1300px">
            	<h1 class="title" style="text-align: center">&nbsp; PROJECT INFO</h1>
                <div id="success"></div>

                <div class="grid_6 alpha" style="left: 250px; top: 0px; height: 1006px">
                    <form id="contact-form" method="post" name="contact-form" class="infield rounded-fields form-preset">
                        <p><span class="note" style="margin-right: 0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; All fields are required!</span>



                        <p style="left: 0px; top: -43px">&nbsp;<p><span class="note" style="height: 15px">Your Name</span><input class="text" name="contact-names" type="text" id="name" />
                        <span class="name-required"></span></p>

                        <br>

                        <p style="left: 0px; top: -28px">&nbsp;<span class="note" style="height: 15px">Your Phone</span><input class="text" name="contact-phone" type="text" id="phone" />
                        <span class="phone-required"></span></p>

                        <br>


                        <p style="left: 0px; top: -50px; width: 460px">&nbsp;<span class="note" style="height: 10px">Your 
						Email</span><input class="text" name="contact-email" type="text" id="email" />
                        <span class="email-required"></span></p>

                        <br>

                        <p style="left: 0px; top: -58px"><span lang="EN">
						<strong>Tell us about your business</strong></span>
&nbsp;<textarea class="text-area" name="contact-comment1" id="message" cols="20" rows="1"></textarea>&nbsp;
                            <span class="comment-required"></span></p>

                        <br>

                    	<p style="left: 1px; top: -64px"><span lang="EN">
						<strong>Demographic? 
						</strong></span>
<textarea class="text-area2" name="contact-comment2" id="message2" cols="20" rows="1"></textarea>&nbsp;
                        	<span class="comment2-required"></span></p>

                    	<br>

                    	<p style="left: 1px; top: -64px"><span lang="EN">
						<strong>Style?
						</strong></span>
<textarea class="text-area3" name="contact-comment3" id="message3" cols="20" rows="1"></textarea>&nbsp;
                        	<span class="comment3-required"></span></p>

                    	<br>

						<p style="left: 1px; top: -64px"><span lang="EN">
						<strong>Other comments.
						</strong></span>
<textarea class="text-area4" name="contact-comment4" id="message4" cols="20" rows="1"></textarea>&nbsp;
                        	<span class="comment4-required"><br><br></span></p>

                    	<p class="under-shadow" style="left: 167.5px; top: -78px; width: 97px;">
						<input class="send" id="submit-form" name="submit1" type="submit" value="Send" style="width: 93px" /></p>



                    <div class="clear"></div>
                        <p style="left: 4px; top: -500px">&nbsp;<p style="left: 4px; top: -450px">
						&nbsp;<p style="left: 4px; top: -400px">&nbsp;
						</div>

               <p>&nbsp;</p>
                    </form>

                <div class="clear">
				</div>

            </div><!-- Grid 12 end -->

            <div class="clear"></div>
        </div>

    </div><!-- .container_12 End -->

	<?php include ("php-includes/bottom.php"); ?><!-- Bottom End -->

	<?php include("php-includes/footer.php"); ?><!-- Footer End -->

[bradgrafelman]

Um.. okay? Not sure why you posted all of that irrelevant code. (It doesn't address either of the two problems I pointed out in my reply above.)

[obelizk]

bradgrafelman;10996602 wrote:

The next problem would be your JavaScript code that makes the AJAX request:

data_html = "names="+ names + "&phone="+ phone + "&comment=" + comment + "&email_address="+ email_address;
			//alert(data_html);

Note that you're missing a few of the fields in there.

However, a bigger problem (IMHO) is the complexity of all of that JS. Why go through all of that code of creating local variables to contain the values from the form, building your own POST string (quite improperly, too, I might add), and then sending that (obviously error-prone) custom POST string?

Instead, why not simply use AJAX to POST that form as-is (perhaps after some of the basic validation you're doing)?

The problem I'm really having is I'm not great at all of this. I paid a developer to put together this site, but I have to make this change on my own.

[obelizk]

I posted it before I saw your reply, and it's all the code that I've been looking at trying to decipher which part is wrong.

Were you saying I could make a change to this code:

data_html = "names="+ names + "&phone="+ phone + "&comment=" + comment + "&email_address="+ email_address;
			//alert(data_html);

to make it work?

[obelizk]

dude. you just solved my problem. It was that line!

THANK YOU!

[obelizk]

just changed it to:

data_html = "names="+ names + "&phone="+ phone + "&comment="+ comment + "&email_address="+ email_address + "&comment2="+ comment2 + "&comment3="+ comment3 + "&comment4="+ comment4;

I must learn more js so I can understand this stuff. I know some html, and php seems simple. JS looks like it's in it's own league