We Keep Coding

Jquery ui autocomplete incorrectly detects change on page load

I have a set of fields that are autocomplete fields. Each one is set up to detect when a change is made and if the final value does not match any suggestions, it puts the field in an error state and asks the user to select an existing item. Here is the code:
$.each($(".autocomplete"), function () {
$(this).autocomplete({
source: $(this).attr("autocomplete-url"),
autoFocus: true, //Just press enter to select top item
minLength: 0,
response: function (event, ui) {
if (ui.content.length == 1) {
$(this).val(ui.content[0].value);
$(this).removeClass("is-invalid").next("span").remove(); //valid value, remove error
}
},
change: function (event, ui) { //if detects a string that was not suggested (meaning does not exist in DB), clear value and show not valid
if (!(ui.item)) { //don't close the dropdown - causes ui.item to be undefined
$(this).val("");
$(this).addClass("is-invalid").after("<span class='invalid-feedback'><strong>Please choose an existing " + $(this).attr('name') + ".</strong></span>");
}
}
});
});
This works fine except in one case - if there is an error elsewhere in the form and the page reloads with the other form errors (No error in the autocomplete field), the originally selected item in the autocomplete shows for a split second, then the change event runs removing the value and putting the field in a state of error with the message "Please choose an existing item."
Is there a way to tell the autocomplete that the value it contains on page reload is in fact valid and has not changed - it's the same value that was valid before page reload? Or, does anyone have another suggestion like maybe suppressing the autocomplete change even when the page reloads and then enabling it again in case the user selects another item?

Navigate to element in Different tab of same page using focus() function

I am doing validation of entire form which is spread into different section where each section is a nav-tab , when i fill the entire form and cursor is in the last section, on clicking the save button if there is a validation mismatch of textbox in first section(first nav-tab) and if i want the user to be focused to the failed textbox document.getElementById(ID).focus()
is not navigating to the element where validation has failed.
How to achieve the above functionality??
function validate()
{
var valid = true;
var alphaFilter = /^[A-z]{0,}$/;
if (!(alphaFilter.test($('#fieldId').val()))
{
if(valid){$('#fieldId').focus();}
$('#fieldId').css("border-color", "#e84e40");
valid = false ;
}
--- each field has its own if condition
return valid;
}
validate function is called inside the submit function for further processing and valid variable is used to focus first invalid entry in the form.

I would make a param to take in selectors to make this more usable.
Something like this..
function switchtab (){
$("#tab1").removeClass("active");
$("#tab2").addClass("active");
$("#tabpanel1").removeClass("active");
$("#tabpanel2").addClass("active");
//should be good to focus now
$(selector).focus();
}

$(id).submit() not triggering submission of form

I have a form that needs to do two things when the user clicks the submission button. The first is send an e-mail to me, and the second is send the user to PayPal. I have set it up so it first makes an Ajax call to another page, and that page sends the e-mail. Once that page returns a success, it calls a function to trigger the submission of the form.
I've put in the form with a standard button, rather than a submission button, and an onclick even to detect when it's clicked. Everything works great up until I try to submit the form after the Ajax call, at which point the form isn't submitted. Here's my javascript:
$('#submit-btn').on('click', function() {
var err = false;
$('input, textarea', '#booking-form').each(function(index, element) {
if($(this).is('[required]') && $(this).val() < 2) {
alert('Please enter your ' + $(this).prop('placeholder').toLowerCase() + ' before continuing.');
$(this).focus();
err = true;
return false;
}
});
if(err) {
return false;
}
if($('#date').val() == 0) {
alert('You must choose a date before booking');
return false;
}
ShowLoadingScreen();
var data = {
'name': $('#name').val(),
'address': $('#address').val(),
'tel': $('#tel').val(),
'email': $('#email').val(),
'course': $('#course').find('option:selected').text(),
'location': $('#location').find('option:selected').text(),
'date': $('#date').find('option:selected').text()
};
AjaxHandler('book-course.php', data, "POST", true);
//AjaxHandler sends the data off to book-courses.php, which then returns a call to BookingSuccess().
//This is working fine as evidenced by the console.log line showing in the console.
});
function BookingSuccess() {
$('#booking-form').submit();
console.log('Booking success called...');
}
AjaxHandler is a custom function that calls the page, and then handles certain responses, including calling functions. BookingSuccess is being called, as Booking success called... is being output in the console. The form however just isn't being submitted.
I have created a jsFiddle of the issues here.
What I've tried
So far I've tried the following:
Skipping around the Ajax - no effect
Submitting the form directly using a button, ignoring the need for Ajax - the form works fine.
Deleted all HTML except for the form - no effect
Tried submitting the form at the top of the #submit-btn click event - no effect
Place a return true function inside the $('#booking-form').submit() - no effect
Using the longer version of jQuery's trigger $('#booking-form').trigger('submit') - no effect.
Putting a console.log event in the forms onsubmit="" to see if the form is being triggered - Works on the fiddle, but not the website.
I'm at a loss as to why this form will not submit. Nothing should be stopping it. We're getting to and passing that line. I have placed a break in FireBug and stepped in, and we get to that function fine. It just doesn't do its job.
How can I get this form to submit properly as it should?

Upon further inspection (and some dead ends and red herrings in the chat), it looks like the page has two elements with the same ID. Change one or the other, and you're golden.

how to change display of page if errors in form submission

In my django app,I am showing a page that has a button which starts and stops a clock.The page has a form where user can input some details like name,description etc and submit.Initially the div containig this form is hidden by display:none in the css.Only the button is shown,clicking upon which a clock starts running.When user again presses the same button,the clock stops and the hidden form is made visible .
I did this by using javascript which gives a status value to the button- 'start' and 'stop'. I have written a function to if user clicked on it and change the status accordingly.
var buttonStatusChange= function(){
var buttonstatus = $('#clockbtn').attr("value");
if (buttonstatus == "start"){
$('#clockbtn').attr("value","stop");
...
hideElement("userinputdiv");
}else if (buttonstatus == "stop"){
$('#clockbtn').attr("value","start");
...
showElement("userinputdiv");
}
};
var showElement=function(elementId){
var elem_selector='#'+elementId;
$(elem_selector).show();
};
var hideElement=function(elementId){
var elem_selector='#'+elementId;
$(elem_selector).hide();
};
In my django view,I am validating the userinputform and other forms in the post .If validation fails,the original form is displayed (which now have errors next to the field).
def my_view(request,...):
if request.method=='POST' and otherform.is_valid():
...
userinputform_is_valid = userinputform.is_valid()
if not userinputform_is_valid:
return custom_render(request,context,template_name)
...
#otherwise get values from form,save etc..
def custom_render(request,context,template):
req_context=RequestContext(request,context)
return render_to_response(template,req_context)
html for page
....
<div id="userinputdiv">
....
<form ...>
<p>
<span id="myfield">Enter WholeNumber:</span>
{{my_form.myfield}}{{my_form.myfield.errors}}
</p>
...
Unfortunately,since the css has a display:none for the userinputdiv, that div is hidden and so user cannot see the errors.What he now sees is a page with just one button which can start/stop clock.If I take the source of the page ,the errors are there in <ul class="errorlist ...>
So,I am wondering how to make the userinputform visible to user if any validation errors occur during post.If I make the css for userinputdiv display:block ,the errors in page will show as expected -but with all the input fields shown , even before any clock is run..and I don't want that to happen,since I am using start and end times from the clock as hidden fields to be sent in the post and processed in my django view

In same situation i'm using Ajax and if get error from server- dynamically add this for fields(i'm write in placeholder).
And with Ajax variant you may run and stop Clock with AjaxStart- AjaxStop function of jquery.

