How do I send values between pages using javascript?

Question

I am currently using a javascript code to make an entire row in my table clickable. Once the row is clicked a function is ran, I am wondering what I can use to redirect to a PHP page and preferably send a post variable along with it. My guess is AJAX but I am not sure how or if it would work.

Javascript

function DoNav(theUrl) {
    document.location.href = theUrl;
};

HTML

<tr onclick="DoNav('myphpscript.php');">

I have access to jQuery so that is also an option. Any help is appreciated, Thanks!

Answer 1

If you need to POST the data (not use GET), One easy option is to create a form element on the fly, attach input elements with the values you need and submit it. You can do that like so if you use jQuery:

$(function() { 
    $('tr').click(function() {
        var mail_id = /* get the mail id of this row... not sure where since I dont' have the HTML */
        $('body').append('<form method="post" action="myphpscript.php" id="donavform" style="display:none;"></form>');
        $('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
        $('#donavform').submit();
    });
});

Hope that makes sense. If not, let me know! It's, okay...

Explanation: The very first line is a jQuery shortcut way of saying "when the document is done loading..." So, when the page is done loading, I'm going to attach an event listener to all elements in the document. When one of those elements is clicked, we can then extract the mail id (and whatever else you need) that is in relation to that particular table row. So, if you had HTML like this:

<!-- 8435 is the mail ID in this example. -->
<tr id="row3">8435</tr>

Then we could extract the mail_id variable like so:

var mail_id = $(this).html();

Now, we are going to attach a hidden form element to the end of the body of the HTML (it doesn't really matter where we put it since it is hidden... so, the end is fine). In this form element, we set the method to POST and the action to whatever php file you need to POST to. I also set an ID so it's easily referred to in the next step.

I'm now going to select the newly-created form element using its ID and I'm going to append a new hidden input element to it with the appropriate name value pair.

$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');

Finally, I'm going to use the jQuery JavaScript submit method to trigger the submit event on the form. This is basically equivalent to pressing the 'submit' button on a normal form.

Try it out, it should work flawlessly.

Answer 2

If you're going to a new page, just submit the form as usual. Put the data in form fields (hidden if required). No need to Ajax, jQuery or any other magic unless you want to stay on the same page and post in the background.