enable disable inputs text with its corresponding checkbox jquery - javascript

Having several rows, where each row has a checkbox, a label, and an input text
How can I enable/disable the checkbox's neighbour input text when the check box is selected, using jquery. By this I mean to just enable/disable the input that is on same row with checkbox
I have:
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
and do not know how to do this
$(':checkbox').change(function(){
$('input:text').?find?.prop("disabled", !$(this).is(':checked'));
});
here is fiddle

maybe like this:
$(':checkbox').change(function(){
var this_nr=$(this).attr('id').substr(-1);
$('#input'+this_nr).prop('disabled', !$(this).is(':checked'));
});
$(':checkbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
or like this:
$(':checkbox').change(function(){
$('input:text').eq($(':checkbox').index(this)).prop("disabled", !$(this).is(':checked'));
});
$(':checkbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>

I would use event delegation on the form, in the handler using nextAll to find the next text box.
// disable all the text fields
$('#myform :text').each(function () {
$(this).prop('disabled', true);
});
$('#myform').on('change', ':checkbox', function (evt) {
let textbox = $(this).nextAll(':text');
textbox.prop('disabled', (i, val) => !val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<p>
<input id="chk1" type="checkbox">
<label for="chk1">text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label for="chk2">text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label for="chk3">text 3 </label>
<input id="input3" type="text">
</p>
<p>
<label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
<label for="comment">Comments </label><input id="comment" type="text" value="This will toggle when you check the TOS">
</p>
</form>
This works if your entire form is in this checkbox followed by textbox form; it will break if you have any other checkboxes that don't control a textbox or textboxes that shouldn't be disabled. To be more flexible, I would add a class to the items I wanted to have this behavior:
// disable all the text fields
$('#myform :text.toggle-input').each(function () {
$(this).prop('disabled', true);
});
$('#myform').on('change', ':checkbox.toggle-input', function (evt) {
let textbox = $(this).nextAll(':text.toggle-input');
textbox.prop('disabled', (i, val) => !val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<p>
<input id="chk1" class="toggle-input" type="checkbox">
<label for="chk1">text 1 </label>
<input id="input1" class="toggle-input" type="text">
</p>
<p>
<input id="chk2" class="toggle-input" type="checkbox">
<label for="chk2">text 2 </label>
<input id="input2" class="toggle-input" type="text">
</p>
<p>
<input id="chk3" class="toggle-input" type="checkbox">
<label for="chk3">text 3 </label>
<input id="input3" class="toggle-input" type="text">
</p>
<p>
<label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
<label for="comment">Comments </label><input id="comment" type="text" value="This won't toggle when you check the TOS">
</p>
</form>

You could use the jQuery siblings function to retrieve the neighboring textbox and enable/disable it based on the .checked property. I've called .change() at the end to set the initial state of the textboxes.
$(":checkbox")
.change(function() {
$(this)
.siblings("input[type='text']")
.prop("disabled", !this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label>text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label>text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label>text 3 </label>
<input id="input3" type="text">
</p>
</form>

Related

How to enable/disable next input field

I am trying to enable disable very next input field with check uncheck of a closest checkbox.
I tried the following script.
$(document).on('change', '.check:checkbox', function(){
if (this.checked) {
$(this).next().prop('disabled', false);
}else{
$(this).next(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
As your HTML stands, .next() points to the label element.
You should first target the closest div then find the respective element from that div element:
$(this).closest('div').find('.inputs')
$(document).on('change', '.check:checkbox', function(){
var currentEl = $(this).closest('div').find('.inputs');
if (this.checked) {
currentEl.prop('disabled', false);
}else{
currentEl.prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
$(this).next() is the <label>, and next after that is <br>.
Use .nextAll() to get all the following siblings that match a selector, and .first() to get the first one of these.
$(document).on('change', '.check:checkbox', function() {
let nextinput = $(this).nextAll(".inputs").first();
nextinput.prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
You should change the <label>, wrapping the checkbox. This will improve the user experience. Then change the jQuery selector to $(this).closest("div").find(".inputs") in order to address the right input element.
$(document).on('change', '.check:checkbox', function(){
$(this).closest("div").find(".inputs").prop('disabled',!this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="a">
</div>
<div class"two">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="b">
</div>
<div class"three">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="c">
</div>
You are almost there. next() element is not input, it's label so why your code is fail. You can increase the next()(next().next()...) until you find proper element.
There are several way to find desire input to enable/disable. If your DOM is not changeable and there are only 1 sibling input use siblings('input').
Example:
$(document).on('change', '.check:checkbox', function() {
if (this.checked) {
$(this).siblings('input').prop('disabled', false);
} else {
$(this).siblings(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>

How to clear an input with javascript?

I have 3 inputs:
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
I would like that when you click in the text3, it erases the text1.
I did a function but it does not work:
<script>
function myFunction(text3) {
document.text1.value = "";
}
</script>
The correct way of doing this is to assign an event listener to the element, within that you can call your function
function myFunction() {
document.querySelector('input.text1').value = "";
}
document.querySelector('input.text3').addEventListener('focus', myFunction);
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
Make sure to select your elements with DOM methods like querySelector, getElement(s)By... and so on. Never rely on accessing an element by it's global id as this may break depending on used browser. (Though document.text1.value = ""; will never work..)
var text1 = document.querySelector('.text1');
var text3 = document.querySelector('.text3');
text3.addEventListener('focus', myFunction);
function myFunction() {
text1.value = '';
}
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
You can do it very easily using JQuery .
$('.text3').on('focus', function() {
$('.text1').val('');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">

Change input text on radio button selection different forms

I am trying to make the input text change when pressing on radio button
the form it self have 5 option with multiple radio buttons and input text
the input text that i am trying to change is in different form since also when changing the input text in the main form it should change it on the other one
i get this for now
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
but this change the input text in the current form
how can i make to change the second form input text
main form
<form action="cart.php" name="cart" id="cart" target="cart"
method="post" onsubmit="return cart();">
<input name="selector0" type="hidden" value="A">
<input name="selector0hyphen" type="hidden" value="-">
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td></tr>
</tbody>
so for now if i press on radio button it change the input in the same form
i need to change the input text on the second form
for example i press on type p it change the first input text in the second form
thanks
Problem in your code:
find("input[type=text]").val(this.value); will give you all the input type=text, and update all of them with this.value, what you really want is to target the specific element, so should be something like .find("input[name=" + this.name + "][type=text]")
Solution:
Use .find("input[name=" + this.name + "][type=text]") to find the last element with name="xxxx" and type=text, this will return only one result since the combination is unique
The idea is to target the single input element you want to update, also you should clean up your code, attribute orders etc, remove id if you are not using it.
UPDATE: change input update radio button.
.find("input[type=radio][name=" + this.name + "][value=" + this.value + "]")
when update your text input, you can target the input where type=radio with same name and same value then use .prop("checked", true) to check it.
$(document).ready(function() {
$("input[type=radio]").click(function() {
$(this).closest('body').find("input[name=" + this.name + "][type=text]").val(this.value);
});
$("input[type=text]").on('input', function() {
$(this).closest('body').find("input[type=radio][name=" + this.name + "][value=" + this.value + "]").prop("checked", true);
});
//init
$("input[type=radio]:checked").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
main form
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector-column-boxhead"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector-column-boxhead">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector-column-boxhead">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td>
</tr>
</tbody>
The form your changing the input is the first form,
select the next form by adding the next method after ( closest( form) )
Don't Forget form tags plus they have to be next to one another.
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').next() .find("input[type=text]").val(this.value);
});
});
$(this).closest() is used to find the closest parent element. It would only select the element that is the parent of $(this) element.
You should give the text inputs unique IDs so that they can be easily identified.
Change this-
<input name="selector1" type="text" value="_" maxlength="3">
To this-
<input name="selector1" id="selector1" type="text" value="_" maxlength="3">
And then in jquery,
$("input[type=radio]").click(function () {
$("#selector1").val(this.value);
});
Try this code
Add a common class to every radio button
$(document).ready(function() {
$('.class_name_of_radio').change(function() {
$("input[type=text][name="+this.name+"]").val(this.value);
});
});
Create a onchange function for all the radio button on all the forms. Pass the value of the radio button on the function and get the value from the function.
Eg:
Function myChange(myRadioVal)
{
$("#inputTextBoxId").val(myRadioVal);
//code here
}

Text box to appear when a radio button is selected

I want to get a text box to appear when a radio button is selected yes . This is what my code looks like;
Care of Address? <br>
Yes<input type="radio" name="radio1" value="Yes" onClick="getResults(this)">
No<input type="radio" name="radio1" value="No" onclick="getResults(this)">
<div class="text"><p>Address Line 1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3 <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode <input type="text" name="text5" id="text5" maxlength="30"></p></div>
<script>
(document).ready(function() {
(".text").hide()
});
function getResults(elem) {
elem.checked && elem.value == "Yes" ? (".text").show() : (".text").hide();
};
</script>
Can anyone help me
Abi
Try this:
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = chkYes.checked ? "block" : "none";
}
<label for="chkYes">
<input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />
Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" />
No
</label>
<div id="dvtext" style="display: none">
Text Box:
<input type="text" id="txtBox" />
</div>
You don't even need JavaScript for this, let alone JQuery or Vue
#dvtext {
display: none;
}
#chkYes:checked ~ #dvtext {
display: block;
}
<input type="radio" id="chkYes" name="chk" />
<label for="chkYes">Yes</label>
<input type="radio" id="chkNo" name="chk" />
<label for="chkNo">No</label>
<div id="dvtext">
Text Box:
<input type="text" id="txtBox" />
</div>
The jquery
$('.no, .yes').click(function() {
if($('.no').is(':checked')) {
$('.adrs').hide();
}
if ($('.yes').is(':checked')){
$('.adrs').show();
}
});
I added the class yes to the yes radio button and no to the no radio button. Alos i added the class adrs to the text fields that are adresses. Then based on the classes im hiding the adresses or showing it
Codepen
It seems that you missed to add $ before (document) as well as before (.text).
Please add $ and see if it works or not.
So your script would become like
<script>
$(document).ready(function() {
$(".text").hide();
});
function getResults(elem) {
elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
};
</script>
Hope this helps.
that's what you should do
div.text{display:none}
Care of Address?
Yes
No
<div class="text"><p>Address Line 1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3 <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode <input type="text" name="text5" id="text5" maxlength="30"></p></div>
<script>
function getResults(elem) {
elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
};
</script>
https://jsfiddle.net/2w0zf887/
Here is fiddle for you https://jsfiddle.net/Simplybj/mjLwusut/4/
You can achieve this by binding your radio buttons with click event like this
$('#rdYes').on('click', function() {
$(".text").show();
});
$('#rdNo').on('click', function() {
$(".text").hide();
});
and here is your HTML for that. Its better to wrap input types with label tag. And also if you are going to hide element first then try hide on DOM rendering rather than after DOM is ready to prevent from flickering
Care of Address?
<br>
<label for="rdYes">Yes</label>
<input id="rdYes" type="radio" name="radio1" value="Yes" onClick="getResults(this)">
<label for="rdNo">No</label>
<input id="rdNo" type="radio" name="radio1" value="No" onclick="getResults(this)" checked="checked">
<div class="text" style="display:none;">
<p>Address Line 1
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>

Javascript classlist object and query selector to toggle

Can someone help me, because I'm stuck right now. I have to make a form toggle betweeen two fieldsets using classlist object and queryselector. I have to use a function in Javascript that adds the classlist to the fieldset.
Right now, this is my code in javascript:
var click = document.querySelector('form>fieldset>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
click.addEventListener("click", function() {
if (click === "stage") {
project.classList.toggle(".project");
}
else {
stage.classList.toggle(".stage");
}
});
This is my code in HTML:
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>
And this is my code in CSS:
.project {
display: none;
}
.stage {
display: none;
}
The fieldsets called "Project" and "Stage" have to toggle. So, when I click on the radio button called project, the stage form has to disappear, vice versa.
I can't use onclick, because my teacher don't want me to use that.
You have some problems in your code:
You fogot the start form tag.
project.classList.toggle(".project"); need to be project.classList.toggle("project");
2.1 You can't use toggle classes in this case, because you don't want to toggle, you want to add and remove. You want to show just one section on the same time. right?
You have multiple checkboxes so you need to attach click event to each of them.
var click = document.querySelectorAll('form fieldset:first-child>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
for (var cl = 0; cl < click.length; cl++) {
click[cl].addEventListener("change", function() {
//if (this.value === "stage") {
project.classList.toggle("show");
project.classList.toggle("hide");
stage.classList.toggle("show");
stage.classList.toggle("hide");
//stage.classList.remove("hide");
//}
//else {
// project.classList.remove("hide");
// stage.classList.add("hide");
//}
});
}
.hide {
display:none;
}
<form>
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project" checked="checked">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project hide">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>

Categories

Resources