i am creating a few input fields in a foreach loop:
<?php foreach($this->results as $value){?>
<td><a href="$" class="buttonDetails">View Detail</a>
<input name="processor" id="processor" type="text" value="<?php echo $value['processor']; ?>">
<input name="auth_code" class="auth_code" type="hidden" value="<?php echo $value['auth_code']; ?>"></td>
<? } ?>
is will give me something like:
<td>
<a href="$" class="buttonDetails">View Detail</a>
<input name="processor" class="processor" type="text" value="19">
<input name="auth_code" class="auth_code" type="text" value="4">
</td>
<td>
<a href="$" class="buttonDetails">View Detail</a>
<input name="processor" class="processor" type="text" value="9">
<input name="auth_code" class="auth_code" type="text" value="11">
</td>
...
then i try to get the values:
$('.buttonDetails').live("click", function (){
var processor = $('.processor').val();
alert(processor);
$.ajax({
type: 'POST',
dataType: 'json',
url: '/decline/list',
async: false,
data: {
processor: processor,
processor: auth_code
},
success: function(json) {
$('#details').html(json.processor);
}
});
return false;
});
the problem i have is that my alert gets the same number (usually the first value from the first input) when i click on any link.
any ideas ho to fix this? i've tried replacin classes with id's and 'click' with 'live' but still nothing
edit:
i believe i need to differentiate the classes so he links will know what value to pull..??
edit: what if i want to get the 'auth_code ' also?
Try:
$('.buttonDetails').live("click", function (){
var processor = $(this).next(".processor").val();
alert(processor);
/* snip */
});
Use next
to get the input next to the link that was clicked.
Update (due to comment).
You could find auth_code
similarly using nextAll
instead:
var auth_code = $(this).nextAll(".auth_code").val();
Also, are you sure you're supplying the correct values to your AJAX call? It looks like you're specifying processor
twice. The first value specified for processor
will be overwritten.
If you just want the next item you can use jquery next()
$('.buttonDetails').live("click", function (){
var processor = $(this).next().val();
alert(processor);
return false;
});
here is a fiddle
You get the same value no matter which anchor tag was clicked because of this line:
var processor = $('.processor').val();
You're searching the entire DOM for all elements with class 'processor', which returns every input, and then .val() will return the value of the FIRST match (the first input).
Try this instead:
var processor = $(this).next('.processor').val();
data: {
processor: processor,
processor: auth_code
},
the 'auth_code' line will overwrite the 'processor' line, effectively making it
data: {
processor: auth_code
},
only. You can't have a single key with two different values in a associate array/object. For submitting same-name fields to PHP, use its fieldname[]
notation, which tells PHP to treat that particular form field as an array.
<input name="processor[]" ...>
<input name="processor[]" ...>
and pass the data to JQuery via
data : $(this).serialize()
use Jquery .next() which should give you the next element
All you need to do is get the value from the element they clicked. Using Jquery's 'this' keyword should solve your problem.
$('.buttonDetails').live("click", function (){
var processor = $(this).next().val();
alert(processor);
The 'this' will select the 'a' they clicked on, then next will iterate to the next sibling, in this case your input, and the val retrieves that value as before.