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 ;)
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>
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.
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']
I need some help modifying the Webform Module so that it can work for my project.
I use Webform right now for single page, basic forms, and it works wonderfully.
What I need to be able to take multiple webforms and string them together based on some initial selections a user makes.
Let me give an example.
The user is sent to a "General Information" webform, where they put in things like name and birthday. There are also 3 questions with check-boxes which are:
"Do you have a house"
"Do you have a car"
"Do you have children"
The user can select all, some, or none of the options. Based on what the user selects, once they press the submit button, they will be sent to the "House form", "Car form", and/or "Children form".
When they're done filling out all the forms, an email is sent to the admin just like webforms does now. The information does not need to be stored on the website in the database, the email is sufficient.
So, any suggestions on how to do this? Would something else besides Webform be more appropriate? Or (if I'm super lucky) does a module which does what I need already exist?
Why not simply show, or hide, the form elements as required, rather than redirect to other, potentially-multiple subsequent, forms?
Using the following (x)html:
<form enctype="form/multipart" method="post" action="">
<fieldset>
<legend>Cars:</legend>
<label for="cars">Do you have one, or more, cars?</label><input name="cars" id="cars" class="test" type="checkbox" />
<fieldset class="subSection" id="cars">
<input type="radio" name="numCars" value="1" />One
<input type="radio" name="numCars" value="2" />Two
<input type="radio" name="numCars" value="3" />Three
</fieldset>
</fieldset>
<fieldset>
<legend>Children:</legend>
<label for="kids">Do you have one, or more, children</label><input name="kids" id="kids" class="test" type="checkbox" />
<fieldset class="subSection" id="kids">
<input type="radio" name="numKids" value="1" />One
<input type="radio" name="numKids" value="2" />Two
<input type="radio" name="numKids" value="3" />Three
</fieldset>
</fieldset>
<fieldset>
<legend>Houses:</legend>
<label for="houses">Do you have one, or more, houses</label><input name="houses" id="houses" class="test" type="checkbox" />
<fieldset class="subSection" id="houses">
<input type="radio" name="numHouses" value="1" />One
<input type="radio" name="numHouses" value="2" />Two
<input type="radio" name="numHouses" value="3" />Three
</fieldset>
</fieldset>
</form>
And the jQuery (which could be tidied, but I'm still new at it myself...so 'proof of concept' only, I'm afraid):
$(document).ready(
function() {
// hide the sub-sections
$('fieldset.subSection').hide();
// show subsections onClick of the .test checkboxes
$('input.test').click(
function() {
$(this).next('fieldset.subSection').slideToggle('slow');
}
)
}
);
Live demo currently located at: http://davidrhysthomas.co.uk/so/subForms.html
Conditional fields are a feature of the upcoming Webform version 3. See the related issue and the beta version that was released two weeks ago.
Create custom module, that will catch submit via hook_nodeapi and redirect to proper form or page...