Am trying to make a HTML page that calculate the BMI for adults and children
i want from user to choose the type of calculation if it for adult or children
using radio button but I do not want it to open a new page .. if user check any button
i want it when he check e.x. the Adult radio button the input text field appears under the two radio buttons .. if i change my mind then check the Children radio button ... another input text field appears Instead of those for adult one
i don't know if my request is clear or no .. i hope so
i wish some one help me how to make that
actually I could not search about it in Google cause i don't know what i suppose to write there ... very beginner :D
so if the answer is a link to read about that .. i 'll accept that ^_^
Regards
you could do this with jQuery.
You should hide both input fields, and if the users checks a radiobutton fade the corresponding input in.
<div id="formdiv">
<form>
<label for="1">Radio 1</label><input type="radio" id="1" name="choose" />
<label for="2">Radio 2</label><input type="radio" id="2" name="choose" />
<input type="text" class="1" name="input1" />
<input type="text" class="2" name="input2" />
</form>
</div>
<script type="text/javascript">
$("input[name='choose']").change(function() {
var inputToFadeIn = $(this).attr('id');
$("input[type='text']:visible").animate({visibility: 'hidden'}, 500);
$('.' + inputToFadeIn).animate({visibility: 'visible'}, 500);
});
</script>
<style type="text/css">
input[type='text']
{
visibility:hidden;
}
</style>
Have now tested it on JSFiddle, but doesn't work. Could someone explain http://jsfiddle.net/7eKP6/?
Here is a link it will not exactly solve your problem but will give you idea how to do it .
Related
Okay so I'm working on a project for my computer class and we're using radio buttons within a form. Part of the requirements are to ensure that when the submit button is clicked it is not left blank and that only one radio button is clicked.
Whenever I have worked with radio buttons it only allows you to click one, so I was confused by the requirement. I even went to W3 Schools HTML Forms Input Types and confirmed that only one radio box can be selected at a time.
After contacting my TA though he sent me the following code which allows multiple radio buttons to be selected. Any clarification about why the following code allows multiple radio buttons to be selected and if my knowledge on radio buttons is correct would be wonderful. Thanks in advance.
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div>
<form target="_blank" onsubmit="try {return window.confirm("You are submitting information to an external page.\nAre you sure?");} catch (e) {return false;}">
<input type="radio"> one<br>
<input type="radio"> two<br>
<input type="radio"> three<br>
</form>
</div>
</body>
</html>
JSFiddle
you have to put them in a group.You can do it like this
<form action="">
<input type="radio" name="gender" checked> Male<br>
<input type="radio" name="gender" > Female<br>
<input type="radio" name="gender" > Other
</form>
if you use the same name it's consider as a group. name="gender" like this.
The inputs do not have the name attribute set, therefore they are not grouped
As you can see here, the radio buttons only allow one selection when named:
<div>
<form target="_blank" onsubmit="try {return window.confirm("You are submitting information to an external page.\nAre you sure?");} catch (e) {return false;}">
<input name="group_name" type="radio"> one<br>
<input name="group_name" type="radio"> two<br>
<input name="group_name" type="radio"> three<br>
</form>
</div>
jsfiddle
That being said, I don't know why you are being told to use radio buttons for multiple selections. They are most definitely not intended for that
This happens because you need to provide same name attribute when input type is radio:
<form method="post" action="">
<input type="radio" name="radio">one
<br>
<input type="radio" name="radio">Two
<br>
<input type="radio" name="radio">Three
<br>
</form>
Radio buttons need to be part of a group for a maximum of one to be selected. The group is denoted with the name attribute. All radio buttons in a group should have the same name.
Here's your updated fiddle: https://jsfiddle.net/8fn0hfoh/1/
Radio buttons needs to share the same name attribute to behave like that.
To put in other words only one radio button with the same name could be checked at once.
As said by MDN
radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group"; only one radio button in a group can be selected at a time.
Here is your code adjusted to behave like that.
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div>
<form target="_blank" onsubmit="try {return window.confirm("You are submitting information to an external page.\nAre you sure?");} catch (e) {return false;}">
<input type="radio" name="field"> one<br>
<input type="radio" name="field"> two<br>
<input type="radio" name="field"> three<br>
</form>
</div>
</body>
</html>
So its up to you what approach do you wanna use.
I'm designing a form which has, among others, the following elements:
<div>
<div class="radio-list">
<label><input type="radio" name="ftp_directory" id="ftpdir_public_html" value="public_html"> <strong>public_html</strong> directory</label>
<label><input type="radio" name="ftp_directory" id="ftpdir_blank" value="."> <strong>Root</strong> directory </label>
<label><input type="radio" id="ftpdir_custom" value=""> Other directory (please specify)</label>
</div>
<input name="ftp_directory" class="form-control" type="text" disabled="disabled" aria-disabled="true">
</div>
I enable the latter <input> text element when I check the 3rd radio (via jQuery) and all is fine.
What I want to do is set up the required attribute in a correct way so that it vaildates if any of the first two radio button is checked or the 3rd radio is checked and the input has some text.
Note: I know I can do it with some JS/jQuery validation code but I'd like to do it in pure HTML5.
As already said, you cannot do this with radio buttons + text input. However, you can achieve something similar with data lists and a single text field:
<input type="text" name="ftp_directory" list="preselection" required>
<datalist id="preselection">
<option>public_html</option>
<option value=".">current directory</option>
</datalist>
Logically, this meets exactly your constraints. However, it might not be stylistically what you're looking for.
I solved via jQuery, as said it is not possible with HTML5 only.
Here's my solution:
$(document).on('change', 'input[type="radio"][name="ftp_directory"]', function(e){
var radio_id = $(this).attr('id');
if (radio_id == 'ftpdir_custom')
{
$('#ftp_directory_custom').prop('disabled', false);
$('#ftp_directory_custom').prop('required', true);
$('input[type="radio"][name="ftp_directory"]').removeProp('required').removeAttr('aria-required');
}
else
{
$('#ftp_directory_custom').prop('disabled', true);
$('#ftp_directory_custom').removeProp('required');
$('input[type="radio"][name="ftp_directory"]').prop('required', true);
}
});
The name attribute must be different, anyway, for radio buttons and text input. Plus, because of the latter, one has to detect and differentiate request parameters server-side accordingly.
Improvements are welcome.
I have the following form, where users can choose to enter either the ID or the name:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName"></label>
When I click on "Member ID or Last Name, this switches the radio buttons. However when I click on the text inputs, this has no effect on the radio buttons.
Is this the expected behavior? If so, is there any way to tweak the html to make it work?
Note: this is not a JavaScript question.
Fiddle: https://jsfiddle.net/3by5wqzw/
Yes, this seems to be the expected behaviour on chrome, microsoft edge and firefox on windows 10 and on chrome for android lollipop.
You can use a bit of javascript to solve the problem:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="document.getElementById('ID').checked = true;"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="document.getElementById('Name').checked = true;"></label>
When you click on a text input, the client will automatically check the matching radio button looking it up by its id.
As an alternative, you could put the Javascript code in a function, so it looks better and is easier to edit if you have lots of radio buttons with text input associated with it:
function check_radio(element_id){
document.getElementById(element_id).checked = true;
}
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="check_radio('ID');"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="check_radio('Name');"></label>
In regular html, radio input types are not related to anything other than the label associated with it. Therefore any other input text fields before or after need to be hooked up via some sort of javascript.
I think I found the answer.
The w3 recommendation states:
In an HTML document, an element must receive focus from the user in order to become active and perform its tasks
The issue is that when the user clicks on the text input, the radio button loses focus and is not activated.
Source (html4): http://www.w3.org/TR/html4/interact/forms.html#focus
I need to add a section of code to a website. Using html5, I've added checkboxes with a submit button below to the website. I want to make it that in order to advance to the next page, one MUST first click the checkbox and then click the submit button. Currently, if the user DOES NOT click the checkbox, then the user is be able to advance to the next page. This should NOT happen. If the user does not click the checkbox, then the user should not advance to the next page. Here is my code:
<!DOCTYPE html>
<html>
<body>
<h1>Accessories</h1>
<form name="input" action="random2_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Car">Would you like the car to speak to you?<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
If someone could tell me how to fix this, that would be much appreciated. Thanks
The required attribute is really useful in situations like this;
<input type="checkbox" name="vehicle" value="Car" required>Would you like the car to speak to you?<br /><br />
Check my fiddle for a live demo.
http://jsfiddle.net/magnusburton/fUskV/
EDIT:
This won't work if the browser doesn't support HTML5. Here's a solution which works for the majority of the users.
Simple JavaScript Checkbox Validation
I am still having trouble with checkboxes. They are small and hard to see. When I disable my checkbox it becomes even harder to see. The color of the check becomes lighter.
Is there another way that I can stop a checkbox from responding to a click. Maybe something with javascript / jQuery so that once a variable is set then when a checkbox is clicked it just returns straight back to its pre-click state.
You could try using plain HTML with the readonly attribute:
<input type="checkbox" readonly="readonly" .../>
<input type="checkbox" onclick="return false;" />
or with jquery:
html:
<input type="checkbox" class="disabled" />
js:
$('input.disabled').click(function(e) {
e.preventDefault();
});