Hide/Show Form Fields with CSS and jQuery - javascript

Like stated in this example, I can show or hide some form elements that are in a specific group, based on the selected item in a combo box.
What I would like to do, is to maintain the same behavior but using links. For example, the first group is:
If I click on Join us, I would like to switch (to show) to the second group (and hide the first), like this:
.. cyclically.
A basic HTML:
<div id="registrate" class="group1">
<form action="#" method="post" class="regform">
<h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
<p class="float group1_opts">
<input type="text" name="nickname" id="nickname" placeholder="Username or Email..">
</p>
<p class="float group2_opts">
<input type="text" name="nickname" id="nickname" placeholder="Email..">
</p>
<p class="float group2_opts">
<input type="text" name="nickname" id="nickname" placeholder="Confirm Email..">
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required><br/>
</p>
<p class="float group2_opts">
<input type="password" name="password" placeholder="Confirm Password.." required><br/>
</p>
<p>
<div class="remember">
<input type="checkbox" name="remember" value="None" id="remember">
<label for="remember"></label>
</div>
<label for="remember" class="remembermelabel">Remember Me</label>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="submit" value="Login">
</div>
</p>
<h1></h1>
<p class="change_link group1_opts"> Not a member yet?
Join us
</p>
<p class="change_link group2_opts"> Are you just a member?
Login
</p>
</form>
A basic CSS:
.group1_opts, .group2_opts {
display: none;
}
.group1 .group1_opts, .group2 .group2_opts {
display: block;
}
There is a way to obtain this using links instead of combobox, like in the other example?
Thank you

Bind to the click events, and show and hide the relevant fields:
$('.to_register').click(function() {
$('.group1_opts').hide();
$('.group2_opts').show();
});
$('.to_login').click(function() {
$('.group1_opts').show();
$('.group2_opts').hide();
});
Note that you won't need your CSS to do this - jQuery will take care of hiding/showing the elements for you.

#BigChris raises an excellent point, and it's worthy of an answer.
How do you plan to tell if someone submitted a "Registration" or a "Login"? Simply watching for the right input field(s) won't work, because it's possible someone starts to fill in the registration form, but then switches to the login form.
Right now, you have only one form, with one submit button.
For clarity, and to provide a clear separation, not only in your markup but in your form processing on the server, I would strongly recommend that you change the markup to be two entirely separate forms. If you aren't willing / able to do that, then at least create two buttons.
Here's the revised HTML based on the two form concept:
<div id="registrate" class="group1">
<h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
<!-- The first form contains only registration info, and a submit named register -->
<form action="#" method="post" class="to_register">
<p class="float">
<input type="text" name="nickname" id="nickname" placeholder="Email..">
</p>
<p class="float">
<input type="text" name="nickname" id="nickname" placeholder="Confirm Email..">
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required><br/>
</p>
<p class="float">
<input type="password" name="password" placeholder="Confirm Password.." required><br/>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="register" value="Login">
</div>
</p>
</form>
<!-- The second form is purely login, and has a submit named login -->
<form action="#" method="post" class="to_login">
<p class="float">
<input type="text" name="nickname" id="nickname" placeholder="Username or Email..">
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required><br/>
</p>
<p>
<div class="remember">
<input type="checkbox" name="remember" value="None" id="remember">
<label for="remember"></label>
</div>
<label for="remember" class="remembermelabel">Remember Me</label>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="login" value="Login">
</div>
</p>
</form>
<h1></h1>
<p class="change_link group1_opts"> Not a member yet?
Join us
</p>
<p class="change_link group2_opts"> Are you just a member?
Login
</p>
</div>
Note that I've changed the classes of the forms, and removed the classes on the p tags. The classes of the forms match the class of the links, so that the jQuery is simpler.
Then, your jQuery becomes:
jQuery(function($) {
$('a.to_register, a.to_login').click(function(event) {
event.preventDefault();
var cname = $(this).attr('class');
$('form.' + cname).show();
$('form').not('.' + cname).hide();
});
});
Now, depending on your server-side language, you can watch for either $_POST['register'] or $_POST['login'] (the names of the submit buttons), to detect which they clicked, and what they intended.

