I have two drop down menus, one of which I am trying to replace with radio buttons using jquery. The second box is updated via AJAX with new options any time the user makes a selection in the first drop down. I have successfully generated radio buttons that change the values for the first drop down but when the user updates the first drop down menu using the radio buttons, it no longer effects values in the second drop down boxes. I am not great with AJAX or JS and I can't figure out how to trigger the AJAX load when the user selects one of radio buttons.
I apologize in advance for the wall of code, Im not sure what is important so I included everything that seemed relevant. If you want to see the page in question you can see it here.
The code I am using to generate radio buttons looks like this:
$(function(){
$("#options-1 option").each(function(i, e) {
$("<input type='radio' name='r' />")
.attr("value", $(this).val())
.attr("checked", i == 0)
.click(function () {
$("#options-1").val($(this).val());
})
.appendTo("#r");
$("#options-1").change(function(){
$("input[name='r'][value='"+this.value+"']").attr("checked","checked");
});
});
});
$("#options-1").change(function(){
$("input[name='r'][value='"+this.value+"']").attr("checked","checked");
});
The HTML for the drop downs look like this:
<form action="http://example.com/dev3/?page_id=5" method="post" class="shopp product validate">
<div id="r"></div>
<ul class="variations">
<li>
<label for="options-1">Framing</label>
<select name="products[1][options][]" class="category-catalog product1 options" id="options-1"><option value="1">Print Only (Unframed)</option>
<option value="2">Professionally Framed</option>
</select><li>
<label for="options-2">Size</label>
<select name="products[1][options][]" class="category-catalog product1 options" id="options-2"><option value="3">12 x 8</option>
<option value="4">24 x 36</option>
</select></li>
</ul>
<p><input type="hidden" name="products[1][product]" value="1" /><input type="hidden" name="products[1][category]" value="catalog" /><input type="hidden" name="cart" value="add" /><input type="submit" name="addtocart" value="Add to Cart" class="addtocart" /></p>
</form>
The AJAX looks like this:
<script type='text/javascript' src='http://example.com/dev3?sjsl=colorbox,shopp,catalog,cart&c=1&ver=98239bb061a58639408323699680ad0e'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var ShoppSettings = {
ajaxurl: "http://example.com/dev3/wp-admin/admin-ajax.php",
cp: "1",
c: "$",
p: "2",
t: " ",
d: ".",
g: "3",
nocache: "",
opdef: ""
};
var pricetags = {};
jQuery(window).ready(function(){ var $ = jqnc();
pricetags[1] = {};
pricetags[1]['pricing'] = {"18770":{"p":10,"i":false,"s":false,"t":"Shipped"},"25785":{"p":21,"i":true,"s":"1","t":"Shipped"},"23510":{"p":20,"i":false,"s":false,"t":"Shipped"}};
pricetags[1]['menu'] = new ProductOptionsMenus('select.category-catalog.product1.options',true,pricetags[1]['pricing'],0);
});
/* ]]> */
</script>
When you change the value of a Combo Box via js, it doesn't trigger the onChange function nor onClick and so on.
You'll have to use the same code you use to update Combo 2 with Combo 1 where you update Combo 1 with the Radio.
I suggest to place that code inside another function, and call that function from both places.
Hope it helps.
Related
I have a form with text boxes and drop down menus. One of the drop down menus is Dependant on the value of another, e.g. InventoryUsage is dependent on the value in InventoryID.
So far I have done the entire site using PHP since I do not know JavaScript, though I found a JavaScript function that can get the value entered in InventoryID, but I cannot use that value in the PHP since PHP is server-side.
What I need to do is change the second dropdown options depending on that of the first dropdown. Then submit the data as I would with a normal form.
Edit:
I used ob_start and included the tpl page and sent all the variables to the page which were pulled from the database prior. All the variables have the same index meaning that InventoryID['0']=ID3456 corresponds to InventoryUsage['0']=60. Therefore when InventoryID is ID3456 i would like to display the Number located at InventoryUsage['0']. I hope this adds some context to the problem.
The index is determined by the php variable $i in my code snippet. The $i would be changed to match the index of the InventoryID field. Say the value of InventoryUsage is 20 then I want to display numbers 1 to 20.
Snippet of code below:
<label>TypeOfSurgery</label> <input type="text" name="TypeOfSurgery" size="35" value="" />
<label>CauseOfSurgery</label> <input type="text" name="CauseOfSurgery" size="35" value="" />
<label>AnaesthesiaUsage</label> <input type="text" name="AnaesthesiaUsage" size="35" value="" />
<label>SurgeryOutcome </label> <input type="text" name="SurgeryOutcome" size="35" value="" />
<label>RecoveryTime</label> <input type="text" name="RecoveryTime" size="35" value="" />
<label>Stages </label> <input type="text" name="Stages" size="35" value="" />
<label>EmployeeName </label> <p>
<select name="EmployeeName">
<option value=""></option>
<?php
for($i=0;!empty($EmployeeName[$i]);$i++)
echo '<option value="">'.$EmployeeName[$i].'</option>';
?>
</select><p>
<label>Cost</label> <input type="text" name="Cost" size="35" value="" />
<label>InventoryID</label> <p>
<select name="InventoryID">
<option value=""></option>
<?php
for($i=0;!empty($InventoryID[$i]);$i++)
echo '<option value="">'.$InventoryID[$i].'</option>';
?>
</select><p>
<label>InventoryUsage </label> <p>
<select name="InventoryUsage">
<option value=""></option>
<script type="text/javascript">
var model= document.getElementById('InventoryUsage');
</script>
<?php
//if inventory in
for($i=0;!empty($InventoryUsage[$i]);$i++)
echo '<option value="">'.$InventoryUsage[$i].'</option>';
?>
</select><p>
In order to populate the InventoryUsage dropdown you need to use JavaScript.
You can use the onChange event for the dropdown InventoryID then fetch the corresponding values via Ajax.
$('#InventoryID').change(function () {
var value =$(this).val(); // selected InventoryID option
//get InventoryUsage values
$.ajax({
method: "POST",
url: "myfile.php",
data: { data: value },
success: function(data){
// Populate new dropdown $("#InventoryUsage")
// this is an example without knowing what is the returned data
var Newoptions = [];
for (var i = 0; i < data.length; i++) {
Newoptions.push('<option value="',
data[i].someValue, '">',
data[i].someName, '</option>');
}
$("#InventoryUsage").html(Newoptions .join(''));
}
});
});
});
then in your PHP file you need to handle the $_POST['data'] , then query your database and return the drop-down options( Arrays ) that will be populated above...
edit :
If you are sure that this index matches the Inventory_Usage and that the InventoryUsage dropdown has previously been populated then
you could try to select the InventoryUsage option using the index of the InventoryID dropdown on change and load events...
try adding this function to you select :
<select name="InventoryID" onChange="set_inventory_usage()"></select>
then add this script to your page's HEAD section..
<head>
<script type="text/javascript">
function set_inventory_usage(){
// Change to getElementById if it is the ID not the name
var Inventory_ID = document.getElementsByName('InventoryID')[0];
var Inventory_Usage = document.getElementsByName('InventoryUsage')[0];
// returns the index of the selected option in the InventoryID dropdown
var InventorySelected = Inventory_ID.selectedIndex ;
// Sets the Usage dropdown to the same index as the Inventory selected option
Inventory_Usage.selectedIndex = InventorySelected ;
}
window.onload = set_inventory_usage ;
</script>
</head>
Option 1: Without JavaScript, the best option is to add an onchange to your first dropdwon list, and when a value is selected submit the form. Since the form is not complete, and only the dropdown value and elements before that are passed, you can set a condition to query the database, get values based on first drop down and reload the form with those options. IThere is nothing wrong with this solution if done properly but to be honest I perfer to do such things with Ajax, hence option 2 below.
Option 2: Learn some JavaScript and use Ajax (Use caution when using other people's scripts in your system)
Edit: Perhaps instead of wring Ajax code from scratch, use jQuery where most things are already done for you. Learning jQuery is very useful if you are going to do web development
Im having trouble having code onchange inside onchange event.
some works and some dont work due to that.
<script>
$(document).on('change', '.sellkop', function() { // this is radio button
if ($("#rs").is(':checked')) {
$("#text_container").after(price_option());
};
if ($("#rk").is(':checked')) {
$("#price_container").remove();
$("#licensenumber_c").css({"display": 'none'
});
};
});
$('#category_group').on('change', function() { // this is select options
if ($(this).val() == 101) {
$("#underKategory").css({"display": 'none'});
$("#modelcontainer").remove();
$(".toolimage").css({ "display": 'block'});
$('.sellkop').on('change', function() { // this is radio button
if ($("#rs").is(':checked')) {
$("#licensenumber_c").css({"display": 'block'});
$(".toolimage").css({"display": 'block' });
} else {
$(".toolimage").css({"display": 'none'});
}
});
} else {
$(".bilar").remove();
$(".toolimage").css({ "display": 'none'});
}
if ($(this).val() == 102) {
$(".houses_container").remove();
$(".toolimage").css({"display": 'none'});
$("#underKategory").css({"display": 'inline-block'});
$("#modelcontainer").remove();
}
///............many other values continue
});
</script>
i know there is better way to manage this code and simplify it , how can i do it ?
EDIT:
what i want is : if i select an option , then get values to that option, then under this category option there is radio buttons , then every check button i need to get some data displayed or removed
here is a fiddle there looks my problem by jumping from categories when i select buy or sell , so
if i select category-->check buy -->then select others . i dont get same result as if i select directly cars ---> buy
I have never resorted to even two answers before (let alone three), but based on all the comments, and in a desire to keep things simple another solution is to data-drive the visibility of other items based on selections, using data- attributes to store the selectors on the options and radio buttons.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/4s5rwce2/28/
e.g the HTML for the select becomes
<select name="category_group" id="category_group">
<option value="0">choose category</option>
<option value='101' id='cat101' data-show="#sellbuy,.cars,.toolimage,#licenscontainer">cars</option>
<option value='102' id='cat102' data-show="#sellbuy,#underKategory">others</option>
</select>
and the radio buttons like this:
<input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked' data-show="#price_container,.cars,.toolimage"/>
The code becomes very simple then, simply applying the filters specified in the selected items.
$(document).on('change', '.sellkop', function () { // this is radio button
// Hide defaults
$("#price_container,.cars,.toolimage").hide();
// Show the items desired by the selected radio button
$($(this).data("show")).show();
});
$('#category_group').on('change', function () { // this is select options
// Get the various possible data options and decide what to show/hide based on those
var $this = $(this);
var value = $this.val();
// Get the selected option
var $li = $('option[value='+ value+']', $this);
// Hide all the defaults first
$('#licenscontainer,.cars,.toolimage,.sell,#underKategory').hide();
// Now show any desired elements
$($li.data('show')).show();
// Fire change event on the radio buttons to ensure they change
$('.sellkop:checked').trigger('change');
});
This is a very generic solution that will allow very complex forms to turn on/off other elements as required. You can add data-hide attributes and do something similar for those too if required.
Note: This was an attempt to fix the existing style of coding. I have posted an alternate answer showing a far simpler method using hide/show only.
A few problems.
If you must nest handlers, simply turn them off before you turn them on. Otherwise you are adding them more than once and all the previously recorded ones will fire as well.
Your HTML strings are invalid (missing closing </div>)
You can simply use hide() and show() instead of all the css settings. You should use css styling for any specific element styling requirements (e.g. based on classes).
You need to replace specific divs, rather than keep using after, or you progressively add more html. For now I have use html to replace the content of the #text_container div.
HTML in strings is a maintenance nightmare (as your example with missing </div> shows). Instead use templates to avoid the editing problems. I use dummy script blocks with type="text/template" to avoid the sort of problems you have found. That type means the browser simply ignores the templates.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/4s5rwce2/17/
HTML (with templates)
<script id="saljkop">
<div class='sex sell' id='sellbuy' >
<label ><input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked'/> Sell </label>
<label ><input id='rk' type='radio' class='radio sellkop' value='k' name='type'/>buy</label>
</div>
</script>
<script id="price_option">
<div class="container" id = "price_container">
<div>
<label><input class="price_option" name="price_opt" value="1" type="radio"/> Fix </label>
<label class="css-label"><input class="price_option" name="price_opt" value="2" type="radio"/> offer </label>
</div>
</div>
</script>
<script id="cars">
<div class="cars" >
<div id="licenscontainer" ><div id="licensenumber_c">
<input id="licensenumber" placeholder="Registrer number" type="text" value="" />
</div>
</div>
</div>
</script>
<div id="categories">
<select name="category_group" id="category_group">
<option value="0">choose category</option>
<option value='101' id='cat101'>cars</option>
<option value='102' id='cat102'>others</option>
</select>
</div>
<div id="underKategory">sthis is subcategory</div>
<div id="toolimage1" class="toolimage">dddddd</div>
<div id="text_container" class="text_container">textttttt</div>
New jQuery code:
$(document).on('change', '.sellkop', function () { // this is radio button
console.log('.sellkop change');
if ($("#rs").is(':checked')) {
$("#text_container").html($('#price_option').html());
};
if ($("#rk").is(':checked')) {
$("#price_container").remove();
$("#licensenumber_c").hide();
};
});
$('#category_group').on('change', function () { // this is select options
if ($(this).val() == 101) {
$(".sell").remove();
$("#categories").after($('#saljkop').html());
$("#sellbuy").after($('#cars').html());
$("#text_container").html($('#price_option').html());
$("#underKategory").hide();
$(".toolimage").show();
$('.sellkop').off('change').on('change', function () { // this is radio button
if ($("#rs").is(':checked')) {
$("#licensenumber_c").show();
$(".toolimage").show();
} else {
$(".toolimage").hide();
}
});
} else {
$(".cars").remove();
$(".toolimage").hide();
}
if ($(this).val() == 102) {
$(".sell").remove();
$("#categories").after($('#saljkop').html());
$("#text_container").html($('#price_option').html());
$(".toolimage").hide();
$("#underKategory").show();
}
///............many other values continue
});
Now if you prefer to not nest handlers (recommended), just add to your existing delegated event handler for the radio buttons:
$(document).on('change', '.sellkop', function () { // this is radio button
console.log('.sellkop change');
if ($("#rs").is(':checked')) {
$("#text_container").html($('#price_option').html());
$("#licensenumber_c").show();
$(".toolimage").show();
};
if ($("#rk").is(':checked')) {
$("#price_container").remove();
$("#licensenumber_c").hide();
$(".toolimage").hide();
};
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/4s5rwce2/20/
Note: This was a second answer, hoping to simplify the overall problem to one of hiding/showing existing elements. I have posted a third(!) answer that takes it to an even simpler scenario using data- attributes to provide the filter selections.
I am adding a second answer as this is a complete re-write. The other answer tried to fix the existing way of adding elements dynamically. I now think that was simply a bad approach.
The basic principal with this one is to have very simple HTML with the required elements all present and simply hide/show the ones you need/ Then the selected values are retained:
This uses the multi-structure to effectively hide.show the licence field based on two separate conditions.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/4s5rwce2/23/
Html (all element s present, just the ones you do not need hidden):
<div id="categories">
<select name="category_group" id="category_group">
<option value="0">choose category</option>
<option value='101' id='cat101'>cars</option>
<option value='102' id='cat102'>others</option>
</select>
<div class='sex sell' id='sellbuy' style="display: none">
<label>
<input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked' />Sell</label>
<label>
<input id='rk' type='radio' class='radio sellkop' value='k' name='type' />buy</label>
</div>
<div class="cars" style="display: none">
<div id="licenscontainer">
<div id="licensenumber_c">
<input id="licensenumber" placeholder="Registrer number" type="text" value="" />
</div>
</div>
</div>
</div>
<div id="underKategory">sthis is subcategory</div>
<div id="toolimage1" class="toolimage">dddddd</div>
<div id="text_container" class="text_container">
<div class="container" id="price_container" style="display: none">
<div>
<label>
<input class="price_option" name="price_opt" value="1" type="radio" />Fix</label>
<label class="css-label">
<input class="price_option" name="price_opt" value="2" type="radio" />offer</label>
</div>
</div>
</div>
jQuery:
$(document).on('change', '.sellkop', function () { // this is radio button
if ($("#rs").is(':checked')) {
$("#price_container").show();
$(".cars").show();
$(".toolimage").show();
};
if ($("#rk").is(':checked')) {
$("#price_container").hide();
$(".cars").hide();
$(".toolimage").hide();
};
});
$('#category_group').on('change', function () { // this is select options
if ($(this).val() == 101) {
$(".sell").hide();
$("#sellbuy").show();
$(".cars").show();
$("#underKategory").hide();
$(".toolimage").show();
$('#licenscontainer').show();
} else {
$('#licenscontainer').hide();
$(".cars").hide();
$(".toolimage").hide();
}
if ($(this).val() == 102) {
$(".sell").hide();
$("#sellbuy").show();
$(".toolimage").hide();
$("#underKategory").show();
$(".cars").hide();
}
$("#price_container").toggle($("#rs").is(':checked'));
///............many other values continue
});
I previously asked about showing mulple fields based on a dropdown which used JQuery:
Show multiple fields based on dropdown
However when I have other dropdown fields on my page, this no longer works. I did wonder it it was interfering with other JavaScript / JQuery elements, but removing those didn't correct the issue. I've also tried putting the elements into separate ULs and DIVS with no luck. Can someone help?
In my example, when selecting 'Taking over existing Mobile' it should display 'Existing Mobile No', however it won't when the 'Existing PC' is still listed on my page.
HTML:
<ul>
<li>
<label for>NS - Mobile</label>
<select class="selectmenu" id="_1_1_81_1" name="_1_1_81_1" onchange="markDirty();">
<option value="" ><None></option>
<option value="Mobile" >Mobile</option>
<option value="Blackberry" >Blackberry</option>
<option value="otheros" >Taking over Existing Mobile</option>
</select>
</li>
<li class="osother">
<label for>NS - Existing Mobile No</label>
<input class="valueEditable" TYPE="text" name="_1_1_83_1" title="NS - Existing Mobile No" id="_1_1_83_1" value="[LL_FormTag_1_1_83_1 /]" size="12" MAXLENGTH="11" ONCHANGE="markDirty();">
</li>
<li>
<label for>NS - Existing PC</label>
<select class="selectMenu" id="_1_1_84_1" name="_1_1_84_1" onchange="markDirty();">
<option value="" ><None></option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
</select>
</li>
</ul>
JQ:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
if ($(this).attr("value") == "otheros") {
$(".osother").show();
} else {
$(".osother").hide();
}
});
}).change();
});
</script>
CS:
.osother{display:none;}
My other JQ is here and collapses sections on the page - maybe irrelevant:
<script type="text/javascript" src="[LL_SUPPORTPATH /]core/jquery.collapsible.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
//collapsible management
$('.collapsible').collapsible({
defaultOpen: 'section1,section2,section3,section4,section5'
});
});
</script>
There is also some JavaScript here and there that adds in TABS and Date dropdowns, but have tested without these elements and it seems still not to work.
Basically you're looping through every select in the page and checking for their values, when you actually should observe just the one with ID _1_1_81_1.
Also, you can simplify your code:
$(function () {
// Observe the particular select for changes in its value.
// As every element in the page should have its on ID, you can
// select it straight away (omitting the type - select).
$("#_1_1_81_1").on("change", function () {
// Toggle the input visibility based on the selected value.
// The .val() method works here just like for every type of
// input. You don't need to go through all the select options
// and test their values.
$(".osother").toggle($(this).val() == "otheros");
});
});
Demo
jQuery .toggle()
Note: This answer is based on the code you provided. If there are any other requirements or code involved, you should state it in the question.
Can anyone tell me how can i load a listbox from a selected item of a dropdownlist?
Let's say i have a dropdownlist that contain "option1=male" & "option2=female"
I want that when male is selected, a list of male employees is shown in a listbox.
Added note:
i want to know how can i do this if employees names are saved in a file / data base?
Is this what you're after?
Selecting from a dropdown box a specific option will trigger an ajax call for a specific json file. On success, we display file's content into a listbox. This is just a demo.
Code sample:
$(document).ready(function() {
var listbox = $('#listbox'),
populateListbox = function(data) {
for (var i = 0, item; i < data.length; i++) {
item = data[i];
var option = $('<option>').val(item.age).text(item.name);
listbox.append(option);
}
showListbox();
},
emptyListBox = function() {
listbox.empty();
},
showListbox = function() {
listbox.removeClass('hide');
},
hideListbox = function() {
listbox.addClass('hide');
};
$('#dropdown').on('change', function (e) {
emptyListBox();
hideListbox();
var selectedOption = $("option:selected", this),
selectedValue = this.value;
switch (selectedValue) {
case 'male':
$.getJSON( "male.json", populateListbox);
break;
case 'female':
$.getJSON( "female.json", populateListbox);
break;
}
});
});
I gather that you want it to populate another listbox asynchronously? What you would need to do to achieve this is to use JavaScript and to call a function when the document loads. For example
$(document).ready(function(){
exampleFucntion();
});
This will call the function "exampleFunction" when the document loads. Inside this function the following code can be put where #dropdownbox would be the ID of your HTML drop down box.
$("#dropdownbox").change(exampleOnDropDownChanged);
This again will call a function that performs an action everytime the index of the drop down box changes. Inside the called function is where you would put the code to create another dropdown box dynamically with the details of male or female employees (or just populate an existing dropdown). Within the function you could put 'if' statements to get the male or female employees and then carry out the corresponding code to populate the dropdown. This function could also call a PHP page which could retrieve data and then populate the drop down.
The way I have described doesn't require the HTML page to be refreshed. I also suggest that you read around JavaScript and AJAX and also basic techniques, such as populating dropdown boxes.
I think this is what you are looking for. DEMO HERE
Select your gender and shows relative listbox.
<form id="survey" action="#" method="post">
<div id="section1">
<label for="Gender">Select employee gender.</label>
<select id="Gender" onchange="selection(this);">
<option value="Gender">---Select---</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div id="section2" style="display:none;">Please select employee gender from above.</div>
<div id="section3" style="display:none;">Male Employees
<br />
<label for="Jim">Jim</label>
<input type="radio" id="Jim" />
<label for="Tom">Tom</label>
<input type="radio" id="Tom" />
<label for="Sam">Sam</label>
<input type="radio" id="Sam" />
</div>
<div id="section4" style="display:none;">Female Employees<br />
<label for="Kate">Kate</label>
<input type="radio" id="Kate" />
<label for="Claire">Claire</label>
<input type="radio" id="Claire" />
<label for="Sue">Sue</label>
<input type="radio" id="Sue" />
</div>
</form>
<script>
var sections = {
'Gender': 'section2',
'Male': 'section3',
'Female': 'section4'
};
var selection = function (select) {
for (var i in sections)
document.getElementById(sections[i]).style.display = "none";
document.getElementById(sections[select.value]).style.display = "block";
};
</script>
hi i have a problem with displaying amount.i have the page called make payment in this page i made three radio buttons, if i click the button that amount must add with addcart like a product.
<form method="post" form name="make_payment_frm" action="module/make-payment-module.php" onsubmit="return show_make_payment_validation();" >
<form id='theForm'>
<input type="hidden" name="totalamount" id="totalamount" value="1" />
input type="radio" name="rmr" id="payment1" value="3" onclick="updatepayment(this.value)" />
input type="radio" name="rmr" id="payment2" value="5.5" onclick="updatepayment(this.value)"/>
input type="radio" name="rmr" id="payment4" value="10" onclick="updatepayment(this.value)"/>
div id="finalamount">
/div>
i think that problem is my js script. if i click that button there is no response. how do i solve that problem
you guys can give me any idea
$(document).ready(function() {
$(".cart :radio[name='rmr']").add(".cart :radio[name='rmr']").each(function() {
$(this).click(function() {
$(".cart :radio[name='rmr']").add(".cart :radio[name='rmr']").each(function() {
$(this).attr("checked", false);
});
$(this).attr("checked", true);
});
});
})
function updatePayment(val) {
$("<p/>").html("updatePayment(" + val + ")").appendTo(document.body);
}
thanks.have a nice day
I have no idea why you seem to be implementing the selecting and un-selecting of radio buttons in jQuery, surely HTML will handle that correctly for you.
However if you are using jQuery, do away with those onclick attributes since that is the benefit of jQuery and achieve the same result as follows:
$(function() {
$('.cart :radio[name="rmr"]').change(function() {
if ($(this).is(':checked'))
updatePayment(this.value);
});
});
This will attach a change event to every radio button input with the attribute name="rmr". Thus when the client clicks a new radio button, the value of two radio buttons will change, and the one that is then selected will call the updatePayment function with its value.