How can Javascript securely access user info?

When a user clicks on my green button, I need Javascript to detect this and pass the $UserID and $ActivityID to the server to be stored in the database.

But what's the best way for JS to securely get this info and send it to the server? I've been hiding variables in the HTML:

HTML:

 <div class="green-button">Add it</div>
 <input type="hidden" class="u" value = " <?php $UserID ?>  "/>开发者_如何学JAVA; 
 <input type="hidden" class="a" value = " <?php $ActivityID ?>  "/> 

jQuery:

jQuery('.green-button').click(function(event){
var $UserID = jQuery(this).siblings('input').hasClass('u').attr('value');
var $ActivityID = jQuery(this).siblings('input').hasClass('a').attr('value');
// rest of the code...

However, this doesn't seem secure. What if someone uses Firebug to change the HTML and then clicks on the button? Won't garbage be written into the dbase?

Thanks for the tips.

Well, you need to explain as which sort of security are you looking for. Are you looking to secure the data sent over the network? If so, then you'll have to opt for SSL certificate and send data AS post over it.

But, if you want the data to be invisible to the user, then there is no such way to do it, since if anyone is reading the packets sent from his machine, he can easily figure out what data is being sent over.

Use your server side scripting language to validate whatever is passed to it from the browser. Anything that happens in the web browser should not be trusted by the server. So if user = "johnSmith" is passed and activity ="save" check the page was sent from JohnSmith (presumably you've stored the user in a session object). Also check "save" is a valid action.

You can obscure your values (store your values as HEX, Base64, etc..), or hash the data using HMAC http://us.php.net/manual/en/function.hash-hmac.php.

Maybe in addition to server checks, you can get values of inputs after document load, save them in some javascript object, delete inputs from DOM and on button click send values from the object.

$(document).ready() {
    var store = [];
    $('input').each(function () {
      store.push( { this.className : this.value });
      $(this).remove();
    });

   // now all you data save in store hash array with pairs: { class : value }

    $('.green-button').click(function(event){
       ...send values from "store" variable...
    });
}

As mentioned above, it's not real security, just a little foolproof..