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;