Develop Reference

Get the clicked radio button Id in the change event [duplicate]

This question already has answers here:
How to use radio on change event?
(11 answers)
Closed 3 years ago.
I have several groups of radio buttons with the same name.
I want to get the id of the clicked radio button in the change event. There are several answers related to this question but they all return the id of the checked one but what i want is clicked radio id.
Updated
Here is my code:
$('input[type=radio][name=SltOptionPane]').change(function () {
debugger;
//here i want to get the clicked id of the radio
var selectedValue = $("input[name=SltOptionPane]");
alert(selectedValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="26Panel">
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="27" id="27" autocomplete="off"><text> طبيعي</text>
</label>
</div>
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="29" id="29" autocomplete="off"><text> ضعيف</text>
</label>
</div>
</div>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="27Panel">
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="30" id="30" autocomplete="off"><text> طبيعي</text>
</label>
</div>
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="31" id="31" autocomplete="off"><text> ضعيف</text>
</label>
</div>
</div>
Please help ,Thanks in advance

You should use this to refer the current element.
Try $(this).attr('id');
$('input[type=radio][name=SltOptionPane]').change(function () {
debugger;
//here i want to get the clicked id of the radio
var selectedValue = $(this).attr('id');
alert(selectedValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="26Panel">
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="27" id="27" autocomplete="off"><text> طبيعي</text>
</label>
</div>
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="29" id="29" autocomplete="off"><text> ضعيف</text>
</label>
</div>
</div>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="27Panel">
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="30" id="30" autocomplete="off"><text> طبيعي</text>
</label>
</div>
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="31" id="31" autocomplete="off"><text> ضعيف</text>
</label>
</div>
</div>

You can do it with jquery on click input (on input you can also put class):
$(document).on('click', 'input', function(){
alert(this.id);
});
Here is working fiddle: https://jsfiddle.net/m7r5z9g1/

At first give all radio buttons same class like "MyRadio" then create the following event.
$('.MyRadio').off('click').on('click', function(){
alert(this.attr('id'));
});

You can also use the prop method in order to retrieve the id of the selected item.
Here below is snippet of the Onchange function :
$('input[type=radio][name=SltOptionPane]').change(function () {
debugger;
var currentValue = $(this).prop("id");
alert(currentValue);
});
Here is the link for the demonstration:
More Insights :
The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.
Reference :

iterating through a div to look for all element of each class is not working

Alright, I just started playing around with javascript so I need to iterate through a div that has many classes with same name but unique ids in order to retrieve the unique id and the innerHTML of the id.
This is the html
<div id="uploader">
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange">
<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon">
<span class="upl" id="upload">Upload document</span>
<input type="file" class="upload up" id="up" onchange="readURL(this);">
</div>
<!-- btn-orange -->
</div>
<!-- col-3 -->
<div class="col-sm-8">
<input type="text" class="form-control" name="" id="document_name" placeholder="Document Name">
</div>
<!--col-8-->
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
<!-- col-1 -->
</div>
<!--row-->
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8"><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
</div>
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload4">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8"><input type="text" class="form-control" id="Doc4note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
</div>
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload5">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8"><input type="text" class="form-control" id="Doc5note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
</div>
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload6">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8"><input type="text" class="form-control" id="Doc6note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
</div>
I want to get the id name and innerhtml of the class "form-control" for each class "row uplaod" so I tried this
$('.row uploadDoc').each(function(){
console.log(this)
var targetdiv = this.getElementsByClassName("form-control")[0];
console.log(targetdiv)
})
and this
$("uploadDoc").each(function(i) {
var targetdiv = getElementsByClassName("form-control")[0].innerHTML;
console.log(targetdiv)
});
but none of them works, nothing is displayed. How can I get the id and innerHTML of each class "form-control"?

If you are looking for an element that has multiple class names, you do not put a space between them in the jQuery selector. Adding the space will make it look for the second class name as a child of the first.
Try .row.uploadDoc in your selector.
$('.row.uploadDoc').each(function(){
console.log(this)
var targetdiv = this.getElementsByClassName("form-control")[0];
console.log(targetdiv)
})
Your second selector would also work, you were just missing the . $(".uploadDoc").... It just wouldn't require the uploadDoc element to also have the row class.
After you get that going you may run into another problem:
this.getElementsByClassName("form-control")[0].innerHTML;
That line will not use the scope of the element to find form-control classes. You can add that functionality to the jQuery selector though
$('.row.uploadDoc .form-control').each(function(){
console.log($(this)[0]); //each form-control element that is a child of a .row.uploadDoc element
});
This uses a space in the selector (our bug above), this time on purpose to find children.

Form validation is not working in MEAN Stack using angular js and node js

Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>

Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>

Clone is duplicating multiple times, when I just want one

When I click duplicate it duplicates the row fine, but when I click it again I get another 2, then 4 etc, how can I stop this from happening and just clone one div on each click...
Jquery:
<script>
$(".clonable-button").bind('click', function(e){
e.preventDefault();
var section = $(this).data('clone');
var parent = $('[data-id="' + section + '"]');
var sequence = 0;
if(!$(this).data('last')) {
sequence = $(parent).find('.cloneable').last().data('id');
} else {
sequence = $(this).data('last');
}
$(this).data('last', ++sequence);
$(parent).append(parent.html());
});
$('.clone-wrapper').on('click', '.clone-remove',function(){
var parent = $(this).parents('.cloneable');
$(parent).remove();
});
</script>
html:
<div class="clone-wrapper" data-id="skill">
<div class="row cloneable" data-id="0">
<div class="col-md-9">
<div class="form-group">
<label for="skill_name_0">Skills and Qualifications Titles </label>
<input id="skill_name_0" placeholder="ex : PHP, WordPress" name="skill[0][name]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="skill_percentage_0">Job Position </label>
<input id="skill_percentage_0" placeholder="ex : 90" name="skill[0][percentage]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-12 text-right clone-remove" data-last="">
<div class="btn btn-danger btn-sm" data-clone="skill">
<i class="fa fa-times"></i> Remove Skill </div>
</div>
</div>
</div>
<div class="white-space-20"></div>
<div class="row text-right">
<div class="col-md-12">
<div class="btn btn-default btn-sm clonable-button" id="skill">
<i class="fa fa-plus"></i> Add Skill </div>
</div>
</div>
I just want the following code duplicated once on each click
<div class="row cloneable" data-id="0">
<div class="col-md-9">
<div class="form-group">
<label for="skill_name_0">Skills and Qualifications Titles </label>
<input id="skill_name_0" placeholder="ex : PHP, WordPress" name="skill[0][name]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="skill_percentage_0">Job Position </label>
<input id="skill_percentage_0" placeholder="ex : 90" name="skill[0][percentage]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-12 text-right clone-remove" data-last="">
<div class="btn btn-danger btn-sm" data-clone="skill">
<i class="fa fa-times"></i> Remove Skill </div>
</div>
</div>

The problem is in this line:
var parent = $('[data-id="' + section + '"]');
Each time you append new block with the same data-id number of elements that match this selector increases. So to avoid this you have make the selector more specific. Like:
var parent = $('[data-id="' + section + '"]:last');
Also there is a jQuery method to clone the element. So change your line from:
$(parent).append(parent.html());
to:
parent.append(parent.clone());
That will fix the issue.

You are binding the click event multiple times somehow, You should either use a delegated event handler or use the off method like below.
$(".clonable-button").off('click').on('click', function(e){

JavaScript Remove upper Element

I want to remove the whole <div class="form-group"> when I click on the <span type="button">.
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-5">
<div class="input-group">
<input required="" placeholder="Voeg een highlight toe" class="form-control" name="highlight[]" type="text">
<div class="input-group-btn">
<span onclick="removeRow(this)" class="btn btn-default" type="button">
Verwijder
</span>
</div>
</div>
</div>
</div>
It must be look like this:
<script>
function removeRow(element){
element.parentNode.remove();
}
</script>

How about something like this
<div class="form-group" id="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-5">
<div class="input-group">
<input required="" placeholder="Voeg een highlight toe" class="form-control" name="highlight[]" type="text">
<div class="input-group-btn">
<span class="btn btn-default" id="clickme" type="button">
Verwijder
</span>
</div>
</div>
</div>
</div>
Then the js
var cm = document.getElementById('clickme');
cm.addEventListener('click',function(){
console.log('clicked');
var fg = document.getElementById('form-group');
fg.parentElement.removeChild(fg);
});
see fiddle
http://jsfiddle.net/X8Cwq/

Just traverse the tree up to that node and remove it.
function removeRow(element){
element.parentNode.parentNode.parentNode.parentNode.remove();
}
DEMO