PHP的JavaScript形式序列化获取数据未定义的索引

Question

I want to call input value from javascript My home page code :

<form method="post" id="form">
                  <div class="row">
                    <div class="col-md-6">
                      <label for="f_name">First Name</label>
                      <input type="text" class="form-control" name="f_name "id="f_name" value="">
                    </div>
                    <div class="col-md-6">
                      <label for="l_name">Last Name</label>
                      <input type="text" class="form-control" name="l_name" id="l_name" value="">
                    </div>
                  </div>

.... javascript code :

$("#singup_btn").click(function(event){
    event.preventDefault();
    $.ajax({
      url     : "register.php",
      method  : "POST",
      data    : $("form").serialize(),
      success : function(data){
        alert(data);
      }
    })
  })

...calling page code :

<?php

include "db.php";

    $fname = $_POST["f_name"];
    $lname = $_POST["l_name"];
...
echo $fname;

...error while click button, only last name (input) value defined

<br />
<b>Notice</b>:  Undefined index: f_name in <b>D:\xampp\htdocs\shop\register.php</b> on line <b>5</b><br />
<br />
<b>Notice</b>:  Undefined index: email in <b>D:\xampp\htdocs\shop\register.php</b> on line <b>7</b><br />
<br />
<b>Notice</b>:  Undefined index: password in <b>D:\xampp\htdocs\shop\register.php</b> on line <b>8</b><br />

please someone help me? I stuck like more than 4 hours on this. Im learning javascript n php, n still newbie. Please help. thanks.

Answer 1

You are missing a # You also have an error in your first input field.

<input name="f_name ">

shouldbe

<input name="f_name">

$("#singup_btn").click(function(event){
    event.preventDefault();
    $.ajax({
        url     : "register.php",
        method  : "POST",
        data    : $("#form").serialize(),
        success : function(data){
            alert(data);
        }
    })
})

Answer 2

try this code

$(document).on('click', '#singup_btn', function() {
    $.ajax({
        url     : "register.php",
        type    : "POST",
        data    : $("#form").serialize(),
        success : function(data){
            alert(data);
        }
    });
});

Please remove type="submit" from submit button and add type="button". It will work!

Answer 3

Serializing the form with a space in name="f_name "id="f_name" forces a + to be appended to the serialized value. This is why its not being picked up correctly server side.

---

Expected server side value

f_name=asd&l_name=asd

---

Actual server side value

f_name+=asd&l_name=asd

---

see test below

 $("button").click(function() { //output values before serialization console.log( "Result of f_name"); console.log ($("#f_name").val() ); console.log( "Result of l_name"); console.log ($("#l_name").val() ); //output values after serialization var serialized = $("form").serialize(); console.log( "Result: Notice how f_name has an appended + in its key"); console.log( "'" + serialized + "'"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" id="form"> <div class="row"> <div class="col-md-6"> <label for="f_name">First Name</label> <input type="text" class="form-control" name="f_name "id="f_name" value=""> </div> <div class="col-md-6"> <label for="l_name">Last Name</label> <input type="text" class="form-control" name="l_name" id="l_name" value=""> </div> </div> <button type="button"> test </button> </form> 

Credit to Chris