Passing values to a php file via jQuery ajax problem

Question

I have a contact form, the values of which I'm passing to a php page to save it to a text file. Somehow, it seems I cannot get the $_POSt values via ajax to save. What am I doing wrong? I am assuming something is wrong with my javascript code.

Here is the jQuery:

function checkForm(form) {
                 var cssObj = {
                      'background-color' : '#F5C9C9',
                      'border-color' : '#F5A6A6',
                      'border-style' : 'solid',
                      'border-size' : '1px',
                      'color' : '#383838'
                    }
                if ($("#name").val() == "" || $("#name").val() == "Your Name" || $("#name").val() == "Field cannot be blank") {
                    $("#name").css(cssObj);
                    $("#name").val('Field cannot be blank');
                    return false;
                }
                else if ($("#email").val() == "" || $("#email").val() == "Your Email" || $("#email").val() == "Field cannot be blank" ||  $("#email").val() == "Please enter a valid Email Address") {
                    $("#email").css(cssObj);
                    $("#email").val('Field cannot be blank');
                    return false;
                }
                else if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($("#email").val())) {
                    $("#email").css(cssObj);
                    $("#email").val('Please enter a valid Email Address');
                    return false;
                }
                else if ($("#msg").val() == "" || $("#msg").val() == "Your Message" || $("#msg").val() == "You forgot to enter your message!") {
                    $("#msg").css(cssObj);
                    $("#msg").val('You forgot to enter your message!');
                    return false;
                }
                else {
                        //create post data
                      var postData = { 
                        "name" : $("#name").val(),
                        "email" : $("#email").val(),
                        "msg" : $("#msg").val(),
                        "origin" : $("#origin").val()
                      };

                      //make the call
                      $.ajax({
                        type: "POST",
                        url: "test.php",
                        data: postData, 
                        success: function(response){
                            $('#label').show();

                        }
                      });
                }
        }

              $(function() {

                $('.msgload')
                    .hide()  // hide it initially
                    .ajaxStart(function() {
                        $(this).show();
                    })
                    .ajaxStop(function() {
                        $(this).hide();
                    });
                  }

HTML:

<form action="test.php" method="post" id="contactform" class="form">
        <div class="container">
            <div class="field">
                <input type="text" tabindex="1" value="Your Name" name="name" id="name" /><br />
            </div>
            <div class="field">
                <input type="text" tabindex="2" value="Your Email" name="email" id="email" /><br />
            </div>    
            <div class="field">
                <textarea tabindex="3" name="msg" id="msg">Your Message</textarea><br />
            </div> 
            <div class="field">
                <input type="text" tabindex="4" value="Type 'Yes, I am human'" name="captcha" id="captcha" /><br />
            </div> 
            <div class="field">
                <label id="label" style="display:none;">Your Message Has Been Sent</label>
            </div>
            <img src="image/ajax-loader.gif" alt="Sending" class="msgload">
            <input type="button" onclick="return checkForm('contactform');" id="sb" value="Submit" class="sbtn" />
            <input type="hidden" value="origin" name="origin" id="origin" style="display: none;"/>  
      </div>
</form>

PHP:

$data["name"]=$_POST["name"] 
$data["email"]=$_POST["email"] 
$data["msg"]=$_POST["msg"] 
$data["origin"]=$_POST["origin"] 


file_put_contents("test.txt", serialize($data));`enter code here`

Answer 1

      //create post data
                  var postData = { 
                    "name" : $("#name").val(),
                    "email" : $("#email").val(),
                    "msg" : $("#msg").val(),
                    "origin" : $("#origin").val()
                  };

//change to..

var email = encodeURIComponent($("#email").val());
var name = encodeURIComponent($("#name").val());
var msg = encodeURIComponent($("#msg").val());
var origin = encodeURIComponent($("#origin").val());
var postData = "name="+name+"&mail="+email+"&msg="+msg+"&origin="+origin;