I am trying to disable the submit button if the username textbox field is empty.
$("#txtUserName").bind("input propertychange change keyup paste", setButtonState);
var setButtonState = function () {
if ($("#txtUserName").val().trim() == "") {
$("#login").attr("disabled", true);
}
else {
$("#login").removeAttr("disabled");
}
}
The above code is working fine in all scenarios except that,when the user selects username which is saved earlier(autocomplete).
I cannot set the autocomplete off option for the textbox.
How can I catch the event when user selects text in autocomplete usernames?
Just bind your input field to the additional event select, which is fired when a user selects something from his autocompletion.
This would be your code then. I just added select and rearranged your code a little bit. Also I run setButtonState() once at the domready to be sure it's disabled.
var setButtonState = function () {
if ($("#txtUserName").val().trim() == "") {
$("#login").attr("disabled", true);
}
else {
$("#login").removeAttr("disabled");
}
}
$("#txtUserName").bind("input propertychange change keyup paste select", setButtonState);
setButtonState();
I have also updated the jsfiddle to demonstrate it.
Related
I have a select and i'm after displaying an error message as soon as the user expands the select and closes it without making a selection but i cant figure how to do this.
I have it validating on.change if the val matches the default as shown below
Working JQuery When An Option Is Selected
$('#orderPosition').change(
function () {
if ($('#orderPosition').val() == 'orderPositionDefault') {
$('#orderErrorMessage').show();
$('#orderPosition').focus();
$('#orderPosition').css("background-color", "lightcoral");
} else {
$('#orderErrorMessage').hide();
$('#orderPosition').css("background-color", "transparent");
}
}
);
I have tried the following
$('#orderPosition').on('click', function () {
// var isDirty = !this.options[this.selectedIndex].defaultSelected;
var changed = $(this).val() != $(this).data('orderPositionDefault');
alert(changed ? 'changed' : 'not changed');
if (changed) {
$('#orderErrorMessage').show();
} else {
$('#orderErrorMessage').hide();
}
});
But the issue with the above is as soon as i click in the select the error message is displayed, i need it to be displayed of the user clicks in it and closes it straight away without making a selection.
Use the blur event for executing code when focus leaves on an input field.
$('select').on('change', function() {
//change things here
}).on('blur', function() {
//when select is no longer in focus here
});
Documentation: https://www.w3schools.com/tags/ev_onblur.asp
I have two controls in my page i.e. sap.m.Input and sap.m.CheckBox. There is a change event attached to input field which gives an error bar if input text is not matched with the regex. This change event is triggered on clicking out of focus of the input field. Clicking on checkbox will hide this input and show a third control. Now if i enter something in input field which will not match regex and click on checkbox, It is triggering changeEvent of Input and not even selecting the checkbox. I tried many things like checking in change event whether checkbox is ticked or not, attached a click event on checkbox but no solution.
Please help me so that i will be able to determine the click on checkbox if the current focus is on input field
Here is an example at jsbin. Here error will be thrown if input text contains # and change event is triggered.
var textInput = new sap.m.Text({text:"Area:"})
var inputField =new sap.m.Input("inptId",{
change:function(oEvent){
sap.ui.getCore().byId("barId").setVisible(oEvent.getParameters().value.includes("#"));
}
});
var select = new sap.m.Select("select",
{visible:false,
items:[new sap.ui.core.Item({text:"India"}),
new sap.ui.core.Item({text:"US"}),
new sap.ui.core.Item({text:"UK"})
]
})
var hBox = new sap.m.HBox({items:[textInput,inputField,select]})
var bar = new sap.m.Bar("barId",{
visible:false,
contentMiddle:new sap.m.Text({text:"Error"})
});
var chkBox = new sap.m.CheckBox("chkBxId",{
text:"Select from dropdown",
select:function(oEvent){
var selected = oEvent.getParameters().selected;
sap.ui.getCore().byId("inptId").setVisible(!selected);
sap.ui.getCore().byId("select").setVisible(selected);
sap.ui.getCore().byId("barId").setVisible(false);
}
});
var vBox = new sap.m.VBox({
items:[bar,hBox,chkBox]
});
In this example it is happening sometimes not always but in my project its happening always as there are lot of validations are happening in change event.
#Ashish for focus out try following code.
this.getView().byId("input").addEventDelegate({
onfocusout: function() {
console.log("focus lost !!");
}
}
and for enter key press use following code
.addEventDelegate({
onkeypress: function(e) {
if (e.which === 13) {
do your stuff;
}
}
})
once focus is out it will trigger function provide in onfocusout and while on focus if enter key is pressed it will trigger function provide in onkeypress event.
Also you can merge this in one.
addEventDelegate({
onkeypress: function(e) {
console.log("Enter pressed fouse out", e.which);
},
onfocusout: function() {
do your stuff!
}
})
The problem is that code write for checkbox click event.
so if the user first click on checkbox then edit the field validator is not work.
i don't want write similar code for submit click event because i want disable submit button when the form filed information not valid
here is a jquery:
$(".jbcheckboxSignUp").click(function () {
$(".jbcheckboxSignUp").toggleClass("select");
var $checkbox = $("#jbCheckBoxSignUp");
$checkbox.attr('checked', !$checkbox.attr('checked'));
if ($("button.SignUpButton").attr('disabled') && $('#SignUpForm').validator() && $("#signUpEmail").val()!="" ) {
$("button.SignUpButton").removeAttr('disabled');
} else {
$("button.SignUpButton").attr('disabled','disabled');
}
});
I have a button and a JQuery autocomplete. I want to make it so that it works like this:
if(input=='') {
button.text = "hello";
}
else {
button.text = "world";
}
I dont know how to incorporate this in my script so that the button changes in real time depending on the state of the autocomplete input.
Any thoughts would be great. Thanks
You can just bind an event handler to the text field's keyup event like this:
$('#inputWrapper').on('keyup', '#tags', function() {
if($(this).val() == '') {
$('button.addButton').text('Hello');
} else {
$('button.addButton').text('World');
}
});
Here's an updated fiddle.
I use a jQuery function to show certain hidden text fields once you select something from a select box.
This works fine for select boxes but I can't get it to work for a checkbox.
Here is the stripped code I tried (in a nutshell) but it's not working: http://jsbin.com/uwane3/2/
Thanks for your help, I rarely use JS so my knowledge is small.
I have found 2 errors in your code:
your Checkbox has no value so you cant get more than an empty result form ".val()"
you have not bind a eventhandler to the checkbox.
http://jsbin.com/uwane3/3
$('#cf3_field_9').live('click', function(e){
if (e.target == $('#cf3_field_9')[0] && e.target.checked) {
alert('The following line could only work if the checkbox have a value.');
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
You have no events registered to your checkbox.
Register a click, or change handler like this:
$('#cf3_field_9').click(function(){
if ($(this).attr("checked")) {
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
http://api.jquery.com/category/events/