I am trying to create a selection in which I have two radio buttons of same group and some text in between. Like single correct MCQ...
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
</head>
<body>
<input type="radio"> This_1 <br>
or <br>
<input type="radio"> This_2
</body>
</html>
Now what I want is that user can select only one of the radio button.
However, as soon as I add OR in between, the radio buttons divide into two groups. And instead I can select both of them,u know what I'm saying...
Please help is really appreciated.
Thank you so much!!
Do you mean like this?:
<p>Select an option:</p>
<div>
<input type="radio" id="1" name="options" value="1"
checked>
<label for="huey">1</label>
</div>
<p>TEXT 1</p>
<div>
<input type="radio" id="2" name="options" value="2">
<label for="dewey">2</label>
</div>
<p>TEXT 2</p>
<div>
<input type="radio" id="3" name="options" value="3">
<label for="louie">3</label>
</div>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div id="div1" style="border:1px solid blue; width:300px;">
<input class="sev" id="chk1" type="checkbox">
<label for="chk1">Check 1</label>
<input class="sev" id="chk2" type="checkbox">
<label for="chk2">Check 2</label>
<input class="sev" id="chk3" type="checkbox">
<label for="chk3">Check 3</label>
</div>
<div id="div2" class="orphan" style="border:1px solid green; width:300px; margin-top:50px;">
<input class="orp" id="chk4" type="checkbox">
<label for="chk4">Check 4</label>
<input class="orp" id="chk5" type="checkbox">
<label for="chk5">Check 5</label>
<input class="orp" id="chk6" type="checkbox">
<label for="chk6">Check 6</label>
</div>
</body>
</html>
Let's say I have 2 divs with 3 checkboxes in each.
My goal is when user selects a checkbox in one of the groups, I want to disable the other group so no selections can be made. However I want to allow users to select as many checkboxes in one group as they want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div id="div1" style="border:1px solid blue; width:300px;">
<input id="chk1" type="checkbox">
<label for="chk1">Check 1</label>
<input id="chk2" type="checkbox">
<label for="chk2">Check 2</label>
<input id="chk3" type="checkbox">
<label for="chk3">Check 3</label>
</div>
<div id="div2" style="border:1px solid green; width:300px; margin-top:50px;">
<input id="chk4" type="checkbox">
<label for="chk4">Check 4</label>
<input id="chk5" type="checkbox">
<label for="chk5">Check 5</label>
<input id="chk6" type="checkbox">
<label for="chk6">Check 6</label>
</div>
</body>
</html>
So if user checks chk1 in div1, disable all checkboxes in dev2.
I honestly am struggling with this and have no clue how to do this.
Okay I figured it out. It's been about 2 years since i touched Jquery/JS so forgive me.
I put this together and it seems to work:
$(document).ready(function(){
$('.sev').on('change',function(){
var isChecked = ($('.sev:checkbox:checked').length > 0) ? true : false;
$('#div2 input').prop('disabled',isChecked);
});
$('.orp').on('change',function(){
var isChecked = ($('.orp:checkbox:checked').length > 0) ? true : false;
$('#div1 input').prop('disabled',isChecked);
});
});
I guess my question would be how can I make this into a single handler? so I don't have 2 separate handlres for 2 classes.
Here is how to do it with jQuery; basically listen for the change event on all checkboxes. Once the event occurs:
determine the div in which this occurred - thisDiv;
then derive the other div - otherDiv
Set the checkboxes of otherDiv's disabled property based on whether there are (or not) any checked checkboxes in thisDiv
That's it!
$('#div1 :checkbox, #div2 :checkbox').on('change', function(e) {
const thisDiv = $(this).parent();
const otherDiv = $('#div1,#div2').not(thisDiv);
otherDiv.find(':checkbox').prop('disabled', thisDiv.find(':checkbox:checked').length);
});
DEMO ...
$('#div1 :checkbox, #div2 :checkbox').on('change', function(e) {
const thisDiv = $(this).parent();
const otherDiv = $('#div1,#div2').not(thisDiv);
otherDiv.find(':checkbox').prop('disabled', thisDiv.find(':checkbox:checked').length);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div id="div1" style="border:1px solid blue; width:300px;">
<input id="chk1" type="checkbox">
<label for="chk1">Check 1</label>
<input id="chk2" type="checkbox">
<label for="chk2">Check 2</label>
<input id="chk3" type="checkbox">
<label for="chk3">Check 3</label>
</div>
<div id="div2" style="border:1px solid green; width:300px; margin-top:50px;">
<input id="chk4" type="checkbox">
<label for="chk4">Check 4</label>
<input id="chk5" type="checkbox">
<label for="chk5">Check 5</label>
<input id="chk6" type="checkbox">
<label for="chk6">Check 6</label>
</div>
</body>
</html>
If you add "chk1" class to your div1 inputs this JQuery code should achieve what you're looking for:
$(".chk1").on("input", function() {
if ($(this)[0].checked) {
$("#div2 input").prop("disabled", true);
} else {
$("#div2 input").prop("disabled", false);
}
});
$(document).ready(function(){
$('.sev').on('change',function(){
var isChecked = ($('.sev:checkbox:checked').length > 0) ? true : false;
$('#div2 input').prop('disabled',isChecked);
});
$('.orp').on('change',function(){
var isChecked = ($('.orp:checkbox:checked').length > 0) ? true : false;
$('#div1 input').prop('disabled',isChecked);
});
});
I have added no styling whatsoever and this is what I see.
My code contains only html and is as found below:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Document</title>
</head>
<body>
<input type="radio" name="q3" value="elon" />Elon Musk<br />
<input type="radio" name="q3" value="nikola" />Nikola Tesla<br />
<input type="radio" name="q3" value="bill" />Bill Gates<br />
<input type="radio" name="q3" value="jeffrey" />Jeffrey Archer<br />
</body>
</html>
Inline elements are sensitive to the whitespace in your code. Just remove it:
<input type="radio" name="q3" value="elon" />Elon Musk<br />
<input type="radio" name="q3" value="nikola" />Nikola Tesla<br />
<input type="radio" name="q3" value="bill" />Bill Gates<br />
<input type="radio" name="q3" value="jeffrey" />Jeffrey Archer<br />
How can I get bootstrap to equal align my radio form to have my question and three answers split into 4 columns like col-sm-3. I want it to wrap the text in each column when its too long. example form below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form class="form-check-inline">
<label class="control-label">This is some question: </label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio" checked>Option 1 which is really long and spans most of the page compared to the other options
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio">Option 2 is a small option
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width
</label>
</form>
</div>
</body>
</html>
I would like the check box to be split into columns and wrap the input text
Form control: inline radio buttons
The form below contains three inline radio buttons:
This is some question: | Option 1 which is really long | Option 2 is a small | option Option 3 is another long option which
| and spans most of the page compared | | i would prefer was wordwrapped and options
| to the other options | | divided equally over
the | char here i have added just to indicate columns, i dont expect them to actually be present in the output.
You're not using the container-row-column classes correctly -- <div class="container"><div class="row"><div class="col-xs-12">... Refer to Bootstrap 3.4.1 documentation for more information.
Additionally, the latest Bootstrap version is 4.6 with 5.0 in public beta, consider updating your Boostrap version.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
</div>
</div>
<form class="form-check-inline row">
<div class="col-xs-3">
<label class="control-label">This is some question:</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input checked class="form-check-input" name="optradio" type="radio">Option 1 which is really long and spans most of the page compared to the other options</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 2 is a small option</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width</label>
</div>
</form>
</div>
</body>
</html>
HTML Noob here: I am trying to get two MDC radio buttons in a form to appear aligned on separate rows (one below another). I have tried putting break tags in various places but it doesn't seem to have any effect.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shrine (MDC Web Example App)</title>
<link rel="shortcut icon" href="https://material.io/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>
<form action="home.html">
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div><br>
<label for="radio-1">Radio 1</label>
</div>
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="radio-2">Radio 2</label>
</div>
<br>
</form>
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
</body>
</html>
I can get standard radio buttons to appear on separate rows using break tags as follows:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
How can I get these radio-1 and radio-2 to appear on separate rows?
I think you just entered the brake at the wrong spot, it should be between the two divs of the "mdc-form-fields":
<label for="radio-1">Radio 1</label>
</div>
<br>
<div class="mdc-form-field">
<div class="mdc-radio">
There are other solutions with a grid system, but this is the simple one
I'm getting 2 errors:
end tag for "FORM" omitted, but its declaration does not permit this:
and
end tag for element "FORM" which is not open:
but I thought I closed both of them properly.
html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Incident Form </title>
<link rel="stylesheet" href="http:...">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="header">
Incident Form
</div>
<div class="t1">
<form action="connect_database.php" method = post>
<p>
<br><br>
<ins>Be sure to fill in all of the fields</ins>
<br><br><br><br>
</p>
<p>
Choose the type of incident<br>
<br>
</p>
<p>
<input type="radio" name="type" value="afs"> Afs<br>
<input type="radio" name="type" value="db"> Database<br>
<input type="radio" name="type" value="cs"> Computer systems<br>
<input type="radio" name="type" value="pw"> Password<br>
<input type="radio" name="type" value="hw"> Hardware<br>
<input type="radio" name="type" value="other"> Other<br>
<br><br><br>
</p>
<p>
Describe the incident<br><br>
<textarea rows="6" cols="20" name="inc"></textarea><br><br>
</p>
<p>
Would you also like to receive an email copy of your form summary?
<br><br>
</p>
<p>
<input type="radio" name="yesno" value="yes"> Yes<br>
<input type="radio" name="yesno" value="no"> No<br>
<br><br>
<input type="submit" name = "submit1" value= "Submit Incident">
</p>
</div>
</form>
</body>
</html>
Just switch your div and form tag.
You're opening the div:
<div class="t1">
then opening the form:
<form action="connect_database.php" method = post>
then closing the div:
</div>
and closing the form:
</form>
Instead the correct order is open the div, open the form, closing the form, closing the div.
Tags are contained in each others like in a Matryoshka doll.
You have wrong nestings of your outer div (class="t1") and form. It should be like this at the end:
</form>
</div>
</body>
and not:
</div>
</form>
</body>
because the div tag is opened before the form.
You're closing the last <div> in the wrong place. Move it bellow the </form> tag.
Also, try to use and CSS instead of and
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Incident Form </title>
<link rel="stylesheet" href="http:...">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="header">
Incident Form
</div>
<div class="t1">
<form action="connect_database.php" method = post>
<p>
<br><br>
<ins>Be sure to fill in all of the fields</ins>
<br><br><br><br>
</p>
<p>
Choose the type of incident<br>
<br>
</p>
<p>
<input type="radio" name="type" value="afs"> Afs<br>
<input type="radio" name="type" value="db"> Database<br>
<input type="radio" name="type" value="cs"> Computer systems<br>
<input type="radio" name="type" value="pw"> Password<br>
<input type="radio" name="type" value="hw"> Hardware<br>
<input type="radio" name="type" value="other"> Other<br>
<br><br><br>
</p>
<p>
Describe the incident<br><br>
<textarea rows="6" cols="20" name="inc"></textarea><br><br>
</p>
<p>
Would you also like to receive an email copy of your form summary?
<br><br>
</p>
<p>
<input type="radio" name="yesno" value="yes"> Yes<br>
<input type="radio" name="yesno" value="no"> No<br>
<br><br>
<input type="submit" name = "submit1" value= "Submit Incident">
</p>
</form>
</div>
</body>
</html>
i had this kind of bug and couldn't also validate my document... the best way in this case is to put the open form Tag directly after the open ody tag and the closing form Tag directly before the closing body Tag. something like this:
<body>
<form ....>
....
</form>
</body>
And i would use the fieldset, label and legen etc. Adding structure to forms: the FIELDSET and LEGEND elements
Amin Kasbi