Develop Reference

How do i get the value of the checked radio button on react,js

I am making an organized todo list and i would love to have it that if i select any of the radio buttons i can put the input in either of the three options array (array not added in code, in a parent component).
I need a function which can tell me which radio button is checked and how to get the id or value of the checked.
const AddTodo = ({ submit, textColor }) => {
return (
<div className="displayFlex justCenter">
<form onSubmit={submit}>
<div>
<input
type="text"
name="newTask"
id="inp"
placeholder="Enter New Task..."
/>
<input
style={{ color: textColor }}
className="btn"
type="submit"
value="Add Task"
/>
</div>
<div>
<span>
<input type="radio" id="todo" name="radioButton" value="toDo" />
<label>To do</label>
</span>
<span>
<input
type="radio"
id="progress"
name="radioButton"
value="inProgress"
/>
<label>In Progress</label>
</span>
<span>
<input type="radio" id="done" name="radioButton" value="done" />
<label>Done</label>
</span>
</div>
</form>
</div>
);
};
export default AddTodo;

Inside your submit function, or another function which you call inside submit, you can get the value of checked radio button.
function submit(event) {
[].forEach.call(event.target.elements, function(ele) {
if (ele.checked) {
console.log(ele.value); // get the checked radio button's value
}
});
event.preventDefault();
}
Here is a working stackblitz url

if checkbox toggle checked then make a input field required in the toggle div