I would honestly make two seperate forms. The code is very simple, and you can set two different actions in your forms. -- DEMO: http://jsfiddle.net/hCmr6/
jQuery:
$('.to_register, .to_login').click(function (e) {
e.preventDefault();
$('.loginform, .regform').slideToggle(400);
});
HTML:
<div id="registrate" class="group1">
<h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
<form action="#" method="post" class="loginform">
<p class="float group1_opts">
<input type="text" name="nickname" id="nickname" placeholder="Username or Email.." />
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required />
<br/>
</p>
<p class="float group2_opts"></p>
<p>
<div class="remember">
<input type="checkbox" name="remember" value="None" id="remember" />
<label for="remember"></label>
</div>
<label for="remember" class="remembermelabel">Remember Me</label>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="submit" value="Login" />
</div>
</p>
<h1></h1>
<p class="change_link group1_opts">Not a member yet? Join us
</p>
</form>
<form action="#" method="post" class="regform">
<p class="float group1_opts">
<input type="text" name="nickname" id="nickname" placeholder="Username or Email.." />
</p>
<p class="float group2_opts">
<input type="text" name="nickname" id="nickname" placeholder="Email.." />
</p>
<p class="float group2_opts">
<input type="text" name="nickname" id="nickname" placeholder="Confirm Email.." />
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required />
<br/>
</p>
<p class="float group2_opts">
<input type="password" name="password" placeholder="Confirm Password.." required />
<br/>
</p>
<p>
<div class="remember">
<input type="checkbox" name="remember" value="None" id="remember" />
<label for="remember"></label>
</div>
<label for="remember" class="remembermelabel">Remember Me</label>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="submit" value="Login" />
</div>
</p>
<p class="change_link group2_opts">Are you just a member? Login
</p>
</form>
</div>
Hope this helps! Let me know if you have any questions!

using jQuery you can do this:
$(document).ready(function(){
$('.to_register, .to_login').click(function() {
$('.group1_opts').toggle();
$('.group2_opts').toggle();
});
});
edit: this works as long as the right stuff is hidden and shown at first

