valeur de la variable ne pas envoyer au serveur avec la demande en utilisant jQuery Ajax code

Question

J'ai un formulaire de contact, dont les valeurs que je passe à une page php pour l'enregistrer dans un fichier texte. D'une certaine manière, il semble que je ne peux pas obtenir les valeurs $ _POST via ajax pour sauvegarder. Qu'est-ce que je fais mal? Je suppose que quelque chose ne va pas avec mon code javascript.

Voici le 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() 
        }; 

// changement ..

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; 

Answer 2

Utilisez ce dans le script comme exemple:

$(document).ready(function(){ 
    $("#submit").click(function(){ 
     var firstName = $("#first_name").attr("value"); 
     var lastName = $("#last_name").attr("value"); 
     $.ajax({ 
      type: "POST", 
      url: "ajax_file.php", 
      data: 'firstName='+firstName+'&lastName='+lastName 
     }); 
    }); 
}); 

Et que vous avez forme comme ceci:

<form> 
    <input type="text" name="first_name" id="first_name" /> 
    <input type="text" name="last_name" id="last_name" /> 
    <input type="button" name="submit" id="submit" value="Submit" /> 
</form>