Search jQuery

jQuery Forum

Change content on radio selection - multiple forms

in Getting Started • 9 years ago

I have a page with lots of paypal add to cart buttons. For each of these buttons I want to have two radio buttons that will update the value of a span to reflect the price of the selected option. So I have:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="buyform1" >
<input type="hidden" name="business" value="email@email.com" />
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="radio" name="os1" value="30ml" checked="checked" />30ml
<input name="os1" type="radio" value="100ml" />100ml
<input type="hidden" name="on1" value="Some Item" />
<input type="hidden" name="option_index" value="1" />
<input type="hidden" name="option_select0" value="30ml" />
<input type="hidden" name="option_amount0" value="6.49" />
<input type="hidden" name="option_select1" value="100ml" />
<input type="hidden" name="option_amount1" value="12.99 />
<input type="hidden" name="currency_code" value="GBP" /><input type="image" name="submit" border="0" src="images/buy-now.gif" alt="PayPal - The safer, easier way to pay online" />
</form>
<span cass="price">£6.49</span>

As you can see the price span is merely for information purposes and doesn't have anything to do with how the button communicates with Paypal.

I have found a number of different scripts to update the value of the price span according to the radio buttton selected, but I need something that will work with the same script and without having to specify a different class or id for the price span on each button on the page. Is this possible?

Replies(6)

dsvick

Re: Change content on radio selection - multiple forms

9 years ago

If the structure of the page is the same for all the forms on it, meaning the price span is immediately below the span that contains the radio button, then you can find the appropriate span using something like this:

$("input[type=radio]").click(function() {
$(this).parent("form").next("span.price").html("radio button was clicked");
});

Dave

babyewok

Re: Change content on radio selection - multiple forms

9 years ago

Thanks for your reply. Yes, each form for the paypal button is the same, but I just can't seem to get this solution to work alongside any of the scripts I have found so far.

babyewok

Re: Re: Change content on radio selection - multiple forms

9 years ago

This is the script I am using:

$('input[type=radio]').change(function() {
    // change the page per this logic
    switch ($('input[type=radio]:checked').val()) {
        case '30ml':
            $('.price').text('6.49'); break;
        case '100ml':
            $('.price').text('12.99'); break;
        default:
            $('.price').text('6.49');
};
});

If I try to implement your solution, nothing happens - what am I doing wrong?

$('input[type=radio]').change(function() {
    // change the page per this logic
    switch ($('input[type=radio]:checked').val()) {
        case '30ml':
            $(this).parent("form").next("span.price").html("6.49"); break;
        case '100ml':
            $(this).parent("form").next("span.price").html("12.99"); break;
        default:
            $(this).parent("form").next("span.price").html("6.49");
};
});

EDIT:

OK, so this now works, but only for the first instance of the form:

$('input[type=radio]').change(function() {
    // change the page per this logic
    switch ($('input[type=radio]:checked').val()) {
        case '30ml':
            $(this).closest("form").find("span.price").html("6.49"); break;
        case '100ml':
            $(this).closest("form").find("span.price").html("12.99"); break;
      default:
            $(this).closest("form").find("span.price").html("6.49");
};
});

For any other forms, it changes correctly betwen 6.49 and 12.99 for the others, it just shows 6.49

dsvick

Re: Change content on radio selection - multiple forms

9 years ago

When the set has more than one element, val() will only return the value of the first match. So, your switch statement will always return the value of the first radio button, not the one that triggered the event handler. You want to use "this" to get it to work correctly.

switch ($(this).val()) { ...

Dave

babyewok

Re: Re: Change content on radio selection - multiple forms

9 years ago

Looks like we replied at the same time! I have found a solution that works now - unless you can see a way to improve it?

babyewok

Re: Change content on radio selection - multiple forms

9 years ago

OK, with a bit of a rethink, this seems to be working for me:

$('input[type=radio]').click(function() {
if ($(this).val() == '30ml') {
$(this).closest("form").find("span.ink-price").html("6.49");
}
else {
$(this).closest("form").find("span.ink-price").html("12.99");
}
});

Thanks for pointing me in the right direction :)

Top Reply

Response title

Attachments

jQuery Forum

Change content on radio selection - multiple forms

Replies(6)

Re: Change content on radio selection - multiple forms

Re: Change content on radio selection - multiple forms

Re: Re: Change content on radio selection - multiple forms

Re: Change content on radio selection - multiple forms

Re: Re: Change content on radio selection - multiple forms

Re: Change content on radio selection - multiple forms

Statistics

Tags

Actions