We Keep Coding

How to retain current tab in a code slider after a postback in asp.net?

Im creating an asp.net booking page that has a coda slider effect,the page is also a content page of a master page, i have this JavaScript that allows the slider effect
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
document.getElementById("Submit").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("Submit").style.display = "inline";
document.getElementById("prevBtn").style.display = "none";
document.getElementById("nextBtn").style.display = "none";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return true;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
</script>
The problem is that i have this button for a file Upload control that does a postback to display a label to show if the file is uploaded
<input type="submit" runat="server" class="btn btn-success" value="Upload File" onserverclick="Button1_Click"/>
but the page current tab returns to the first tab after post back, how can i prevent this from happening? this is the code that runs after i have clicked the "Upload File" button
protected void Button1_Click(object sender, EventArgs e)
{
if (payment.HasFile)
{
string FileExtention = Path.GetExtension(payment.FileName);
if (FileExtention.ToLower() != ".pdf" && FileExtention.ToLower() != ".docx")
{
message2.Visible = true;
message3.Visible = false;
message.Visible = false;
message1.Visible = false;
}
else
{
int FileSize = payment.PostedFile.ContentLength;
if (FileSize > 2097152)
{
message3.Visible = true;
message2.Visible = false;
message.Visible = false;
message1.Visible = false;
}
else
{
payment.SaveAs(Server.MapPath("~/ApplicantUploads/" + payment.FileName));
message.Visible = true;
}
}
}
else
{
message1.Visible = true;
message3.Visible = false;
message.Visible = false;
message2.Visible = false;
}
}

As a general technique, define a hidden field:
<asp:HiddenField ID="HiddenField" runat="server" value="" />
Create a javascript function to save the current tab position:
function SaveTabPosition(position) {
document.getElementById('<%=HiddenField.ClientID%>').value = position;
}
When the POST will take place, it will send also the "currentTab" value stored in HiddenField back to the server. In the response now you will have to use:
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "setTabPosition", "var currentTab="+HiddenField.Value, true);
Now you should have the tab position back on the client side in "currentTab" variable. As a small mention, the "currentTab" should be accessible.

Simplifying IF/ELSE IF/ELSE Block

