<!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);
});
});
Related
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>
I want to align my label element to the top left of my input element, so its right on the edge of the left side of the top of the input. How can I acheive this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="functions.js"></script>
<script src="main.js"></script>
</body>
</html>
Thank you!
This is what you need. display: block
Just use CSS property display: block to show labels on top of your element and on left side as you wanted.
Just run snippet to see it in action.
label {
display:block;
}
button {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
</body>
</html>
Hope this help.
(First post on Stackoverflow, if there is anything im missing feel free to let me know)
What I am trying to accomplish, marked in Red
I've been working with a few things, but can't figure it out. I don't know where to look to find if that type of styling is it's own thing or is it some sort of manipulation of code?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Forms</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
div.a{
border: 2px solid black;
}
div.border{
border: 10px solid black;
padding:10px;
}
div.color{
border:15px solid #46516C;
pading: 4px;
}
p.a{
padding-top: -25px;
}
</style>
</head>
<body>
<div class="color">
<div class="border">
<div class="a">
<form action="/action_page.php">
<p class="a">Card Ownership</p>
<label class="radio-inline">
<input type="radio" name = "ownership" value="Personal" checked>
Personal<br>
</label>
<label class="radio-inline">
<input type="radio" name = "ownership" value="Buisness">
Buisness<br>
</label>
</form>
</div>
<label>
<input type="checkbox" name="conformation" checked> I confirm that this purchase has been authorized.
</label>
</div>
</div>
</body>
</html>
Check HTML Fieldset
<form>
<fieldset>
<legend>Card Ownership:</legend>
Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text">
</fieldset>
</form>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
my homework
enter image description here
and this what i doenter image description here
what i have to do more
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box1{
box-sizing: content-box; width:300px; height:200px; padding:150px; border: 1px solid;
</style>
</head>
<body>
<div id="box1" margin>
<form action="must.txt">
Frist Name :<input type="text" name="fname"><br>
Last Name : <input type="text" name="lname" ><br>
Password : <input type="password" name="password" ><br>
Email : <input type="email" name="email" ><Br>
Birthday : <input type="date" name="Birthday" > <br>
Gender : <input type="radio" name="Gender" value="Male">Male
<input type="radio" name="Gender" value="Female">Female
</form>
</div>
I made some arrangements. You can do the rest by searching. Good luck with.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box1{
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);}
</style>
</head>
<body>
<div id="box1">
<fieldset style="padding:50px">
<legend>Register Form</legend>
<form action="must.txt">
First Name :<input type="text" name="fname"><br>
Last Name : <input type="text" name="lname" ><br>
Password : <input type="password" name="password" ><br>
Email : <input type="email" name="email" ><Br>
Birthday : <input type="date" name="Birthday" > <br>
Gender : <input type="radio" name="Gender" value="Male">Male
<input type="radio" name="Gender" value="Female">Female<br>
<center><button type="submit" style="margin:5px">Submit</button><button onclick="ResetFields()">Reset</button></center>
</form>
</fieldset>
</div>
</body>
Add confirm password and confirm email:
Confirm Password : <input type="password" name="confirm_password" >
Confirm Email : <input type="email" name="confirm_email" >
The text boxes get red borders when text is removed from them. However, the textarea does not follow this behavior. What is the problem and how do I remedy it?
http://jsfiddle.net/cKYNy/9/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="b">
<div data-role="content" data-theme="b" style="padding:0px;margin:0;">
<p>Content Page 1</p>
<form name="contactForm" id="contactForm" data-ajax="false" method="post">
<div>
<input type="text" id="name" name="name" value="" required="true"></input>
</div>
<div>
<input id="email" name="email" type="email" value="" required="true"></input>
</div>
<div>
<textarea name="message" id="message" required="true"></textarea>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</div>
</form>
</div>
</div>
</body>
</html>
If it is not an option of JQuery Mobile you might wanna try the following:
$("#contactForm").submit(function (e) {
e.preventDefault();
if ($('#name')[0].checkValidity() === false) {
$('#name')[0].toggleClass("error");
}
}
Catch the submit event on the form, stop it from submitting and check the validation yourself. If not valid, add an error class.