Jump to content

textarea will not show [object HTMLTextAreaElement]?


mcallaro88

Recommended Posts

I have a php page and I'm using jQuery and some AJAX to validate my contact form (phpmailer & process.php). However, the message is never displayed in my email. The name, email, and subject get passed but the message always comes back as Message: [object HTMLTextAreaElement]. Could someone tell me what I'm doing wrong I've tried everything but nothing is working.

 

Thanks for all who help - MIKE

 

Here is the form HTML

-------------------------------------------------------------------------------------------------------------------

 

<div id="forminfo">

    <form name="contact" method="post" action="">

<dl>

<dt id="name"><label for="fName" class="">Name</label></dt>

<dd><input type="text" class="text" name="fName" id="fName" style="width:200px; height:20px;" /></dd>

        <label class="error" for="fName" id="fName_error">This field is required.</label>

 

<dt id="eMail"><label for="email" class="">Email</label></dt>

<dd><input type="text" class="text" name="email" id="email" style="width:200px; height:20px;" /></dd>

        <label class="error" for="email" id="email_error">This field is required.</label>

 

<dt id="subject"><label for="subject">Subject</label></dt>

<dd><input type="text" size="8" maxlength="40" name="subject" id="subj" style="width:200px; height:20px;" class="text" /></dd>

        <label class="error" for="subject" id="subj_error">This field is required.</label>

 

<dt id="comments">Message</dt>

        <dd><textarea name="memo" class="text2" id="memo"></textarea></dd>

 

<dd><input type="submit" class="button" id="submit" name="submit" value="" /></dd>

</dl>

</form>

</div><!--forminfo-->

 

 

Here is the php

-------------------------------------------------------------------------------------------------------------------

 

<?php

if ((isset($_POST['fName'])) && (strlen(trim($_POST['fName'])) > 0)) {

$name = stripslashes(strip_tags($_POST['fName']));

} else {$name = 'No name entered';}

if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)) {

$email = stripslashes(strip_tags($_POST['email']));

} else {$email = 'No email entered';}

if ((isset($_POST['subj'])) && (strlen(trim($_POST['subj'])) > 0)) {

$subject = stripslashes(strip_tags($_POST['subj']));

} else {$subject = 'No subject entered';}

if ((isset($_POST['memo'])) && (strlen(trim($_POST['memo'])) > 0)) {

$comments = stripslashes(strip_tags($_POST['memo']));

} else {$comments = 'No message entered';}

ob_start();

?>

<html>

<head>

<style type="text/css">

</style>

</head>

<body>

<table width="550" border="1" cellspacing="2" cellpadding="2">

  <tr bgcolor="#eeffee">

    <td>Name</td>

    <td><?=$name;?></td>

  </tr>

  <tr bgcolor="#eeeeff">

    <td>Email</td>

    <td><?=$email;?></td>

  </tr>

  <tr bgcolor="#eeffee">

    <td>Subject</td>

    <td><?=$subject;?></td>

  </tr>

  <tr bgcolor="#eeffee">

    <td>Message</td>

    <td><?=$comments;?></td>

  </tr>

</table>

</body>

</html>

Link to comment
Share on other sites

You didn't really post the part of the code that's relevant to your problem. We'd need to see the AJAX portion of this. But because of the error I can tell you that your problem is almost certainly that you're passing the actual object into the HTTP request rather than the value of that element. So the solution would be to add ".value" to what you're passing to access the value attribute of the object. For a more specific solution you'll need to post the relevant code.

Link to comment
Share on other sites

Sorry about that I knew I forgot to put something lol here is the AJAX stuff

 

$(function() {

  $('.error').hide();

  $('input.text-input').css({backgroundColor:"#FFFFFF"});

  $('input.text-input').focus(function(){

    $(this).css({backgroundColor:"#FFFFFF"});

  });

 

  $(".button").click(function() {

// validate and process form

// first hide any error messages

    $('.error').hide();

 

  var name = $("input#fName").val();

if (name == "") {

      $("label#fName_error").show();

      $("input#fName").focus();

      return false;

    }

var email = $("input#email").val();

if (email == "") {

      $("label#email_error").show();

      $("input#email").focus();

      return false;

    }

var subject = $("input#subj").val();

if (subject == "") {

      $("label#subj_error").show();

      $("input#subj").focus();

      return false;

    }

 

var message = $("input#memo").val();

if (message == "") {

      $("input#memo").focus();

      return false;

    }

 

var dataString = 'fName='+ name + '&email=' + email + '&subj=' + subject + '&memo=' + memo;

//alert (dataString);return false;

 

$.ajax({

      type: "POST",

      url: "bin/process.php",

      data: dataString,

      success: function() {

        $('.formContainer').html("<div id='message'></div>");

        $('#message').html("<h2>Contact Form Submitted!</h2>")

        .append("<p>I will be in touch soon.</p>")

        .hide()

        .fadeIn(1500, function() {

          $('#message').append("<img id='checkmark' src='images/check.png' />");

        });

      }

    });

    return false;

});

});

runOnLoad(function(){

  $("input#fName").select().focus();

});

Link to comment
Share on other sites

Just as I suspected, look at this line:

var dataString = 'fName='+ name + '&email=' + email + '&subj=' + subject + '&memo=' + memo;

You're using memo, which is actually an object. You should be using the variable that you defined for the value of that object. Which is message, so it should be this:

var dataString = 'fName='+ name + '&email=' + email + '&subj=' + subject + '&memo=' + message;

Also, in the future you should use [ code ] or [ php ] (without the spaces) tags.

Link to comment
Share on other sites

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {
	// validate and process form
	// first hide any error messages
    $('.error').hide();

  var name = $("input#fName").val();
	if (name == "") {
      $("label#fName_error").show();
      $("input#fName").focus();
      return false;
    }
	var email = $("input#email").val();
	if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
	var subject = $("input#subj").val();
	if (subject == "") {
      $("label#subj_error").show();
      $("input#subj").focus();
      return false;
    }

var message = $("input#memo").val();
	if (message == "") {
      $("input#memo").focus();
      return false;
    }

	var dataString = 'fName='+ name + '&email=' + email + '&subj=' + subject + '&memo=' + message;
	//alert (dataString);return false;

	$.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('.formContainer').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>I will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
});
});
runOnLoad(function(){
  $("input#fName").select().focus();
});

Link to comment
Share on other sites

  • 3 years later...

sorry that I'm refreshing such an old topic - but I've got similiar issue (and I see we were using same tutorial for doing it) and for anyone who will have in the future similiar problem: check the line with

var message = $("input#memo").val();

and in his form that field wasn't just an INPUT but a TEXTAREA - and that was the problem ;)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.