I'm creating my own validation code. I need to separate the if statements per input box for the error to show at the same time. I noticed that if it's on same if block, only the first error will show. Any way to simplify my code?
flag = 0;
//first if
if (first_name.length == 0) {
flag = 0;
$("label[for='firstname'").text('This field is required').css("display", "inline-block");
} else if (!first_name.match(name_regex)) {
flag = 0;
$("label[for='firstname'").text('Firstname must be composed of letters only').css("display", "inline-block");
} else if (first_name.length < 3) {
flag = 0;
$("label[for='firstname'").text('3 letters are required for lastname').css("display", "inline-block");
} else {
flag = +1;
$("label[for='firstname'").hide();
}
//second if
if (last_name.length == 0) {
flag = 0;
$("label[for='lastname'").text('This field is required').css("display", "inline-block");
} else if (!last_name.match(name_regex)) {
flag = 0;
$("label[for='lastname'").text('Lastname must be composed of letters only').css("display", "inline-block");
} else if (last_name.length < 2) {
flag = 0;
$("label[for='lastname'").text('2 letters are required for lastname').css("display", "inline-block");
} else {
$("label[for='lastname'").hide();
flag += 1;
}
//third if
if (validateEmail(email)) {
if (data.result) {
$("input#userEmail").css("border-color", "#ac2925");
$("label[for='email'").text('Email exists').css("display", "inline-block");
} else {
$("input#userEmail").css("border-color", "#e3e3e3");
$("label[for='email'").hide();
flag += 1;
}
} else {
$("input#userEmail").css("border-color", "#ac2925");
$("label[for='email'").text('Please input a valid email address').css("display", "inline-block");;
}
//fourth if on verification success
if (flag == 3) {
alert("All validation succeded!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Just extract it into a function:
function validate(inputName, labelName, minLetters, regex){
const el = $(inputName);
const label = $(labelName);
if(!el || !!label) throw "validate: el not found";
if(!el.val()){
label.text("You need to fill in this!");
return false;
}
if(regex && !el.val().test(regex)){
label.text("The input contains invalid chars!");
return false;
}
if(minLetters && el.val().length < minLetters){
label.text("to short!");
rerurn false;
}
return true;
}

I would suggest to make the validation routine more generic. Please see following solution (note: untested):
function validate(funcName, minLength) {
if (this[funcName].length == 0) {
$("label[for='"+funcName+"'").text('This field is required').css("display", "inline-block");
} else if (!this[funcName].match(name_regex)) {
flag = 0;
$("label[for='"+funcName+"'").text(funcName +' must be composed of letters only').css("display", "inline-block");
} else if (this[funcName].length < minLength) {
$("label[for='"+funcName+"'").text(minLength + ' letters are required for ' + funcName).css("display", "inline-block");
} else {
$("label[for='"+funcName+"'").hide();
return true;
}
return false;
}
if (validate("firstname", 2)
&& validate("lastname", 3)
&& validateEmail(email)
) {
// everything seems to be OK.
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

My approaches will be :
Have individual If blocks for each validations by which all the validations will be checked. And build/append the validation error message on each check.
Write if else blocks within a function. That function can be called for each fields being validated. And the function will return validation error message for each invokation which can be appended into a single string.

Javascript Validations Remove border color of each field one by one when it is filled

Here, i am getting the problem to change the fields border color (after validation message) to its (up on filling the text-input) original color.
It is coming like as when i press the next button all the fields color changed to red. Up on filling the field i want to remove this color to white.
Next:- I have to show the error message with the border color also.
e.g. for all fields there should be message like (Incomplete).
if(oldIndex==0)
{
var $emailv = document.getElementById('user_email').value;
var $passwordd = document.getElementById('chatinput2').value;
var $cpassw = document.getElementById('chatinput3').value;
var fields = document.getElementsByClassName("vikass");
if($emailv=="" && $passwordd == "" && $cpassw == "")
{
for(var i = 0; i < fields.length; i++)
{
if(fields[i].value="" )
{
fields[i].style.border="2px solid red";
}
else
{
fields[i].style.border="";
}
}
}
else if($emailv=="")
{
document.getElementById('status').innerHTML="<img src='/APPEX/appex/wp-content/themes/jobs/images/incorrect_icon.png'> Please Enter the Email";
}
else if($passwordd==""){
document.getElementById('user_pass').innerHTML="<img src='/APPEX/appex/wp-content/themes/jobs/images/incorrect_icon.png'> Please Enter the Password";
}
else if(cpassw=""){
document.getElementById('u_c_pass').innerHTML="<img src='/APPEX/appex/wp-content/themes/jobs/images/incorrect_icon.png'> Please Enter the Confirm Password";
}
else if($passwordd != $cpassw){
document.getElementById('u_c_pass').innerHTML="<img src='/APPEX/appex/wp-content/themes/jobs/images/incorrect_icon.png'> Password don not match";
}
else{
if (index >= 0 && index < state.stepCount && !(options.forceMoveForward && index < state.currentIndex))
{
var anchor = getStepAnchor(wizard, index),
parent = anchor.parent(),
isDisabled = parent.hasClass("disabled");
// Enable the step to make the anchor clickable!
parent._enableAria();
anchor.click();
// An error occured
if (oldIndex === state.currentIndex && isDisabled)
{
// Disable the step again if current index has not changed; prevents click action.
parent._enableAria(false);
return false;
}
return true;
}
return false;
}
}

How to show alert message using javascript to check checkbox?

I am using following code to detect whether the check box inside my gridview template field is checked or not. If none of the check box is selected then I want to show alert message.
function findCheckBox() {
var inputElements = document.getElementsByTagName('input');
var chekSelect = false;
for (var i = 0; i < inputElements.length; i++) {
var myElement = inputElements[i];
if (myElement.type === "checkbox") {
if (myElement.checked === false) {
chekSelect = true;
return true;
}
}
if (chekSelect === true) {
return true;
}
else {
alert('Please Check Atleast one record to print cheque!!!');
return false;
}
}
}
But with this code when I click on my button its showing me error message for one time even if one or more check box is checked. What I am doing wrong here. Can anyone help me please.

Your logic is slightly off. Corrected version:
jsFiddle demo
function findCheckBox() {
var inputElements = document.getElementsByTagName('input');
var chekSelect = false;
for (var i = 0; i < inputElements.length; i++) {
var myElement = inputElements[i];
if (myElement.type === "checkbox") {
if (myElement.checked) {
chekSelect = true;
break;
}
}
}
if(!chekSelect) {
alert('Please Check Atleast one record to print cheque!!!');
return false;
} else {
return true;
}
}
I've changed the .checked test, to test for it being true not false, because you want to know if at least one checkbox is checked. I also added a break, and moved the alert to outside of the for, because you won't know if there is a checkbox checked until the for completes.

Try this
function findCheckBox() {
var inputElements = document.getElementsByTagName('input');
for (var i = 0; i < inputElements.length; i++) {
var myElement = inputElements[i];
if (myElement.type === "checkbox" && myElement.checked) {
return true;
}
}
alert('Please Check Atleast one record to print cheque!!!');
return false;
}

Using JQuery:
var checked = false;
$('input:checkbox').each(function(){
if($(this).prop('checked')){
checked = true;
break;
}
});
if(!checked) alert('Please Check At least one record to print cheque!!!')

ajax hidding div problem in IE

I have a javascript page which checks an email and username, this works fine in every browser but Internet Explorer. The div box where errors are shown should be hidden unless an error is given e.g. username taken or invalid email.
If the email gets an error this is shown in the div tag, but doesnt work for username (in all browsers)
below is my code:
<script type="text/javascript">
var usernameok;
var emailok;
function checksubmit()
{
if (usernameok && emailok) {
document.getElementById("button").disabled = false;
} else {
document.getElementById("button").disabled = true;
}
}
function username(username)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Username Ok") >= 0) {
usernameok = true;
} else {
usernameok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
user_url = "check_username.php?username=" + username.value;
httpxml.open("GET", user_url, true);
httpxml.send(null);
}
function email(email)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
emailok = true;
} else {
emailok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
email_url = "check_email.php?email=" + email.value;
httpxml.open("GET", email_url, true);
httpxml.send(null);
}
</script>

I see your function stateck() is the return function from the HTTP request. However, you are defining it within another function. Not as an anonymous function, but just as a function within another function.
I see what you're doing now...ok, try this instead:
httpxml.onreadystatechange = function()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
document.getElementById("email").style.backgroundColor = "green";
document.getElementById("email").style.color = "white";
document.getElementById("email_div").style.display = 'none';
emailok = true;
} else {
document.getElementById("email").style.backgroundColor = "red";
document.getElementById("email_div").innerHTML=httpxml.responseText;
emailok = false;
}
checkCanSubmit();
}
};

Do you need to set your initial state to display: none? I think IE may initialize the divs with a non-0 height whereas the divs may be technically visible in other browsers but too short to see.
Edit:
Okay I think I misunderstood your question. Your problem is not with hiding the divs but with displaying errors for the username.
Nothing obvious jumps out at me. Try stepping through the code using VS or VWDE:
http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/