Send variables to javascript(jquery) function

Question

I wont to be able to send a variable to a JavaScript function when I click on a link but for some reason I cant find anywhere on how to do it on the internet.

Here is the function at the top of my page:

<script>
$(document).ready(function(){
$('[name=updateInterface]').click(function() {
$("#interfaceScreen").load("modules/interface/interfaceScreen.php?h= &v= ");
});
});
</script>

As you can see I need the variable to be placed after the "h=" and "v=" parts.

Here is the link to activate the function in my page:

<a href="#" name="updateInterface"><img src="images/map/invisible.png" border="0" /></a>

cletus · Accepted Answer · 2009-10-18 14:43:32Z

Variables from where? It's easy enough:

var h = 20;
var v = 40;
$(function() {
  $('[name=updateInterface]').click(function() {
    $("#interfaceScreen").load("modules/interface/interfaceScreen.php?h=" +
      encodeURIComponent(h) + "&v=" + enocdeURICompoennt(v));
  });
});

Just make sure you escape them with encodeURIComponent().

You can of course get them from anywhere like:

<input type="text" id="txth">
<input type="text" id="txth">

and then:

var h = $("#txth").val();
var v = $("#txtv").val();

Edit: Ok, from your comments I gather you want to send the information from the server back to the client so the client can send it back. The first is to do your click handler in a non-jquery kind of way:

<a href="javascript:handle_click(17,43);">Click me</a>

with:

function handle_click(h, v) {
  $("#interfaceScreen").load("modules/interface/interfaceScreen.php?h=" +
    encodeURIComponent(h) + "&v=" + enocdeURICompoennt(v));
}

That's probably the easiest solution. If you want to stick with jquery click handlers you can always embed this information in an attribute or a hidden element. For example:

<a href="#" class="special"><div class="special-h">12</div><div class="special-v">34</div>Click me</a>

with CSS:

a.special div { display: none; }

and:

$(function() {
  $("a.special").click(function() {
    var h = $(this).children("special-h").text();
    var v = $(this).children("special-v").text();
    $("#interfaceScreen").load("modules/interface/interfaceScreen.php?h=" +
      encodeURIComponent(h) + "&v=" + enocdeURICompoennt(v));
  });
});

There are many variations on this theme.

Lastly, I'll point out that I would advise you not to do attribute lookup selectors where you can possibly avoid it. Give the anchor a class and/or ID and use one of those to assign the event handler. Also use a selector like "a.special" over ".special" too (for performance reasons).

richsage · Accepted Answer · 2009-10-18 14:34:10Z

0

Do you mean appending them into the URL string?

<script>
$(document).ready(function(){
$('[name=updateInterface]').click(function() {
$("#interfaceScreen").load("modules/interface/interfaceScreen.php?h=" + h + "&v=" + v);
});
});
</script>

This assumes you have the variables h and v defined elsewhere in your script.

answered Oct 18, 2009 at 14:34

richsage

27.1k8 gold badges60 silver badges65 bronze badges

1 Comment

Stanni Over a year ago

I wont to send the variables with the link, the reason is that I will have multiple links but with different variables. So clicking on a different link will send 2 different variables to the function.

Collectives™ on Stack Overflow

Send variables to javascript(jquery) function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related