We Keep Coding

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();
}

JavaScript method not working in HTML

So I have a button that calls the AllEntered() javascript method when it is clicked and as you can see in the final if/else, it should either got to submission.html or admin.html but instead of going to either of those it just reloads the current page that I am on. This is all inside a form by the way and its purpose is to check if all checkbox inputs are checked. Also the alert doesn't i put for loop-number doesn't generate either.
zbutton onclick="AllEntered()" class="myButton">Submit</button>
<script>
function AllEntered()
{
var ids = {"freshSoph", "participate", "respect", "leave", "illegal", "alcohol", "typeName"};
var loopNumber = 0;
for(var i = 0; i < ids.length - 1; i++)
{
if(document.getElementById(ids[i]).checked)
{
loopNumber++;
alert(loopNumber.value);
}
}
if(loopNumber = ids.length)
{
window.open("submission.html");
}
else
{
window.open("admin.html");
}
}
</script>

Open your browser developer tools. Read the error message.
You have a typo. An array is created with [], not {}.
(And of course it reloads the page, that is what clicking a submit button inside a form does).

In your form, below this button, add one more button as a hidden input of type submit like so:
<button hidden type="Submit">
Your problem could be caused by the fact that you are missing a submit type button.
When a form has no button of type Submit ( which on click will submit the form to its target or TO ITS SELF if no target is specified. This is what we call postback, as in posting back to your self ) it will use any buttons click as a submit event raiser.
By adding an actual submit button you remove this default behaviour, while also ensuring the user cant click on it, as the control is not active when its hidden.

Setting form target to _blank causes 2 windows to open

I'm using the following script with a Paypal button, which works well, except for the fact that 2 windows open to Paypal, instead of one. I would appreciate if anyone could help me get just 1 window to open. This is inside of an asp.net project. There is one form in the source on the page.
function submitFormToPaypal() {
var formElementsArray = document.getElementsByTagName('FORM');
if (formElementsArray != null) {
var formElement = formElementsArray[0];
document.getElementById('__VIEWSTATE').name = 'NOVIEWSTATE';
formElement.action = 'https://www.paypal.com/cgi-bin/webscr';
formElement.setAttribute("target", "_blank");
formElement.submit();
}
}

If you call your function on submit or on click of a submit button, you need to remove the formelement.submit.
If you show the HTML with event handlers perhaps we can suggest how to do it.

How to add history to jQuery UI tabs using a back button

I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain
forms. Forms and tab work fine - expect to this: I submit the form (POST
method not XHR), then click the right mouse button (Firefox and IE behave
identical) and select back and then select tab five in the page by mouse
click the entered form data is still available.
I try to build a link, that is more convenient for the user.
<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>
If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.
I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.
Where is my fault and is the difference between doing this steps by hand and my link with JS?

Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.

Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.
The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.
The function is:
$(function() {
var $previousTab = 0;
var $backButtonUsed = false;
// Initialise tabs
$("#tabs").tabs();
$("#tabs").bind("tabsselect", function(event, ui) {
if ($backButtonUsed)
{
$backButtonUsed = false;
} else {
$previousTab = $("#tabs").tabs('option', 'selected');
}
return true;
});
$("#back").live('click', function() {
$backButtonUsed = true;
$("#tabs").tabs({ selected: $previousTab });
return true;
});
});​
I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.
Let me know what you think.

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");
}
});