I use a script to toggle some div´s with javascript. I want to make some input fields "required" in the toggle div if the checkbox is checked to show the toggle div.
Can someone figure it out ? that is work?
function show(id) {
if(document.getElementById) {
var mydiv = document.getElementById(id);
mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
}
}
var $myCheckbox = $('#neu_ma'),
$required = $('.required');
$myCheckbox.on('click', function() {
this.checked ? $required.prop('required', true) : $required.prop('required', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="berechtigungsantrag">
<fieldset>
<legend><input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');"> Neuer Mitarbeiter </legend>
<div style="display: none" id="neuer_mitarbeiter">
<label for="eintritt_datum">Eintrittsdatum:</label>
<div><input type="date" name="eintritt_datum" id="eintritt_datum" class="required" /></div>
<label for="befristung_datum">Befristungsdatum:</label>
<div><input type="date" name="befristung_datum" id="befristung_datum"/></div>
</div>
</fieldset><!-- End of fieldset -->
<input class="btn" type="submit" value="Speichern" name=save />
</form>

Answer:
You're trying to listen an element id that does not exist(neu_ma) - you haven't given your checkbox an id.
<input type="checkbox" name="neu_ma" onclick="javascript:show('neuer_mitarbeiter');">
So just give it an ID:
<input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');">
This is just an example how you could do it:
Add some specific class to inputs that need to be affected by the state of your checkbox.
I made an example HTML:
<form>
<input type="checkbox" id="myCheckbox" />
<input type="text" class="required" />
<input type="text" />
<input type="text" class="required" />
<button type="submit">Submit</button>
</form>
As you can see, some of the inputs have a class called "required".
Next I check checkbox status(checked or not). And depending on the result make elements with "required" class required(or not) using jQuery's prop() method.
Working example:
var $myCheckbox = $('#myCheckbox'),
$required = $('.required');
$myCheckbox.on('click', function() {
this.checked ? $required.prop('required', true) : $required.prop('required', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="myCheckbox" />
<input type="text" class="required" />
<input type="text" />
<input type="text" class="required" />
<button type="submit">Submit</button>
</form>

Bootstrap 3 button group, trying to get the value of which button is clicked on

Learning Javascript here, just stuck for a brief moment.
I have a button group in html constructed with the following.
<div class="button-holder type_of_txt_btn_group" data-toggle="buttons">
<label class="btn btn-primary active" value="TE">
<input name="text" type="radio" id="txtbutton_id">Text
</label>
<label class="btn btn-primary" name="textbook" value="TK">
<input name="textbook" type="radio">Textbook
</label>
<label class="btn btn-primary" name="list" value="LI">
<input name="list" type="radio" value="list">List
</label>
</div>
The value attribute of each <label> is important for filtering purposes. So I want to make a function that, when you click one of the buttons, the function manages to return (or at least use) the value of the label a person clicked on. To check, I wanted to simply use a console.log expression. Ideally I would see either "TE" or "TK" or "LI" in the console.
$(".type_of_txt_btn_group label").on("click",function() {
var filteringType = ""
filteringType = $(this).val()
console.log(filteringType);
});
But so far this has been yielding what seem to be empty strings in my console and I'm not really sure why at this point. Here is the version I created on fiddle. https://jsfiddle.net/12rsob36/1/
Is this returning an empty string and if so why? Is it actually returning the values of the label elements like I would want it to, or is something wrong? What can I do to fix it?

You cannot access the value of a label with val() as it only supports form elements. You can use the data() function instead and set data-x attributes to the buttons.
Furthermore the official documentation suggests using <button> instead of <label>:
$(".type_of_txt_btn_group button").on("click",function() {
var filteringType = $(this).data('value')
console.log(filteringType);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="button-holder type_of_txt_btn_group btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-value="TE">Text</button>
<button type="button" class="btn btn-default" data-value="TK">Textbook</button>
<button type="button" class="btn btn-default" data-value="LI">List</button>
</div>

You can also access the values of the label using attr() method. It sets or returns the values of attributes of the selected element.
$(".type_of_txt_btn_group label").on("click", function() {
var filteringType = ""
var label = $(this).attr('name');
// filteringType=label.attr('name');
alert(label);
});
<div class="button-holder type_of_txt_btn_group" data-toggle="buttons">
<label class="btn btn-primary active" name="text">
<input name="text" type="radio" id="txtbutton_id" value="text">Text
</label>
<label class="btn btn-primary" name="textbook">
<input name="textbook" type="radio" value="textbook">Textbook
</label>
<label class="btn btn-primary" name="list">
<input name="list" type="radio" value="list">List
</label>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Please refer to the code above.Hope this is what you are looking for.

Why Checkbox is not unchecking in jquery

I need to uncheck a checkbox. It is doing everything like alert or removing div, but not unchecking the checkbox. I have used both attr and prop methods. The checkbox id is ok. Even it doesn't show any error in firebug console.
$('html').on('click', '#inScopeDiv .remButton', function () {
var currId = $(this).attr('id');
var chkBoxId = "#chk"+currId;
alert(currId);
alert('#chk'+currId);
$(chkBoxId).prop("checked", false);
$(chkBoxId).attr("checked", false);
$('#div'+ currId).remove();
$('#inScopeActionDiv' + currId).remove();
});
HTML provided ::
<c:forEach items="${data.inScope}" var="inScopeValues">
<div class="col-md-12" style="background-color: snow;">
<input class="inScope" type="checkbox" id="chk${inScopeValues.key}" name="chk + ${inScopeValues.key}" value="${inScopeValues.value}">
${inScopeValues.value}
</div>
</c:forEach>
Button & Checkbox is below ::>
<input class="inScope" type="checkbox" id="chkisc_2" name="chkisc_2" value="In Scope 2">
<button id="chkisc_1" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>

The button you show in the updated question has id="chkisc_1", then in your function you take that and add #chk to the beginning of it which would mean you're looking for an element with the selector "#chkchkisc_1". Meanwhile, apparently the checkbox has id="chkisc_2", although it does seem to be created in a loop so perhaps there is also a _1 (though that would mean you have more than one element with the same id, which is invalid html).
Change the button to have id="isc_1", then when your JS adds #chk it will be looking for #chkisc_1:
$('html').on('click', '#inScopeDiv .remButton', function () {
var currId = $(this).attr('id');
var chkBoxId = "#chk"+currId;
$(chkBoxId).prop("checked", false);
$('#div'+ currId).remove();
$('#inScopeActionDiv' + currId).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="inScopeDiv">
<input class="inScope" type="checkbox" id="chkisc_1" name="chkisc_1" value="In Scope 1" checked>
<button id="isc_1" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>
<input class="inScope" type="checkbox" id="chkisc_2" name="chkisc_2" value="In Scope 2" checked>
<button id="isc_2" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>
</div>

You should use prop() and removeAttr() to achieve this.. Hope it helps!
var cb = $("#checkbox")
$('#button1').click(function() {
cb.prop("checked", true)
})
$('#button2').click(function() {
cb.removeAttr('checked')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox" />This is a checkbox
<br />
<br />
<button id="button1">Check checkbox</button>
<br />
<br />
<button id="button2">Uncheck checkbox</button>

let checkbox = document.querySelector("input");
checkbox.addEventListener("click",function(){
console.log("Sorry ( ͡° ͜ʖ ͡°)");
this.checked = false;
});
<input type="checkbox" />

Stop reflecting model of each other if same controller used twice in a page

I have used mvc partial control in my page twice for search functionality.
It has it own controller to search, so my page has two controller with same name.
<div ng-app="app" ng-controller="MainController" ng-init="SetSearchParam()">
<div id="search1">
#Html.Partial("_SearchPartial") // say it search1
// some other code to show search results
// ....
// ..
</div>
<div id="search2">
#Html.Partial("_SearchPartial") // say it search2
// some other code to show search results
// ....
// ..
</div>
</div>
This is _SearchPartial:
<form name="SearchCommon">
<div ng-model="search" ng-controller="SearchPartialController">
<div>
<input type="text" value="" placeholder="Stock" ng-model="search.Stock" />
</div>
<div>
<input type="text" value="" placeholder="Make" ng-model="search.Make" />
</div>
<div>
<input type="text" value="" placeholder="Year" ng-model="search.Year" />
</div>
<div>
<input type="submit" value="SEARCH" ng-click="searchdata(search)" />
</div>
</div>
</form>
Now on init of MainController , i set the search model value in SetSearchParam() method like below:
$scope.SetSearchParam = function(){
var s = {};
s.Make = "Test";
s.Year = "2012";
s.Stock = "5"
$scope.search = s;
};
As search model is used in SearchPartialController, and page has two search control, value of s will be set in both partial controller. Also when i change params in search1, it will reflect search2.
I want that those search params only set for search1, not for search2.
When i change search1 params , it should not reflect the search2 or vice versa.
Is there any way to achieve it?

I thing you should initialize your filter(search) before your function.
Controller:
$scope.search1 = { Make : "Test", Year: "2012", Stock : "5" };
$scope.searchdata = function(search){console.log(search);};
Your view:
<body ng-controller="SearchPartialController">
<form ng-submit="searchdata(search1)">
<input type="text" placeholder="Stock" ng-model="search1.Stock" />
<input type="text" placeholder="Make" ng-model="search1.Make" />
<input type="text" placeholder="Year" ng-model="search1.Year" />
<button type="submit" class="btn btn-sm btn-primary">
Save
</button>
</form >
</body>