Sayfa yüklemesinde gizli bir formum var. Kullanıcı "Adres Gir" düğmesine tıkladığında bu işlevi çalıştırır:
<script>
function show(operation1) {
document.getElementById('main_place').innerHTML = document.getElementById('operation1').innerHTML;
}
</script>
Ancak, bu şekilde yapmak, "İleri" yi tıklatırken formun ilerlememesini sağlar ve nedenini bilmiyorum. Bu komut dosyasını kullanarak her şey aynı olmalıdır, ancak yalnızca gizli form düğmeleri çalışır.
Eğer tıklarsanız Enter Address gizli form en üstte görünecek ve alan kümelerinde ilerlemeyecektir. Ne oluyor burada?
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>Tam örnek (CSS ile) https://jsfiddle.net/83n01bwd/