I'm trying to complete an email submission form.
I want to show a thank you message when form is submitted (when submit button is clicked)
This is my current code in index.html fie
I don't want window alert like this
I want to hide email box and subscribe button by displaying "Thank you" message.
function call_mailm() {
$.ajax({
url: "http://google.com/form/" + $("#name").val(),
success: function(result) {
alert("Mail sent successfully");
},
error: function(error) {
alert("There is some problem with mail");
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Begin Signup Form -->
<div id="mc_embed_signup">
<form>
<input type="text" id="name" name="email" class="required email" id="email" placeholder="Email Address" style="font-size:15pt;height:38px;width:350px;font- family:Century Gothic;">
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_438e8df85b7f9df7fce94287a_013c74a5bc" tabindex="-1" value="">
</div>
<button onclick="return call_mailm()" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color: rgba(14,46,71,1);border: 1px solid #0E2E47;width:150px;height:37px;font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;font-size:24px;color:white;">Subscribe</button>
<div id="mce-responses" class="clear">
<div class="response" id="error" style="display:none"></div>
<div class="response" id="success" style="display:none"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
inside of tag like this
<div id="success">
Congrats! <br>
Thank you for subscribing
</div>
Add a new div with a thank you message and delete/hide the form. Simplest example:
$.ajax({url: "http://google.com/form/"+$("#name").val(),
success: function(result){
$('#mc_embed_signup').html('<div>Thank you!</div>');
},
error: function (error) {
alert("There is some problem with mail");
}
});
Related
The code below shows a multi step form, the second page displays two buttons next and previous and for some reason the previous button doesn't work. I tried playing with code a lot but I couldn't figure it out. Please help.
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Details</h3>
<div class="inputlabel">
<label>Exchange</label>
</div>
<input type="text" placeholder="Exchange..">
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Title</h3>
<div class="inputlabel">
<label>Balance</label>
</div>
<input type="text" placeholder="Password" readonly>
<div class="btnpre" onclick="prvbtn()" id="btnprevious">Previous</div>
<input class="submit button" type="submit" value="Finish">
</fieldset>
<fieldset class="section">
<i class="fas fa-check-circle fa-7x"></i>
<h2>Saved</h2>
<p>Your Data has been saved</p>
<div class="button" id="button2">Close</div>
</fieldset>
</form>
This is the jQuery script
<script>
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
function prvbtn(){
if(currentSectionIndex === 1){
currentSectionIndex = 0;
}
if(currentSectionIndex === 2){
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
</script>
Consider the following example.
$(function() {
// Define a Global Index
var sectionIndex = 0;
$(".form-wrapper .button").click(function() {
// Examine the button and determine which button was clicked
if ($(this).hasClass("next")) {
// Use the current Index and them increment it
$(".section").eq(sectionIndex++).toggleClass("is-active");
$(".section").eq(sectionIndex).toggleClass("is-active");
} else {
// Use the current Index and them decrement it
$(".section").eq(sectionIndex--).toggleClass("is-active");
$(".section").eq(sectionIndex).toggleClass("is-active");
}
});
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
});
.section {
display: none;
}
.section.is-active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Details</h3>
<div class="inputlabel">
<label>Exchange</label>
</div>
<input type="text" placeholder="Exchange..">
<div class="next button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Title</h3>
<div class="inputlabel">
<label>Balance</label>
</div>
<input type="text" placeholder="Password" readonly>
<div class="previous button" id="btnprevious">Previous</div>
<input class="submit button" type="submit" value="Finish">
</fieldset>
<fieldset class="section">
<i class="fas fa-check-circle fa-7x"></i>
<h2>Saved</h2>
<p>Your Data has been saved</p>
<div class="button" id="button2">Close</div>
</fieldset>
</form>
This assigns one callback to all button elements. With an if statement, we can easily determine the direction.
I have been working on a website, but for some reason when I click enter it stays on the same page. But when I click the button I added on the page itself it works. What I'm trying to do is go from my login page, index.html, to my home page after the password is verified, home.html. Any Ideas?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" autocomplete="off">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button class="enter" type="button" onclick="done()">Enter</button>
</p>
</form>
</div>
<div id="wrong">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
<!--Javascript to show password Box-->
<script>
//Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
location.replace("http://apr.great-site.net/Home/home.html");
} else {
document.getElementById("wrong").style.display = "block";
}
};
function toggle() {
var x = document.getElementById("p");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>
```````````````````````````````````````````
// Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
// returning true will submit the form
return true;
} else {
document.getElementById("wrong").style.display = "block";
// returning false will prevent submiting the form
return false;
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" action="validationUrlHere" autocomplete="off" onsubmit="return done();">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<!-- Commented this button as it is not needed in the context of the solution -->
<!--<button class="unmask" type="button" onclick="toggle()">something</button>-->
<!-- HERE is the interesting part : -->
<!-- Clicking the "Enter" button has same effect as -->
<!-- hitting the default submit button or pressing the Enter button on your -->
<!-- keyboard. Your cursor focus must be inside one of the form's elements, -->
<!-- preferably in the password input field -->
<button class="enter" type="button" onclick="done()">Enter</button>
<input type="submit" value="Real Submit" />
</p>
</form>
</div>
<div id="wrong" style="display: none;">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
</body>
</html>
Take a look at this snippet, take what you need from it. To be honest, it's not clear what you are seeking... hope it will help you understand some basics :-)
Try this :
<form onSubmit="done()">
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button type="submit" class="enter">Enter</button>
</p>
</form>
If you want the function done() to be called when you hit enter you should add an event listener for Enter on your form. (Have in mind that you opened 2 form tags)
document.getElementById('myform-search').addEventListener('keyup', function(e) {
if(e.key=='Enter') {
done()
}
}
when i redirect by using (ui-view) i face like this you can see image...
but i want to redirect to second page and login page should be hide using ui-view?
html code:here you can see
<div class="log-w3" ng-app="log" ng-controller="logcontroller">
<div class="w3layouts-main">
<h2>Sign In Now</h2>
<input type="text" ng-model="log.UserName" class="ggg" name="UserName" placeholder="E-MAIL" required="">
<input type="password" id="txtpassword" class="ggg" ng-model="log.Password" name="Password" placeholder="PASSWORD" required="">
<span><input type="checkbox" />Remember Me</span>
<h6>Forgot Password?</h6>
<div class="clearfix"></div>
<input type="submit" ng-click="login(log)" value="Sign In" name="login">
<img src="~/Design/images/loader.gif" id="loader" width="80" height="80" />
<div class="alert alert-success alert-dismissible" id="msg">
<strong>Success!</strong> Congraculation You Have Successfully Login!
</div>
<div class="alert alert-danger alert-dismissible" id="error">
×
<strong>Danger!</strong> Invalid Username or Password!
</div>
<p>Don't Have an Account ?Create an account</p>
</div>
<ui-view></ui-view>
</div>
angular js code:you can see the angular js code i use $state.go
.controller('logcontroller', function ($scope, Notification, $state, $http, cfpLoadingBar) {
$scope.login = function (log) {
$http.post("/Login/Info", log).then(function (response) {
cfpLoadingBar.start();
//console.log(JSON.stringify(response))
if (response.data.success) {
console.log('Login sucessfull');
Notification.success(response.data.message)
$state.go("/Log");
} else {
//alert(response.data.message)
Notification.error(response.data.message)
}
cfpLoadingBar.complete();
}, function () {
alert("Wrong ha")
})
}
})
.config(function ($stateProvider) {
$stateProvider
.state("/Log",
{
url: "Welcome",
templateUrl: "/Dash/Index"
})
});
<script>
function save_user()
{
const uid = document.getElementById('user_id');
const userpwd = document.getElementById('user_pwd');
const btnregister=document.getElementById('btn-action');
//btnregister.addEventListener('click', e=>
//{
const email=uid.value;
const pass=userpwd.value;
firebase.auth().signInWithEmailAndPassword(email, pass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
console.log(error.Message);
});
firebase.auth().onAuthStateChanged(function(user) {
if(user) {
window.location='userpage.html';
}
});
}
</script>
<link href="page2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bg">
<img src="images/5.jpg" alt="">
</div>
<div class="loginbox">
<img src="images/logo.jpg" class="user"/>
<form action="" method="post">
<p>Email</p>
<input type="text" name="" placeholder="Enter Email" id="user_id"/>
<p>Password</p>
<input type="password" name="" placeholder="......" id="user_pwd"/>
</br>
</br>
</br>
<input type="button" name="" value="Sign In" id="btn-action" onclick="save_user();">
Forgot Password
Register
</form>
</div>
</body>
</html>
I want to provide user authentication through firebase but sign in page is accepting invalid inputs.How to print an error message if the user is not present in Firebase authentication?
You may simple use html5 input regex to able correct email format into input:
<form action="" method="post">
<input id="emailAddress" type="email"pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/">
<input type="submit">
</form>
I'm testing out using iron-form with custom elements. The issue I'm having is the form is not being submitted when I press enter. For example this form right here works on enter:
<iron-form>
<form id="loginForm">
<paper-card heading="Welcome Back!" elevation="1" animated-shadow="true">
<div class="card-content">
<input type="text" label="Username" value="{{username}}">
<input type="text" label="Password" value="{{password}}">
</div>
<div class="card-actions">
<button disabled$="[[fetching]]" type="submit">Login</button>
</div>
</paper-card>
</form>
</iron-form>
I have an event listener in my connectedCallback method listening for the iron-form-presubmit event
connectedCallback() {
super.connectedCallback();
this.addEventListener('iron-form-presubmit', function(event) {
event.preventDefault();
alert('working')
});
}
The issue is when I switch the html input elements to paper-input elements the form no longer submits on enter.
<iron-form>
<form id="loginForm">
<paper-card heading="Welcome Back!" elevation="1" animated-shadow="true">
<div class="card-content">
<paper-input type="text" label="Username" value="{{username}}"></paper-input>
<paper-input type="text" label="Password" value="{{password}}"></paper-input>
</div>
<div class="card-actions">
<button disabled$="[[fetching]]" type="submit">Login</button>
</div>
</paper-card>
</form>
</iron-form>
You can use <iron-a11y-keys> to call a submit method when the [enter] key is pressed.
<iron-a11y-keys target="loginForm" keys="enter" on-keys-pressed="submit"></iron-a11y-keys>
<iron-form id="loginForm">
...
</iron-form>
In your custom element definition, add a method:
submit: function () {
this.$.loginForm.submit();
}