I am writing some javascript and HTML, and I want to do custom dialog boxes for user error handling(not filling in fields). For some reason the boxes do not show up when the user error occurs. My Java scrip and html follows:
<script>$(document).ready(function(){
$('#submit_button').click(function(){
ShowCustomDialog();
});
});
function ShowCustomDialog()
{
var name = document.getElementById('name');
var address = document.getElementById('email');
var reason = document.getElementById('reason');
var message = document.getElementById('message');
if(name.value == ''){
ShowDialogBox('Warning','Enter your name','Ok','', 'GoToAssetList',null);
return false;
}
if(email.value == ''){
ShowDialogBox('Warning','Enter your email.','Ok','', 'GoToAssetList',null);
return false;
}
if(reason.value == ''){
ShowDialogBox('Warning','Select a reason','Ok','', 'GoToAssetList',null);
return false;
}
if(message.value == ''){
ShowDialogBox('Warning','Enter a message.','Ok','', 'GoToAssetList',null);
return false;
}
}
function ShowDialogBox(title, content, btn1text, btn2text, functionText, parameterList) {
var btn1css;
var btn2css;
if (btn1text == '') {
btn1css = "hidecss";
} else {
btn1css = "showcss";
}
if (btn2text == '') {
btn2css = "hidecss";
} else {
btn2css = "showcss";
}
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'scale', duration: 400 },
buttons: [
{
text: btn1text,
"class": btn1css,
click: function () {
$("#dialog").dialog('close');
}
},
{
text: btn2text,
"class": btn2css,
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}</script><form method="post" action="MAILTO:me" enctype="text/plain" onsubmit=" return ShowCustomDialog()">
<div class="row">
<label>Your Name:</label>
<input type="text" id="name" name="name" size="20" />
</div>
<div class="row">
<label>Your E-mail:</label>
<input type="text" id="email" name="email" size="20" />
</div>
<div class="row">
<label>Reason for Report:</label>
<select id="reason" name="reason" />
<option value="">Please Select...</option>
<option value="bug">Bug Report</option>
<option value="feature">Feature</option>
<option value="tech_support">Technical Support</option>
<option value="other">Other...</option>
</select>
</div>
<div class="row">
<label>Your Message:</label>
<textarea type="text" id="message" name="message" rows="7" cols="30"></textarea>
</div>
<input id="submit_button" type="submit" value="Send E-mail" />
<div id="dialog" title="Alert message" style="display: none">
<div class="ui-dialog-content ui-widget-content">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0"></span>
<label id="lblMessage">
</label>
</p>
</div>
</div>
</form>
I would be grateful for any help
When you have a click event on a button, you have to return false or use e.preventDefault(). Otherwise, the button submits the page and you never see the dialog box.
For example
$(document).ready(function(){
$('#submit_button').click(function(e){
if(!ShowCustomDialog()) {
e.preventDefault()
}
});
});
With my example, you should add a return true to your ShowCustomDialog function.
function ShowCustomDialog()
{
...
if(message.value == ''){
ShowDialogBox('Warning','Enter a message.','Ok','', 'GoToAssetList',null);
return false;
}
return true;
}
why you don't use modal see:
http://www.w3schools.com/howto/howto_css_modals.asp
or bootstrap modals:
http://getbootstrap.com/javascript/#modals
Related
I want to check if all my inputs are filled to activate a submit button, but with my code it checks only one input.
My HTML (with TWIG) :
<div class="content-wrapper content-wrapper--close">
<form class="form form--width">
<fieldset class="form__fieldset input">
<input class="input__field" id="name" name="name"/>
<label class="input__label" for="name">Nom et prénom</label>
</fieldset>
<fieldset class="form__fieldset input">
<input class="input__field" id="structure" name="structure"/>
<label class="input__label" for="structure">Structure</label>
</fieldset>
<fieldset class="form__fieldset input">
<input class="input__field" id="email" name="email"/>
<label class="input__label" for="email">Adresse email</label>
</fieldset>
<fieldset class="form__fieldset input">
<textarea class="input__field input__field--textarea" name="message" id="message" rows="10">
</textarea>
<label class="input__label" for="message">Message</label>
</fieldset>
<fieldset class="form__fieldset">
<div class="cta is-disabled">
<input type="submit" class="cta__link button" value="Envoyer">
</div>
</fieldset>
</form>
</div>
My javascript:
/**
* Add event listener on input.
*
* #param form
*/
addListener(form) {
const inputs = form.querySelectorAll('.input__field');
[...inputs].map( input => {
input.addEventListener('focus', (event) => {
event.target.classList.add('is-fill');
});
input.addEventListener('blur', (event) => {
if (event.target.value === '') {
event.target.classList.remove('is-fill');
}
});
});
}
// // If all fields are filled, remove class 'is-disabled'
handleInputs(items) {
const inputs = items.querySelectorAll('.input__field');
const submitButton = document.querySelector('.form .cta');
[...inputs].map( input => {
input.addEventListener('input', (e) => {
if(e.target.value !== '') {
submitButton.classList.remove('is-disabled');
} else {
if(!submitButton.classList.contains('is-disabled')) {
submitButton.classList.add('is-disabled');
}
}
});
});
}
For now it only works with only one input and I don't know how to do to check all the input. If somebody can help me, I don't find any answer.
Thanks
With HTML5 you can style the form button when the form is not invalid. Simple CSS rule and it will apply the styles. It also by default prevents the form from submitting.
The button will remain red until the form is filled in with a valid name, email, and date. I also added a rule that alters the current element being edited which your code is also doing.
input {
margin: .5rem;
}
input:focus {
box-shadow: 0px 0px 5px 5px #0ff;
}
form:invalid input[type="submit"] {
background-color: red
}
<form>
<fieldset>
<legend>User:</legend>
<label for="name">Name:</label>
<input type="text" id="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br>
<label for="dob">Date of birth:</label>
<input type="date" id="bod" required>
</fieldset>
<input type="submit" />
</form>
You might need to loop through each input every time an input changes:
$(document).ready(function () {
var shouldShowSubmitBtn = true;
$("input").change(function () {
$(":input").each(function () {
if ($(this).val() == '') {
shouldShowSubmitBtn = false;
return false;
}
});
});
});
The code I used :
for (const input of inputs) {
input.addEventListener(`input`, () => {
for (const input of inputs) {
if (input.value.length === 0) {
submitButton.disabled = true;
cta.classList.add('is-disabled');
break;
} else {
submitButton.disabled = false;
cta.classList.remove('is-disabled');
}
}
});
}
I want to replace the after-submission checks in the form with on-the-fly completeness and correctness checks that are performed when a form field loses focus.
How can I do this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>Form</title>
<style>
body {
width: 500px;
}
.part {
width: 100%;
padding: 5px;
border-bottom: 1px solid #000;
}
label {
margin-right: 5px;
}
.label-left {
text-align: right;
}
.label-right {
text-align: left;
}
.error {
color: #cc0000;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
//$(document).ready(function() {
function myValidateEMailAddress(email_address) {
var email_pattern = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
return email_pattern.test(email_address);
}
function checkPassword(pwd_str) {
var my_pwd_pattern = /^(?=.*[a-zA-Z].*[a-zA-Z])(?=.*\d.*\d)[a-zA-Z0-9_]{6,20}$/;
return my_pwd_pattern.test(pwd_str);
}
function validatePhoneNumber(phone_number) {
var phone_pattern = /^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$/;
return phone_pattern.test(phone_number);
}
$(document).ready(function() {
$('#form').submit(function(e) {
var my_errors = false;
$('.part> .error').remove();
$('#my_submission').empty();
$(':text, :password, textarea').each(function() {
$(this).val($.trim($(this).val()));
if ($(this).val() == '') {
$(this).parent().append('<div class="error">Please provide a value</div>');
my_errors = true;
}
});
if ($('#email').val() != '') {
if (!myValidateEMailAddress($('#email').val())) {
$('#email').parent().append('<div class="error">Please provide a correct e-mail address</div>');
my_errors = true;
}
}
if ($('#your_password').val() != '') {
if (!checkPassword($('#your_password').val())) {
$('#your_password').parent().append('<div class="error">Please provide a correct password.</div>');
my_errors = true;
}
}
if ($('#phone').val() != '') {
if (!validatePhoneNumber($('#phone').val())) {
$('#phone').parent().append('<div class="error">Please provide a correct phone number.</div>');
my_errors = true;
}
}
if ($('#addresses option:selected').val() == '') {
$('#addresses').parent().append('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($(':radio[name="sex"]:checked').length == 0) {
$(':radio[name="sex"]:first').parent().after('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($(':radio[name="subscription"]:checked').length == 0) {
$(':radio[name="subscription"]:first').parent().after('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($('#likes option:selected').val() == '') {
$('#likes').parent().append('<div class="error">Please select one item</div>');
my_errors = true;
}
if (my_errors) {
return false;
}
else {
e.preventDefault();
var my_submission_array = $('#form').serialize().split('&');
if (my_submission_array.length > 0) {
$('#my_submission').html('<h2>Submitted Elements</h2><ul></ul>');
for (var i = 0; i < my_submission_array.length; i++) {
var my_pair = my_submission_array[i].split('=');
$('#my_submission > ul').append('<li>' + my_pair[0] + ': ' + my_pair[1] + '</li>\n');
}
}
}
});
});
// });
</script>
</head>
<body>
<h3>Output:</h3>
<h2>My Questionnaire</h2>
<form name="form" id="form" action="" method="post">
<div class="part">
<label for="addresses" class="label-left">How should you be addressed?</label>
<select name="addresses" id="addresses">
<option value="">Please select one</option>
<option value="first">Mr.</option>
<option value="second">Madam</option>
<option value="third">Miss</option>
<option value="fourth">Dr.</option>
<option value="fifth">Pr.</option>
</select>
</div>
<div class="part">
<fieldset>
<legend>Sex:</legend>
<input type="radio" name="sex" id="group1" value="1">
<label for="group1" class="label-right">Male</label>
<input type="radio" name="sex" id="group2" value="2">
<label for="group2" class="label-right">Female</label>
</fieldset>
</div>
<div class="part">
<label for="last_name" class="label-left">Last Name: </label>
<input type="text" name="last_name" id="last_name">
</div>
<div class="part">
<label for="first_name" class="label-left">First Name: </label>
<input type="text" name="first_name" id="first_name">
</div>
<div class="part">
<label for="email" class="label-left">E-Mail: </label>
<input type="text" name="email" id="email">
</div>
<div class="part">
<label for="your_password">Password:</label>
<input type="password" name="your_password" id="your_password" size="10" maxlength="20">
</div>
<div class="part">
<label for="phone" class="label-left">Phone number: </label>
<input type="text" name="phone" id="phone">
</div>
<div class="part">
<label for="likes" class="label-left">What are your likes?</label>
<select name="likes" id="likes">
<option value="">Please select one</option>
<option value="first">Programming</option>
<option value="second"> African literature</option>
<option value="third">Poetry</option>
<option value="four">Dancing</option>
</select>
</div>
<div class="part">
<fieldset>
<legend>Do you want to receive our newsletter ?</legend>
<input type="radio" name="subscription" id="group1" value="1">
<label for="group1" class="label-right">Yes</label>
<input type="radio" name="letter" id="group2" value="2">
<label for="group2" class="label-right">No</label>
</fieldset>
</div>
<div class="part">
<label for="comments" class="label-left">Write some comments below:</label>
<textarea name="comments" id="comments" cols="40" rows="3"></textarea>
</div>
<div class="part">
<input type="submit" name="submit" id="submit" value="Submit Form">
</div>
<div id="my_submission"></div>
</form>
</body>
</html>
Before I continue answering, I should note that you're putting jQuery script before <html> tag. This is incorrect. It has to be in <head>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...
performed when a form field loses focus
An element loses focus when you click away from it. jQuery happends to have a blur event for this occasion:
$('input').on('blur', function() {
// your code here
});
So you might want to do it this way:
$('#email').on('blur', function() {
var emailVal = $(this).val();
if (!emailVal || !myValidateEMailAddress(emailVal)) {
$(this).parent().append('<div class="error">Please provide a correct e-mail address</div>');
my_errors = true;
}
});
the rest of the code might look similar.
Basically, when i type in either textarea or textbox the span should show until the criteria is made.
Only when all three are validated should the submit button "save" show().
however all that is happening is the first two textbox spans are showing when i start writing in them (however not from the focus) but do not disappear when the criteria is met
<div id="add">
<div id="close"></div>
<form action="" method="POST">
<div id="name">
Name:<span>Please Enter Full Name</span>
<br/>
<input type="text" name="name" id="textbox">
</div>
<div id="company">
Company<span>Please Enter Company Name</span>
<br/>
<input type="text" name="company" id="textbox1">
</div>
<div id="review">
Review<span>Please Enter Review</span>
<br/>
<textarea name="comment"></textarea>
</div>
<div id="save">
<input type="submit" name="submit">
</div>
</form>
</div>
//...START OF ADDBOX
$('span').hide();
$('#save').hide();
$nameText = $('#name');
$companyText = $('#company');
$commentText = $('#comment');
function nameValid() {
if ($nameText.val().length < 5) {
$('#name span').show();
} else {
$('#name span').hide();
}
}
function companyValid() {
if ($companyText.val().length < 3) {
$('#company span').show();
} else {
$('#company span').hide();
}
}
function commentValid() {
if ($commentText.val().length < 1) {
$('#review span').show();
} else {
$('#review span').hide();
}
}
$nameText.focus(nameValid).keyup(nameValid).keyup(save);
$companyText.focus(companyValid).keyup(companyValid).keyup(save);
$commentText.focus(commentValid).keyup(commentValid).keyup(save);
function save() {
if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) {
$('#save').show();
} else {
$('#save').hide();
}
}
http://jsfiddle.net/opfczh69/ js-fiddle here
You are referencing your textboxes using the names not their ids so it doesnt match anything.
You need to reference them as #textbox, #textbox1, #comment and give the comment box an id:
$('span').hide();
$('#save').hide();
$nameText = $('#textbox');
$companyText = $('#textbox1');
$commentText = $('#comment');
function nameValid() {
if ($nameText.val().length < 5) {
$('#name span').show();
} else {
$('#name span').hide();
}
}
function companyValid() {
if ($companyText.val().length < 3) {
$('#company span').show();
} else {
$('#company span').hide();
}
}
function commentValid() {
if ($commentText.val().length < 1) {
$('#review span').show();
} else {
$('#review span').hide();
}
}
$nameText.focus(nameValid).keyup(nameValid).keyup(save);
$companyText.focus(companyValid).keyup(companyValid).keyup(save);
$commentText.focus(commentValid).keyup(commentValid).keyup(save);
function save() {
if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) {
$('#save').show();
} else {
$('#save').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="add">
<div id="close"></div>
<form action="" method="POST">
<div id="name">
Name:<span>Please Enter Full Name</span>
<br/>
<input type="text" name="name" id="textbox">
</div>
<div id="company">
Company<span>Please Enter Company Name</span>
<br/>
<input type="text" name="company" id="textbox1">
</div>
<div id="review">
Review<span>Please Enter Review</span>
<br/>
<textarea name="comment" id="comment"></textarea>
</div>
<div id="save">
<input type="submit" name="submit">
</div>
</form>
</div>
Updated Fiddle
I'm trying to show an error message in the span tags using jQuery. I can get the form fields to highlight in a red box and green box if input right but the text wont show up. I'm new to coding and been looking on the web for ideas and fixes, I know I'm missing something and it maybe simple but I'm racking my brains on it.
$(document).ready(function() {
// Name can't be blank
$('#name').on('input', function() {
var input = $(this);
var is_name = input.val();
if (is_name) {
input.removeClass("invalid").addClass("valid");
}
else {
input.removeClass("valid").addClass("invalid");
}
});
// Email must be an email
$('#email').on('input', function() {
var input = $(this);
var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var is_email = re.test(input.val());
if (is_email) {
input.removeClass("invalid").addClass("valid");
}
else {
input.removeClass("valid").addClass("invalid");
}
});
// Message can't be blank
$('#message').keyup(function(event) {
var input = $(this);
var message = $(this).val();
console.log(message);
if (message) {
input.removeClass("invalid").addClass("valid");
}
else {
input.removeClass("valid").addClass("invalid");
}
});
// After Form Submitted Validation
$("#contact_submit button").click(function(event) {
var form_data = $("#contact").serializeArray();
var error_free = true;
for (var input in form_data) {
var element = $("#contact_submit" + form_data[input]['name'], ['email'], ['message']);
var valid = element.hasClass("valid");
var error_element = $("span", element.parent());
if (!valid) {
error_element.removeClass("error").addClass("error_show");
error_free = false;
}
else {
error_element.removeClass("error_show").addClass("error");
}
}
if (!error_free) {
event.preventDefault();
}
else {
alert('No errors: Form will be submitted');
}
});
});
.error {
display: none;
margin-left: 10px;
}
.error_show {
color: red;
margin-left: 10px;
}
input.invalid,
textarea.invalid {
border: 2px solid red;
}
input.valid,
textarea.valid {
border: 2px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="body">
<form id="contact" method="post" enctype="multipart/form-data" action="">
<h1 class="title">Contact</h1>
<div>
<label for="name">Your Fullname</label>
<input type="text" id="name" name="name" required placeholder="Your Name">
<span class="error error_show">This field is required</span>
</div>
<div>
<label for="email">Your Full Email</label>
<input name="email" type="email" id="email" required placeholder="Your Email">
<span class="error error_show">This field is required</span>
</div>
<div>
<label for="message">Message</label>
<textarea id="message" name="message" cols="20" rows="5" required placeholder="Message"></textarea>
<span class="error error_show">This field is required</span>
</div>
<div id="contact_submit">
<button type="submit"></button>
</div>
</form>
</section>
I think you might have made it more complicated than it needed to be. See if the below snippet doesn't work the way you expected.
$(document).ready(function() {
$('#name').on('input', function() {
var input = $(this);
var is_name = input.val();
if (is_name) {
input.removeClass("invalid").addClass("valid");
} else {
input.removeClass("valid").addClass("invalid");
}
});
$('#email').on('input', function() {
var input = $(this);
var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var is_email = re.test(input.val());
if (is_email) {
input.removeClass("invalid").addClass("valid");
} else {
input.removeClass("valid").addClass("invalid");
}
});
$('#message').keyup(function(event) {
var input = $(this);
var message = $(this).val();
console.log(message);
if (message) {
input.removeClass("invalid").addClass("valid");
} else {
input.removeClass("valid").addClass("invalid");
}
});
$("#contact_submit #submit_button").click(function(event) {
$("#name_error").hide();
$("#email_error").hide();
$("#message_error").hide();
var success = true;
if (!$("#name").hasClass("valid")) {
success = false;
$("#name_error").show();
}
if (!$("#email").hasClass("valid")) {
success = false;
$("#email_error").show();
}
if (!$("#message").hasClass("valid")) {
success = false;
$("#message_error").show();
}
if (success === false) {
event.preventDefault();
}
else {
alert('No errors: Form will be submitted');
}
});
});
.error {
display: none;
margin-left: 10px;
}
.error_show {
color: red;
margin-left: 10px;
display: none;
}
input.invalid,
textarea.invalid {
border: 2px solid red;
}
input.valid,
textarea.valid {
border: 2px solid green;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<section class="body">
<form id="contact" method="post" enctype="multipart/form-data" action="">
<h1 class="title">Contact</h1>
<div>
<label for="name">Your Fullname</label>
<input type="text" id="name" name="name" required placeholder="Your Name">
<span id="name_error" class="error_show">This field is required</span>
</div>
<div>
<label for="email">Your Full Email</label>
<input name="email" type="email" id="email" required placeholder="Your Email">
<span id="email_error" class="error_show">This field is required</span>
</div>
<div>
<label for="message">Message</label>
<textarea id="message" name="message" cols="20" rows="5" required placeholder="Message"></textarea>
<span id="message_error" class="error_show">This field is required</span>
</div>
<div id="contact_submit">
<input type="submit" id="submit_button" value="Submit">
</div>
</form>
</section>
</body>
</html>
var element = $("#contact_submit" + form_data[input]['name'], ['email'], ['message']);
var valid = element.hasClass("valid");
var error_element = $("span", element.parent());
I think these lines don't select the right span.
I got to it on logging the error_element:
console.log(error_element);
Here is a JSFIDDLE with a "working" selector.
var error_element=$("#contact div span");
Now you can change the selector that it fits your needs!
I'm trying to hide part of the form with the button disabled and have the user click on the button to show rest of form when previous fields are filled in. Can anyone help? Here's my code as an example:
HTML
<form>
<div id="group1">
<label>Field 1:</label>
<input type="text" class="field1"/><br/>
<label>Field 2:</label>
<input type="text" class="field2"/><br/>
<label>Field 3:</label>
<input type="text" class="field3"/><br/>
</div>
<div align="center">
<button id="show_form" onClick = "this.style.display= 'none'" disabled="disabled">
Enter Billing Info</button>
</div>
<div id="group2">
<label>Field 4:</label>
<input type="text" class="field4"/><br/>
<label>Field 5:</label>
<input type="text" class="field5"/><br/>
<label>Field 6:</label>
<input type="text" class="field6"/><br/>
</div>
</form>
JQUERY
<script>
$(document).ready(function () {
$('#group1').find('input[type="text"]').keyup(function () {
var flag = true;
$('#group1').find('input[type="text"]').each(function () {
if ($(this).val().length === 0) {
flag = false;
return;
}
});
if (flag) {
$("#show_form").prop("disabled", false);
} else {
$("#show_form").prop("disabled", true);
$("#group2").hide();
$("#show_form").show();
}
});
$("#group2").hide();
$("#show_form").click(function (){
$("#group2").show();
return false;
});
});
</script>
Try this jQuery:
$(document).ready(function () {
$('#group1').find('input[type="text"]').keyup(function () {
var flag = true;
$('#group1').find('input[type="text"]').each(function () {
if ($(this).val().length === 0) {
flag = false;
return;
}
});
if (flag) {
$("#show_form").prop("disabled", false);
} else {
/* This will hide the bottom form and disable the button again if
* any of the field above will be emptied.
* NOTE: This will just hide the form; it will not clear the fields.
*/
$("#show_form").prop("disabled", true);
$("#group2").hide();
}
});
$("#group2").hide();
$("#show_form").click(function (){
$("#group2").show();
return false;
});
});
This will enable the button when all the fields in the initial form are filled. Then the user will be able to click on the button to see the rest of the form.
You just need to loop through each input and check if a value is set when the button is clicked like this:
$('#show_form').click(function () {
var fields = $('.js-field');
var pass = true;
for (var i = 0; i < fields.length; i++) {
if (!$(fields[i]).val()) {
pass = false;
}
}
if (pass === true) {
$('#group2').show();
}
});
I also needed to add some classes to your html:
<form>
<div id="group1">
<label>Field 1:</label>
<input type="text" class="field1 js-field"/><br/>
<label>Field 2:</label>
<input type="text" class="field2 js-field"/><br/>
<label>Field 3:</label>
<input type="text" class="field3 js-field"/><br/>
</div>
<button type="button" id="show_form" value="Show_Form">Enter Billing
Info</button>
<div id="group2" style="display: none;">
<label>Field 4:</label>
<input type="text" class="field4"/><br/>
<label>Field 5:</label>
<input type="text" class="field5"/><br/>
<label>Field 6:</label>
<input type="text" class="field6"/><br/>
</div>
</form>
To see it in action visit this fiddle.
You can add some logic to the click event and check all the input fields to have a value like this
$("#show_form").click(function(){
var allFilled = true;
$('#group1').find('input').each(function(){
//if someone is empty allFilled will keep false
if(this.value === ''){
allFilled = false;
//this breaks the each
return false;
}
});
if(allFilled){
$("#group2").show();
}
});
Keep in mind the previous code only work with input fields.