Variation dropdowns into radio buttons - javascript

I am trying to convert dropdown to radio buttons on the fly using jquery, here is the code
jQuery(document).ready(function($) {
$('select#pa_size option[value=' + $choice + ']').attr('selected', true).parent().trigger('change');
});
this code get me the radio button. But it cant work for add-to-cart option.
Please click add-to-cart link for see the direct page.

jQuery(document).ready(function($){
//Get Exising Select Options
$('select#pa_size').each(function(i, select){
var $select = $(select);
$select.find('option').each(function(j, option){
var $option = $(option);
// Create a radio:
var $radio = $('<input type="radio" />');
// Set name and value:
$radio.attr('name', $select.attr('name')).attr('value', $option.val());
// Set checked if the option was selected
if ($option.attr('selected')) $radio.attr('checked', 'checked');
// Insert radio before select box:
$select.before($radio);
// Insert a label:
$select.before(
$("<label />").attr('for', $select.attr('name')).text($option.text())
);
// Insert a <br />:
$select.before("<br/>");
});
$select.remove();
});
$('.single_variation_wrap').css('display','block');
});
// This is the latest code. same problem

Related

how to retrieve dynamically added checkbox selected value

I am adding checkbox dynamically to my html page. how can i retrieve the values when user makes selection.
var sources = source_names_list;
$.each(sources, function(index,value) {
// var checkbox1 = "<label for="+test+"<input type='checkbox' id=\"+test+\" value=\"+test+\" name=\"+test+\"></label>"
// var checkbox="<label for="+value+">"+value+"<input type='checkbox' id="+value+" value="+value+" name="+value+"></label></br>"
var checkbox1 = "<p><label><input type=\"checkbox\" id="+value+" class=\"filled-in\"/><span>" + value + "</span></label></p>"
$("#sources").append($(checkbox1));
});
I tried accessing them using their id and it didn't work.
You could get the values using the class name filled-in as a selector. You will also need to add a value to each generated checkbox.
// Sources
var source_name_list = ['news' , 'info', 'article', 'newyork,items'];
// Create all the checkboxes (adding a value to each one)
$.each(source_name_list, function(index,value) {
var checkbox = '<p><label><input type="checkbox" id="'+value+'" value="' + value + '" class="filled-in" /><span>' + value + '</span></label></p>';
$("#sources").append($(checkbox));
});
// "get selected" button
$('#get').click(function() {
// Create an array for the values
var values = [];
// Select all checkboxes by class name, and use the jQuery :checked special selector
$('.filled-in:checked').each(function() {
// Adds the value to the values array
values.push($(this).val());
});
// Log all values
console.log(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sources"></div>
<a id="get">Get selected</a>

How to get a count of checkboxes checked on pagination Jquery dataTables

Below is my code, I want to get the count of checked checkboxes of all pages in my DataTable. Please advice how to proceed
<td align="center"><input type="checkbox" align="center" id="all" class="groupCheckBox" name="emails[]" value=' . $user['id'] . '></td>
Below code I used for get the values of checked boxes in all pages on button click
$('#merge_button').click(function () {
var id = "";
var oTable = $("#userTable").dataTable();
$(".groupCheckBox:checked", oTable.fnGetNodes()).each(function () {
if (id != "") {
id = id + "," + $(this).val();
} else {
id = $(this).val();
}
document.getElementById("email").value = id;
});
});
but now I want to count the checkedboxes without button click function whenever user clicked on checkboxes and deduct count when unchecking boxes . pls advice
var table = $("#userTable").DataTable();
var countchecked = table
.rows()
.nodes()
.to$() // Convert to a jQuery object
.find('input[type="checkbox"].groupCheckBox:checked').length;
Uses the most recent API
"...please be aware that using deferRender will cause some nodes to be created only when they are required for display, so they might not be immediately available when this method is called." from https://datatables.net/reference/api/rows().nodes()
Quite easy.
$("td input[type='checkbox']:checked").length;

Remove selected items in the previous selections after cloning into a new dynamically generated dropdownlist

I have an asp.net dropdown list and an asp.net button control. each time on clicking the button, a new dropdownlist is supposed to get generated with all the values except for the one that are selected previously.
For example: If I selected 'a' from a list of values {a,b,c} and then clicked on the button, I am supposed to get a new dropdownlist with values {b,c}.
Although, I am able to clone the dropdownlist values, I have no idea how to filter the values by removing the selected ones.
Edit
Here is the scenario
i start off with only 1 drop down list (that has 5 options) => 1,2,3,4,5 -> first options is selected by default.
i select option 5 (in select list #2)
I hit clone -> new list (#3) is added with ONLY options 2,3,4
i select option 2 (in select list #3)
I hit clone -> new list (#4) is created with options 3,4
..and so on.
Here is my code:
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlCityName" runat="server" class="ddlClone" DataTextField="City" DataValueField="City" CssClass=""></asp:DropDownList>
<asp:Button ID="btnClone" runat="server" Text="Clone" />
</div>
<div id="container">
</div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnClone]").bind("click", function () {
var index = $("#container select").length + 1;
var ddl = $("[id$=ddlCityName]").clone();
ddl.attr("id", "ddlCityName_" + index);
ddl.attr("name", "ddlCityName_" + index);
$("#container").append(ddl);
$("#container").append("<br /><br />");
return false;
});
});
</script>
You can get the selected value and remove it from the new select after clone, like this:
$(ddl).find("option[value='"+selVal+"']").remove();
Here is a jsFiddle with running example: https://jsfiddle.net/ntvo173q/
I updated the jsFiddle to remove all previously selected items, just check out:
What I did was get all selected values and remove from new select:
var ddl = $('#sel').clone();
$('select').each(function() {
$(ddl).find("option[value='"+$(this).val()+"']").remove();
});
https://jsfiddle.net/ntvo173q/1/
Here is the solution:
<script type="text/javascript">
$('#btnClone').click(function () {
var original = $('select.ddlClone(0)');
var allSelects = $('select.ddlClone');
var clone = original.clone();
$('option', clone).filter(function (i) {
return allSelects.find('option:selected[value="' + $(this).val() + '"]').length;
}).remove();
$('#target').append(clone).append('<br /><br /><br />');
});

onclick checkbox append checkbox value to URL

I wanna implement this using jquery instead of inline but Its not working, inline works fine. The other reason I wanna use jquery is if user selects more than one checkbox, the url should be appended with whatever is already there + OR '2nd CheckBox Value' like this:
"http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Office OR Hospital"
The space infront and following OR is fine..
How can I achieve this? Can someone help me out?
Offices<input name="LocType" type="checkbox"
value="Office" onclick="window.location='http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Office'; return true;">  
Hospitals<input name="LocType" type="checkbox"
value="Hospital" onclick="window.location='http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Hospital'; return true;">  
Facilities<input name="LocType" type="checkbox"
value="Facility" onclick="window.location='http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Facility'; return true;">
Bind to the change event on the checkboxes. When clicked read the current checkbox value and then all other relative checkboxes. Append your base url with your custom query string and go crazy. :)
This isn't tested but hopefully it's a good starting point.
var baseUrl = 'http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=';
$(document).ready(function () {
// listen to change event (customize selector to your needs)
$('input[type=checkbox]').change(function (e) {
e.preventDefault();
if ($(this).is(':checked')) {
// read in value
var queryString = $(this).val();
// loop through siblings (customize selector to your needs)
var s = $(this).siblings();
$.each(s, function () {
// see if checked
if ($(this).is(':checked')) {
// append value
queryString += ' OR ' + $(this).val();
}
});
// jump to url
window.location = baseUrl + queryString;
}
});
});
You can try this.
HTML
<input name="LocType" type="checkbox" value="Office" />
<input name="LocType" type="checkbox" value="Hospital" />
<input name="LocType" type="checkbox" value="Facility" />
JS
Assuming you have a button or something on click of which you want to create a url with all the checked LocType checkbox values appended to the url seperated by OR
var url = "http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations";
$('button').click(function(){
//This will get the array containing values of checked LocType checkboxes
var checkedLocTypeValues = $('input[name=LocType]:checked').map(function(){
return this.value;
});
//Use Array.join() method to join the array elements by " OR "
url = url + "&k=" + checkedLocTypeValues.join(" OR ");
//Now you can use url variable which has all the checked LocType checkboxes value
}
jQuery map() reference - http://api.jquery.com/jQuery.map/

Insert checkbox selected value to textbox in asp.net?

I have 5 asp.net checkboxes in webform ...i want as the checkboxes checked and unchecked then its text will be added in textbox i.e if checkbox 1 and checkbox9 will be checked then in textbox the text will be 1,9 and if checkbox1 is unchecked then the textbox text will be 9
How to do this using javascript, vb.net or Jquery
I dont have any idea how to do it ...
CODE I FOUND :
<script type="text/javascript">
function Test(control, value) {
var str = '';
$('#<%=txtTest.ClientID %> :checked').each(function() {
str = str + ', ' $(this).val();
});
$('#<%=txtTest.ClientID %>').val(str);
</script>
ITS NOT WORKING ...
Something like this, you need to give the checkboxes a class of checkBoxClass. The following has NOT been tested!
$(function() {
$(".checkBoxClass").each("click", function() { // whenever a checkbox is clicked
var str = "";
/* get all checked checkboxes of this name - class can be used too,
but using name, you can have sets of checkboxes */
$("input[name=$(this).attr('name')] :checked").each(function() {
str += ", " + $(this).val(); // append the value
});
// add it to the textfield, if there is something to add
$("#<%=txtTest.ClientID %>").val(str?str.substring(2):"");
});
});

Categories