CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
Sidetracking
Sidetracking

Reputation: 229

Got Ajax to submit form data, but won't do it for a textarea

So I got an Ajax form working for the most part, but it only submits data from the input tags. In my MySql database, both of the input forms will submit correctly, but my textarea will fill in as "undefined".

HTML:

<div id="contact_form">
  <form name="contact" method="post" action="">
    <fieldset>

      <input title="name" label="Name" type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">This field is required.</label>

      <input title="email" type="text" name="email" id="email" size="30" value="" class="text-input" />

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

      <textarea type="text"  name="request" maxlength="1000" cols="25" rows="6" title="request" class="text-input"></textarea>

      <label class="error" for="request" id="request_error">This field is required.</label>

        <br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </fieldset>
  </form>
</div>

Javascript:

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

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

      var name = $("input#name").val();
        if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
        var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
        var request = $("textarea#request").val();
        if (request == "") {
      $("label#request_error").show();
      $("textarea#request").focus();
      return false;
    }

        var dataString = 'name='+ name + '&email=' + email + '&request=' + request;
        //alert (dataString);return false;

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

PHP:

<?php
 $name=$_POST['name']; 
 $email=$_POST['email'];
 $request=$_POST['request']; 
 mysql_connect("localhost", "root", "") or die(mysql_error()); 
 mysql_select_db("form") or die(mysql_error()); 
 mysql_query("INSERT INTO `ajaxform` VALUES ('$name', '$email', '$request')") or die(mysql_error());
 ?>

Upvotes: 0

Views: 2761

Answers (2)

Gromer
Gromer

Reputation: 9931

This is the problem:

var request = $("textarea#request").val();

You don't have the id "request" on the textarea.

To fix, do one of the following:

  1. var request = $("textarea.text-input").val();
  2. <textarea type="text" id="request" name="request" maxlength="1000" cols="25" rows="6" title="request" class="text-input"></textarea>

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55740

Textarea had no id="request"

<textarea type="text"  name="request" maxlength="1000" cols="25"
   rows="6" title="request" class="text-input"></textarea>

$("textarea#request").val();

Add the id for the Field or try this

$("textarea[name='request']").val();

Upvotes: 2

Related Questions