I am attempting to make a similar page to this.
The problem is that I can't use the external JS file in ASP.net (as far as I know) so I am defining the functions and trying to use them in the HTML page.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="authenticate.aspx.cs" Inherits="authenticate" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Flitter Authentication</title>
<link href="AuthenticationStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active" onclick="SwitchTab(e)">Sign Up</li>
<li class="tab" onclick="SwitchTab(e)">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required="required" autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required="required" autocomplete="off" />
</div>
</div>
<div class="field-wrap">
<label>
REQFIELD<span class="req">*</span>
</label>
<input required="required" autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" required="required" autocomplete="off" />
</div>
<button type="submit" class="button button-block" />Get Started
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
REQFIELD<span class="req">*</span>
</label>
<input required="required" autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" required="required" autocomplete="off" />
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block" />Log In
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->
<script>
function SwitchTab(e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
};
</script>
</body>
</html>
Some things I noticed:
in on the onclick events I am using SwitchTab(e) I am sure that e is nothing in that context but I am not sure what I should be using. The script (defined at the bottom) should switch the views on the tab group.
First of all, the snippet you linked on codepen doesn't seem to work at all.
I manage to make it work by changing those lines below :
<li class="tab active"><a onclick="ShowTab(this, event)" href="#signup">Sign Up</a></li>
<li class="tab"><a onclick="ShowTab(this, event)" href="#login">Log In</a></li>
And the javascript function showTab() as :
function ShowTab(that, event) {
event.preventDefault();
$(that).addClass('active');
$(that).siblings().removeClass('active');
target = $(that).attr('href').toString();
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
};
A bit a an explaination now. "e" means nothing to the javascript engine as it's not been defined in the global scope. Whereas "this" refers to the element you just clicked on and "event" to the event (the click) that just occured. I also put the ShowTab() function in the link instead of it's parent, just because it's a lot simpler that way.
I hope it helped.
Oh well, I forgot to tell about "that". As the "this" keyword already exists in the function ShowTab() and is different to the HTML element we need to change the name to something NOT used in the closure.
Can do this very simply using jQuery and removing the inline code. The code within the following click handler is identical to that in your function
$('.tab-group a').click(function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
var target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
If you are going to use jQuery should avoid mixing inline code and unobtrusive jQuery code
Related
I'm trying to select a form element in javascript using the querySelector but it won't work and sometime it returns the form element.
Here's my code:
JavaScript
const ele = document.querySelector('form');
console.log(ele);
ele.addEventListener('submit', function(e) {
console.log("in the eventlister function");
const pass = document.getElementsByClassName("P")[0].value;
const cpass = document.getElementsByClassName("CP")[0].value;
const messagePara =document.getElementById("generated_message");
if(pass != cpass){
e.preventDefault();
messagePara.textContent ="check your password!!";
messagePara.style.color= 'red';
return false;
}
else{
messagePara.textContent ="";
}
});
HTML
<form class="inputF">
<div class="inputD">
<label for="fname" >Full Name</label>
<input type="text" id="fname" required>
</div>
<div class="inputD">
<label for="uname">Username</label>
<input type="text" id="uname">
</div>
<div class="inputD">
<label>Email address</label>
<input type="email" id="Email" placeholder="example#gmail.com" required >
</div>
<div class="inputD">
<label for="phn">Phone Number</label>
<input type="number" id="phn">
</div>
<div class="inputD">
<label for="pass">Password</label>
<div class="pass">
<input type="password" class="P IptP" required>
<i class="fa fa-eye-slash show-hide"></i>
</div>
</div>
<div class="inputD">
<label for="cpass">Confirm Password</label>
<div class="pass">
<input type="password" class="CP IptP" required>
<i class="fa fa-eye-slash show-hide"></i>
</div>
</div>
<div>
<button id="save_btn" >Continue</button>
</div>
</form>
I tried adding class for the form and select the form using the ClassName but still the same problem occurred. How can I fix this problem ?
When manipulating the DOM with a <script> in the <header>, you'll want to wait until the document has loaded.
document.body.addEventListener('load',function(){
// Your DOM sensitive code here
});
otherwise, you might want to include your script after the form tag
<!DOCTYPE html>
<html>
<!-- Your header; moving your script from here -->
<body>
<!-- Your form here -->
<!-- Move script here-->
<script>
// DOM sensitive code here as the last element in the body
</script>
</body>
In my project i'm dynamically generating an html form using jquery. Here the page consist of five tabs each having separate previous and next buttons. The tab is designed using bootstrap. Can anyone please suggest the easiest method to validate this page. ie, when i click next button on first tab it should validate fields in first tab only and so on. Please help me to solve this issue. Many thanks in advance.
Here is my whole code:
html code:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#name" id="id-name">name</a></li>
<li><a data-toggle="tab" href="#address" id="id-address">address</a></li>
</ul>
<form class="form-horizontal" id="id-fn-employee" method="POST" enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe">
<div class="tab-content">
<div id="name" class="tab-pane fade in active" style="height:auto;overflow: hidden;">
<span id ="name1"></span>
<div class="form-group">
<label class="col-sm-3 control-label">First Name<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">First Name</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="First Name" required="true" id="id-firstNmae" name="firstNmae" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last Name<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">Last Name</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="Last Name" required="true" id="id-lastName" name="lastName" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<ul class="pager">
<li>Cancel</li>
<li>Next</li>
</ul>
</div>
<div id="address" class="tab-pane fade" style="height:auto;overflow: hidden;">
<span id ="address1"></span>
<div class="form-group">
<label class="col-sm-3 control-label">house name<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">house name</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="house name" required="true" id="id-houseName" name="houseName" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Street<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">Street</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="Street" required="true" id="id-street" name="street" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<ul class="pager">
<li>Previous</li>
<li>Next</li>
</ul>
</div>
</div>
</form>
JS:
$(document).ready(function(){
var $validator = $("#id-fn-employee").validate({
errorPlacement: function (error, element) {
var placement = $(element).data('error');
if( $(element).hasClass('grp') ){
error.insertAfter($(element).parent());
}else{
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
}
});
});
I have included the required js files along with
<script src="${pageContext.request.contextPath}/resources/js/plugins/jquery.validate.min.js"></script>
Here we need to add the above code in js and need to specify the id of the form.
This validation is working fine in static pages but failed to validate dynamically generated form.
Let's assume you have some markup like the following for simplicity:
<ul class="tabs">
<li class="tab" id="first_tab">
<form>
/* form fields are here */
<button class="next_btn">Next</button>
</form>
</li>
</ul>
So you can listen to the click event on the Next button:
$('form .next_btn').on('click', function () {
var $btn = $(this),
$form = $btn.closest('form');
initValidator($form);
if($form.valid()){
// Go to next step
} else {
alert('Invalid form')
}
});
function initValidator($form) {
var $validator = $form.validate({
errorPlacement: function (error, element) {
var placement = $(element).data('error');
if( $(element).hasClass('grp') ){
error.insertAfter($(element).parent());
}else{
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
}
});
}
Problem :
This looks messy, Being this your current structure.
<form class="form-horizontal" id="id-fn-employee" method="POST" enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe">
<div class="tab-content">
<div id="name">...</div>
<div id="address">...</div>
</div>
</form>
And your script
var $validator = $("#id-fn-employee").validate({...
Since your have the form as a parent which wraps both the tab content, at any given tab you will end up in validating the entire form.
Solution:
1) Have a seperate forms for each tab, and on click of next button you can validate only that respective tab's form. So your Html should be restructured this way.
<div class="tab-content">
<div id="name"><form>...</form></div>
<div id="address"><form>...</form></div>
</div>
And when both forms are valid you can combine the data of both the forms and then submit using Jquery.
2) If you dont want to restructure your HTML then you have to manually grab only the elements in that particular tab content div and then validate them manually.
http://jsfiddle.net/pz83w/16/
check the fiddle.I have two forms in it.I have a java script for forming a slide transitin between the forms.At first when the page loads,the both forms are shown,but i want only one form shown.Later when I click the links its working fine.How can I correct this.
<div class="demo">
<form class='form show' id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form class='form' id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
and javascript is
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(900).removeClass('show');
} else {
$(this).delay(900).addClass('show').slideDown();
}
});
});
});
You could hide the second form in javascript like this:
$(".form").not(':first').hide();
Or an update of the Jsfiddle: http://jsfiddle.net/pz83w/18/
By default you could use style="display:none" on the form you don't want shown.
Sorry for the bad format sent from my phone.
Update CSS to hide forms without show class
In HTML and CSS, everything is visible unless you specifically ask it not to be.
Your showing and hiding is embedded within an onclick handler, so it won't execute until the links are clicked.
Until the links are clicked, why would a form be hidden? There is nothing to hide them.
You could of course have display: none set in in a stylesheet, but you did not include any CSS, so I assume there is none.
Try putting style="display: none" on the form tag you want to initially hide, like so:
<form class='form' id="formB" style="display: none">
Well, You can add either of the following css properties.
"display: none" or "visibility:hidden"
display:none means that there will be no space allocated for it. visibility:hidden means that the tag is not visible, but space is allocated for it on that particular page.
$("#formB").css("visibility","hidden");
Add this when when you show the page and then make it visible when you want second form to appear when you click on link,
$("#formB").css("visibility","visible");
I have a series of divs that load each has a dynamic id name based on a database result.
Within each div are several hidden input text fields that all have the same name and id.
The user clicks a href which is dynamically generated from the database launching colorbox. For example ()
On the opening div is a button. When the user clicks this button it submits a form.
As it is now it sumbits only the values of the first instance of the fields (for example Yellow, digital-world, Digital Revolution).
It is suppsoed to submit the values of the url that is active. For example, if the user clicks (">) then it should submit Blue, abstract, Abstract Panel. Instead of Yellow, digital-world, Digital Revolution.
In addition, there are scroll buttons on the colorbox so for example the user can click a next button to load the next set of values. Ie. if he is on and clicks the next button he is suddenly on so if he clicks the button on here it should submit the correct values ie. Blue, abstract, Abstract Panel.
Does this make sense?
Let me show...
<div class="doneit">
<div style="float:left;"><img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" ></div>
div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Yellow">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="digital-world">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Digital Revolution">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Blue">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Panel">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Red">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Disks">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/electric-effect/Purple/electric-purple-grid.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Purple">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="electric-effect">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Electric Grid">
</div>
<div style="display:none">
<div id="container"><div id="video"></div>
<div id="doesit">
<script type="text/javascript">
function submitMyForm(){
$('#Product_color_16').val($('#Product_Vid_1').val());
$('#Product_Dir_16').val($('#Product_Dir_1').val());
$('#Product_Name_16').val($('#Product_Name_1').val());
$('#myform').submit();
}
</script>
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="">
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="">
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="">
<button class="addtobutton addtocart" onclick="submitMyForm();"></button>
</form>
</div></div>
</div>
Thanks for any and all help!
You have multiple elements sharing the same ID - which is wrong and can cause you lots of problems.
One of the problems is exactly the one you're facing now.
As you don't have a unique ID for the elements, the code will consider just the first match (in your case, the "Yellow" ones)
To fix this? Let's leave as much as possible with jQuery, to make it simple. Also, let's fix a bit the HTML markup. Please refer to the comments.
HTML
<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->
<div class="doneit">
<div style="float:left;">
<a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
<img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Yellow" />
<input type="hidden" name="Product_Dir_1" value="digital-world" />
<input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Blue" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Red" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
<img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Purple" />
<input type="hidden" name="Product_Dir_1" value="electric-effect" />
<input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>
<div style="display:none">
<div id="container">
<div id="video"></div>
<div id="doesit">
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />
<!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->
<button class="addtobutton addtocart" type="submit"></button>
</form>
</div>
</div>
</div>
jQuery (Javascript):
// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.
var setFormValues = function(div) {
// Getting the inputs values. The ones within the clicked div.
// We look for the inputs which name starts with Product_...
// Let's use .prop() instead of .val() because IE sometimes doesn's like it.
var div = $(div);
var productVid = $("input[name^='Product_Vid_']", div).prop("value");
var productDir = $("input[name^='Product_Dir_']", div).prop("value");
var productName = $("input[name^='Product_Name_']", div).prop("value");
// Setting the form inputs values.
$("#Product_color_16").prop("value", productVid);
$("#Product_Dir_16").prop("value", productDir);
$("#Product_Name_16").prop("value", productName);
}
$(function () {
// When the user clicks on one of the divs.
$(".doneit").on("click", function () {
setFormValues($(this));
return true;
});
// When the user clicks the cart button, on the video window.
$(".addtocart").on("click", function() {
// Here we need a bit of native Javascript.
var videoPlaying = document.getElementById("video_video");
if (typeof videoPlaying != "undefined") {
var videoSource = videoPlaying.currentSrc;
if (typeof videoSource != "undefined") {
var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];
// Check which div has an image which src
// matches the video filename.
var image = $(document).find("img[src*='" + videoSourceFilename + "']");
if (typeof image != "undefined") {
var divContainer = $(image).parent().parent().parent();
if (typeof divContainer != "undefined")
setFormValues($(divContainer));
}
}
}
return true;
});
});
I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.
I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle