Ho un form nascosto al caricamento della pagina. Quando l'utente fa clic su "Inserisci Indirizzo" pulsante che esegue questa funzione:
<script>
function show(operation1) {
document.getElementById('main_place').innerHTML = document.getElementById('operation1').innerHTML;
}
</script>
Tuttavia, facendo in questo modo rende la forma non anticipo quando clic su "Avanti", e non so perché. Tutto dovrebbe essere lo stesso che utilizza questo script, ma solo il modulo nascosto pulsanti opere.
Se si fa clic su Enter Address il modulo nascosto apparirà in alto e non permette di avanzare attraverso il fieldsets. Che cosa sta succedendo qui?
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>Esempio completo (con i CSS) a https://jsfiddle.net/83n01bwd/