Skip to content

Instantly share code, notes, and snippets.

@asathoor

asathoor/formNext.html

Created October 21, 2019 15:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save asathoor/26088070373f156ffacac5a0c3bc9b41 to your computer and use it in GitHub Desktop.
Save asathoor/26088070373f156ffacac5a0c3bc9b41 to your computer and use it in GitHub Desktop.
Download ZIP
A form with a next option (jQuery)
Raw
formNext.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- form -->
<form action="#">
<div id="part1">
<input type="text" name="firstname" value="First name">
<button id="btn-1">→ Next</button>
<br>
</div>
<div id="part2">
<input type="text" name="lastname" value="Last name">
<br><br>
<input type="submit" value="Submit">
</div>
</form>
<div id="response"></div>
<p>How to send data to a google sheet via JavaScript:
<a href="https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175">See this page</a>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#part2').hide();
$('#btn-1').mousedown(
function(){
$('#part1').hide();
$('#part2').show();
}
);
}); // end dom ready
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment