Below is code of form in my View:
<form class="step_1_hotel_form item_loaded" data-price="9696" data-price_per_pax="4848" data-price_part="443.52041928" action="/search/check/790115838" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓">
<div class="hotel_result">
<div class="image_wrap">
<a class="fancybox_82763 thumb_a" href="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/904/STO-QUA1-1.jpg?1485853861" data-fancybox="gallery">
<div class="image">
<div class="resize-and-crop" style="width: 250px; height: 200px;"><img alt="Exteriör" src="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/904/STO-QUA1-1.jpg?1485853861" width="250" height="353" class="big_thumb" style="left: 0px; top: -77px;"></div>
</div>
</a>
<div class="other_images">
<div class="small_image">
<a class="fancybox_82763" href="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/904/STO-QUA1-1.jpg?1485853861" data-fancybox="gallery">
<div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Exteriör" src="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/904/STO-QUA1-1.jpg?1485853861" width="60" height="85" class="small_thumb_img" style="left: 0px; top: -23px;"></div>
</a>
</div>
<div class="small_image">
<a class="fancybox_82763" href="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/906/STO-QUA1-2.jpg?1485853861" data-fancybox="gallery">
<div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Exteriör" src="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/906/STO-QUA1-2.jpg?1485853861" width="60" height="40" class="small_thumb_img" style="left: 0px; top: 0px;"></div>
</a>
</div>
<div class="small_image">
<a class="fancybox_82763" href="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/907/STO-QUA1-3.jpg?1485853861" data-fancybox="gallery">
<div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Gästrum" src="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/907/STO-QUA1-3.jpg?1485853861" width="73" height="40" class="small_thumb_img" style="left: -7px; top: 0px;"></div>
</a>
</div>
<div class="small_image">
<a class="fancybox_82763" href="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/909/STO-QUA1-4.jpg?1485853862" data-fancybox="gallery">
<div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Gästrum" src="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/909/STO-QUA1-4.jpg?1485853862" width="60" height="41" class="small_thumb_img" style="left: 0px; top: -1px;"></div>
</a>
</div>
<div class="small_image">
<a class="fancybox_82763" href="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/911/STO-QUA1-5.jpg?1485853862" data-fancybox="gallery">
<div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Gästrum" src="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/911/STO-QUA1-5.jpg?1485853862" width="60" height="40" class="small_thumb_img" style="left: 0px; top: 0px;"></div>
</a>
</div>
<div class="small_image">
<a class="fancybox_82763" href="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/913/STO-QUA1-6.jpg?1485853862" data-fancybox="gallery">
<div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Restaurang" src="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/913/STO-QUA1-6.jpg?1485853862" width="60" height="40" class="small_thumb_img" style="left: 0px; top: 0px;"></div>
</a>
</div>
<div class="small_image">
<a class="fancybox_82763" href="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/916/STO-QUA1-7.jpg?1485853862" data-fancybox="gallery">
<div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Bar/Lounge" src="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/916/STO-QUA1-7.jpg?1485853862" width="60" height="40" class="small_thumb_img" style="left: 0px; top: 0px;"></div>
</a>
</div>
<div class="small_image">
<a class="fancybox_82763" href="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/917/STO-QUA1-8.jpg?1485853863" data-fancybox="gallery">
<div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Konferensrum" src="https://aobtravel.s3.amazonaws.com/hotelpictures/007/062/917/STO-QUA1-8.jpg?1485853863" width="60" height="40" class="small_thumb_img" style="left: 0px; top: 0px;"></div>
</a>
</div>
</div>
</div>
<div class="information">
<div class="name_group">
<div class="name">Scandic Prince Philip</div>
<div class="rating">
<img src="http://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png" alt="Star">
<img src="http://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png" alt="Star">
<img src="http://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png" alt="Star">
</div>
<div class="address">
<a class=" fancybox" href="javascript:;" data-type="ajax" data-src="/hotel_map/82763" data-options="{"touch":false,"baseClass":null}">
Oxholmsgr 2 Kungens Kurva, Po Box 6084<img src="http://res.cloudinary.com/dzwdseno3/image/asset/map_view-94e4f080f570d6f5e53d0ca291ce82de.png" alt="Map view">
</a> </div>
</div>
<div class="price-box-hotel">
<div class="resurs">
<a class=" fancybox" href="javascript:;" data-type="ajax" data-src="/payment/annuity_description/969600" data-options="{"touch":false,"baseClass":null}">
<div class="resurs_text">Delbetala fr.</div>
<div class="resurs_price">887 kr</div>
</a> </div>
<div class="pax-price">
<div class="price">4.848 kr</div>
<div class="smallprice">per person</div>
</div>
<div class="total-price">
<div class="price">9.696 kr</div>
<div class="smallprice">totalt</div>
</div>
</div>
<div class="hotel_clear"></div>
<div class="description">
This hotel is located close to Skarholmens Metro station with a 25 min metro ride into Central Station. It is also easily reached by car, being located just off the E3/E4 roads. Car journey ... <a class=" fancybox" href="javascript:;" data-type="ajax" data-src="/hotel_info/82763" data-options="{"touch":false,"baseClass":null}">Läs mer</a>
</div>
<div class="rooms">
<div class="room">
<div class="headline">Rum 1 <div class="pax-text">(2 vuxna)</div></div>
<div class="options">
<ul class="table selected_hotel">
<li class="radio">
<input type="radio" name="hr_82763_1" id="hr_82763_1_cb157e721df4a40e988e0b29e158c9c3" value="cb157e721df4a40e988e0b29e158c9c3" data-price="0" data-price_per_pax="0" data-price_part="443.52041928" checked="checked">
</li>
<div class="table_div">
<li class="li_1">Standard Twin FLEX</li>
<li class="li_2">Inkl frukost</li>
<li class="li_3">+0 kr</li>
</div>
</ul>
<ul class="table ">
<li class="radio">
<input type="radio" name="hr_82763_1" id="hr_82763_1_d0b4d600dceac223ca4fe5dde5985fa1" value="d0b4d600dceac223ca4fe5dde5985fa1" data-price="1216" data-price_per_pax="608" data-price_part="499.14344216">
</li>
<div class="table_div">
<li class="li_1">Standard Twin Non-refundable EARLY1</li>
<li class="li_2">Inkl frukost</li>
<li class="li_3">+1.216 kr</li>
</div>
</ul>
<ul class="table ">
<li class="radio">
<input type="radio" name="hr_82763_1" id="hr_82763_1_0ecb5bab8a7642a44468d666b584c25f" value="0ecb5bab8a7642a44468d666b584c25f" data-price="2064" data-price_per_pax="1032" data-price_part="537.9331817999999">
</li>
<div class="table_div">
<li class="li_1">Family Room FLEX</li>
<li class="li_2">Inkl frukost</li>
<li class="li_3">+2.064 kr</li>
</div>
</ul>
<ul class="table ">
<li class="radio">
<input type="radio" name="hr_82763_1" id="hr_82763_1_41858d0c8cc554bf3201a40304c7c81a" value="41858d0c8cc554bf3201a40304c7c81a" data-price="2774" data-price_per_pax="1387" data-price_part="570.410440225">
</li>
<div class="table_div">
<li class="li_1">Standard Plus Twin Room Non-refundable EARLY1</li>
<li class="li_2">Inkl frukost</li>
<li class="li_3">+2.774 kr</li>
</div>
</ul>
<ul class="table ">
<li class="radio">
<input type="radio" name="hr_82763_1" id="hr_82763_1_c6593fc2f12e74897483a779543d3826" value="c6593fc2f12e74897483a779543d3826" data-price="3113" data-price_per_pax="1556" data-price_part="585.9171875575">
</li>
<div class="table_div">
<li class="li_1">Standard Plus Twin Room FLEX</li>
<li class="li_2">Inkl frukost</li>
<li class="li_3">+3.113 kr</li>
</div>
</ul>
<ul class="table ">
<li class="radio">
<input type="radio" name="hr_82763_1" id="hr_82763_1_d47c331e387d6758cf707f34a3349256" value="d47c331e387d6758cf707f34a3349256" data-price="3221" data-price_per_pax="1610" data-price_part="590.8573902475">
</li>
<div class="table_div">
<li class="li_1">Family Room Non-refundable EARLY1</li>
<li class="li_2">Inkl frukost</li>
<li class="li_3">+3.221 kr</li>
</div>
</ul>
</div>
</div>
</div>
<div class="continue-button-hotel">
<div class="spinner" id="step_1_82763_spinner" style="display: none;"><img src="http://res.cloudinary.com/dzwdseno3/image/asset/ajax-loader_white-c5cd7f5300576ab4c88202b42f6ded62.gif" alt="Ajax loader white"></div>
<div class="y-button"><input type="submit" name="commit" value="Välj hotell: 9.696 kr" class="hotel" data-disable-with="Välj hotell: 9.696 kr"></div>
</div>
</div>
</div>
</form>
I need to change data-src on clicking radio in that form
Here is what I tried:
$('.step_1_hotel_form:not(.item_loaded)').find('input[type=radio]').on('change', function() {
$('.table', $(this).form).removeClass('selected_hotel');
$('input[type=radio]:checked').closest('ul').addClass('selected_hotel');
update_price_on_button_hotel($(this).closest('form'));
});
And Below is update_price_on_button_hotel function
export function update_price_on_button_hotel(form): void {
Helpers.set_currency_settings();
let price_part, price_per_pax;
let price = parseFloat(form.attr('data-price'));
if (form.attr('data-price_per_pax')) { price_per_pax = parseFloat(form.attr('data-price_per_pax')); }
if (form.attr('data-price_part')) { price_part = parseFloat(form.attr('data-price_part')); }
if ($('.step_1_air_form').length > 0) {
$('input[type=checkbox]:checked', $('.step_1_air_form')[0]).each(function() {
price += parseFloat($(this).attr('data-price'));
if ($(this).attr('data-price_per_pax')) { price_per_pax += parseFloat($(this).attr('data-price_per_pax')); }
if ($(this).attr('data-price_part')) { price_part += parseFloat($(this).attr('data-price_part')); }
});
}
$('.room', form).each(function() {
const input = $(this).find('input[type=radio]:checked');
price += parseFloat(input.attr('data-price'));
if (input.attr('data-price_per_pax')) { price_per_pax += parseFloat(input.attr('data-price_per_pax')); }
if (input.attr('data-price_part')) { price_part += parseFloat(input.attr('data-price_part')); }
});
form.find('input[type=submit]').each(function() {
if ($(this).val() !== '') {
$(this).val(($(this).val() as string ).split(':')[0] + ": " + accounting.formatMoney(price));
} else {
$(this).val(accounting.formatMoney(price));
}
});
form.find('.total-price .price').html(accounting.formatMoney(price));
if (form.attr('data-price_per_pax')) { form.find('.pax-price .price').html(accounting.formatMoney(price_per_pax)); }
if (form.attr('data-price_part') && (price_part > 0) && (form.find('.resurs .resurs_price').length > 0)) {
form.find('.resurs .resurs_price').html(accounting.formatMoney(price_part));
}
}
}
I wantto find element and change it data-src value.
So I tried to do it like this
form.find('.fancybox').data('src','/payment/annuity_description/1');
But it is not working