Show div on page after clicking on Mailchimp submit button - javascript

I have a MailChimp form embedded on a static HTML page and I want the section that has the form to show a "Thank you" message after they enter their email and submit.
Mind you, on clicking the submit form, a Mailchimp confirmation page opens in a new tab. But on the page, I would like to have a hidden div show like below...
preview
Some of the examples I see require adding an id to the button but MailChimp already requires an id on the element.
Here is a fiddle: https://jsfiddle.net/Seizedev/j3vofubr/7/
<!DOCTYPE html>
<html lang="en">
<body>
<div id="join">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email">
<button type="submit" value="subscribe" name="subscribe" id="mc-embedded-subscribe">Subscribe</button>
</form>
</div>
<div id="success-msg" style="display: none;">
<p>Thanks for joining! We’ll stay in touch.</p>
<a class="share-btn" href="">Share</a>
</div>
</body>
</html>
I was trying to do this with jquery using an example
<script>
$('#btnClick').on('click', function() {
if ($('#join-tour').css('display') != 'none') {
$('#success-msg').html($('#success-msg').html()).show().siblings('div').hide();
} else if ($('#2').css('display') != 'none') {
$('#join-tour').show().siblings('div').hide();
}
});
</script>

Related

How do I create a pop up modal on successful form submission?

I have an HTML form connected to formsubmit.co form endpoint.
<form action="https://formsubmit.co/my#email.com" method="POST" class="form">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">Submit</button>
</form>
I've added <input type="hidden" name="_next" value="https://mydomain.co/thanks.html"> to redirect back to the original page after submission is required.
I've also disabled the reCAPTCHA using <input type="hidden" name="_captcha" value="false">, so when the form is submitted, the page just reloads.
The problem is the user doesn't know anything has happened after form submission, the page just loads for some time and then reloads.
I don't want to create another page for this, I actually want to use a modal for it.
I tried adding a submit event listener, and when that event is triggered, an alert is shown; but the alert shows even before the form submission process begins.
function alertSubmit() {
alert('Your details were successfully received.');
}
const form = document.querySelector('form');
form.addEventListener('submit', alertSubmit);
How can I display an alert immediately after the form is successfully submitted and not when the submit button is clicked?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form action="https://formsubmit.co/your#email.com" method="POST" class="form">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$('.form').on('submit', function(){
swal("Title", "Message Content", "success", {
button: "Ok",
});
});
});
</script>
You can do following changes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="https://formsubmit.co/your#email.com" method="POST" class="form">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$('.form').on('submit', function(){
alert('Your details were successfully received.');
});
});
</script>

JQuery ajaxSubmit function is not working for a form in an AngularJS HTML page

I am trying to patch up a legacy image upload code with AngularJS.
I have an HTML page which contains a form. Following is the HTML part of the code.
<form name="testForm" ng-init="testfunc()" novalidate>
<div id="adduser_header">
<div>
<p><b>Add new user</b></p>
</div>
</div>
<div id="userInfo">
<div>
<label>First Name</label>
<input type="text" name="fname" required>
</div>
<div>
<label>Last Name</label>
<input type="text" name="lname" required>
</div>
<div>
<form id="imageuploadForm"
action="/Projectname/jersey/ImageUploader/uploadimage"
method="POST" enctype="multipart/form-data"
accept-charset="utf-8" name="submitForm">
<div>
<input id="imagename" type="text" readonly="readonly"
placeholder="Click browse to upload image">
<div id="uploadImgBtn" onclick="getImgFile()">
<span>Browse</span>
</div>
</div>
<input id="userID" name="userID" type="hidden">
<input id="userImage" name="userImage" type="hidden">
<input id="usertType" name="usertType" type="hidden">
<p style="display: none;">this is your file input tag, so i hide it!
i used the onchange event to fire the form submission</p>
<div><input id="uploadimgfile" type="file" value="upload"
required="required" autofocus="autofocus"
name="imgfile"
onchange="upImgFile(this, event)">
</div>
<input style="display: none;" type="submit" value="Send">
</form>
</div>
</div>
<div id="action_buttons">
<input id="save_user" value="Add User" type="button"
title="Add User"
ng-click="submitRegistrationForm()"
ng-disabled="testForm.$invalid">
<a ui-sref="home-admin" ng-click="return()">
<input id="canceltoreturn" value="Cancel" type="button" title="Cancel">
</a>
</div>
</form>
I am able to Browse and select an image without any problem. My problem begins when i try to submit this AngularJS form. When i click Add User, i am first submitting AngularJS form named testForm which returns a success with an ID of the user. This ID is passed to the following patch of code (legacy):
uploadImage: function(id)
{
if($('#imageuploadForm').find('#userImage').val() != "")
{
$("#imageuploadForm").find("#userID").val(id);
var uploadstatus = null;
$("#imageuploadForm").ajaxSubmit({
success: function(data)
{
uploadstatus = data;
if(uploadstatus == "uploaded")
{
console.log("Uploaded Successfully!");
}
if(uploadstatus == "updated")
{
console.log("Updated Successfully!");
}
else
if(uploadstatus == "problem" || uploadstatus == "notuploaded")
{
console.log("Some problem occurred!");
}
$("#imagename").val("");
$('#imageuploadForm').find('#userImage').val("");
},
error: function(xhr, ajaxOptions, thrownError)
{
console.log(xhr.status);
}
});
}
else
{
alert("Please select some image to upload!")
}
}
When i am debugging the code, it comes till the line.
$("#imageuploadForm").ajaxSubmit
But nothing happens further. The service mentioned in the action attribute (/Projectname/jersey/ImageUploader/uploadimage) is not called at all.
This ajaxSubmit has worked well when the form was purely in HTML. (Also, i am using jquery.form.js for the ajaxSubmit function.)
But since i have tailored the code in AngularJS way, image uploading has stopped working.
What am i doing wrong here? I am not able to understand it. How can i resolve this issue?
It is illegal to nest <form> elements.
From the Docs:
The HTML <form> element represents a document section containing interactive controls for submitting information.
Content categories: Flow content, palpable content
Permitted content: Flow content, but not containing <form> elements
Tag omission: None, both the starting and ending tag are mandatory.
Permitted parents: Any element that accepts flow content
For more information, see
MDN HTML Reference - <form> Element
How to use AngularJS $http to send multipart/form-data

