如何使用jquery发布到新的php页面

Question

I am trying to post the element information that jQuery pulls, when a user clicks on table cell, to a new page that will use that information (an id in this case) in a sql query. i.e., the user clicks a cell and the job he/she clicks has an id of 25, that is to be passed to my php page that queries the database for the job with that id and then populates the page with said information. The user can then alter the information from the query and submit it to update the database table. I have the id from the click function and a success alert tells me that the info was posted. The problem is that when the page is opened it states that the posted name index is undefined. Here is my script to get the information:

        <script>
        $(document).ready(function()
        {
            $("table.jobs tbody td#job").click(function()
            {
                var $this = $(this);
                var col   = $this.text();
                var LeftCellText = $this.prev().text();
                if (col == '')
                alert("Please pick another column");
                else
                $.ajax(
                {
                    type:"POST",
                    url:"../php/jobUpdate.php",
                    data:"name=" + LeftCellText,
                    success: function()
                    {
                        window.location = "../php/jobUpdate.php";
                    }
                });
            });
        });
    </script>

and here is the simple php page it is sending to:

$name = $_POST['name'];
echo $name;

I am new to jQuery, and I cannot figure out why this is not working?

Answer 1

From your comment to my previous post, it seems that you don't need ajax at all. You just need a form in your HTML:

<form id="MyForm" action="../php/jobUpdate.php" method="POST">
    <input type="hidden" id="jobID" name="yourJobID">
</form>

Note that forms are invisible until you put something visible inside them.

You can have select controls (dropdowns) in there, or all form elements can be invisible by using hidden input fields (like the HTML just above), which you can populate using jQuery. Code to do that would look something like this:

    <script>
    $(document).ready(function() {
        $("table.jobs tbody td#job").click(function() {
            var $this = $(this);
            var col   = $this.text();
            var LeftCellText = $this.prev().text();

            //Set value of hidden field in form. This is how
            //data will be passed to jobUpdate.php, via its `name` param
            $('#jobID').val(LeftCellText); 

            if (col == '')
                alert("Please pick another column");
            else
                $('#myForm').submit();
        });
    });
</script>

If you add more values to your form to send over to jobUpdate.php, just ensure that each element has a name, such as <input type="text" name="selectedJobType"> (this element, type="text", would be visible on screen).

In the jobUpdate.php file, you would get these values thus:

$SJT = $_POST['selectedJobType'];
$id = $_POST["yourJobID"];

//Use these vars in MySQL search, then display some HTML based on results

Note that the key referenced in the $_POST[] array (selectedJobType / yourJobID) is always identical to the name specified in the HTML tag. These names are case sensitive (and spelling counts, too).

Hope this isn't TMI, just wish to cover all the bases.