Question on .submit and reloading form values AFTER the submit button is clicked

I am using jQuery 1.4.3 and have a newbie question.
In the following .submit function, I grab the value of the selected option in the facilityCodes dropdown list after I click the submit button and then during the submit function, select the facilityCode again in the dropdown list and then disable the list so that the user cannot change it. However, the situation is when I reload the page after the submit button is clicked the dropdown defaults to the first option and the list is enabled. I apparently am not understanding how .submit works so that I'm selecting the option I'm defining in my code and then disabling the list AFTER the page reloads. My question is what am I doing wrong? Am I using the wrong event?
Any help/direction would be greatly appreciated. Thank you.
Here is my code:
$(function() {
$("#ARTransferForm").submit(function() {
var msgsCount = 0;
var facilityCodeValue = $("#ARTransferForm\\:facilityCodes option:selected").val();
alert("facilityCodeValue = " + facilityCodeValue);
if (facilityCodeValue == 0) {
alert("To Facility Code must be selected");
msgsCount++;
} else {
$('select[id$=facilityCodes]').val(facilityCodeValue);
$("#ARTransferForm\\:facilityCodes").attr("disabled", "disabled");
}
});
});

Refreshing the page will erase everything you've done with JavaScript prior to the page refresh. If you're looking to preserve states through page reloads, you'll need to use server side code, or set a cookie.

The submit event is called on the current page when the form is about to post. You'll need to pass along a value (hidden field) that is checked on form load that you can check to determine if the list should be disabled.
Update:
On page load, you'll want to check to see if this is a repost where the hidden field id="disable_select" was set set during the post. If so, then you'll disable the form.
$(function(){
if ($('#disable_select').val() == '1') {
$("#ARTransferForm\\:facilityCodes").attr("disabled", "disabled");
}
});