I have a form with several text fields and I would like the add button to be enabled when the required fields are filled in. The button is disabled by default in the HTML. In Firebug it appears the blur function fires but the that the if statement isn't reached.
$(".cd-form :input").blur(function(){
var ok=true;
$("#signup-firstnmame,#signup-surname","#signup-Address1","#signup-City","#signup-Postcode","#signup-Email","#signup-Mobile").each(function(){
/* if ($(this).val()==="")*/
if ($('#signup-firstnmame').val() !== "" && $('#signup-surname').val() !== "" && $('#signup-Address1').val() !== "" && $('#signup-City').val() !== "" && $('#signup-Postcode').val() !== "" && $('#signup-Email').val() !== "" && $('#signup-Mobile').val() !== "")
$("#AddData").prop("disabled",false);
else
$("#AddData").prop("disabled",true);
});
});
The commas are supposed to be a part of the selector, not separate parameters.
$('#signup-firstname, #signup-surname, #signup-Address1, ...
Also, if you're checking all of the fields, as in your if statement, you don't need to do that once for each field, it'll suffice to do it once.
If you would consider adding a class to the relevant fields, your function would be much more readable, i.e:
$('#AddData').prop('disabled', $('.required-field[val=""]').length > 0);
To Start, I think it would be smart to add a unique class to the inputs that you care about. this way you can do something along the lines of:
$('.yourClass').on('input', function() {
var x = true;
$('.yourClass').each(function() {
this = $(this); //cast it to jQuery obj (ez ref)
if (this.val() == "")
x = false;
} );
} );
Basically, every time someone enters something into the fields, jQuery will iterate through your inputs checking the values and adding 1 to x. If x is equal to the number of elements you are checking then it will enable the button.
This is not the most elegant solution but how I got around the same issue you were having when I was rushed into finishing a project.
Modified my answer with what #JaredT mentioned about the boolean, far more elegant. I am sure this could be improved further though, hope this gets the ball rolling.
Related
I have a form with numeric fields, text fields and drop down lists. I have implemented functionality were if a field is changed from original value then button is enabled for submit. If field is changed back to it original value button should(is) disabled.
PROBLEM: Current issue at the moment is
- if I change two different fields, then button is enabled as expected. But then if I revert only one of these edited fields back to its original value, submit button is disabled. Expected behavior is "as long as there's a changed field that is valid, then button should remain enabled for submit".
Conditions for button state
for all fields - if original value is changed and is not empty - enable button
for numeric fields - if entered/changed value is a valid number - enable button
*so if any of these conditions are not met, then button should stay disabled
Current Code
Current implementation and why it was implemented this way
$("input[name='q_description'],[name='q_sellprice'],[name='profit'],[name='grossProfit'],[name='markUp']").change(function () {
var originalValue = ($(this)[0].defaultValue);
var currentValue = $(this).val();
var changed = false;
var button = $('#submit-data');
//numeric fields
var sellprice = parseFloat($('#q_sellprice').val());
var profit = parseFloat($('#profit').val()); var grossProfit = parseFloat($('#grossProfit').val());
var markUp = parseFloat($('#markUp').val());
//text fields
var description = document.getElementById("q_description").value;
//alert("Numeric values:" + getFieldValues );
//$('input, select').bind('keyup change blur', function () {
if (description == "" || isNaN(sellprice) || isNaN(profit) || isNaN(grossProfit) || isNaN(markUp))
{
/*change background color to red for invalid or empty field*/
$(this).css("background", "#fd6363");
document.getElementById("submit-data").disabled = true;
}
else if ((originalValue != currentValue) ) {
/*change background color to yellow if value changed*/
$(this).css("background", "#FFE075");
document.getElementById("submit-data").disabled = false;
}
else if (originalValue == currentValue) {
/*original and current values match, reset background of that field to white*/
$(this).css("background", "#FFFFFF")
document.getElementById("submit-data").disabled = true;
}
else {
//to do
}
//});
});
On the first line, I dont have it this way
$("input[type=text]").change(function () {
because there is some fields on the form/page that I wanted to ignore for affecting the state of the submit button. That is why I have specified those particular fields on the .change
Also to check isNaN for the numeric fields. I probably can identify id the required fields by class names and add them to an array and just check that instead of the numerous declarations
var numericFields = document.getElementsByClassName("numeric_fields");
var getFieldValues = new Array();
for (i in numericFields) {
var singleValue = numericFields[i].value;
if (singleValue !== "" && singleValue !== undefined ) {
getFieldValues.push(singleValue);
}
}
but I had an issue, where the invalid check if statement part of the code wasn't getting hit with that implementation.
Anyways the main issue that I would like to solve at the moment, is to stop the button getting disabled when I revert one field back to its original value when multiple fields have been changed/edited to (from original) other valid states.
UPDATE
Further checks to clarify issue. I added an alert message message to see/check which if/else statement is getting hit each time any field is changed
if (description == "" || isNaN(sellprice) || isNaN(profit) || isNaN(grossProfit) || isNaN(markUp))
{
/*change background color to red for invalid or empty field*/
alert("1") //disable button
}
else if ((originalValue != currentValue) ) {
/*change background color to yellow if value changed*/
alert("2") //enable button
}
else (originalValue == currentValue) {
/*original and current values match, reset background of that field to white*/
alert("3") //default -> disable button
}
Now if a previously edited field is reverted back to its original value, while another has been changed, its hitting the last else statement alert("3), meaning the check is done per individual field that is currently being edited and not all the specified fields that I have specified from the form.
I'm trying to do a very simple task but for some reason I can't do it.
basically I am using the if statement to change the value of an input field using javascript but it doesn't work!
this is my code:
if (document.getElementById("colour").value == "171515"){
document.getElementById("colour").value = "db0000";
}
if (document.getElementById("colour").value == "db0000"){
document.getElementById("colour").value = "171515";
}
and the HTML looks like this:
<input type="text" id="colour" name="colour" class="colour" value="171515"/>
so what i need to do is this:
I launch a page and the input field is on my page with the value of value="171515", and then I press a button and that should change the value of the input field to value="db0000", and then I press the button again, and it should change the value of the input button to value="171515" and I need to do the same steps as many times as I want.
currently, it seems like it gets into a loop action and thats why it doesn't change the value of input field! (correct me if i'm wrong).
any help would be appreciated.
Thanks
EDIT:
The javascript code above is executed like so:
$(params.addPplTrigger).bind('click', function(e){
e.preventDefault();
///////// THE CODE ABOBE WILL GO HERE///////////
}
You're just missing an else:
if (document.getElementById("colour").value == "171515"){
document.getElementById("colour").value = "db0000";
}
else if (document.getElementById("colour").value == "db0000"){
document.getElementById("colour").value = "171515";
}
What happens in your original code
Case 171515:
first if condition evaluates to true, because the value is 171515
value gets changed to db0000
second if condition evalutes to true again, because the value is db0000 now
value gets changed back to 171515
Case db0000:
first if condition gets evaluates to false, because the value is not 171515
the value remains the same
second if condition gets evaluates to true, because the value is db0000
value gets changed to 171515
So, in both cases you'd end up with 171515.
since you are doing :
if (document.getElementById("colour").value == "171515"){
document.getElementById("colour").value = "db0000";
}
and then reverse
if (document.getElementById("colour").value == "db0000"){
document.getElementById("colour").value = "171515";
}
so you are not able to see the change .use else instead of second if.
if (document.getElementById("colour").value == "171515"){
document.getElementById("colour").value = "db0000";
}else{
document.getElementById("colour").value = "171515";
}
I have a webpage I'm building where I need to be able to select 1-9 members via a dropdown, which then provides that many input fields to enter their name. Each name field has a "suggestion" div below it where an ajax-fed member list is populated. Each item in that list has an "onclick='setMember(a, b, c)'" field associated with it. Once the input field loses focus we then validate (using ajax) that the input username returns exactly 1 database entry and set the field to that entry's text and an associated hidden memberId field to that one entry's id.
The problem is: when I click on the member name in the suggestion box the lose focus triggers and it attempts to validate a name which has multiple matches, thereby clearing it out. I do want it to clear on invalid, but I don't want it to clear before the onclick of the suggestion box name.
Example:
In the example above Paul Smith would populate fine if there was only one name in the suggestion list when it lost focus, but if I tried clicking on Raphael's name in the suggestion area (that is: clicking the grey div) it would wipe out the input field first.
Here is the javascript, trimmed for brevity:
function memberList() {
var count = document.getElementById('numMembers').value;
var current = document.getElementById('listMembers').childNodes.length;
if(count >= current) {
for(var i=current; i<=count; i++) {
var memberForm = document.createElement('div');
memberForm.setAttribute('id', 'member'+i);
var memberInput = document.createElement('input');
memberInput.setAttribute('name', 'memberName'+i);
memberInput.setAttribute('id', 'memberName'+i);
memberInput.setAttribute('type', 'text');
memberInput.setAttribute('class', 'ajax-member-load');
memberInput.setAttribute('value', '');
memberForm.appendChild(memberInput);
// two other fields (the ones next to the member name) removed for brevity
document.getElementById('listMembers').appendChild(memberForm);
}
}
else if(count < current) {
for(var i=(current-1); i>count; i--) {
document.getElementById('listMembers').removeChild(document.getElementById('listMembers').lastChild);
}
}
jQuery('.ajax-member-load').each(function() {
var num = this.id.replace( /^\D+/g, '');
// Update suggestion list on key release
jQuery(this).keyup(function(event) {
update(num);
});
// Check for only one suggestion and either populate it or clear it
jQuery(this).focusout(function(event) {
var number = this.id.replace( /^\D+/g, '');
memberCheck(number);
jQuery('#member'+number+'suggestions').html("");
});
});
}
// Looks up suggestions according to the partially input member name
function update(memberNumber) {
// AJAX code here, removed for brevity
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
document.getElementById('member'+memberNumber+'suggestions').innerHTML = self.xmlHttpReq.responseText;
}
}
}
// Looks up the member by name, via ajax
// if exactly 1 match, it fills in the name and id
// otherwise the name comes back blank and the id is 0
function memberCheck(number) {
// AJAX code here, removed for brevity
if (self.xmlHttpReq.readyState == 4) {
var jsonResponse = JSON.parse(self.xmlHttpReq.responseText);
jQuery("#member"+number+"id").val(jsonResponse.id);
jQuery('#memberName'+number).val(jsonResponse.name);
}
}
}
function setMember(memberId, name, listNumber) {
jQuery("#memberName"+listNumber).val(name);
jQuery("#member"+listNumber+"id").val(memberId);
jQuery("#member"+listNumber+"suggestions").html("");
}
// Generate members form
memberList();
The suggestion divs (which are now being deleted before their onclicks and trigger) simply look like this:
<div onclick='setMember(123, "Raphael Jordan", 2)'>Raphael Jordan</div>
<div onclick='setMember(450, "Chris Raptson", 2)'>Chris Raptson</div>
Does anyone have any clue how I can solve this priority problem? I'm sure I can't be the first one with this issue, but I can't figure out what to search for to find similar questions.
Thank you!
If you use mousedown instead of click on the suggestions binding, it will occur before the blur of the input. JSFiddle.
<input type="text" />
Click
$('input').on('blur', function(e) {
console.log(e);
});
$('a').on('mousedown', function(e) {
console.log(e);
});
Or more specifically to your case:
<div onmousedown='setMember(123, "Raphael Jordan", 2)'>Raphael Jordan</div>
using onmousedown instead of onclick will call focusout event but in onmousedown event handler you can use event.preventDefault() to avoid loosing focus. This will be useful for password fields where you dont want to loose focus on input field on click of Eye icon to show/hide password
I have a form which I want to build some simple validation for, but I cannot seem to get it working correctly. The option set has about 10 choices, but I only want to create some validation for some of them. For example, if you are a certain race, a "specify" textbox will appear on the dynamics form to allow you to enter data, but the box will no appear if you make certain selections from the optionset. I hope I've explained that clearly.
Currently, the below code works as follows:
The other box is not visible on form load, when you make a selection from the optionset dropdown, it appears on the form and allows you to enter data. However, it should only appear if a certain choice is selected. When an incorrect choice is made, it should clear and become invisible again. At the moment, it stays visible and text the stays in the field. By default, the optionset has no assigned value on formload.
Code below, I think it must be my if statement is incorrect somehow.
function Example_Other() {
Xrm.Page.getAttribute("new_choiceoptionset").getValue();
if (Xrm.Page.getAttribute("new_choiceoptionset").getValue() == "White, Other
(specify)" || "Asian, Other (specify)" ||
"African, Other (specify)" || "Mixed, any other (specify)" || "Other ethnic group (specify)") {
Xrm.Page.ui.controls.get("new_othertextbox").setVisible(true);
} else {
Xrm.Page.ui.controls.get("new_othertextbox").setVisible(false);
Xrm.Page.getAttribute("new_othertextbox").setValue(null);
}
}
if statement works in a different way. You have to provide a boolean expression, so if you want to perform a check like this you have to do something like:
var myValue = Xrm.Page.getAttribute("new_choiceoptionset").getValue()
if (myValue == "White, Other (specify)"
|| myValue == "Asian, Other (specify)"
|| myValue == "African, Other (specify)"
|| myValue == "Mixed, any other (specify)"
|| myValue == "Other ethnic group (specify)")
{
//Your code here
} else {
//Other code here
}
I solved this issue by using the number value of the options, NOT the string assigned value... It's not ideal (as values could need changing over time) But it gives the desired functionality.
Example:
var myValue = Xrm.Page.getAttribute("new_choiceexample").getValue();
if (myValue == 778300002 ||
myValue == 778300006 ||
myValue == 778300009 ||
myValue == 778300014 ||
myValue == 778300015)
{
This Javascript which uses functions from jQuery is quite handy but getting feedback on it there is some limitations which I was hoping you guys could help me overcome.
The function basically creates a textbox with a formatted time (HH:MM:SS) so that it is easy for users to enter in times rather than have to use a date time picker which involves lots of clicks.
Code:
//global variable for keeping count on how many times the function is called
var i = 0;
//for adding formatted time fields
function timemaker()
{
//creates an input field of text type formatted with a value of "00:00:00"
var input = $("<input>",
{
name: 'time'+i, // e.g. time0, time1, time2, time3
value: '00:00:00',
maxlength: '8',
size: '6'
});
//this function which uses jquery plugin causes the cursor in the field to goto position zero
//when selected making it easier for the user to enter times and not need to select the correct position
input.click(function()
{
$(this).prop({
selectionStart: 0,
selectionEnd: 0
});
//this child function moves the cursor along the text field
//when it reaches the first ":" it jumps to the next "00"
}).keydown(function() {
if (event.keyCode == 9)
{
return;
}
else
{
var sel = $(this).prop('selectionStart'),
val = $(this).val(),
newsel = sel === 2 ? 3: sel;
newsel = sel === 5 ? 6: newsel;
$(this).val(val.substring(0, newsel) + val.substring(newsel + 1))
.prop({
selectionStart: newsel,
selectionEnd: newsel
});
}
});
//this appends the text field to a divved area of the page
input.appendTo("#events");
i++;
return;
}
00:00:00
Limitations I need help with
Say for example you wanted to enter a time of 12:45:00 , you
obviously don't need to enter the seconds part (last "00") as they
are already there. So you then decide to tab out of that text field
but the javascript interprets your "Tab" keypress as an entry and
deletes a zero from the field causing the value to be like 12:45:0
Does not validate inputs for 24 hour format- do you think it will be
possible to do that? e.g. first number you enter is "2" therefore the
only options you have are "0,1,2,3"
If you make a mistake in the 4th digit and reselect the text field
you have to enter everything again.
I think the main thing you're missing that would allow you to implement all those requirements is the argument that jQuery passes to you in your keydown event handler. So, change that line to this:
.keydown(function(event){
if (event.keyCode == 9) { return; }
... the rest of your code ...
and then you can use event.keyCode to identify what was pressed and take actions accordingly. So for example, if event.keyCode == 9 then the user pressed TAB.
This is a slightly out-of-the-box solution, but you might consider it if things don't work out with your filtered textbox:
http://jsfiddle.net/YLcYS/4/