Serializing data of li to send by post method ajax - javascript

I have this snippet
<li>
<a href="#demo_point_in_first_quad" class="btn btn-danger show" data-toggle="collapse">
Simple collapsible
</a>
<div id="demo_point_in_first_quad" class="collapse">
<label>tts</label> <input id="tts" type="text" value="10"><br>
<label>topic_level</label> <input id="topic_level" type="text" value="capable"><br>
<label>to_be_shown_individually</label> <input id="to_be_shown_individually" type="checkbox" checked="">
<br>
<label>check_for_geometry</label><input id="check_for_geometry" type="checkbox" checked="">
<br>
</div>
</li>
And similar to it second li
<a href="#demo_point_in_second_quad" class="btn btn-danger show" data-toggle="collapse">
Simple collapsible
</a>
<div id="demo_point_in_second_quad" class="collapse">
<label>tts</label> <input id="tts" type="text" value="10"><br>
<label>topic_level</label> <input id="topic_level" type="text" value="capable"><br>
<label>to_be_shown_individually</label> <input id="to_be_shown_individually" type="checkbox" checked="">
<br>
<label>check_for_geometry</label><input id="check_for_geometry" type="checkbox" checked="">
<br>
</div>
I want the values in the input field to be sent through ajax with there specific div id.

According to your edited question, i would suggest that you add some class to your input elements so that their search becomes easier.
<input class="myitem"></input>
Then, you can get a list of all inputs as:
var list = document.getElementsByClassName("myitem");
Finally you can iterate over the list to get the value of inputs
for(i=0;i<list.length;i++){
inputValue = list[i].value; // Value of input field
parent = list[i].parentElement; // Parent div has the id so extract from here
{/* Save both of them somewhere and use as required */}
}
$.post("url",
{
key: value
},
function(data){
alert("Data: " + data);
});
});

Related

How to perform if else operation in angular js depends on which radio button is selected?

I have two radio buttons in my project. Depending on which radio button is selected I need to send a command to back-end. I tried many ng-**** if else operations which didn't work for me. Kindly help me over the same
$scope.compareReference = function() {
if($scope.radoreslt is checked){
Factory.send("GetAddonData(CompareBkcXml,$scope.filetxt,File)");
}else{
Factory.send("GetAddonData(CompareBkcXml,$scope.filetxt,All)");
}
};
<div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false">
<div class="box-body">
<div class="input-group">
<div class="form-group">
<label>
<input type="radio" ng-model="radoreslt" name="r1" checked>Compare with File Specific
</label>
<label>
<input type="radio" ng-model="radoreslt" name="r1">Compare All
</label>
</div>
<input type="text" class="form-control" ng-model="filetxt">
<span class="input-group-addon"><input type="File" onchange="copyMe(this)" ></span>
</div>
<br/>
<button class="btn btn-primary btn-sm" ng-click="compareReference()">Compare</button>
</div>
</div>
You should always pass a value attribute to each radio button since the bind model is updated with that value only. Here is an example.
<input type="radio" ng-model="radoreslt" name="r1" value="compareWithSpecific">
<input type="radio" ng-model="radoreslt" name="r1" value="compareAll">
JS
$scope.compareReference = function() {
if ($scope.radoreslt == "compareWithSpecific") {
Factory.send("GetAddonData(CompareBkcXml,$scope.filetxt,File)");
} else {
Factory.send("GetAddonData(CompareBkcXml,$scope.filetxt,All)");
}
};

Jquery - Get value of checkbox inside li on span click

