Develop Reference

First on-click on checkbox displays modal popup window. How can i make on-second-click unchecks the checkbox?

I am doing a popup window using Bootstrap modal that is triggered by the click of a checkbox in the main page. The popup window contains several textboxes for searching from the database based on user's input. Then after the input and the click of a search button, a table will display the data retrieved on the same popup window. Then, after the user chooses a row from the table, the chosen data will be displayed in their respective textboxes in the main page and the checkbox will be checked.
My plan is to uncheck the checkbox on a second click (thinking if the user suddenly decided to cancel their decision - checking the checkbox). I tried but it didn't uncheck the checkbox. Instead, the popup window comes out at every click of the checkbox and the checkbox won't uncheck anymore.
$('#inputNew').on('hidden.bs.modal', function (e) {
document.getElementById("inputNewCheckbox").checked = true;
document.getElementById("inputMother").style.display = 'block';
document.getElementById("inputMotherlabel").style.display = 'block';
var value = $('#myPopupInput1').val();
$('#inputMother').val(value);
$('#inputNew').modal('hide');
});
$('#inputNew').on('click', '#SearchMother', function () {
var value = $('#myPopupInput1').val();
$('#inputMother').val(value);
$('#inputNew').modal('hide');
});
if ($checkbox.data('waschecked') == true && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
$('#inputNewCheckbox').prop('checked', false);
}));
}
This is the checkbox input in the view page:
<input type="checkbox" name="inputNew" value="inputNew" id="inputNewCheckbox" data-toggle="modal" data-target="#inputNew" data-waschecked="false"> New
For the checkbox unchecking part, i also tried
if ($('#inputNewCheckbox').prop('checked', true) && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
document.getElementById("inputNewCheckbox").checked = false;
}));
}
But when i run, the checkbox is checked by default and unchecking doesn't work. Plus the modal popup window appears.
I also tried
if (document.getElementById("inputNewCheckbox").checked = true && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
document.getElementById("inputNewCheckbox").checked = false;
}));
}
Also same output as above code..can anyone help me out please? How can i fix this?

You're probably better off listening for a change event on the checkbox, and only showing your modal if the checkbox is checked:
$('#inputNewCheckbox').on('change', function(e){
var _this = $(this);
if(_this.is(':checked')){
/* show your modal */
}
});
See change - Event reference and the :checked pseudo-class on MDN.

I created a form which will be displayed inside a table. When the information is already inside the table it should allow me to edit it

$('#dependents-info').on('click', '.btn-edit-dependent', function () {
var currentTD = $(this).closest("tr");
$('#modal2').modal({ show: true });
});
This is the code for edit button. I can't get the previous value of the modal where I created it.

Kendo UI grid filtering via DropDownList instead of MultiSelect

The following snippet uses a MultiSelect field to filter through an array of items. Filtering only occurs when items have been selected in the MultiSelect and the 'Filter' button has been clicked.
http://jsbin.com/iVIQoKiV/1/edit
How can it be set up using a DropDownList instead? Also, once an item has been selected in the DropDownList, how can the grid be filtered instantly without the need to click a button?
Edit:
Here's a new JSBin. Managed to implement a DropDownList. I've used the following change event but now filtering doesn't work:
change: function() {
var value = dropdown.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({
field: "Territories",
operator: function (itemValue) {
var matchingItem = itemValue.find(function (item) {
return $.inArray(item.TerritoryID, value) >= 0;
});
return matchingItem !== null;
}
});
}

Hello just the same scenario is covered in the Toolbar Grid online demo here. It filters instantly beucase it uses the change event of the DropDownList to invoke the filter method immediately.

Javascript validation on paging in kendo ui grid

The following code worked as expected, however on the paging click, it still execute and display message "Please select a record first, then press this button". Is there anyway to prevent this unless the export button click. Thank you
$(document).ready(function () {
$("#Product").on("click",function(){
var $exportLink = $('#export');
var href = $exportLink.attr('href');
var grid = $('#Product').data('kendoGrid'); //get a reference to the grid data
var record = grid.dataItem(grid.select()); //get a reference to the currently selected row
if(record !=null)
{
href = href.replace(/refId=([^&]*)/, 'refId='+record.ID);
$exportLink.attr('href', href);
}
else
{
alert("Please select a record first, then press this button")
return false;
}
});
});

Defining a click handler as $("#Product").on("click",function(){...}) you are actually defining it for any click on #Product not just on you Export button. You should define the on for the button and not for the grid

How to get Radio button values through submit form via Extjs BoxComponent?

I am having some difficulties in making a form submission via a boxcomponent. I am using the boxComponent as I have customized button image, and strangely the transparency only works with boxComponent.
Basically the idea is that when I click on my boxComponent button, it will do 2 things:
Submit 2 radio button values and 1 combobox value via HTTP POST to sendstock.php
On successful submission, it will then proceed to the next page
Here's what I have got for the boxComponent:
var bc_button = new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: 'next_button.gif'
},
style: 'cursor: pointer;',
listeners: {
enable: function(c) {
c.getEl().on('click', function() {
myformpanel.getForm().getEl().dom.action = 'sendstock.php';
myformpanel.getForm().getEl().dom.method = 'POST';
myformpanel.getForm().submit({
success:function() {
window.location.replace("toNextPage.php");
}
});
});
}
}
});
Here is my question, the results is as per below:
comboxbox = 3,
radiobtn1 = on
radiobtn2 = on
What I required is the value of the radiobtn1 and radiobtn2 to be submitted, should provide me with Available or NoStock, instead of on.
Also, is this the correct way to send users to the next page upon successful submission?
Thanks!

Make sure you set the inputValue config property on your radio buttons.
var rad = new Ext.form.Radio({ name: 'something', inputValue: 'purple'});
The inputValue value should then be sent on form post instead of 'on'.