I'm trying to get the value of the dynamically generated radio button when this button is selected.
Here is my code snippet:
<div id="divContainer">
</div>
Jquery:
$("#divContainer").on("change", $('input[name="name1"]:checked'), function () {
var selectedVal=$('input[name="name1"]:checked').val();
console.log(selectedVal);
});
The value of the selectedVal is returning null here.
Resolution:
The default value was not properly assigned. I updated my code snippet which generates the radio button:
('#radiBtn').attr("value",val);
This resolved the issue.
Remove the $ wrapping from selector just use 'input[name="name1"]:checked't
for getting changed object use this
var div = $("#divContainer").on("change", 'input[name="name1"]:checked', function() {
var selectedVal = $(this).val();
console.log(selectedVal);
});
$('<input>', {
name: 'name1',
type: 'radio',
value: 1
}).appendTo(div);
$('<input>', {
name: 'name1',
type: 'radio',
value: 2
}).appendTo(div);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divContainer">
</div>
Related
I have a jquery autocomplete field in index.php page :
$html .= '<div class="ui-widget">
<label for="tags">Tags:</label>
<input id="tags" />
<div id="tagsname"></div>
</div>';
$html .= "<script>
jQuery.noConflict();
jQuery(function () {
var availableTags = [
'ActionScript',
'AppleScript',
'Asp',
'BASIC',
'C'
];
jQuery('#tags').autocomplete({
source: availableTags
});
});
jQuery(document).ready(function () {
jQuery('#tags').on('change', function () {
jQuery('#tagsname').html('You selected: ' + this.value);
}).change();
jQuery('#tags').on('autocompleteselect', function (e, ui) {
jQuery('#tagsname').html('You selected: ' + ui.item.value);
});
});</script>";
And I want to retrieve the value into my ajax call in ajax.js file:
jQuery.ajax({
type: "GET",
url: "setvalues.php",
data: {"event": event}
The call is made with setvalues.php :
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
$_SESSION['event'] = $_GET['event'];
Note: the ajax function is called onclick with a button.
So that was the context.
What I am trying to do is get the value from my jQuery input in my Ajax function.
What I've tried to do :
I've put this line :
event = jQuery('#tagsname').html(ui.item.value);
Into my ajax.js file just before the call to get the value I need but it doesn't work.
I get this error :
Uncaught ReferenceError : ui is not defined
I suppose there is another way to get the value of my input but I can't find how.
Note2 : You may notice I've omitted some lines, in my ajax.js file for example. This is for clarity.
Just use jQuery's val() function on an input element. I created a simplified example where a value of your input is displayed in the alert message. You can do the same in your Ajax call.
jQuery.noConflict();
jQuery(function () {
var availableTags = [
'ActionScript',
'AppleScript',
'Asp',
'BASIC',
'C'
];
jQuery('#tags').autocomplete({
source: availableTags
});
});
jQuery(document).ready(function () {
jQuery('#tags').on('change', function () {
jQuery('#tagsname').html('You selected: ' + this.value);
}).change();
jQuery('#tags').on('autocompleteselect', function (e, ui) {
jQuery('#tagsname').html('You selected: ' + ui.item.value);
});
});
// Click event handler of "Get value" button
jQuery("#getValue").click(function() {
// Select input element and take it's value using jQuery's val() function
var selValue = jQuery("#tags").val();
alert("Selected value: " + selValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="ui-widget">
<label for="tags">Tags:</label>
<input id="tags" />
<div id="tagsname"></div>
</div>
<button type="button" id="getValue">Get value</button>
to get a div value/text, you should try
let event = $('#tagsname').text();
to set value
$('element').text('some _value');
Update:
if you want to get input elements value, use jquery val() method
$('input_element').val();
in your case use,
$("#tags").val();
This code is for onclick to get dropdown and changes the text .
Everytime on change I want to post the value into database.
index.html
<div id='fullname'></div>
script.js
$('#fullname').click(function(){
var name = $(this).text();
$(this).html('');
$('<select>', { 'name': 'fname', 'id': 'txt_fullname'
})
.append($('<option>',
{'value':'Hardware_Problem','text':'Hardware_Problem'},'</option>'))
.append($('<option>', { 'value':'Software_Problem','text':'Software_Problem'},'</option>'))
.appendTo('#fullname');
$('#txt_fullname').focus();
});
$(document).on('blur','#txt_fullname', function(){
var name = $(this).val();
$('#fullname').text(name);
});
I am using jquery ajax to populate a html select.
The populating actually works but the problem is that for some reason the whole list is being added twice instead of just once.
Here is the code:
myfunction: function() {
$.ajax({
url: 'the-url-here',
method: 'GET',
success: function(result) {
$.each(result.cars, function(result, value) {
if (value.active === '1'){
$('#myselect').append($('<option>').text(value.name).attr('value', value.id));
}
});
}
});
}
How can I fix this so it's only populated once and not twice?
Instead of selecting the element in the loop, which causes performance issues when the list is big, select it outside the loop, then create your list of <options> and outside the loop, append to the <select>.
(function($){$(function(){
var carsDataFetchViaAjax = [
{id: 1, active: 1, name: 'Car1'},
{id: 2, active: 1, name: 'Car2'},
{id: 3, active: 0, name: 'Car3'}
]
var $select = $('#select'),
options = [];
carsDataFetchViaAjax.map(function(car, i){
if (car.active == 1){
options.push($('<option>').val(car.id).html(car.name))
}
})
$select.append(options);
})})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="select"></select>
myfunction is being called twice somewhere, and since an append does what it is supposed to do (appends to your list), it's working as intended :)
Check if the value is already added before trying to add it:
$.each(result.cars, function(result, value) {
if (value.active === '1' && $('#myselect option[value='+ value.id +']').length == 0) {
$('#myselect').append($('<option>').text(value.name).attr('value', value.id));
}
});
I am using a number of checkboxes to push their values to an array to be used as arguments for the filtering of a dataset.
The requirement is to:
Show child filters on selection of the parent category.
If parent is unchecked all its children should be unchecked (false) automatically (otherwise they will be hidden and still true)
Display active filters
remove active filter on click (also uncheck their corresponding checkbox programatically).
Clear all filters and uncheck all checkboxes.
My current code is below, however see attached fiddle.
$scope.IsChecked = false;
$scope.ActiveFilters = [];
$scope.clearFilters = function() {
$scope.ActiveFilters = [];
};
$scope.ModifyFilter = function (IsChecked, Filter) {
console.log(IsChecked);
if (IsChecked) {
$scope.ActiveFilters.push(Filter);
}
else {
var indexz = $scope.ActiveFilters.indexOf(Filter);
$scope.ActiveFilters.splice(indexz, 1);
}
};
A fiddle with a semi-working demonstration is here
-- EDIT --
Further explanation: When a checkbox is checked it pushed its value to the array. if I remove this from the array by clicking on its name in the 'Active Filters' section at the bottom of the fiddle then it does not uncheck the checkbox. Neither does clicking on 'Clear Filters'.
The problem is in your html bindings. so please post this code here.
You using for "IsChecked" variable. This is local scope variable created for each iteration of loop. You not change it from your script code.
Updated html:
<body ng-app="DemoApp" ng-controller="DashboardCtrl">
<div ng-repeat="group in Filters">
<input type="checkbox" value="{{group.title}}" ng-model="CheckboxParent" />
{{group.title}}
<div ng-show="CheckboxParent" class="animate-show" ng-repeat="filter in group.filters">
<input type="checkbox" class="filterChild" value="{{filter.name}}" ng-model="filter.checked" ng-change="ModifyFilter(filter.checked,filter)"/>
{{filter.name}}
</div>
</div>
<div>
<h4>Active Filters</h4>
<p class="clear-filters" ng-click="clearFilters()">Clear Filters</p>
<ul ng-repeat="activeFilter in ActiveFilters">
<li ng-model="activeFilter.checked" ng-click="removeFilter(ModifyFilter(activeFilter.checked,activeFilter))">{{activeFilter.name}}</li>
</ul>
</div>
</body>
Updated script:
var app = angular.module("DemoApp", [])
app.controller("DashboardCtrl", function($scope) {
$scope.clearFilters = function() {
angular.forEach($scope.Filters[0].filters, function(filter) {
filter.checked = false;
});
$scope.ActiveFilters = [];
};
$scope.IsChecked = false;
$scope.ActiveFilters = [];
$scope.ModifyFilter = function (IsChecked, Filter) {
console.log(IsChecked);
if (IsChecked) {
$scope.ActiveFilters.push(Filter);
}
else {
var indexz = $scope.ActiveFilters.indexOf(Filter);
$scope.ActiveFilters.splice(indexz, 1);
}
};
$scope.Filters =
[
{
"title": "Equipment",
"filters": [
{ name: "Rope", checked: false },
{ name: "Cables", checked: false },
{ name: "Dowel", checked: false },
{ name: "Ball", checked: false }
]
}
];
});
Look into my solution on js fiddle: JsFiddle
I want to create multiple DOM elements using javascript. The sequence is 'dropdown', '3 textboxes'. When I click on (+) button it all should be placed together. Will someone help me out this???
<script type="text/javascript">
function add_elements(new1)
{
var i=1;
var sel=document.createElement('new1');
var sel1=document.createElement('new1');
sel.innerHTML='<select><option value="">--SELECT SIZE--</option><option value="6">6</option><option value="8">8</option><option value="10">10</option><option value="12">12</option><option value="14">14</option><option value="16">16</option></select>';
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", 'text');
element.setAttribute("name", 'txtRate');
var foo = document.getElementById("el");
foo.appendChild(element);
}
</script>
Since you tagged the question to jquery,I'm posting this answer
$("#add").click(function () {
var select = $("<select/>");
select.append($("<option/>", {
text: "one",
value: "1"
}));
select.append($("<option/>", {
text: "two",
value: "2"
}));
$("#container").append(select);
$("#container").append($("<input/>", {
type: "text"
}));
$("#container").append($("<input/>", {
type: "text"
}));
$("#container").append($("<input/>", {
type: "text"
}));
});
html
<div id="container"></div>
<input id="add" type="button" value="addElements"/>
you can give any attributes to each element while appending
Demo