Form won't advance when using show function - javascript

I have a form hidden on page load. When the user clicks on the "Enter Address" button it runs this function:
<script>
function show(operation1) {
document.getElementById('main_place').innerHTML = document.getElementById('operation1').innerHTML;
}
</script>
However, doing it this way makes the form not advance when clicking "Next", and I don't know why. Everything should be the same using this script, but only the hidden form buttons works.
If you click on Enter Address the hidden form will show up on the top and will not advance through the fieldsets. What is going on here?
function show(operation1) {
document.getElementById('main_place').innerHTML = document.getElementById(operation1).innerHTML;
}
var interval = undefined;
$(document).ready(function() {
$('.next').on('click', getNext);
$('.previous').on('click', getPrev);
});
function getNext() {
var $curr = $('fieldset:visible'),
$next = ($curr.next().length) ? $curr.next() : $('fieldset').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('fieldset:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('fieldset').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$curr.hide();
$next.show();
$next.css('z-index', 2).fadeIn('fast', function() {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<link rel="stylesheet" href="css/NewTow.css" type="text/css" />
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<div id="main_place">
<div class="swapcon1">
text gets swapped here
</div>
</div>
<div id=operation1 style="display:none;" class="">
<h2>EASY 3-STEP FORM</h2>
<form id="AUTO" method="post" action="" novalidate>
<!-- fieldsets -->
<fieldset>
<div class="div1"><img src="images/step1.png" width="233" height="65"></div>
<h3>CONTACT INFO</h3>
<input type="hidden" name="token" value="3308f582b5dbc12f99a823c77be6cdc8" />
<input type="hidden" name="miles" value="" />
<div id="contact_name">FULL NAME: *<br>
<input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div>
<div id="contact_phone">PHONE NUMBER: *<span id="req">Is Required</span><br>
<input type='tel' name='phone' id="phone" class="phone" maxlength="15" placeholder="PHONE NUMBER" title="Phone Number Format:1(614)000-0000" pattern=" /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/" required />
</div>
<div id="contact_phone">EMAIL:<br>
<input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS" />
</div>
<div class="button_holder">
<input type="button" name="next" id="send" value="Next" class="next" />
</div>
</fieldset>
<fieldset>
<div class="div1"><img src="images/step2.png" width="233" height="65"></div>
<h3>VEHICLE INFO</h3>
<div id="contact_name">VEHICLE MAKE: *<br>
<input id="element_2_1" name="make" class="element text" size="40" maxlength="40" value="" type="text" placeholder="VEHICLE MAKE"></div>
<div id="contact_phone">VEHICLE MODEL: *<br>
<input id="element_1" name="model" class="element text medium" type="text" maxlength="40" value="" placeholder="VEHICLE MODEL" /></div>
<div id="contact_phone">YEAR*:<br>
<input id="element_1" name="year" class="element text medium" type="number" maxlength="4" value="" placeholder="YEAR" />
</div>
<div id="contact_name">VIN NUMBER: <br>
<input id="element_2_1" name="vin" class="element text" size="15" maxlength="17" value="" type="text" placeholder="VIN NUMBER"></div>
<div id="contact_phone">INSURANCE COMPANY ( if applicable ):<br>
<input id="element_1" name="insurance_company" class="element text medium" type="text" maxlength="255" value="" placeholder="INSURANCE COMPANY" /></div>
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset>
<fieldset>
<div class="div1"><img src="images/step3.png" width="233" height="65"></div>
<div id="contact_message">MESSAGE:<br>
<textarea id="element_3" name="message" class="element textarea medium" placeholder="START TYPING MESAGE HERE..."></textarea></div>
<div class="button_holder">
<input type="button" name="next" class="next" value="ALMOST DONE" />
<input type="button" name="previous" class="previous" value="Previous" />
</div>
</fieldset>
<fieldset>
<div class="div1"><img src="images/step4.png" width="233" height="65"></div>
<h4>THANK YOU!</h4>
<h5>Once you hit Submit a representative will be with you shortly. </h5>
<div class="button_holder">
<input type="submit" name="submit" class="submit action-button" value="SUBMIT" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset>
</form>
</div>
</div>
<!--view_mas-->
</div>
<!--fade left-->
</div>
<!--towleft-->
<!--contact_slide1-->
<div class="towright">
<div class="callout animation-element fadeinright">
<div class="bthead"><span class="mainHEader1">where is your vechile?</span><br>
<hr class="redline">
<p>
<?php echo $content1; ?>
</p>
</div>
<div class="btloc">
<button type="input" id="send" onclick="getLocation()" name="submi" class="button_text" value="" <?php echo $dis; ?>>
<span id="boxcorner"></span>
<div class="right2_button"><?php echo $deviceType; ?></div>
</button>
</div>
<div class="bthr"><br>Or<br></div><br>
<div class="btaddy">
<button type="input" id="saveFor" onclick="show('operation1')" name="submi" class="button_text" value="">
<span id="boxcorner"></span>
<div class="right2_button"><span id="offset">Enter</span> Address</div>
</button>
</div><br>
<div class="dtdis">Computers cannot use GPS correctly due do privacy laws and can only locate the server your connected too. </div>
</div>
<!--towright-->
</div>
<!--fadeinright-->
</div>
</div>
</body>
</html>
Full example (with CSS) at https://jsfiddle.net/83n01bwd/

The issue is that on page load (DOM ready) you're setting a click listener like
$('.next').on('click', getNext);
But then your DOM changes when you click "Enter Address", and the new .next doesn't have the event bound to it.
Per How do I attach events to dynamic HTML elements with jQuery?, what you want to do instead is to use .on (https://api.jquery.com/on/) on body, and then pass in the class you want to filter that event on. So change the event binding to
$('body').on('click', '.next', getNext);
Working example:
function show(operation1) {
document.getElementById('main_place').innerHTML = document.getElementById(operation1).innerHTML;
}
var interval = undefined;
$(document).ready(function() {
$('body').on('click', '.next', getNext);
$('body').on('click', '.previous', getPrev);
});
function getNext() {
var $curr = $('fieldset:visible'),
$next = ($curr.next().length) ? $curr.next() : $('fieldset').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('fieldset:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('fieldset').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$curr.hide();
$next.show();
$next.css('z-index', 2).fadeIn('fast', function() {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<link rel="stylesheet" href="css/NewTow.css" type="text/css" />
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<div id="main_place">
<div class="swapcon1">
text gets swapped here
</div>
</div>
<div id=operation1 style="display:none;" class="">
<h2>EASY 3-STEP FORM</h2>
<form id="AUTO" method="post" action="" novalidate>
<!-- fieldsets -->
<fieldset>
<div class="div1"><img src="images/step1.png" width="233" height="65"></div>
<h3>CONTACT INFO</h3>
<input type="hidden" name="token" value="3308f582b5dbc12f99a823c77be6cdc8" />
<input type="hidden" name="miles" value="" />
<div id="contact_name">FULL NAME: *<br>
<input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div>
<div id="contact_phone">PHONE NUMBER: *<span id="req">Is Required</span><br>
<input type='tel' name='phone' id="phone" class="phone" maxlength="15" placeholder="PHONE NUMBER" title="Phone Number Format:1(614)000-0000" pattern=" /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/" required />
</div>
<div id="contact_phone">EMAIL:<br>
<input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS" />
</div>
<div class="button_holder">
<input type="button" name="next" id="send" value="Next" class="next" />
</div>
</fieldset>
<fieldset>
<div class="div1"><img src="images/step2.png" width="233" height="65"></div>
<h3>VEHICLE INFO</h3>
<div id="contact_name">VEHICLE MAKE: *<br>
<input id="element_2_1" name="make" class="element text" size="40" maxlength="40" value="" type="text" placeholder="VEHICLE MAKE"></div>
<div id="contact_phone">VEHICLE MODEL: *<br>
<input id="element_1" name="model" class="element text medium" type="text" maxlength="40" value="" placeholder="VEHICLE MODEL" /></div>
<div id="contact_phone">YEAR*:<br>
<input id="element_1" name="year" class="element text medium" type="number" maxlength="4" value="" placeholder="YEAR" />
</div>
<div id="contact_name">VIN NUMBER: <br>
<input id="element_2_1" name="vin" class="element text" size="15" maxlength="17" value="" type="text" placeholder="VIN NUMBER"></div>
<div id="contact_phone">INSURANCE COMPANY ( if applicable ):<br>
<input id="element_1" name="insurance_company" class="element text medium" type="text" maxlength="255" value="" placeholder="INSURANCE COMPANY" /></div>
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset>
<fieldset>
<div class="div1"><img src="images/step3.png" width="233" height="65"></div>
<div id="contact_message">MESSAGE:<br>
<textarea id="element_3" name="message" class="element textarea medium" placeholder="START TYPING MESAGE HERE..."></textarea></div>
<div class="button_holder">
<input type="button" name="next" class="next" value="ALMOST DONE" />
<input type="button" name="previous" class="previous" value="Previous" />
</div>
</fieldset>
<fieldset>
<div class="div1"><img src="images/step4.png" width="233" height="65"></div>
<h4>THANK YOU!</h4>
<h5>Once you hit Submit a representative will be with you shortly. </h5>
<div class="button_holder">
<input type="submit" name="submit" class="submit action-button" value="SUBMIT" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset>
</form>
</div>
</div>
<!--view_mas-->
</div>
<!--fade left-->
</div>
<!--towleft-->
<!--contact_slide1-->
<div class="towright">
<div class="callout animation-element fadeinright">
<div class="bthead"><span class="mainHEader1">where is your vechile?</span><br>
<hr class="redline">
<p>
<?php echo $content1; ?>
</p>
</div>
<div class="btloc">
<button type="input" id="send" onclick="getLocation()" name="submi" class="button_text" value="" <?php echo $dis; ?>>
<span id="boxcorner"></span>
<div class="right2_button"><?php echo $deviceType; ?></div>
</button>
</div>
<div class="bthr"><br>Or<br></div><br>
<div class="btaddy">
<button type="input" id="saveFor" onclick="show('operation1')" name="submi" class="button_text" value="">
<span id="boxcorner"></span>
<div class="right2_button"><span id="offset">Enter</span> Address</div>
</button>
</div><br>
<div class="dtdis">Computers cannot use GPS correctly due do privacy laws and can only locate the server your connected too. </div>
</div>
<!--towright-->
</div>
<!--fadeinright-->
</div>
</div>
</body>
</html>
Full working example at https://jsfiddle.net/vsp72aqd/

Related

How to get the class name within multiple divs

I was trying to create other fields to be unclickable when the first input is focused but it seems it doesn't work. I did an illustration so that it will be understandable and my code looks like this.
May I know where I did it wrong?
$('.form-control').click(function() {
$(this).parent('div').next().children('.form-control').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>
You want something like this:
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
$(this).parent('div') returns something like <div class="name"> and then using .next() will not find anything since it don't have any siblings.
Demo
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>

jQuery HTML 5 require field if radio button checked

I have a form that has some radio buttons which I need some fields to be required if a radio button is checked.
I have the HTML5 required attribute on the radio button group which works fine but I want some text fields to be required if the corresponding radio button is checked.
I have written some JS which seems to have no effect, and doesn't seem to add the required attribute when the radio button is checked.
HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.js JS file:
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('#stallType-Business').change(function () {
if(this.checked) {
$('#bizName').attr('required');
} else {
$('#bizName').removeAttr('required');
}
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
You can do it like this, where you disable all inputs and then only activate the one that is selected.
It requires that you have the "disabled" prop added to all child inputs at the start.
I also added the ID's for the c-rail inputs.
Note that the check you do does not trigger when you select another radio button, that is why should disable the others when a new one is selected.
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
It is the disableAll() function that does the trick here.
function disableAll() {
$('#c-rail-yes').attr('required', false).attr('disabled', true);
$('#c-rail-no').attr('required', false).attr('disabled', true);
$('#craftName').attr('required', false).attr('disabled', true);
$('#bizName').attr('required', false).attr('disabled', true);
}
$('#stallType-Preloved').change(function () {
if(this.checked) {
disableAll();
$('#c-rail-yes').attr('required', true).attr('disabled', false);
$('#c-rail-no').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Craft').change(function () {
if(this.checked) {
disableAll();
$('#craftName').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
$('#bizName').attr('required', true).attr('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="bookingForm">
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input id="c-rail-yes" type="radio" name="c-rail" value="Yes" disabled /> Yes
<input id="c-rail-no" type="radio" name="c-rail" value="No" disabled /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" disabled />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" disabled />
</div>
</div>
</div>
</form>
Take a look at JQuery's .prop() method...
.prop()
...and a look at this example from...
How to require fields if a certain radio button is checked?
<body>
<form action="" method="post">
<label for="required_later">Required if Option2 selected</label>
<input type="text" name="text_input_field" id="required_later" disabled><br>
<input type="radio" id="option1" name="radio_options" value="option1">
<label for="option1">Option1</label><br>
<input type="radio" id="option2" name="radio_options" value="option2">
<label for="option2">Option2</label><br>
<input type="submit" name="submit" value="Submit">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#option1").click(function() {
$("#required_later").prop("required", false);
$("#required_later").prop("disabled", true);
});
$("#option2").click(function() {
$("#required_later").prop("required", true);
$("#required_later").prop("disabled", false);
$("#required_later").focus();
});
</script>
</body>
Another way to do it is using this function:
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
and adding class="input-radio" to those input that you want to do the job.
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Preloved" value="Preloved" />
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" class="input-radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>

How can I save multiple form outputs (forms are on diffrent pages, biut shows in one iframe) in one preview page

I have 2 separate forms that displays in one iframe, I want users to enter data in input, click on next button then enter input of form 2, click on a review button, then show form 1 and form 2 output in one preview page before submitting the data to a database. I have tried session storage but I know that my code is wrong.
var formValues = [];
SessionStorage.setItem("fname", "fname");
SessionStorage.setItem("lname", "lname");
SessionStorage.setItem("phone-field", "phone-field");
SessionStorage.setItem("email-field", "email-field");
$(document).ready(function() {
$(".next").click(fuction() {
$("#fname").val("fname");
$("#lname").val("lname");
$("#phone-field").val("phone-field");
$("#email-field").val("email-field");
var formValues = sessionStorage.getItem("fname");
console.log(formValues);
$(document).ready(function() {
$('.next').click(function() {
var formValues = [];
// get values from inputs in first fieldset
$('.field1 :input').each(function() {
formValues.push($(this).val());
});
formValues.pop(); //remove the button from input values
console.log(formValues);
// set values in second fieldset
$('.field3 :input').each(function(index) {
if (formValues[index]) {
$(this).val(formValues[index]);
}
});
$('.current').removeClass('current').hide().next().show().addClass('current');
});
$('.previous').click(function() {
$('.current').removeClass('current').hide().prev().show().addClass('current');
});
});
$(document).ready(function() {
$('.review').click(function() {
var formValues = [];
// get values from inputs in first fieldset
$('.field2 :input').each(function() {
formValues.push($(this).val());
});
formValues.pop(); //remove the button from input values
console.log(formValues);
// set values in second fieldset
$('.field3 :input').each(function(index) {
if (formValues[index]) {
$(this).val(formValues[index]);
}
});
$('.current').removeClass('current').hide().next().show().addClass('current');
});
$('.previous').click(function() {
$('.current').removeClass('current').hide().prev().show().addClass('current');
});
});
FORM 1
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form id="helpdeskform" action="process.php" method="post">
<fieldset class="field1 current">
<h2>Form</h2>
<p>
<label class="form-label first-name" for="fname">First Name:</label>
<input name="fname" id="fname" placeholder="First Name" type="text" />
</p>
<p>
<label class="form-label last-name" for="lname">Last Name:</label>
<input name="lname" id="lname" placeholder="Last Name" type="text" />
</p>
<p>
<label class="form-label" for="phone-field">Phone:</label>
<input name="phone" id="phone-field" placeholder="Phone Number" type="text" />
</p>
<p>
<label class="form-label" for="email-field">E-mail:</label>
<input name="email" id="email-field" placeholder="E-mail" type="text" />
</p>
<hr />
<label for="review">
<input onclick="location.href='index3.html'" id="next" name="next" class="next action-button" value="Next" type="button" />
</label>
</fieldset>
<fieldset class="field3">
<p>First Name:
<input class="show_fname" readonly="readonly" type="text" />
</p>
<p>Last Name:
<input class="show_lname" readonly="readonly" type="text" />
</p>
<p>Type of Request:
<input class="show_type_of_request" readonly="readonly" type="text" />
</p>
<p>Short Description:
<input class="show_subject" readonly="readonly" type="text" />
</p>
<p>Additional Comments:
<input class="show_comments" readonly="readonly" type="text" />
</p>
<p style="float:left;">
<label for="previous">
<input name="previous" class="previous action-button" value="Previous" type="button" />
</label>
</p>
<p style="float:left; padding-left: 10px;">
<label for="Submit">
<input value="Submit" name="submit" class="action-button" type="submit" />
</label>
</p>
</fieldset>
</form>
</body>
</html>
fORM 2
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form id="helpdeskform" action="process.php" method="post">
<fieldset class="field2 current">
<h2>Form 2</h2>
<label for="classify">Type of Request:</label>
<select name="classify" id="classify">
<option value="">Please select an option..</option>
<option value="maintainence">Maintainence of Site</option>
<option value="troubleshoot">Troubleshoot/Error</option>
<option value="new">Create new content</option>
</select>
<p></p>
<p>
<label for="subject">Short Description: <span class="counter-field">
<span id="counter"></span> characters left.</span>
</label>
<input name="subject" id="subject" placeholder="Subject" type="text" />
</p>
<p>
<label for="desc">Additional Comments:</label>
<textarea style="font-family: Arial, Veranda, Sans serif" name="desc" id="desc" cols="30" rows="10" placeholder="Short Description"></textarea>
</p>
<p>
<label for="review">
<input name="review" onclick="showData();" class="review action-button" value="Review" type="button" />
</label>
</p>
</fieldset>
<fieldset class="field3">
<!-- #TODO PREVIEW ALL FORM INPUTS -->
<p>First Name:
<input class="show_fname" readonly="readonly" type="text" />
</p>
<p>Last Name:
<input class="show_lname" readonly="readonly" type="text" />
</p>
<p>Phone:
<input class="show_phone" readonly="readonly" type="text" />
</p>
<p>E-mail:
<input class="show_email" readonly="readonly" type="text" />
</p>
<p>Type of Request:
<input class="show_type_of_request" readonly="readonly" type="text" />
</p>
<p>Short Description:
<input class="show_subject" readonly="readonly" type="text" />
</p>
<p>Additional Comments:
<input class="show_comments" readonly="readonly" type="text" />
</p>
<p style="float:left;">
<label for="previous">
<input name="previous" class="previous action-button" value="Previous" type="button" />
</label>
</p>
<p style="float:left; padding-left: 10px;">
<label for="Submit">
<input value="Submit" name="submit" class="action-button" type="submit" />
</label>
</p>
</fieldset>
</form>
</body>
</html>

Form is not submitting due to JavaScript validation

I have created a HTML form, but my form entries are not submitting due to my JavaScript form validation. Here is my HTML and JavaScript:
jQuery("#template-jobform").validate({
submitHandler: function(form) {
jQuery('.form-process').fadeIn();
jQuery(form).ajaxSubmit({
success: function() {
/*jQuery('.form-process').fadeOut();
jQuery(form).find('.sm-form-control').val('');
jQuery('#job-form-result').attr('data-notify-msg', jQuery('#job-form-result').html()).html('');
SEMICOLON.widget.notifications(jQuery('#job-form-result'));*/
//target: '#job-form-result',
if (data.indexOf("ocation:") > 0) {
window.location = data.replace("Location:", "");
} else {
$('#job-form-result').html(data)
$('.form-process').fadeOut();
jQuery(form).find('.sm-form-control').val('');
jQuery('#job-form-result').attr('data-notify-msg', jQuery('#job-form-result').html()).html('');
SEMICOLON.widget.notifications(jQuery('#job-form-result'));
}
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form action="include/jobs.php" id="template-jobform" name="template-jobform" method="post" role="form">
<div class="form-process"></div>
<div class="col_half">
<label for="template-jobform-fname">First Name <small>*</small>
</label>
<input type="text" id="template-jobform-fname" name="template-jobform-fname" value="" class="sm-form-control required" />
</div>
<div class="col_half col_last">
<label for="template-jobform-lname">Last Name <small>*</small>
</label>
<input type="text" id="template-jobform-lname" name="template-jobform-lname" value="" class="sm-form-control required" />
</div>
<div class="clear"></div>
<div class="col_full">
<label for="template-jobform-email">Email <small>*</small>
</label>
<input type="email" id="template-jobform-email" name="template-jobform-email" value="" class="required email sm-form-control" />
</div>
<div class="col_half">
<label for="template-jobform-age">Age <small>*</small>
</label>
<input type="text" name="template-jobform-age" id="template-jobform-age" value="" size="22" tabindex="4" class="sm-form-control required" />
</div>
<div class="col_half col_last">
<label for="template-jobform-city">City <small>*</small>
</label>
<input type="text" name="template-jobform-city" id="template-jobform-city" value="" size="22" tabindex="5" class="sm-form-control required" />
</div>
<div class="col_full">
<label for="template-jobform-application">Application <small>*</small>
</label>
<textarea name="template-jobform-application" id="template-jobform-application" rows="6" tabindex="11" class="sm-form-control required"></textarea>
</div>
<div class="col_full">
<button class="button button-3d button-large btn-block nomargin" name="template-jobform-apply" type="submit" value="apply">Send Application</button>
</div>
</form>
The page loads indefinitely after clicking on the "send application" button due to this script.

close fancybox after confirm form in ajax success

I have problem with close my fancybox after submit registration form in my web.
I using cms pro system....
With this I showing fancybox include form:
submitHandler: function(form) {
var str = $("#subscriber_application").serialize();
$.ajax({
type: "POST",
url: "ajax/user.php",
data: str,
success: function (msg){
$("div#subscriber_response").html(msg);
$("#subscriber_application").hide();
}
});
}
My html:
<div id="divForm" style="display:none;min-height: 400px;">
<div class="fr" style="min-height: 400px;">
<div>
<div style="position:relative">
<div id="msgholder"></div>
</div>
<form action="" method="post" id="admin_form" name="admin_form">
<input name="email" type="text" size="45" maxlength="40" class="home_input" placeholder="Email Address" />
<input name="token" type="text" size="45" maxlength="40" class="home_input" placeholder="Token" />
<input name="submit" value=" " type="submit" class="account_activate"/>
</form>
<?php echo $core->doForm("accActivate","ajax/user.php");?>
</div>
<div style="width:800px;"></div>
<h1>Subscribe For Free Application</h1>
<hr />
<p>&nbsp</p>
<div class="registracia">
<div id="subscriber_response" class="msgErrors"></div>
<div id="post_your_requirement_success" ></div>
<form action="" method="post" id="subscriber_application" name="subscriber_application" style="width:270px;">
<p>
<input data-progression="" type="text" data-helper="Username should be at least 3 characters long" name="username" value="" class="home_input" placeholder="User name" name="username" />
</p>
<p>
<input data-progression="" type="text" data-helper="Add your E-mail" name="email" class="home_input" placeholder="Email address" value="<?php if(isset($_SESSION['subscriber_application']['email_address'])):echo $_SESSION['subscriber_application']['email_address'];endif; ?>" />
</p>
<p>
<input data-progression="" type="text" data-helper="Your Restaurant Name" name="hotel_name" class="home_input" placeholder="Restaurant name" />
</p>
<p>
<input data-progression="" type="password" data-helper="Add Password - min 4 characters" name="password" class="home_input" placeholder="Password" />
</p>
<p>
<!--- <input tabindex="13" type="checkbox" id="flat-checkbox-1" />I agree, I've read terms of use -->
</p>
<input name="submit" type="submit" id="submit" value=" " class="sign_in" />
<input name="doapplication" type="hidden" value="1" />
</form>
</div>
<div style="social">
<h2>Sign in with social network!</h2>
<ul>
<li style="list-style:none"><img src="../demo/theme/master/images/g+.jpg" /></li>
<li style="list-style:none"><img src="../demo/theme/master/images/faceb.jpg" /></li>
</ul>
</div>
my button :
<a href="#divForm" id="btnForm">
<button type="button" class="way-start" style="border-radius: 5px;height: 60px;width: 180px;background-color: green;border: 1px solid green;font-size: 26px;font-weight: 300;font-family: Helvetica Neue, Helvetica, Sans Serif;">Get the app!</button>
</a>
I will be grateful for every opinion !!!
Thanks!!!
My solution is in success function like:
setTimeout("$.fancybox.close()", 5000);
Try triggering a click on the fancybox close button.
$('#fancybox-close').trigger('click');

Categories