There is list inside ul li like below:
<ul class="AllLayer">
<li>
<fieldset id="layer0">
<label class="checkbox" for="visible0">
<input id="visible0" class="visible" type="checkbox" /> OSM
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
<li>
<fieldset id="layer1">
<label class="checkbox" for="visible1">
<input id="visible1" class="visible" type="checkbox" value="osm2" /> osm2
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
</ul>
When user click on span I must get value of checkbox before this span.
I wrote below code but it return undefined.
$("span.edit").on('click', function () {
var value= (this).parent().siblings("input[type='checkbox']").attr("value");
alert(value);
});
Could you help me please?
You need to use find() method to get the checkbox inside its parent.
Additionally, you can use :checkbox selector to get checkbox element which would be better than the attribute equals selector and the value can be access using val() method.
$("span.edit").on('click', function() {
var value = $(this).parent().find(":checkbox").val();
// or $(this).sblings().find(":checkbox").val()
// or $(this).prev().find(":checkbox").val()
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="AllLayer">
<li>
<fieldset id="layer0">
<label class="checkbox" for="visible0">
<input id="visible0" class="visible" type="checkbox" /> OSM
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
<li>
<fieldset id="layer1">
<label class="checkbox" for="visible1">
<input id="visible1" class="visible" type="checkbox" value="osm2" /> osm2
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
</ul>

How to get radio button checked value

I am trying to get the checked values of a radio group in meteor js. So far i have come up with this.
Js
Template.QuizController.events({
'submit .quiz-ans'(event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
console.log(event);
},
});
Html
<template name="QuizQuestion">
<div class="questions">
<h5 class="white-text">{{question}}</h5>
<form action="#" class="quiz-ans">
<ul class="answer-list">
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q1" />
<label for="{{this.order}}q1">{{this.q1.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q2" />
<label for="{{this.order}}q2">{{this.q2.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q3" />
<label for="{{this.order}}q3">{{this.q3.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q4" />
<label for="{{this.order}}q4">{{this.q4.value}}</label>
</li>
</ul>
<div class="test-controlls">
<button class="btn waves-effect waves-light right" type="submit" name="action">Next
<i class="material-icons right">send</i>
</button>
<span class="quiz-count right">1/10</span>
</div>
</form>
</div>
</template>
I was looking inside the target data but still can find the checked value. this is probably very obvious but I cant figure it out.So help wound be great.
Thanks
Your event will contain your form element as event.target. That will contain all your inputs so you can query them, e.g. using jQuery.
For example:
const checked = $(event.target).find("input[name='group1']:checked");
If you wanted to get the value attached to that (like "q1") you could then do:
checked[0].id;
or
checked[0].labels[0].innerHTML;
you can get radio button checked value by
const val= $('input[name=group1]:checked').val();

How to select and deselect multiple check box with a button click in javascript

In my project, i have multiple check box (total 27).I am trying to select all the check box with a single button click and i am able to do it.But i want to deselect the same check box with the same button click.So the button should act like a selector and a de-selector.I can not use a check box instead of the button.
My html code is:
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
In js:
$(self.element).on('click', '.selectAllcountry', function(e) {
debugger;
$('.chkCountry').trigger('click')
e.stopPropagation();
});
Using trigger will always toggle the state, so if some elements are checked and some aren't then it won't work fine.
Instead you can try something like
$(document).on('click', '.selectAllcountry', function(e) {
var $checks = $('.chkCountry');
$checks.prop('checked', !$checks.is(':checked'))
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
Try this
$('.selectAllcountry').on('click', function(){
if ($('.selectAllcountry').is(':checked')) {
$('.chkCountry').find(':checkbox').prop('checked', true);
} else {
$('.chkCountry').find(':checkbox').prop('checked', false);
}
});
try this....
$(document).on('click', 'input.selectAllcountry', function(e) {
if ($('input.selectAllcountry').is(':checked'))
{
$('.chkCountry').prop('checked',true);
}
else
$('.chkCountry').prop('checked',false);
});
var chkStatus = true;
$('.selectAllcountry').click(function() {
$('.countryAll').find(':checkbox').prop('checked', chkStatus);
chkStatus = !chkStatus;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
<br>
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
</div>
as you have done the portion of selection, now focus on Deselecting.
to remove all checkbox inputs at once
$('input:checkbox').removeAttr('checked');
or you can add class as identifier and then remove checked element on the basis of class.
for exa.
$('.chkCountry').removeAttr('checked');
I think you have made one mistake in your code you have used class attribute twise in html tag.I think that's why it take first class attribute and other are ignored.
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
please combine all class in single class attribute.
I think it will be helpful.

Checked state for buttons Bootstrap

I want to have a checked state for group chexboxes in Bootstrap 3.0.2. docs
html:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="123" data-toggle="button"> <span class="glyphicon glyphicon-star"></span> 123
</label>
<label class="btn btn-default">
<input type="checkbox" name="456"> <span class="glyphicon glyphicon-star-empty"></span> 456
</label>
</div>
But data-toggle="button" doesnt works. jsfiddle
How to fix it? Thanks.
To actually check the input, you will need to add the checked property. This will not actually make it appear checked, but is important if you are using this in a form and actually want the input to be checked by default.
<input type="checkbox" name="123" data-toggle="button" checked>
To make it look checked (or pressed), add class .active to the .btn label wrapping it.
<label class="btn btn-default active">
http://jsfiddle.net/ZktYG/2/
Not sure why data-toggle="buttons" isn't working. Could be related to this: https://github.com/twbs/bootstrap/issues/8816
For now, you can achieve the same effect through JS by doing something like:
$('.btn-group').on('input', 'change', function(){
var checkbox = $(this);
var label = checkbox.parent('label');
if (checkbox.is(':checked')) {
label.addClass('active');
}
else {
label.removeClass('active');
}
});
It's been a couple of years; however, I wanted to address the actual problem above of why the data-toggle="button" wasn't working.
The answer was to remove the data-toggle="button" on the <input>'s.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="123"> 123
</label>
<label class="btn btn-default">
<input type="checkbox" name="456"> 456
</label>
</div>
I solved this by making a custom attribute that housed whether it was active or not, then setting that value within JQuery's click event.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active check_button" id="check1">
<input type="checkbox" autocomplete="off" checked data-checked=true> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary check_button" id="check2">
<input type="checkbox" autocomplete="off" data-checked=false> Checkbox 2
</label>
<label class="btn btn-primary check_button" id="check3">
<input type="checkbox" autocomplete="off" data-checked=false> Checkbox 3
</label>
</div>
You can see a working example of this within the fiddle,
https://jsfiddle.net/jeffbeagley/DTcHh/34024/

Categories