As the image below illustrates, I have two forms and two buttons. Currently all the forms are visible.
How can I only show the requested form "according to the option they have selected (from the blue buttons on the top)"?
So, if the user clicked on the "send an invite" button, the sent an invite form will appear and the blue buttons will disappear "you can go back by clicking the back button".
Is it possible to use dynamic ID dedication using JS to achieve this? as I will have more than 2 options on some pages etc... For example, give the <a class="button button-box"><p>Send an invite</p></a> an id "#send-and-invite-form", it will then find the form that has that ID and show it. Then hide the div that contains those boxes until clicked back.
Here is a simplified HTML structure:
<div>
<a class="button button-box"><p>Send an invite</p></a>
<a class="button button-box"><p>Add manually</p></a>
</div>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
Keep both the forms hidden at first and give a ID to each <a> and also to the <form>
Then
$("#id-of-btn1").click(function(){
$("#form-1").toggle();
});
and
$("#id-of-btn2").click(function(){
$("#form-2").toggle();
});
EDIT:
This could be a solution to make it completely independent of ID/Classes.
If you give a class to div containing all the <a> then
$(".class-of-div a").click(function(){
var t=$(this).index();
$("body").find("form").hide();
$("body").find("form:eq("+t+")").toggle();
});
This will work for corresponding <a> and <form> only,so make sure that you have them in order.
.show{display:block;}
.hide{display:none;}
<a class="button button-box" id="lnkInvite" ><p>Send an invite</p></a>
<a class="button button-box" id="lnkManually"><p>Add manually</p></a>
<form data-parsley-validate class="hide">Send an Invite Form</form>
<form data-parsley-validate class="hide">Add manually form</form>
<script type="text\javascript">
$().ready(function(){
$("#lnkInvite").click(function(){
/*Toggle the show hide css class*/
});
$("#lnkManually").click(function(){
/*Toggle the show hide css class*/
});
});
</script>
You can achieve this with the help of :target pseudo selector. This is pure CSS solution:
form {
display: none;
}
form:target {
display: block;
}
<div> <a class="button button-box" href="#send-and-invite-form"><p>Send an invite</p></a>
<a class="button button-box" href="#add-manually"><p>Add manually</p></a>
</div>
<form id="send-and-invite-form" data-parsley-validate>
Invite
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
<form id="add-manually" data-parsley-validate>
Manually
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
It is also possible to have default tag preselected, however it requires changing order of forms and using tricky selector:
form, form:target ~ #send-and-invite-form {
display: none;
}
#send-and-invite-form, form:target {
display: block;
}
Demo: http://jsfiddle.net/dfsq/5633tu4c/
Simmple solution using js and style attributes.
<html>
<head>
<script>
function showhide1(){
document.getElementById("form1").style.display='block';
document.getElementById("form2").style.display='none';
}
function showhide2(){
document.getElementById("form2").style.display='block';
document.getElementById("form1").style.display='none';
}
</script>
</head>
<body>
<div>
<a class="button button-box" onclick="showhide1()"><p>Send an invite</p></a>
<a class="button button-box" onclick="showhide2()"><p>Add manually</p></a>
</div>
<form data-parsley-validate id="form1" >
<fieldset>
<div>
<input name="" type="email" placeholder="Email address1" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate id="form2">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<script>
document.getElementById("form2").style.display='none';
document.getElementById("form1").style.display='none';
</script>
</body>
</html>
Keep both forms hidden until the button for each is clicked. Clicking the respective button will show the required form AND hide the button. Click back hides the form and shows the button again.
I implemented for the invite section. You will have to implement for the manual as well, but hopefully this points you in the right direction. Also, I skipped the jQuery, but obviously this is your choice.
CSS
.hidden{
display: none;
}
HTML
<div> <a id="inviteButton" class="button button-box"><p>Send an invite</p></a></div>
<form id="inviteForm" class="hidden">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a id="backButtonInvite">Back</a></div>
</form>
Javascript
var inviteButton = document.querySelector("#inviteButton");
var inviteForm = document.querySelector("#inviteForm");
var backButtonInvite = document.querySelector("#backButtonInvite");
inviteButton.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
this.classList.toggle("hidden");
});
backButtonInvite.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
inviteButton.classList.toggle("hidden");
});
Here is the fiddle.
Related
I am having trouble toggling between my signup and login forms on a page. I'm not too familiar with JavaScript and jQuery but that is what I am using. BTW, is there another way to do this with PHP?
Here's what I've got. My login form is shown when the page is loaded, and the signup form is hidden. When I click the toggle button to show the signup form, nothing happens.
$("#toggle-login").click(function() {
$("#signup").hide().attr("formnovalidate");
$("#login").show();
});
$("#toggle-signup").click(function() {
$("#login").hide().attr("formnovalidate");
$("#signup").show();
});
$("document").ready(function() {
$("#signup").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-data text-center">
<h1 class="form-header">Header</h1>
<div id="login" class="main-login">
<form class="login-form" action="includes/login.inc.php" method="post">
<input name="mailuid" type="text" placeholder="Page Name"></input>
<br>
<input name="pwd" type="password" placeholder="Password"></input>
<br>
<button name="login-submit" type="submit">Login</button>
</form>
<p>Need to Create an account?</p>
<span class="btn btn-default" href="#" id="toggle-signup">Sign Up/span>
</div>
<div id="signup" class="main-signup text-center">
<form class="signup-form" action="includes/signup.inc.php" method="post">
<input name="pagename" type="text" placeholder="Page Name"></input>
<br>
<input name="pwd" type="password" placeholder="Password"></input>
<br>
<input name="pwd-repeat" type="password" placeholder="Repeat Password"></input>
<br>
<button name="login-submit" type="submit">Login</button>
</form>
<p>Already have an account?</p>
<span class="btn btn-default" href="#" id="toggle-login">Log In</span>
</div>
</div>
Try moving the <script> block to the bottom of your page. Currently you are trying to attach event click handlers for DOM-Elements that are not present at the moment when the script block is executed.
Alternatively you can move the jQuery click handlers into the jQuery('document').ready() function to make sure the DOM is ready when attaching the click handlers.
Have your script defer so that it loads after the html has loaded
<script src="name_of_your_js_file" defer>
I've made a login screen. There's 2 forms inside one div. One containing login box, the other is for registration which is hidden in css by using display:none;. Below the login button there's a paragraph with a tag to click to register. How can I make it so when you click the a tag it just switches from login form to register form?
Im at the very begining stage if it comes to javascript.
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="e-mail"/>
<button>create</button>
<p class="message">Already have an account? Sign in!</p>
</form>
<form class="login-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<button>Sign in</button>
<p class="message">Need an account? Register!</p>
</form>
</div>
</div>
So here's what I've found on codepen but I can't get it to work on my website:
<script> $('.message a').click(function(){$('form').animate({height: "toggle", opacity: "toggle"}, "slow");}); </script>
One reason that your script may not work is if you included it within the <head>...</head> of the document instead of just before the closing </body> tag.
The reason the script would have failed in this case is due to the <body>...</body> not being loaded when your script runs. Check for any errors in your browser's console.
Another reason is perhaps you loaded jQuery after your custom script. For example:
<script>...</script>
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
instead of:
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
<script>...</script>
Add some css to hide the login form.
$('.message a').click(
function() {
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
}
);
.login-form {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="e-mail"/>
<button>create</button>
<p class="message">Already have an account? Sign in!</p>
</form>
<form class="login-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<button>Sign in</button>
<p class="message">Need an account? Register!</p>
</form>
</div>
</div>
I am creating search form, when user click search icon, i need to show textbox, once i entered content, and again clicked same search icon, it needs to display search results. Below is the code i used.
HTML & Javascript
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;" autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input();" >
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(){
if(jQuery("#search").is(':visible'))
{
if(jQuery("#search").val()!=''){ jQuery("#search_mini_form").submit();
}else{
jQuery("#search").animate({ width: 'hide' });
}
}
else
{
jQuery("#search").animate({ width: 'show' });
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
Right now issue is, when i clicked search icon, it showing search page instead of textbox, any assistance would be appreciated.
Change the inline code from:
<button type="submit" title="Search" id="but" onclick="tog_input();">Submit</button>
To:
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit</button>
Avoid this line:
jQuery("#search_mini_form").submit();
Prevent the form submission only when needed.
So:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;"
autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(obj, e) {
if (jQuery("#search").is(':visible')) {
if (jQuery("#search").val() == '') {
jQuery("#search").animate({width: 'hide'});
e.preventDefault();
}
}
else {
e.preventDefault();
jQuery("#search").animate({width: 'show'});
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
</div>
I'd suggest that it is because your button type is submit. If you change it to button type = "button" then it should work, although you may need another button to submit your form.
You need to prevent default behaviour of submit button else it will end up in action page. To achieve it you need to do as -
function tog_input(e){
e.preventDefault();// prevents default action
... other code
}
I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()
I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).
Here's code for reference:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.
Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
Can anyone explain how to get the submit button to show only after all fields are valid?
Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.
More about forms in angular: https://docs.angularjs.org/api/ng/directive/form
Not tested, but you can use the $valid property of your form like this:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive
It's fairly easy
hide completly
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
visually disable
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">