Hide div with the trigger of the function inside the div

Maybe is not easy to understand from the title but im trying to make a login/register form with only javascript.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prueba.css">
</head>
<body>
<div id="Div1">
<form class="login-form">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button>login</button>
<p class="message">Not registered?
<button onclick="switchVisible()">Register</button>
</p>
</form>
</div>
<div id="Div2">
<form class="register-form">
<input type="text" placeholder="name" />
<input type="password" placeholder="password" />
<input type="text" placeholder="email address" />
<button>create</button>
<p class="message">Already registered?
<button onclick="switchVisible()">Login</button>
</p>
</form>
</div>
<button onclick="switchVisible()">Swap</button>
<script src="prueba.js"></script>
</body>
</html>
Swap button works fine but the ones inside form dont. I want to leave just the ones inside the form.
Edit: prueba.js
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display == 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
else {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
}
}
Basically, what i want to show is only one form, if you are on the login form, you can press the "Register" from "Not registered yet?" and it will show the register form, and viceversa.
If you check https://www.instagram.com/ login page you will get it. The thing is i want the swap button to be personalized, but the button only works if its outside the div i want to hide/show.
I just created a basic demo of this issue: https://jsfiddle.net/bv5m42od .
It appears that the issue is that the buttons inside the divs are submitting the form before the JavaScript can be executed.
Adding the attribute type="button" to the <button> tags will prevent this, and allow the Javascript to execute before the page is posted back, e.g:
<button type="button" onclick="switchVisible()">Register</button>
See working example: https://jsfiddle.net/bv5m42od/1
As another alternative, you could simply place these buttons outside the <form> tags, without needing to add the attribute.

Show a div after submitting a form and keep the information of the form

I need to show a div after receiving info from a form. I got a good code to show the div after submitting the code, but for this code work, I need to use return false so the page doesn't reload.
Here is the code:
function showHide() {
document.getElementById("hidden").style.display = "block";
}
#hidden {
display: none;
}
<html>
<body>
<form action="" method="post" class="generator-form" onsubmit="showHide(); return false">
<label for="name">
<input type="text" name="nome" placeholder="Insira seu nome" required>
</label>
<input type="submit" value="go">
<div id="hidden">hello</div>
</body>
</html>
PS: I don't know why the js is not working in here, in codepen it's.
So, here's the thing:
I can't use return: false because I do need to return these values; and
I don't want to use onclick() because when the user clicks on the
button it'll show a blank box.
To explain better, I'll get the infos I got in the form and show them in the previously hidden div. It's a signature generator for email.
There's someway I can do this with javascript or php?
Try this:
<?php
$show ="none";
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$show = "block";
}
?>
<html>
<body>
<form action="" method="post" class="generator-form" onsubmit="showHide(); return false">
<label for="name">
<input type="text" name="nome" placeholder="Insira seu nome" required>
</label>
<input type="submit" value="go">
<div style="display:<?php echo $show;?>">hello</div>
</body>
</html>

JavaScript Validation Form not working

I'm trying to validate my form so that if the user doesn't enter the username or the password, he isn't allowed to login to the website. For some reason, when I do enter both the username and password fields, and click login, the login.html page doesn't appear. Any help?
<script>
window.onload = function(){
function handleinput(){
if(document.loginform.username.value == ""){
document.getElementById("usernameError").innerHTML = "You must enter a username";
return false;
}
if(document.loginform.password.value == ""){
document.getElementById("passwordError").innerHTML = "You must enter a password";
return false;
}
}
document.getElementById("loginform").onsubmit = handleinput;
}
</script>
<form id="loginform" name="loginform" method="post">
<div>
<label hidden> Username</label>
<input type= "text" class="text" placeholder="Username" title="Username" name="username">
<span id="usernameError"></span>
<label hidden> Password </label>
<input type= "password" class="text" placeholder="Password" title="Password" name="password">
<span id="passwordError"></span>
Forgot password?
</div>
<div class="button-container">
<a href="login.html" target="_blank"> <input type= "submit" value="Login" class="login"/>
</a>
<input type= "button" value="Sign up" class="login signup"/>
</div>
</form>
You had your submit button wrapped in an a element that was pointing to login.html, which is not how to properly redirect after a form submission. This will also cause problems with handling events because of event bubbling and/or capturing.
In actuality, you haven't specified where the form should send its data to in your form tag:
<form id="loginform" name="loginform" method="post">
Which (by default) means that the form will send its data to the current page (causing the same page to reload, but have the form data accessible to it in this updated load).
To send the data to a different page/resource, the form needs to have an action attribute which specifies the path to the destination:
<form id="loginform" name="loginform" method="post" action="login.html">
See this for details on submitting forms.
Stack Overflow's code snippet environment doesn't allow for form submissions, but check out this Fiddle which has an updated version of your code that works.

Categories