Mám formulář skrytý na načtení stránky. Když uživatel klikne na "Zadat Adresu" tlačítko spustí tuto funkci:
<script>
function show(operation1) {
document.getElementById('main_place').innerHTML = document.getElementById('operation1').innerHTML;
}
</script>
Nicméně, dělat to takhle dělá formulář, který není předem při kliknutí na "Další", a já nevím proč. Vše by mělo být stejné použití tohoto skriptu, ale pouze skryté formě tlačítek funguje.
Pokud klepnete na tlačítko na Enter Address skryté formě se objeví na horní a nebude předem prostřednictvím fieldset. Co se to tady děje?
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>Kompletní příklad (s CSS) https://jsfiddle.net/83n01bwd/