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.
Related
In html for radio button I have this:
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female <br />
and for check list:
<input name="checkboxvar[]" type="checkbox" value="dog" />Dog</td>
<input name="checkboxvar[]" type="checkbox" value="cat" />Cat</td>
<input name="checkboxvar[]" type="checkbox" value="rabbit" />Rabbit</td>
For the radio buttons how can I make them required and for the checkbox to take the result if the user select more than 1 values?
For the previous fields I use a submit button
<input type="submit" name="submit" id="submit" value="submit" />
by using required attribute as follows:-
<input type="radio" name="sex" value="male" required />Male
For making a radio button required, use the required tag (you only need add the required tag for one radio input per group):
<input type="radio" name="sex" value="male" required/> Male<br />
The required attribute is shorthand for required="required" or required="true" (the fact that its there constitutes a 'truthy' value, as does any (nonempty) string).
For making at least one of the checkboxes required: An answer has already been provided here; this basically states that, given a <button> element with and id of checkBtn, the following code can help (with some of my comments on it):
$(document).ready(function () {
// grabbing the button's element and adding an
// onclick event to it
$('#checkBtn').click(function() {
// grabs all elements which are checkboxes and
// are checked; if none are checked, the length
// is zero; else, the length is a 'truthy' value
checked = $("input[type=checkbox]:checked").length;
// if no elements are checked
if(!checked) {
// error handling
alert("You much check at least one checkbox.") return false;
}
});
});
Assuming that you want to detect the error upon the submit button's click; if you want to handle the error otherwise, you might want to clarify that (your answer is a tad vague).
Hope it helps!
I have 5 radio buttons that offer a range of values :
<input type="radio" name="bookperiod" id="bookperiod" value="1"/>1<br>
<input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br>
<input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>
<input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>
<input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br>
I want it to make sure the user has selected them, because currently the user can not select one and the form will still submit. While I could make one of them "checked", this could mean the user could still submit without actually making a selection.
How can I make sure that when the user hits submit the user has definitely selected one of their of accord.
This is a typical use-case for the required attribute.
Modern browsers don't let you submit the form if no radio button is selected, even with JavaScript disabled.
<form action="">
<input type="radio" name="bookperiod" id="bookperiod" value="1" required />1<br />
<input type="radio" name="bookperiod" id="bookperiod" value="2" required />2<br />
<input type="radio" name="bookperiod" id="bookperiod" value="3" required />3<br />
<input type="radio" name="bookperiod" id="bookperiod" value="4" required />4<br />
<input type="radio" name="bookperiod" id="bookperiod" value="5" required />5<br />
<button type="submit">Submit</button>
</form>
http://jsfiddle.net/feeela/5cJj8/
A simple JS validation for required radio buttons:
document.forms[0].addEventListener( 'submit', function( event ) {
event.preventDefault();
var form = event.target,
radioHasCheckedButton = form.querySelector( 'input[required][name="bookperiod"]:checked' );
if( !radioHasCheckedButton ) {
// Error handling here – no radio button was checked
console.log( 'Some required fields are missing.' );
}
else {
// Everything is fine – finally submit the form
form.submit();
}
}, false );
I feel like all these answers are barely getting by. First of all: you CANNOT have multiple elements with the same ID. Change that to a class or label each one uniquely!
You cannot skip the PHP check. This must always be done. Please read contents related to server-side vs client-side especially on validation. I won't go into it here.
Adding the client-side (Javascript) check is for user convenience ONLY. This allows the user to know the form is incomplete before hitting the submit button and having to wait on the server.
This can be done in a couple of ways and more...
Add an additional radio button with visibility or display turned off with CSS. This would be checked by default. With javascript you can see if this is still the radio button that is selected (meaning the user has not selected one of the visible ones) => display error
Iterate over each radio button and ensure one of them is marked checked (standard if inside a for loop) untested jqyery code.
function validateBookPeriod() {
var bookperiodSelected = false;
$('.bookperiod').each(function(){
if($this.attr('checked') == checked) bookperiodSelected=true;
});
if (bookperiodSelected == false)
alert('Please select a book period!');
}
validateBookPeriod();
you can pre-select one for the user, then the user will be forced to select another option or accept the first
<input type="radio" checked name="bookperiod" id="bookperiod" value="1"/>1<br>
<input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br>
<input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>
<input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>
<input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br>
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 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.
I have an HTML form with radio buttons in a loop with same name like this:
Post Id 1:<input type="radio" name="radiob[]" id="radio" value="Yes" />
Post Id 2:<input type="radio" name="radiob[]" id="radio" value="Yes" />
I want to save radio button selected post into database but I want the user to select only one post. When I put post id with radio button name like radiob[2], the user can select multiple radio buttons so how can the user only check one radio button and the form send both the radio button id and value?
Thanks.
Use the ID as value, and you don't need to use radiob[] because only one value will be transmitted to the server anyway.
Post Id 1:<input type="radio" name="radiob" value="1" />
Post Id 2:<input type="radio" name="radiob" value="2" />
IDs should not be the same for 2 elements and the values should represent be what you need to store anyway:
<label for="radio_1">Post Id 1</label>:<input type="radio" name="radiob" id="radio_1" value="1" />
<label for="radio_2">Post Id 2</label>:<input type="radio" name="radiob" id="radio_2" value="2" />
You would then pick up the variables in php using either the get or post array (depending upon your submission method:
$value = $_POST['radiob']; // or $_GET['radiob']