In JavaScript (sorry but I'm not using jQuery):
For that you need to use the onclick action from JavaScript and like your address "join us" to "#" to make it stay on the same page. Actually you can use onclick with pretty much anything so feel free to use a <p>, <img> or what ever.
To make disappear / appear your input, just use:
function hide(id)
{
var element = document.getElementById(id);
element.style ="display: none;";
}
Also you can change the value of your <p> from "Join us" to "Login" and also change the action you want to call with onclick (switch between hide/show(id) and element.setAttribute("onclick", full_function);).

Related

Replace form by another one on click with javascript

I need your help for my code :
I've got two forms, one to register and another one to log in.
I would like to replace the log in form by the register form when the user clicks on "Sign up" link. Same if he already has an account, I would like to replace the register form by the log in form when clicking on the "log in" link.
Here my two forms :
<!-- Login form -->
<div class="log form" id="login">
<h2>Log in</h2>
<form class="form_log">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Don't have an account ? Sign up</p>
</form>
</div>
<!-- Register form -->
<div class="register form" id="register">
<h2>Sign up</h2>
<form class="form_register">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Already registered ? Log in</p>
</form>
</div>
Script :
$(document).ready(function(){
function display (open){
$(open).css("display", "block");
$(".form").not($(open)).css("display","none");
}
});
I think something is missing or wrong in my code but I don't know exactly what.
Toggle can do toggle between the display of form
function display() {
$("#login").toggle();
$("#register").toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Login form -->
<div class="log form" id="login" style="display: none">
<h2>Log in</h2>
<form class="form_log">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Don't have an account ? Sign up</p>
</form>
</div>
<!-- Register form -->
<div class="register form" id="register">
<h2>Sign upn</h2>
<form class="form_register">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Already registered ? Log in</p>
</form>
</div>
Try this. What wrong with your code is you don't put your function inside a ready() event handler.
function display(divId) {
$('.form').hide();
$(divId).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Login form -->
<div class="log form" id="login" style="display: none">
<h2>Log in</h2>
<form class="form_log">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Don't have an account ? Sign up</p>
</form>
</div>
<!-- Register form -->
<div class="register form" id="register">
<h2>Sign upn</h2>
<form class="form_register">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Already registered ? Log in</p>
</form>
</div>

jQuery: How to get the object of the form who's submit button was clicked?

I've multiple forms in my html based web page. I have a 'Submit' button on each of the form. Whenever I fill a form and click on it's submit button, I want to know which form was submitted. Means, upon pressing a submit button I want to know the details of the associated form (all forms have the similar button).
Stuff like getting the entire form object or id or name of the submitted form will also work.
My JQuery code is :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$( "form" ).submit(function () {
var val = $("input[type=submit][clicked=true]").val();
(1) console.log(val);
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
</script>
My html code containing the forms is:
<!-- This is form number 1 -->
<form align="center" class="nav nav-list" id="myFormCS" method="POST" action="#" > <!-- <- I want this info -->
<p> <input type="hidden" name="productid" value="4"> </p>
<p> <input type="hidden" name="version" value="1"> </p>
<p> <input id="field_email" type="email" placeholder="Enter email address" name="eml1" required></p>
<p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password" name="pwd1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Free"> **<-- (1) is getting me this info**
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
<!-- This is form number 2 -->
<form align="center" class="nav nav-list" id="myFormGE" method="POST" action="#" >
<p> <input type="hidden" name="productid" value="14"> </p>
<p> <input type="hidden" name="version" value="1"> </p>
<p> <input id="field_username" type="text" placeholder="Enter user name" name="usrnm" required></p>
<p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password" name="pwd1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Register">
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
<!-- This is form number 3 -->
<form align="center" class="nav nav-list" id="myFormVI" method="POST" action="#" >
<p> <input type="hidden" name="productid" value="7"> </p>
<p> <input type="hidden" name="version" value="2"> </p>
<p> <input id="field_city" type="text" placeholder="Enter city name" name="city1" required></p>
<p> <input id="field_phone" type="text" placeholder="Enter phone number" name="phn1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Buy now">
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
Something like this?
$("form input[type=submit]").click(function() {
var frmID = $(this).closest('form').attr('id');
alert(frmID);
});
jsFiddle
You can use a submit listener for the form and get the object. Something like this:
$("form").submit(function (e) {
e.preventDefault();
var form = $(this);
console.log(form);
});
That form object is what I think you are looking for.

TinyBox how get passing value from parent pages

Recently I have faced a problem which do not know how to pass value from parent page to a tinybox. The following is my source code; is there any idea can help me to achieve this? A edit.php wrap inside a tinybox so when I click on a specific column suppose the value should pass to the edit.php (tinybox) and also the value will display on the textfield, but it just simply doesn't work. I am new in PHP would appreciate for some one pointing me to good solution.
parent page.php
display_cell6.appendChild(edit).innerHTML='<img id="edit" alt="Edit" class="'+obj[idx].id+'" onclick="TINY.box.show({iframe:\'ajaxEditUserDetail.php\',boxid:\'frameless\',width:400,height:280,openjs:function(){openJS(this.id)}}); title="Edit" src="images/edit.png"></img>';
function openJS(id){
var id=parent.document.getElementById(id);
alert(id);
}
edit.php
<div id="banner">
<span>Edit Customer Information</span>
</div>
<div id="form_container">
<fieldset>
<div class="box-form">
<form action="send.php" method="POST" id="userDetail" >
<fieldset>
<div>
<label for="name_Req">Name <strong>*</strong></label>
<input type="text" id="name_Req" name="name" value="test"
title="Required! Please enter your name" />
</div>
<div>
<label for="contact_Req_Email">E-mail <strong>*</strong></label>
<input type="text" id="contact_Req_Email" name="email"
title="Required! Please enter a valid email address" />
</div>
<div>
<label for="telephone_Tel">Telephone</label>
<input type="text" id="telephone_Tel" name="telephone"
title="Please enter a valid telephone number" />
</div>
<div>
<label for="address">Address</label>
<input type="text" id="address" name="address" title="Please enter a
valid address" />
</div>
<div>
<input type="submit" value="Save" id="sub" class="button" />
</div>
</fieldset>
</form>
</div>
</fieldset>
</div>

Embedded Form Doesn't Show Values in IE

I've embedded these types of customized mailchimp forms on multiple sites with great success across all browsers, but for some reason, this particular iteration isn't working in IE. The site itself is http://www.buildinggurus.com/ and this form appears on the home page and sidebars of the inner pages.
What happens in IE is the input fields appear as blank boxes. The input value isn't visible, clicking the input field doesn't do anything (read: you can't type into it), and it seems more like a placeholder than a call to action. What am I missing here?
<div id="mc_embed_signup">
<form action="URLHERE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="widget-lead-form"><h5>Subscribe to Our Blog</h5>
<div class="mc-field-group">
<input type="text" value="first name" name="FNAME" class="required-name" id="mce-FNAME" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'first name':this.value;" required />
</div>
<div class="mc-field-group">
<input type="text" value="last name" name="LNAME" class="required-name" id="mce-LNAME" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'last name':this.value;" required />
</div>
<div class="mc-field-group">
<input value="enter your email" name="EMAIL" type="email" class="required-email" id="mce-EMAIL" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter your email':this.value;" required />
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clear">
<input type="submit" name="subscribe" class="submit" id="mc-embedded-subscribe" value="submit" /></div>
</div>
</form>
</div>
IE still requires a value to be set. The following I use in all of my form input tags:
onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'default value':this.value;" value="default value"

using document.innerHTML to dynamically generate form within div tag

There is a div tag with a form inside of it on my website as follows:
<div class="col-1">
<h4>Login</h4>
<form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post">
<fieldset>
<p>Already registered? Please log in below:</p>
<ul class="form-list">
<li>
<label for="login-email">Email Address</label>
<div class="input-box">
<input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" />
</div>
</li>
<li>
<label for="login-password">Password</label>
<div class="input-box">
<input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" />
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set form-buttons btn-only">
<button type="button" class="button" onclick="loginForm.submit()"><span><span>Login</span></span></button>
Forgot your password?
</div>
</form>
</div>
The form submission functions fine, until I attempt to generate the exact same content within the div tag using .innerHTML on the "col-1" div tag. I use .innerHTML to replace the HTML in "col-1" with the following:
<h4>Login</h4>
<form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post">
<fieldset><p>Already registered? Please log in below:</p>
<ul class="form-list">
<li>
<label for="login-email">Email Address</label>
<div class="input-box">
<input class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" type="text">
</div>
</li>
<li>
<label for="login-password">Password</label>
<div class="input-box">
<input class="input-text validate-password required-entry" id="login-password" name="login[password]" type="password">
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set form-buttons btn-only">
<button type="button" class="button" onclick="loginForm.submit()">
<span><span>Login</span></span>
</button>
Forgot your password?
</div>
</form>
Why does the submit button (or pressing enter for that matter) not submit the form when it is generated from .innerHTML? I checked the generated HTML in Firefox and it is exactly the same as the original HTML (as it should be), but will not submit...
Just for reference, this is the actual call to .innerHTML to replace the HTML within the "col-1" div tag:
loginFormDivTag.innerHTML='<h4>Login</h4><form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post"><fieldset><p>Already registered? Please log in below:</p><ul class="form-list"><li><label for="login-email">Email Address</label><div class="input-box"><input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" /></div></li><li><label for="login-password">Password</label><div class="input-box"><input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" /></div></li></ul></fieldset><div class="buttons-set form-buttons btn-only"><button type="button" class="button" onclick="loginForm.submit()"><span><span>Login</span></span></button>Forgot your password?</div></form>';
My ultimate goal is to add an "onsubmit" method to the form, is there an easier way to do that? Perhaps with jQuery?
loginForm, from your button's onclick, isn't defined here so I'm assuming it's defined before you replace the innerHTML.
Because you're replacing the structure, loginForm is now referencing a dead form. Try:
<button ... onclick="this.form.submit();">
As for why enter isn't working, you need a submit button (<input type="submit">), not a <button>
I think there's an error with button's onClick call, I would change that innerHTML text to
loginFormDivTag.innerHTML='<h4>Login</h4><form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post"><fieldset><p>Already registered? Please log in below:</p><ul class="form-list"><li><label for="login-email">Email Address</label><div class="input-box"><input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" /></div></li><li><label for="login-password">Password</label><div class="input-box"><input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" /></div></li></ul></fieldset><div class="buttons-set form-buttons btn-only"><button type="button" class="button" onclick="document.forms.login-form.submit()"><span><span>Login</span></span></button>Forgot your password?</div></form>';
Using jQuery I'd do something like this
The HTML
<!-- I'd grab form text from here -->
<div id="div-form-content" style="display:none">
<h4>Login</h4>
<form id="login-form" name="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post">
<fieldset>
<p>Already registered? Please log in below:</p>
<ul class="form-list">
<li>
<label for="login-email">Email Address</label>
<div class="input-box">
<input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" />
</div>
</li>
<li>
<label for="login-password">Password</label>
<div class="input-box">
<input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" />
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set form-buttons btn-only">
<button type="button" class="button" onclick="$('#login-form').submit()"><span><span>Login</span></span></button>
Forgot your password?
</div>
</form>
And, here' the script, that goes on your head section of the page
<script type="text/javascript">
$(document).ready(function(){
// get the the innerHTML from #div-form-content and add it to .col-1
$('.col-1').html($('#div-form-content').html());
//remove innerHTML from #div-form-content, we don't want two forms with same ID in the same page
$('#div-form-content').html('');
});
</script>
Not exactly sure, if it makes any easier but, I hope it helps. cheers

Categories

Resources