How to redirect on same page jquery - javascript

I am trying to redirect on same page, it is redirect after database storage. But giving me following error
This page isn’t working
localhost is currently unable to handle this request. HTTP ERROR 500
My script is successfully saving record on database using php with jquery but after inserting data, it's giving me the above page error.
I have to refresh or press f5 in order to come on same page.
here is my code
$(document).ready(function() {
$("input").prop('required', true);
/*---------------------------------------------------------*/
$(".next_btn").click(function() { // Function Runs On NEXT Button Click
$(this).parent().next().fadeIn('slow');
$(this).parent().css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().addClass('active');
});
$(".pre_btn").click(function() { // Function Runs On PREVIOUS Button Click
$(this).parent().prev().fadeIn('slow');
$(this).parent().css({
'display': 'none'
});
// Removing Class Active To Show Steps Backward;
$('.active:last').removeClass('active');
});
});
#import url(http://fonts.googleapis.com/css?family=Droid+Serif);
/* Above line is to import google font style */
.content {
width: 960px;
margin: 20px auto;
}
.main {
float: left;
width: 650px;
margin-top: 80px;
}
#progressbar {
margin: 0;
padding: 0;
font-size: 18px;
}
.active {
color: red;
}
fieldset {
display: none;
width: 350px;
padding: 20px;
margin-top: 50px;
margin-left: 85px;
border-radius: 5px;
box-shadow: 3px 3px 25px 1px gray;
}
#first {
display: block;
width: 350px;
padding: 20px;
margin-top: 50px;
border-radius: 5px;
margin-left: 85px;
box-shadow: 3px 3px 25px 1px gray;
}
input[type=text],
input[type=password],
select {
width: 100%;
margin: 10px 0;
height: 40px;
padding: 5px;
border: 3px solid rgb(236, 176, 220);
border-radius: 4px;
}
textarea {
width: 100%;
margin: 10px 0;
height: 70px;
padding: 5px;
border: 3px solid rgb(236, 176, 220);
border-radius: 4px;
}
input[type=submit],
input[type=button] {
width: 120px;
margin: 15px 25px;
padding: 5px;
height: 40px;
background-color: sienna;
border: none;
border-radius: 4px;
color: white;
font-family: 'Droid Serif', serif;
}
h2,
p {
text-align: center;
font-family: 'Droid Serif', serif;
}
li {
margin-right: 52px;
display: inline;
color: #c1c5cc;
font-family: 'Droid Serif', serif;
}
p.eml {
color: red;
font-size: 17px;
font-family: sans-serif;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
$link=mysqli_connect("localhost","root","sm123#",'crud');
if(isset($_POST["btnsave"]))
{
$email=$_POST["email"];
$password=$_POST["pass"];
$qry="insert tbusr values(null,'$email','$password')";
$res=mysqli_query($link,$qry);
if(mysqli_affected_row($link)==1)
{
echo "Data inserted";
}
else
{
echo "Not";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Myform</title>
<meta content="noindex, nofollow" name="robots">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="custom.js"></script>
<script>
$(document).ready(function() {
$("#email").change(function() {
var a = $("#email").val();
$('.eml').empty();
$('.eml').append(a);
console.log(a);
});
});
</script>
</head>
<body>
<div class="content">
<!-- Multistep Form -->
<div class="main">
<form action="index.php" class="regform" method="post">
<!-- Progress Bar -->
<ul id="progressbar">
<li class="active">Create Account</li>
<li>Please View link</li>
<li>Confirm Your Details</li>
</ul>
<!-- Fieldsets -->
<fieldset id="first">
<h2 class="title">Create your account</h2>
<p class="subtitle">Step 1</p>
<input class="text_field" name="email" placeholder="Email" type="text" id="email">
<input class="text_field" name="pass" placeholder="Password" type="password">
<input class="text_field" name="cpass" placeholder="Confirm Password" type="password">
<input class="next_btn" name="next" type="button" value="Next">
</fieldset>
<fieldset>
<h2 class="title">Please View link</h2>
<p class="subtitle">Step 2</p>
<p>Please click On <b>View</b> to open verfication link tab</p>
<input class="pre_btn" type="button" value="Previous">
<input class="next_btn" name="next" type="button" value="View">
</fieldset>
<fieldset>
<h2 class="title">Confirm Your Details</h2>
<p class="subtitle">Step 3</p>
<p>Please click here to confirm your email address</p>
<p class="eml"></p>
<input class="pre_btn" type="button" value="Previous">
<input class="submit_btn" name="btnsave" type="submit" value="Confirm Email">
</fieldset>
</form>
</div>
</div>
</body>
</html>

Related

Web development implementing the form onclick event

I made this log-in and register form in which an onclick submit button of the form its display which form is submitted, left or right to implement it. I have used onclick property and passed a function to it fun() which has one parameter of the type no. So I used two functions fun(0) and fun(1) used to display a message which forms submitted by the user but it does not display the message.
And also I have a problem with the CSS it's not scaling according to the screen size as I used bootstrap for CSS and try the width, position property scale in % but then also it's not working.
function fun(Number n) {
if (n === 1) {
document.getElementsByClassName('m1').style.display = 'none';
} else {
document.getElementsByClassName('m2').style.display = 'none';
}
document.getElementsByClassName('modal').style.display = 'flex';
}
body {
background: linear-gradient(45deg, #fff722, #ff26f9);
font-weight: bold;
letter-spacing: 2px;
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
text-align: center;
}
input[type=radio] {
width: 9%;
}
input, #e {
width: 100%;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.row {
position: relative;
}
form {
font-size: 20px;
border-bottom: solid 5px #dedfe0;
border-right: solid 5px #dedfe0;
padding: 5px;
width: 500px;
margin: 80px;
}
label {
font-family: arial;
color: #0000ff;
}
#log {
position: absolute;
top: 20px;
right: 20px;
transform: translate(50, 50);
}
button:hover {
opacity: 0.8;
}
.modal, .modal1 {
display: none;
justify-content: center;
align-items: center;
border-radius: 6px;
z-index: 1;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
width: 500px;
height: 300px;
background: linear-gradient(45deg, #fff722, #ff26f9);
position: absolute;
text-align: center;
padding: 2%;
justify-content: center;
align-items: center;
border: solid 5px rgba(100, 0, 50, 0.5);
left: 500px;
top: 180px;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: black;
font-size: 50px;
font-weight: bold;
}
.close:hover, .close:focus {
color: red;
cursor: pointer;
}
.animate {
animation: zoom 10000;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(2)
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<form class="jumbotron" class="column" id="register">
<h1 class="container " style="border: solid 3px grey; color:magenta;
"><b>REGISTER<b></b></h1><br>
<label>First Name:</label><input type="text"><br>
<label>Last Name:</label> <input type="text"><br>
<label>D.O.B:</label> <input type="date"><br>
<label>City:</label> <input type="text"><br>
<label>Mobile No.: </label>
<select style=" width: 20%;">
<option>+91</option>
<option>+92</option>
<option>+93</option>
<option>+94</option>
<option>+95</option>
</select> <input type="text"><br>
<label>Gender:</label>
<div style=" "> <input type="radio" value="Male" name="Gender">Male
<input type="radio" value="Female" name="Gender">Female
<input type="radio" value="Other" name="Gender">Other<br></div>
<label>Employment Status:</label>
<select id="e">
<option>Employed</option>
<option>Unemployed</option>
</select><br><br><br>
<input type="submit" onclick="fun(0)" class="btn-info btn-lg" value=Register>
<input type="reset" class="btn-info btn-lg" value=Reset>
</form>
<div class="column" id="log">
<form class="jumbotron">
<h1 style="border: solid 3px grey; color:magenta;"><b>LOG-IN</b></h1><br>
<label>Email-Id:</label><input type="email"><br>
<label>Username:</label><input type="text"><br>
<label>Password:</label><input type="Password" min,="5"></br><br><br>
<input type="submit" class="btn btn-info btn-lg " onclick="fun(1)" value="LOG-IN">
</form>
</div>
</div>
<nav class="modal">
<div class="modal-content">
<span onclick="document.querySelector('.modal').style.display='none'" class="close">×</span>
<div style="border:solid 5px #dedfe0" class="container">
<h3 class='m1'>Left form submited</h3>
<h3 class='m2'>Right form submited</h3>
</div>
</div>
</nav>
</body>
<script type="text/javascript">
</script>
</html>

How to refresh/revisit the page after clicking submit on a form?

I am making a contact form(which doesn't need to actually contact someone). I want to make it so that when you press the send/submit button, it refreshes the page so that it appears that message has been sent. I am not using Javascript but any ways to do this through Javascript would be appreciated. This is my contact form. This isn't a duplicate because I would prefer if there was a way to do this through Html BUT js answers would be accepted
http://jsfiddle.net/egndc24s/1/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<section class="section1">
<div class="sec1title">
<h1>Get in touch</h1>
</div>
</section>
<section class="section2">
<div class="contactform">
<h5>Drop us a line...</h5>
<form action="#">
<label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i>
<textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send">Send <i class="fa fa-paper-plane"></i></button>
</form>
</div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
</script>
<div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
<div id='gmap_canvas' style='height:100%;width:100%;'></div>
<div>
<small>embed google maps</small>
</div>
<div>
<small>free web directories</small>
</div>
<style>
#gmap_canvas img{max-width:none!important;background:none!important}
</style>
</div>
<script type='text/javascript'>
function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(-37.898677,144.640630),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-37.898677,144.640630)});infowindow = new google.maps.InfoWindow({content:'<strong>My Location<\/strong><br>Eagle Stadium<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>
</section>
</div>
</body>
</html>
\\\\\\
* {
margin:0px;
padding:0px;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
body {
background: #1c1c1c;
color: #333;
font-weight: normal;
font-size: 1em;
font-family: 'Roboto', Arial, sans-serif;
}
input:focus, textarea:focus, keygen:focus, select:focus {
outline: none;
}
::-moz-placeholder {
color: #666;
font-weight: 300;
opacity: 1;
}
::-webkit-input-placeholder {
color: #666;
font-weight: 300;
}
/* contact from design */
.container {
padding: 20px 50px 70px;
}
.sec1title {
text-align: center;
}
.sec1title h1 {
font-size: 40px;
margin: 25px;
text-transform: uppercase;
color: red;
font-weight: 400;
}
.section2 {
position: relative;
overflow: hidden;
}
.section2 .contactform {
position: absolute;
top: 0;
right: 10%;
z-index: 99;
background: #393939;
padding: 30px 40px 70px;
box-sizing: border-box;
}
.section2 .contactform input.form-fields,
.section2 .contactform button.form-fields,
.section2 .contactform textarea.form-fields {
padding: 0 0 0 40px;
display: block;
box-sizing: border-box;
width: 350px;
font-size: 16px;
background: #323232;
margin: 7px 0;
border: 1px solid #00C1A8;
color: #6BECDB;
opacity: 0.5;
min-height: 45px;
text-shadow: none;
position: relative;
}
.section2 .contactform textarea.form-fields {
padding: 8px 40px;
resize: none;
}
.section2 .contactform button.form-fields.button {
color: #16F1D4;
font-size: 14px;
padding: 0;
text-transform: uppercase;
}
.section2 .contactform button.form-fields.button:hover {
background: #00C1A8;
color: #fff;
cursor: pointer;
opacity: 1;
}
.section2 .contactform button.form-fields.button i {
margin-left:10px;
}
.section2 .contactform h5 {
color: #16F1D4;
font-size: 16px;
margin-bottom: 15px;
}
.section2 .contactform label .cntfrmicn {
color: #00C1A8;
padding: 14px;
position: absolute;
z-index: 99;
}
#media only screen and (max-width: 660px) {
.container {
padding: 10px 20px 30px;
}
.contmap {
height: 475px !important;
}
.sec1title h1 {
font-size: 28px;
}
.section2 .contactform { padding: 10px; right: 0; width: 100%; }
.section2 .contactform input.form-fields, .section2 .contactform button.form-fields, .section2 .contactform textarea.form-fields {
width: 100%;
}
}
You can set the form's submit button's onClick event handler to reload the page with location.reload() or location = location (fallback for older browsers).
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<section class="section1">
<div class="sec1title">
<h1>Get in touch</h1>
</div>
</section>
<section class="section2">
<div class="contactform">
<h5>Drop us a line...</h5>
<form action="#">
<label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i>
<textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send" onClick="refreshPage()">Send <i class="fa fa-paper-plane"></i></button>
</form>
</div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
</script>
<div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
<div id='gmap_canvas' style='height:100%;width:100%;'></div>
<div>
<small>embed google maps</small>
</div>
<div>
<small>free web directories</small>
</div>
<style>
#gmap_canvas img{max-width:none!important;background:none!important}
</style>
</div>
<script type='text/javascript'>
function refreshPage(){
console.log("Refreshing page");
location.reload ? location.reload() : location = location;
}
</script>
</section>
</div>
</body>
</html>
Calling location.reload() from javascript will reload the page.
Which url in your backend is handling the form?
If it is the same url as this page, the browser will refresh it for you.
<form action="">
If it is another one, redirect to this page. You can do it server-side or client side.
Another solution using javascript would be to send an ajax request and add on the form onsubmit="location.reload(true)".
https://www.w3schools.com/jsref/event_onsubmit.asp
https://www.w3schools.com/jsref/met_loc_reload.asp

Text input won't work

I have this form in which if this one option is selected, then a specific text input will pop up. I don't know why, but when I select Phone, the text input that pops up won't let me write anything on it.
Here's the code:
function checkType() {
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var emailType = document.getElementById('emailType');
var phoneType = document.getElementById('phoneType');
if (email.checked) {
emailType.style.opacity = "1";
emailType.style.height = "3em";
phoneType.style.opacity = "0";
phoneType.style.height = "0";
} else if (phone.checked) {
emailType.style.opacity = "0";
emailType.style.height = "0";
phoneType.style.opacity = "1";
phoneType.style.height = "3em";
}
}
function showMessage(event) {
event.preventDefault();
var myForm = event.target;
myForm.style.opacity = "0";
myForm.style.height = "0";
myForm.style.transition = ".5s";
document.getElementById('submitted').style.opacity = "1";
document.getElementById('submitted').style.transition = "2s";
}
document.getElementById('myForm').addEventListener("submit", showMessage);
#import url('https://fonts.googleapis.com/css?family=Indie+Flower');
#import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
#import url('https://fonts.googleapis.com/css?family=Bitter');
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*Navigation Styles*/
nav {
background-color: #AC3931;
text-align: right;
margin-top: -100px;
}
nav a {
color: #f6f7eb;
line-height: 2em;
text-decoration: none;
}
/*I made the links' font size in the nav bar bigger. I thought it was too small. I hope that's okay*/
nav li {
font-size: 1.5em;
list-style-type: none;
font-family: 'Bitter', serif;
display: inline-block;
padding: 10px;
font-weight: bold;
}
nav a:hover {
color: black;
}
/*Navigation Styles end*/
/*Header Styles*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: #E18335;
line-height: .2em;
padding-top: 1em;
}
/*Header styles end*/
.pgh {
color: black;
}
/*Images Styles*/
.logo-image {
position: relative;
left: 20px;
top: 0px;
background-color: white;
border: solid 2px #beb7a4;
height: 111px;
width: 115px;
}
.banner-image {
width: 960px;
height: 250px;
border-radius: 15px 50px;
box-shadow: 10px 10px 5px #ccc;
}
.img3 {
width: 450px;
height: 350px;
border-radius: 15px 50px;
box-shadow: 10px 10px 5px #ccc;
}
.img4 {
width: 450px;
height: 350px;
border-radius: 15px 50px;
}
.socialIcon {
width: 40px;
height: 40px;
}
.contactImage {
height: 350px;
width: 450px;
}
/*Images Styles end*/
#content {
width: 960px;
margin: 0 auto;
border-right: 1px solid gray;
border-left: 1px solid gray;
padding-left: 20px;
padding-right: 20px;
background-color: white;
}
#sec1 {
padding: 10px;
}
#sec2 {
background-color: #FBFFB9;
padding: 10px;
}
#sec3 {
text-align: center;
padding: 50px;
}
#calmFont {
font-family: 'Indie Flower', cursive;
}
#intenseFont {
font-family: 'Permanent Marker', cursive;
}
.leftcol {
width: 45%;
float: left;
padding: 10px;
}
.rightcol {
width: 45%;
float: right;
padding: 10px;
}
.nameClassCopy {
float: left;
}
.socialIcons {
float: right;
}
footer {
background-color: #AC3931;
}
body {
background-color: #FFBC42;
}
#emailType {
opacity: 0;
height: 0;
transition: .5s;
}
#phoneType {
opacity: 0;
height: 0;
transition: .5s;
}
#contactPgh {
font-size: 20px;
}
p {
font-family: 'Josefin Sans', sans-serif;
}
#normalFont {
font-family: 'Josefin Sans', sans-serif;
}
#submit {
background-color: #AC3931;
border-radius: 15px 10px;
padding: 10px;
color: white;
box-shadow: 5px 5px 1px #ccc;
}
#submit:hover {
background-color: #FFBC42;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dry Oar | Contact Us</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- import the webpage's javascript file -->
</head>
<body>
<div id="content">
<header>
<img class="logo-image" alt="Logo Picture" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Fdryoarlogo%20copy%202.png?1526759445079">
<br>
<nav>
<ul>
<li> | Home</li>
<li>| Rivers</li>
<li>| Contact Us |</li>
</ul>
</nav>
<br>
<img class="banner-image" alt="Banner" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FredContactBanner.jpg?1531435849381">
<br>
</header>
<div id="normalFont">
<br>
<section id="sec3" class="clearfix">
<h1 style="font-family: 'Josefin Sans', sans-serif;">
Need more information?
</h1>
<p id="contactPgh">
Questions about pricing, location, equipment rental, scheduling or anything else?! Let us know!
</p>
</section>
<!-- Section Two -->
<section id="sec1" class="clearfix">
<!-- Left column -->
<div class="leftcol" style="border-right: 1px solid gray;">
<form id="myForm">
First Name:
<input type="text" placeholder="Arthur" required>
<br>
<br> Last Name:
<input type="text" placeholder="Figueiredo" required>
<br>
<br> Do you prefer to be contacted by e-mail or phone?
<br>
<input type="radio" name="contactType" id="email" onclick="checkType()"> <img style="width: 20px; height: 20px;" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Femail-icon.png?1531433209873"> E-Mail
<br>
<input type="radio" name="contactType" id="phone" onclick="checkType()"> <img style="width: 20px; height: 20px;" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Fphone-icon.png?1531433375571"> Phone
<br>
<div id="emailType">
E-Mail:
<input type="text" placeholder="example#email.com">
</div>
<div id="phoneType">
Phone number:
<input type="text" placeholder="(111)222-3333">
</div>
Your Message:
<br>
<br>
<textarea rows="10" cols="40" id="message" placeholder="Your message here . . ." required></textarea>
<br>
<br>
<input type="submit" id="submit">
</form>
<div id="submitted" style="opacity: 0">
<h2>Thank you for contacting us</h2>
<p>We will get back to you shortly.</p>
</div>
</div>
<!-- Right column -->
<div class="rightcol">
<img class="contactImage" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FcontactLast.png?1531436124712">
</div>
</section>
<br>
</div>
<footer class="clearfix">
<hr>
<div class="NameClassCopy">
© Dry Oar 2018 || Arthur Figueiredo WDD 100‐02
</div>
<div class="socialIcons">
<img class="socialIcon" alt="Facebook Page" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FFacebookYellow.png?1531436293112">
<img class="socialIcon" alt="Youtube Channel" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FyoutubeYellow.png?1531436475201">
<img class="socialIcon" alt="WhatsApp" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FwppYellow.png?1531436410371">
</div>
</footer>
</div>
</body>
</html>
Also, when I select phone and just type something, it won't go into the phone text input box, but when I click on the Email option, whatever I typed will be on its text input box.
I've tried making the email text input disabled if the phone option is selected, but it didn't work. Any suggestions?
Changing the from opacity to display:none still doesn't solve his actual problem. From the code above, he is trying to access a DOM object which is not defined. This would cause Javascript to return an error of undefined. Simply define the emailType and phoneType within your script and see it done bro.
What i mean is this:
var emailType = document.getElementById('emailType');
and
var phoneType = document.getElementById('phoneType');
just add these two lines before the if( conditions.
You can now choose whether or not to use opacity or not......
I think this kind of codes can solve this problems:
if (email.checked) {
document.getElementById("phoneType").style.display = "none";
document.getElementById("emailType").style.display = "";
emailType.style.opacity = "1";
emailType.style.height = "3em";
} else if (phone.checked) {
document.getElementById("emailType").style.display = "none";
document.getElementById("phoneType").style.display = "";
phoneType.style.opacity = "1";
phoneType.style.height = "3em";
}

Submit and change form on button click (embedded forms)

I am trying to create a pop-up form which displays a form initially. Upon completing the form and clicking next, it will submit that form and show another form in its place. However, with my JavaScript being "out of sync", I believe I'm not using the right approach.
Here's what I have so far:
$(document).ready(function() {
$(".modal-content .hs-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();
});
if (currentSectionIndex === 3) {
$(document).find(".modal-content .form-columns-2 .form-columns-1").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
a {
cursor: pointer;
}
p {
margin: 0 0 1rem;
font-weight: 400;
}
a {
color: inherit;
cursor: pointer;
}
ul {
padding-left: 0;
margin: 0;
}
#media (max-width: 1900px) {
.modal .modal-content {
width: 50% !important;
}
.modal input[type=text],
.modal input[type=email] {
margin: 0 !important;
}
.modal textarea {
margin: 0 !important;
}
}
.input textarea {
padding-left: 10px !important;
}
.modal {
display: none;
position: fixed;
z-index: 20;
left: 0;
top: 0;
width: 100% !important;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal .modal-content {
background-color: #097afb;
margin: 4% auto 15% auto;
width: 40%;
padding-bottom: 30px;
border-radius: 3px;
}
.modal .steps {
text-align: center;
}
.modal .steps li {
display: inline-block;
margin: 20px;
color: #fff;
font-size: 0.875rem;
padding-bottom: 5px;
text-transform: uppercase;
}
.modal .imgcontainer {
text-align: center;
position: relative;
display: block;
}
.modal .imgcontainer h2 {
font-size: 29px;
padding-top: 50px;
color: #fff;
margin: 0;
text-transform: uppercase;
}
.modal .imgcontainer p {
font-size: 18px !important;
padding-top: 10px;
color: #fff;
}
.modal input[type=text],
.modal input[type=email] {
width: 90%;
padding: 12px 12px;
margin: 10px 50%;
display: inline-block;
border-bottom: 1px solid #414141;
box-sizing: border-box;
font-size: 16px;
background: transparent;
text-transform: uppercase;
border-top: none;
border-left: none;
box-shadow: none;
border-right: none;
}
.modal textarea {
width: 98% !important;
padding: 12px 20px;
margin: 8px 25%;
display: inline-block;
border-bottom: 1px solid #414141 !important;
box-sizing: border-box;
font-size: 16px !important;
background: transparent;
text-transform: uppercase;
border-top: none !important;
border-left: none !important;
box-shadow: none !important;
border-right: none !important;
resize: none;
}
.modal form span:not(.close) {
display: none !important;
}
.modal form .actions {
padding: 0px 20px 0px 0px;
width: 87%;
display: inline-block;
}
.modal form .actions input[type=submit]:hover {
background-color: #000;
color: #fff;
border: 2px solid #000;
}
.modal .close {
position: absolute;
right: 20px;
top: 15px;
color: #fff;
font-size: 24px;
font-weight: 400;
}
.modal .close:hover {
color: #000;
cursor: pointer;
}
input.hs-input,
textarea.hs-input {
display: inline-block;
width: 210px;
height: 18px;
padding: 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 18px;
color: #666;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}
textarea.hs-input {
padding-top: 5px;
}
textarea.hs-input {
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="visible" class="button-outline hero-button button-arrow" onclick="document.getElementById('modal-wrapper').style.display='block'">Click here</a>
<div id="modal-wrapper" class="modal" style="display: none;">
<div>
<div>
<div>
<div>
<span>
<form class="modal-content animate">
<div class="imgcontainer"><span onclick="document.getElementById('modal-wrapper').style.display='none'" class="close" title="Close PopUp">×</span>
<h2 style="text-align: center;">Title</h2>
<p>Lorum Ipsum</p>
</div>
<div class="container">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
// <![CDATA[
hbspt.forms.create({
portalId: "103687",
formId: "7c124354-e1ff-411d-9245-2b214e943a90"
});
// ]]>
</script>
<div></div>
<ul class="steps">
<li class="is-active"><a>Step 1</a></li>
<li>/</li>
<li><a>Step 2</a></li>
<li>/</li>
<li><a>Step 3</a></li>
</ul>
</div>
</form>
</span>
</div>
</div>
</div>
</div>
</div>
To simplify, user clicks the button > form appears > user fills out form > Form is submitted and second form is shown.
Issues, the form itself is embedded onto the popup, so I can't alter the fieldset as shown in this approach.
Form 1 embed code is shown in the fiddle. On form 1 submit, I need form 2 to appear i.e.
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "103687",
formId: "555bd0a1-adb9-4e31-b71e-e09e4834e844"
});
</script>
I think my entire JS code is not "efficient". I've seen multistep forms created where it just involves a single form, but unsure how to do it with multiple forms.
You can use bootstrap for modal popup:
https://codepen.io/creativedev/pen/VdKymZ
I have just used bootstrap and changed HTML
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="containers">
<div class="wrapper">
<ul class="steps">
<li class="is-active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Your Details</h3>
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="Email">
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Account Type</h3>
<div class="row cf">
<div class="four col">
<input type="radio" name="r1" id="r1" checked>
<label for="r1">
<h4>Designer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r2"><label for="r2">
<h4>Developer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r3"><label for="r3">
<h4>Project Manager</h4>
</label>
</div>
</div>
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Choose a Password</h3>
<input type="password" name="password" id="password" placeholder="Password">
<input type="password" name="password2" id="password2" placeholder="Re-enter Password">
<input class="submit button" type="submit" value="Sign Up">
</fieldset>
<fieldset class="section">
<h3>Account Created!</h3>
<p>Your account has now been created.</p>
<div class="button">Reset Form</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Try out this.
What's needed is the target option to tell hubspot where to put the form:
<script>
hbspt.forms.create({
portalId: "103687",
formId: "555bd0a1-adb9-4e31-b71e-e09e4834e844",
target: "#my_form",
});
</script>
Read this

Codepen working on HTML not working on ASP.NET

I'm facing a problem while integrating a project from codepen into ASP.NET. While I download the project and test it on atom it works perfectly, but when I try to transfer it to ASP.NET (copy paste) it stops working, it just switch between log in / register without moving. I'm new to ASP.NET so maybe I'm missing something... It gives a green warning on the double <html> and <body> tags maybe the problem is there, I just don't know how to fix it. Any help is welcome thanks on advance.
The original codepen: Codepen Link
Note: only edit I made was adding / on non closing <> elements because ASP.NET told me to.
var $loginMsg = $('.loginMsg'),
$login = $('.login'),
$signupMsg = $('.signupMsg'),
$signup = $('.signup'),
$frontbox = $('.frontbox');
$('#switch1').on('click', function () {
$loginMsg.toggleClass("visibility");
$frontbox.addClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
$('#switch2').on('click', function () {
$loginMsg.toggleClass("visibility");
$frontbox.removeClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
setTimeout(function () {
$('#switch1').click()
}, 1000)
setTimeout(function () {
$('#switch2').click()
}, 3000)
body{
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
font-family: 'Roboto', sans-serif;
}
.container{
/*border:1px solid white;*/
width: 600px;
height: 350px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
display: inline-flex;
}
.backbox{
background-color: #404040;
width: 100%;
height: 80%;
position: absolute;
transform: translate(0,-50%);
top:50%;
display: inline-flex;
border-radius: 15px;
}
.frontbox{
background-color: white;
border-radius: 20px;
height: 100%;
width: 50%;
z-index: 10;
position: absolute;
right:0;
margin-right: 3%;
margin-left: 3%;
transition: right .8s ease-in-out;
}
.moving{
right:45%;
}
.loginMsg, .signupMsg{
width: 50%;
height: 100%;
font-size: 15px;
box-sizing: border-box;
}
.loginMsg .title,
.signupMsg .title{
font-weight: 300;
font-size: 23px;
}
.loginMsg p,
.signupMsg p {
font-weight: 100;
}
.textcontent{
color:white;
margin-top:65px;
margin-left: 12%;
}
.loginMsg button,
.signupMsg button {
background-color: #404040;
border: 2px solid white;
border-radius: 10px;
color:white;
font-size: 12px;
box-sizing: content-box;
font-weight: 300;
padding:10px;
margin-top: 20px;
}
/* front box content*/
.login, .signup{
padding: 20px;
text-align: center;
}
.login h2,
.signup h2 {
color: #35B729;
font-size:22px;
}
.inputbox{
margin-top:30px;
}
.login input,
.signup input {
display: block;
width: 100%;
height: 40px;
background-color: #f2f2f2;
border: none;
margin-bottom:20px;
font-size: 12px;
}
.login button,
.signup button{
background-color: #35B729;
border: none;
color:white;
font-size: 12px;
font-weight: 300;
box-sizing: content-box;
padding:10px;
border-radius: 10px;
width: 60px;
position: absolute;
right:30px;
bottom: 30px;
cursor: pointer;
}
/* Fade In & Out*/
.login p {
cursor: pointer;
color:#404040;
font-size:15px;
}
.loginMsg, .signupMsg{
/*opacity: 1;*/
transition: opacity .8s ease-in-out;
}
.visibility{
opacity: 0;
}
.hide{
display: none;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'/>
<link href="stylelogin.css" rel="stylesheet" />
</head>
<body>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="backbox">
<div class="loginMsg">
<div class="textcontent">
<p class="title">Don't have an account?</p>
<p>Sign up to save all your graph.</p>
<button id="switch1">Sign Up</button>
</div>
</div>
<div class="signupMsg visibility">
<div class="textcontent">
<p class="title">Have an account?</p>
<p>Log in to see all your collection.</p>
<button id="switch2">LOG IN</button>
</div>
</div>
</div>
<!-- backbox -->
<div class="frontbox">
<div class="login">
<h2>LOG IN</h2>
<div class="inputbox">
<input type="text" name="email" placeholder=" EMAIL"/>
<input type="password" name="password" placeholder=" PASSWORD"/>
</div>
<p>FORGET PASSWORD?</p>
<button>LOG IN</button>
</div>
<div class="signup hide">
<h2>SIGN UP</h2>
<div class="inputbox">
<input type="text" name="fullname" placeholder=" FULLNAME"/>
<input type="text" name="email" placeholder=" EMAIL"/>
<input type="password" name="password" placeholder=" PASSWORD"/>
</div>
<button>SIGN UP</button>
</div>
</div>
<!-- frontbox -->
</div>
</form>
</body>
</html>
<script src="jslogin.js"></script>
</body>
</html>
Try adding e.preventDefault to your functions to avoid jQuery triggering things it doesn't have to do.
$('#switch1').on('click', function (e) {
e.preventDefault();
$loginMsg.toggleClass("visibility");
$frontbox.addClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
$('#switch2').on('click', function (e) {
e.preventDefault();
$loginMsg.toggleClass("visibility");
$frontbox.removeClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
I got this working in this jsFiddle, so please check it out, try it on your code and let us know if it works or not.
Hope it helps you.

Categories

Resources