hi i have the confusion with my jquery. i have d 4 button to update the value.
let me explain it clearly
this four buttons are select method for an amount. my project is based upon the labtop and iphones. by the shopping cart customer choose the product and then they have to select the button(any 4 in those buttons)
if customer cart amount is 50£ in the sense then they need to choose the radio button if customer select 2 button in the sense the 2nd button amount must add with shopping cart and then displayed like a 55£
if i click the button there is no change when mouse arrow is on the button i could see the error page in below. what action i need to put for the changes i mean the action for the radio button.
<form method="post" form name="make_payment_frm"
action="module/make-payment-module.php"
onsubmit="return show_make_payment_validation();" >
<input type="radio" name="rmr" id="payment1" value="30"
onclick="updatepayment(this.value)" />
<input type="radio" name="rmr" id="payment2" value="39"
onclick="updatepayment(this.value)" />
<input type="radio" name="rmr" id="payment3" value="42"
onclick="updatepayment(this.value)" />
<input type="radio" name="rmr" id="payment4" value="45"
onclick="updatepayment(this.value)" />
<input type="hidden" name="totalamount" id="totalamount"
value="<?php echo get_total_amount(); ?>" />
$(document).ready(function(){
$("input[name='rmr']").click(function() {
updatePayment($(this).val());
if (!!$(this).attr("checked") == true) {
$("#finalamount").html(
parseInt($("#totalamount").val(), 10) * parseInt($(this).val(), 10));
}
});
}
var totalAmount = 50.0; //Set from the database
function updateAmount(var additionalCost)
{
document.getElementById("finalamount").innerHTML = totalAmount
+ additionalCost;
}
document.getElementById('payment1').onclick = function(){
updateAmount('30')
};
document.getElementById('payment2').onclick = function(){
updateAmount('39')
};
document.getElementById('payment3').onclick = function(){
updateAmount('42')
};
document.getElementById('payment4').onclick = function(){
updateAmount('45')
};
guys can any one tell me the good idea for the radio button works properly. that amount must add with that payment cart and then display.is there any thing wrong in my code. plz help me.
thanks and regards
magna
``
function updateAmount(var additionalCost)
remove the var there.
Related
I have a form that did submit 1 out of 8 radio buttons to a php $_POST super global array. Therefore, I needed some validation. I was kindly helped by being provided this code which works great:
$("#form").submit(function (event) {
if(!$(":radio:checked").length) {
alert("You must select at least one emotional state!");
event.preventDefault();
}
});
However, I have now been asked to have 2 sets of 8 radio buttons in which the user selects 2 answers instead of the initial 1 answer. I need the code to be able to determine that at least one radio button from each set of 8 buttons has been selected before the form is submitted. At the moment the code checks to see if any radio buttons have been selected, then as soon as just 1 buttons is selected, the function is satisfied and transitions to the next page, which is not what I want.
EDIT
Buttons code:
<p><input type="radio" value="happy" name="perceived_emotion">Happy
<input type="radio" value="excited" name="perceived_emotion">Excited
<input type="radio" value="angry" name="perceived_emotion">Angry
<input type="radio" value="frustrated" name="perceived_emotion">Frustrated
<input type="radio" value="miserable" name="perceived_emotion">Miserable
<input type="radio" value="sad" name="perceived_emotion">Sad
<input type="radio" value="tired" name="perceived_emotion">Tired
<input type="radio" value="relaxed" name="perceived_emotion">Relaxed</p>
<p><input type="radio" value="happy" name="induced_emotion">Happy
<input type="radio" value="excited" name="induced_emotion">Excited
<input type="radio" value="angry" name="induced_emotion">Angry
<input type="radio" value="frustrated" name="induced_emotion">Frustrated
<input type="radio" value="miserable" name="induced_emotion">Miserable
<input type="radio" value="sad" name="induced_emotion">Sad
<input type="radio" value="tired" name="induced_emotion">Tired
<input type="radio" value="relaxed" name="induced_emotion">Relaxed</p>
Here is the form code:
<form id="form" action="audio_handler.php?id=1" method="POST">
<div id="perceived_emotions">
<?php include("includes/induced_emotion_buttons.php"); ?>
</div>
<br />
<div id="induced_emotions">
<?php include("includes/perceived_emotion_buttons.php"); ?>
</div>
<p class="right"><input type="submit" name="submit" value="Submit"></p>
</form>
What you want to do is use the [name="value"] selector in JQuery in conjunction with the :checked selector. So your new code would be:
if(!$('input[name="perceived_emotion"]:checked').length) {
alert("You must select at least one perceived emotional state!");
event.preventDefault();
return false;
}
if(!$('input[name="induced_emotion"]:checked').length) {
alert("You must select at least one induced emotional state!");
event.preventDefault();
return false;
}
All of that wrapped into the form event.
EDIT: Since you only want to display one dialog at once, just add return false; in each if statement.
I have some radio buttons in a form:
<div id="data_id-block">
<dt id="data_id-label"><label class="required">Data</label></dt>
<dd id="data_id-element">
<label for="data_id-1">
<input type="radio" name="data_id" id="data_id-1" value="1" />test 1
</label><br />
<label for="data_id-2">
<input type="radio" name="data_id" id="data_id-2" value="2" />test 2
</label><br />
<label for="data_id-4">
<input type="radio" name="data_id" id="data_id-4" value="4" /> Test Data
</label><br />
<label for="data_id-5">
<input type="radio" name="data_id" id="data_id-5" value="5" /> Second Test Data
</label><br />
<label for="data_id-6">
<input type="radio" name="data_id" id="data_id-6" value="6" />Unassigned
</label>
</dd>
I'm trying to display a tooltip when a user hovers over the label of the radio button. I can do this but I also want to get whatever is in the 'value' property of the radio button. My attempts to this resulted in only the 'value' of the radio button being returned regardless of which radio button was hovered over.
Appreciate the help.
//this is just one way to register to the window.onLoad event in jQuery, i prefer it's readability for what is going on
$(document).ready(function(){
//$("something", "something else") - 'Something Else' limits where jQuery searches for 'something'
// .hover( function A , function B ) - function A is the mouseover event, function B is the mouseleave event
// function(event){} for All events, jQuery will always pass an "event" parameter if you ask for it on the window .event() registration. cool stuff you can do with jQuery's "event" parameter can be found here in the references below.
$("label", "#data_id-element").hover(function(event){
// $(this) jQuery'itize the html Element the user hovered into
// .attr("for") - get the value of the 'for' attribute
// $("#" + whatever) - get whatever this is by its id='' attribute
// .val() - get the value of whatever this is
var radioValue = $("#"+$(this).attr("for")).val();
},
function(event){
// $(this) jQuery'itize the html Element the user hovered out of
// .attr("for") - get the value of the 'for' attribute
// $("#" + whatever) - get whatever this is by its id='' attribute
// .val() - get the value of whatever this is
var radioValue = $("#"+$(this).attr("for")).val();
});
});
If I've understood you correctly, you want to get the value of the radio button associated with a label, when you hover over the label. If that's the case, try something like this:
$("label").mouseover(function() {
var radioButtonValue = $(this).find("input").val();
});
Here's a working example.
I am currently developing my website for addcart. Here is my HTML code:
<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="myradio" id="payment1" value="1" onclick="updatepayment(this.value)" />
<input type="radio" name="myradio" id="payment2" value="2" onclick="updatepayment(this.value)" />
<input type="radio" name="myradio" id="payment4" value="4" onclick="updatepayment(this.value)" />
Already I created a page named unlock payment. On that page the customer add the addcart to basket.
What I want is additionally to add that three buttons for YOUR CART. That radio button indicates delivery methods named normal, royal, postal. If customer clicks those buttons that amount must be added with get YOURCART and displayed Totally.. it is dynamical no need to store it in a DB.
How could I do and what query I need to implement it. Is there any need to use AJAX call?
$(document).ready(function(){
$(".cart :input[name='rmr']").click(function() {
updatePayment($(this).val());
if (!!$(this).attr("checked") == true) {
$("#finalamount").html( parseInt($("#totalamount").val(), 10) * parseInt($(this).val(), 10));
}
});
});
You want to make sure you know your current totalamount first, then whenever any one of the input boxes is clicked it gets updated. For example:
var totalAmount = 10.0; //Set from the database
function updateAmount(var additionalCost)
{
document.getElementById("finalamount").innerHTML = totalAmount + additionalCost;
}
Each click on a radiobutton wold call updateAmount with their respective additional costs.
hi
currently am developing my website for payment process. most probably i have completed my work on it. whats my question in my website finally i mentioned payment delivery details which has three radio buttons with values (in pounds).after customer clicks that those buttons the corresponding value should add with addcart and display the final amount. this is the web page i need http://spsmobile.co.uk/make-payment.php/ am tottaly confusing what code should i apply on it.
can any one post me the correct code.
happy new year
thanks in adv
Using Radio Buttons:
HTML
For each option you create a radio Button:
...
<input type="radio" name="delivery" value="signed" cheked="cheked">text bla</input>
<input type="radio" name="delivery" value="special">more text bla</input>
<input type="radio" name="delivery" value="international">even more text bla</input>
Notie that they all share a common name ("delivery").
The option with the checked="checked" attribute will be selected by default,
PHP
I your user submits the form you can acess the selected option with $_POST["delivery"] or $_GET["delivery]. which ine contains the data depends on wheter you use GET or POST for your form.
You cn specify this in the main form element:
<form ... method="POST">...
Change your form's radio fields to following:
<input name='totalamount' id='totalamount' value='0' />
<div id='rmr'>
<input name="rmr" id="rmr_signed" type="radio" value="3" />
<input name="rmr" id="rmr_special" type="radio" value="5.5" />
<input name="rmr" id="rmr_international" type="radio" value="10" />
</div>
Now by using jquery you can write
in function show_make_payment_validation write
jQuery('#rmr input[type=radio]').each(function(){
var total = parseInt(jQuery('input[name="rmr"]:checked', '#myForm').val()) + parseInt(jQuery('#totalamount').val());
jQuery('#totalamount').val(total);
}
Why not just give your radio buttons a quick onclick event and update the total accordingly?
Somthing like:
Total: £<span id="total_amt" class="repair-finalamount-txt">0.00</span>
...
<input name="rmr" type="radio" title="3.00" value="1">
<input name="rmr" type="radio" title="5.50" value="2">
<input name="rmr" type="radio" title="10.00" value="3">
...
And for jQuery code:
jQuery('input[type="radio"][name="rmr"]').click(function() {
jQuery('span#total_amt').val(jQuery(this).attr('title'));
});
I haven't ran or tested it, so no guarantee the above code is flawless ;)
hi currently i have developed my own website named www.eyeview.com. i want to update the hidden amount to my add product by clicking radio buttons. i have a five radio buttons with values of 100$ 150$ 200£ 175$ and 87$ but hidden amount value is 222
var totalAmount = 222.00; //Set from the database
function updateAmount(var additionalCost)
{
document.getElementById("finalamount").innerHTML = totalAmount + additionalCost;
}
var $amount=
(‘#repair_total_amount’).html(“Total <span class="repair-finalamount-txt">£ ”+ total_amount+”</span>”);
`$amount.text('£ 100');`
`$amount.text('£ 150');`
`$amount.text('£ 175');
`$amount.text('£ 87');
`$amount.text('£ 200');
i want to display the value on the product palce ie basket item. there is no response in my page ie nothing action after i clicked.
give me a correct code plz for updating the amount also i wanna to need the function for update
thanks in adv
Based on the fact you have tagged this post with jQuery, here is a clean jQuery solution that will work for you (just ensure you include the library of course):
<script type="text/javascript">
var startAmount = 222.0;
var finalAmount = 0;
$(document).ready(function() {
$('.c').click(function() {
$('.c:checked').each(function() {
finalAmount = startAmount + parseFloat($(this).val());
});
$('#finalAmount').html('Final Amount: $' + finalAmount);
});
});
</script>
<input name="cost" type="radio" value="100" class="c" /> 100$
<input name="cost" type="radio" value="150" class="c" /> 150$
<input name="cost" type="radio" value="200" class="c" /> 200$
<input name="cost" type="radio" value="175" class="c" /> 175$
<input name="cost" type="radio" value="87" class="c" /> 87$
<br />
<span id="finalAmount">Final Amount: $0</span>
document.getElementById('BUTTON-ID-HERE').onclick = function(){ updateAmount('VALUE HERE') };
Should be sufficent. Hope that helps.