jQuery-Ajax : insert data from php

Question

I have this code:

for my view:

<b><input type="text" id="pagibigno" onclick="window.location.assign('#')"/></b>
<div id="pagibig_form">
    <div class="err" id="add_err"></div>
    <form>
        <label>Pagibig Number:</label>
        <input type="text" id="signpagibigno" name="signpagibigno" value="signpagibigno" />
        <input type="text" id="txtpagibigno" name="txtpagibigno" />
        <input type="submit" id="login" value="Login" />
        <input type="button" id="cancel_hide" value="Cancel" />
    </form>
</div>

addField.php

<?php
include 'dbconn.php';    
$signpagibigno = $_GET['signpagibigno'];
$txtpagibigno = $_GET['txtpagibigno'];
echo "INSERT INTO `employer_profile` (`id`, `pagibig_no`, `buss_name`, `sss_no`, `div_code`, `address`, `zip_code`, `tin`, `contact_no`) 
                    VALUES (NULL, '$txtpagibigno', NULL, NULL, NULL, NULL, NULL, NULL, NULL)";
$sql = $conn->prepare("INSERT INTO `employer_profile` (`id`, `pagibig_no`, `buss_name`, `sss_no`, `div_code`, `address`, `zip_code`, `tin`, `contact_no`) 
                    VALUES (NULL, '$txtpagibigno', NULL, NULL, NULL, NULL, NULL, NULL, NULL)");

// mysql_query($sql);    
$sql->execute();
?>

popup.js

$(document).ready(function ()
{
    $("#pagibigno").click(function ()
    {
        $("#shadow").fadeIn("normal");
        $("#pagibig_form").fadeIn("normal");
        $("#user_name").focus();
    });
    $("#cancel_hide").click(function ()
    {
        $("#pagibig_form").fadeOut("normal");
        $("#shadow").fadeOut();
    });
    $("#login").click(function ()
    {
        pagibigno = $("#txtpagibigno").val();
        $.ajax(
        {
            type: "GET",
            url: "addField.php",
            data: data,
            success: function (html)
            {
                if (pagibigno != '')
                {
                    $("#pagibig_form").fadeOut("normal");
                    $("#shadow").fadeOut();
                }
                else
                {
                    $("#add_err").html("Please complete the field");
                }
            },
            beforeSend: function ()
            {
                $("#add_err").html("Loading...")
            }
        });
        return false;
    });
});

when I run the dataField.php the data save to my database. but when I use the view, where the ajax takes place the data did not save. I read this link for this codes Alert in Jquery pagination Please help. thanks

Answer 1

You are not passing the data to the php page. See the jquery code below :

$(document).ready(function () {
    $("#pagibigno").click(function () {
        $("#shadow").fadeIn("normal");
        $("#pagibig_form").fadeIn("normal");
        $("#user_name").focus();
    });
    $("#cancel_hide").click(function () {
        $("#pagibig_form").fadeOut("normal");
        $("#shadow").fadeOut();
    });
    $("#login").click(function () {
        txtpagibigno  = $("#txtpagibigno").val();//Getting value from text field
        signpagibigno = $("#signpagibigno").val();//Getting value from text field
        $.ajax({
            type: "GET",
            url: "addField.php",
            data: "txtpagibigno="+txtpagibigno+"&signpagibigno="+signpagibigno,//Passing the values to the php page
            success: function (html) {
                if (pagibigno != '') {
                    $("#pagibig_form").fadeOut("normal");
                    $("#shadow").fadeOut();
                } else {
                    $("#add_err").html("Please complete the field");
                }
            },
            beforeSend: function () {
                $("#add_err").html("Loading...")
            }
        });
        return false;
    });
});