How to disable a submit button with vanilla javaScript? - javascript

I don't want the submit button to be enabled if the default values of the drop-downs are present.
This is the portion of my code which relates to my problem:
function checkSelect(select) {
if (select.value == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
(function() {
if (checkSelect(starting)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
if (checkSelect(destination)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
})();
And this is all of my code:
(function() {
var starting = document.getElementById('starting'),
destination = document.getElementById('destination'),
submit = document.getElementById('submit'),
airportNames = Object.keys(IntentMedia.Airports.airport_distances()),
startingEventVal,
destinationEventVal;
function appendToUL(ul, element) {
var optionEL = document.createElement('option');
optionEL.text = element;
optionEL.value = element;
return ul.appendChild(optionEL);
}
function returnAirPort(airport) {
return airport;
}
function checkSelect(select) {
if (select.value == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
airportNames.forEach(function(element) {
appendToUL(starting, element);
appendToUL(destination, element);
});
(function() {
if (checkSelect(starting)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
if (checkSelect(destination)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
})();
submit.addEventListener('click', function(e) {
e.preventDefault();
var distance = IntentMedia.Distances.distance_between_airports(startingEventVal, destinationEventVal);
console.log('distance', distance);
document.getElementById('feedback').innerHTML = distance;
});
})();
Any help would be appreciated!

Fix this function:
//This is wrong because select.value refers to the value property of the select
//and you are comparing that to the selected option's text
function checkSelect(select) {
if (select.value == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
Change it to this:
//Compare the selected option's text to see if it equals the default option text
function checkSelect(select) {
if (select.options[select.selectedIndex].text == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}

in the click event, try checking for the values of the inputs in an if statement and doing:
return;
to exit the function if they are the default values

Related

alert if no check box is selected and button disabled if all checkbox are disabled in a grid on page load by Jquery

how to make a alert if no check box is selected and button disabled if all the checkbox are disabled in a grid on page load by jQuery
tried
$( document ).ready(function() {
$('input[type=checkbox]').change(function () {
disableCheckbox();
});
disableCheckbox = function () {
var count = $('input[type=checkbox]:checked').length;
$('btnCancelItem').prop('disabled', count == 0);
};
disableCheckbox();
});
<asp:LinkButton CssClass="btn btn-primary" ID="btnCancelItem" runat="server" CausesValidation="False"OnClientClick="return Confirmationbox();"> Cancel Item</asp:LinkButton>
<asp:HiddenField id="hdnval" value=0 runat="server"/>
You are missing # for the button to get disabled
$( document ).ready(function() {
$('input[type=checkbox]').change(function () {
disableCheckbox();
});
disableCheckbox = function () {
var count = $('input[type=checkbox]:checked').length;
if (count == 0) { alert("nothing selected") }
$('#btnCancelItem').prop('disabled', count == 0);
};
disableCheckbox();
});
disableCheckbox = function () {
//checked check-boxes length
checkedCount = $('#CP_Main_gvPOItems input[type=checkbox]:checked').length;
//check-boxes length
checkboxCount = $('#CP_Main_gvPOItems input[type=checkbox]').length;
//if no check-box is selected then alert
// if (checkedCount == 0) {
// alert('No check-box is selected');
// }
//check for all disabled check-boxes
//var disableCheckBox = 0;
$('#CP_Main_gvPOItems input[type=checkbox]').each(function () {
if ($(this).is(':disabled')) {
disableCheckBox++;
}
});
//if all check-boxes are disabled then disable button
if (checkboxCount == disableCheckBox) {
$('#CP_Main_btnCancelItem').attr("disabled", "disabled"); //# is missing
}
};
disableCheckbox();
$("#CP_Main_btnCancelItem").button().click(function () {
var checkedCount = $('#CP_Main_gvPOItems input[type=checkbox]:checked').length;
var isDisabled = $(checkedCount).is(':disabled');
// alert(isDisabled);
var status = false;
if (checkedCount == 0 && isDisabled) {
alert('No check-box is selected');
status = false;
}
else if (!isDisabled && checkedCount > 0) {
alert('Are you sure you want to cancel selected Record(s)?');
status = true;
}
return status;
});

Stop saving when some fields and table data are empty

On this code, it does not allow to save if any of table cell is empty, however, I want it now to save even the last table cell is null.
How can i add here for last input of table row where type is not
hidden?
$('#myTable tr input[value != add]:text').filter(function () {});
see my FIDDLE
This is my javascript code :
$("#btnSave").click(function (event) {
var flag = false;
var emptyBoxes;
var $rows = $('#myTable tr:not(:hidden)');
$rows.each( function () {
emptyBoxes = $('#myTable tr input[value != add]:text').filter(function () {
return this.value == "";
});
if (emptyBoxes.length != 0) {
flag = true;
}
});
if (flag) {
alert("this cannot be empty");
emptyBoxes.eq(0).focus();
} else
alert("done");
});
Try the following code:
var fields = $('input[type=text]'); /* All fields */
/* This function will find empty fields */
var findEmptyFields = function() {
var n = fields.length - 1;
/* Go throw all inputs with type=text and if someone is empty return index of this element */
for (var i = 0; i < n; i++) {
if (fields.eq(i).val() === '') {
return i;
}
};
/* Else return false that means that we didn't find any empty fields*/
return false;
}
$("#btnSave").on('click', function() {
var empty = findEmptyFields();
if (empty === false) {
alert('Done');
}
else {
alert('Some field is empty');
fields.eq(empty).focus();
}
});

How do unselect after the target has changed IE?

I am working with a dynamic element list of checkboxes and I am at a lose as to how I can go about deselecting the elements after I've processed the request: http://jsfiddle.net/Arandolph0/k7uLg/15/
document.attachEvent('onclick', function (e) {
var myBtn = document.getElementById('mybutton')
var target = e.srcElement;
if (target.name == "mycheckbox1" || target.name == "mycheckbox2") {
if(target.checked){
myBtn.disabled = false;
// list.addRecord(target);
} else if(!list.hasItems()) {
myBtn.disabled = true;
target.checked = false;
}
if(list.hasItems()) {
myBtn.disabled = false;
}
}
});
function someFunction() {
alert("Some function");
}
Here's the Html:
<input type="button" id='mybutton' value="Click" disabled onclick="someFunction()"/>
<input type="checkbox" name='mycheckbox1' />
<input type="checkbox" name='mycheckbox2' />
So, in summary after the button has 'do something' how would I then deselect the checked checkboxes?
You could get all of the checkbox elements by type and then set them to false.
function unselect() {
var elements = document.getElementsByTagName('input');
for(var i = 0; i < elements.length; i++)
{
if(elements[i].type.toLowerCase() == 'checkbox')
elements[i].checked = false;
}
}
It isn't very sexy but it gets the job done.
you just need to use
$("input:checkbox").removeAttr("checked");
this will uncheck all the checkboxes. I have also attached working copy of your code.
$(document).click(function (event) {
var myBtn = document.getElementById('mybutton');
var target = event.target;
if (target.name == "mycheckbox1" || target.name == "mycheckbox2") {
if(target.checked){
myBtn.disabled = false;
// list.addRecord(target);
} else if(!list.hasItems()) {
myBtn.disabled = true;
target.checked = false;
}
$("input:checkbox").removeAttr("checked");
if(list.hasItems()) {
myBtn.disabled = false;
}
}
});
I hope this will be able to solve your problem.

Checkbox and input field value

I have a check box which will change the value of a textfield to 1 when checked and change it back to zero when unchecked, how can I do this? I want it in javascript.
<input type="checkbox" name="foo" onclick="document.getElementById('idtextfield').value = +this.checked;" />
You can do like this:
var chk = document.getElementById('checkbox_id');
var txt = document.getElementById('textbox_id');
chk.onclick = function(){
if (this.checked === true){
txt.value = '1';
}
else{
txt.value = '0';
}
};
window.onload = function() {
var checkBox = document.getElementById('idofcheck');
if (checkBox == null) {
return;
}
checkBox.onclick = function() {
var textField = document.getElementByd('ifoftextfield');
if (textField == null) {
return;
}
if (this.checked) {
textField.value = '1';
} else {
textField.value = '0';
}
};
};
if(document.getElementById("checkbox1").checked)
{
document.getElementById('textbox1').value=1;
}
else
{
document.getElementById('textbox1').value='';
}

Checkbox validation - at least one selected

I have number of checkboxes and another checkbox for "Select All"
I want to check if the user has selected at least one checkbox. Need modification in javascript
<script language="Javascript">
function doSubmit(){
function check_checkboxes()
{
checked=false;
var c = document.getElementsByTagName('INPUT');
for (var i = 1; i < c.length; i++)
{
if (c[i].type == 'checkbox')
{
if (c[i].checked) {
return true}
else {alert("Please identify what warehouses comply:"); }
}
} //if I place my struts action here..its not working?
}
document.holiDay.command.value= 'addingApp'; //My Struts action if something checked.
document.holiDay.submit();
}
var all=document.getElementById('holiDay');
In HTML IDs should be unique, so getElementById will only return 1 element. Perhaps you could try getElementsByTagName - http://msdn.microsoft.com/en-us/library/ms536439(VS.85).aspx ?
Something like...
function check_checkboxes()
{
var c = document.getElementsByTagName('input');
for (var i = 0; i < c.length; i++)
{
if (c[i].type == 'checkbox')
{
if (c[i].checked) {return true}
}
}
return false;
}
and change your Validate function to...
function Validate()
{
if(!check_checkboxes())
{
alert("Please identify what warehouses comply:");
return false;
}
return true;
}
Select at least one check box using jqQery. Try the following code.
$('input[type="checkbox"][name="class"]').on('change', function () {
var getArrVal = $('input[type="checkbox"][name="class"]:checked').map(function () {
return this.value;
}).toArray();
if (getArrVal.length) {
//execute the code
} else {
$(this).prop("checked", true);
alert("Select at least one column");
return false;
}
;
});
(function() {
for(x in $ = document.getElementsByTagName("input"))
with($[x])
return (type == "checkbox" ? checked == true : 0)
})

Categories