मैं एक फार्म पर पृष्ठ लोड. जब उपयोगकर्ता क्लिक करता है "पर पता दर्ज करें" बटन चलाता है इस समारोह में:
<script>
function show(operation1) {
document.getElementById('main_place').innerHTML = document.getElementById('operation1').innerHTML;
}
</script>
हालांकि, यह इस तरह से कर प्रपत्र बनाता है अग्रिम नहीं जब क्लिक "अगला", और मैं क्यों नहीं पता है. सब कुछ एक ही होना चाहिए इस स्क्रिप्ट का उपयोग कर, लेकिन केवल के रूप बटन काम करता है.
यदि आप पर क्लिक करें Enter Address के रूप में दिखाई देगा शीर्ष पर और नहीं होगा के माध्यम से अग्रिम fieldsets. यहाँ क्या हो रहा है?
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>पूरा उदाहरण के साथ (सीएसएस) पर https://jsfiddle.net/83n01bwd/