Page 1 of 1

[SOLVED] How to get value of button in jQuery

Posted: Mon Nov 01, 2010 9:32 am
by Bbob
Hi

How do I get which button has been pressed using jQuery?

This is my current code which doesnt work. Im not getting any value on the variable 'decision'


page.php

Code: Select all

<form name="decision">
<input type="button" name="place" id="1" value="First" onClick = "choice();" />
<input type="button" name="place" id="2" value="Second" onClick = "choice();" />
</form>

jquery.js

Code: Select all

function choice()
{
   $.post(
	      'process.php',
			{
				decision: document.decision.place.value //document.form.name.value
			},
			
			function(result)
			{
				alert(result);
			}
	
		  );
}

process.php

Code: Select all


echo $_POST['decision'];


Re: How to get value of button in jQuery

Posted: Mon Nov 01, 2010 10:47 am
by pickle
You should update your javascript. Especially with a modern library, you should be attaching event handlers in Javascript, not triggering using the onClick attribute. Additionally, you should use jQuery selectors to target which element was clicked, not DOM syntax like that.

Code: Select all

<form id="decision">
<input type="button" name="place" id="1" value="First"/>
<input type="button" name="place" id="2" value="Second"/>
</form>

Code: Select all

$(document).ready(function(){
  $("#decision input[name=place]").click(function(){
    var clickedButtonValue = $(this).val();
  }
});

Re: How to get value of button in jQuery

Posted: Mon Nov 01, 2010 3:17 pm
by kaszu
And instead of value you should use id to detect which button was clicked, because if one day you (or client) will decide to localize website you will have to rewrite your js/php.

Code: Select all

var clickedButtonId = $(this).attr('id');

Re: How to get value of button in jQuery

Posted: Tue Nov 02, 2010 7:58 am
by Bbob
Thanks it works great :D


How do I pass the value to PHP?

Do I use post? Like this?

Code: Select all


$.post('answer.php', { choice: clickedButtonValue }

.......

BTW what do you call this format ("decision input[name=place]")? Its the first time Ive seen it. Can you please post a link where I can find a guide on how to use it?

Re: How to get value of button in jQuery

Posted: Tue Nov 02, 2010 8:46 am
by Eran
The manual is your friend - http://api.jquery.com/category/selectors/

Re: How to get value of button in jQuery

Posted: Tue Nov 02, 2010 9:06 am
by Bbob
Hi

I tried using this code but it doesnt work :( - I still cant pass the variable of decision (value of button clicked)

Code: Select all

$(document).ready(function()
{
	
	$("#decision input[name=decision]").click(function()
		{
			var answer = $(this).attr('id');
			
		},
		$.post(decision.php',
			   {
				   decision: answer
			   },
			   
			   function(result)
			   {
				   alert(result);
			   }));
});




This is decision.php

Code: Select all

echo $_POST['decision'];

Re: How to get value of button in jQuery

Posted: Tue Nov 02, 2010 9:44 am
by pickle
Sorry, I guess that wasn't 100% clear. jQuery is a javascript library. Therefore, you'll need to include jQuery in your page before the selectors will work.

Re: How to get value of button in jQuery

Posted: Tue Nov 02, 2010 9:57 am
by Bbob
You mean...

Code: Select all

<script type="text/javascript" src="jquery.js"> </script>

... if this is what your saying, I already have this in my page.

Re: How to get value of button in jQuery

Posted: Tue Nov 02, 2010 3:42 pm
by pickle
Ok.

What isn't working? Be specific. Are you getting errors? Do you have Firebug installed? Simply looking over your posted code, I see the highlighting is off due to a missing single quote.

Re: How to get value of button in jQuery

Posted: Tue Nov 02, 2010 7:12 pm
by Bbob
Its working now :D

Thanks for the replies :D

Here the code: (I put the $.post inside the click function )

Code: Select all

$(document).ready(function()
{
	
	$("#decision input[name=decision]").click(function()
		{
			var answer = $(this).attr('id');
			
			$.post('decision.php',
			   {
				   decision: answer
			   },
			   
			   function(result)
			   {
				   alert(result);
			   }
		)});
});