1
Ich habe einen Bootstrap-Widget Fortschritt gezeigt form.It haben 6 steps.my Probleme in ersten SchrittWie deaktiviert man den nächsten Schritt, ohne einen Schritt im Bootstrap abzuschließen?
- , wenn der Benutzer erstellt werden, wie kann ich alle anderen Schritte deaktivieren?
- Wenn der Benutzer den ersten Schritt ausführt, geben Sie die Berechtigung zum Wechseln zum zweiten Schritt und zum Deaktivieren aller anderen Schritte ein, bis der Benutzer den aktuellen Schritt beendet hat.
- Wie kann ich den vorherigen Schritt blockieren?
Hier ist mein Code
<?php
include_once 'dbconnect.php';
?>
<?php
if (isset($_POST['btn-signup'])) {
$Mnumber = $_POST['Mnumber'];
$emailErr = "";
$email = $_POST['email'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
$fname = $_POST['fname'];
$address = $_POST['address'];
$sitename = $_POST['sitename'];
$payment = $_POST['payment'];
$title = $_POST['title'];
$descr = $_POST['descr'];
$step1 = $_POST['step1'];
$new_fname = $_POST['sitename'];
$xxx = mysql_query("SELECT fname FROM txfgf WHERE sitename = '$new_fname'") or die(mysql_error());
$yyy = mysql_fetch_row($xxx);
if (mysql_num_rows($xxx) > 0) {
echo "<script type='text/javascript'>alert('From this Name already there is a website,Tryout with different Web site Name !')</script>";
} else {
$query = mysql_query("INSERT INTO txfgf(Mnumber,email,fname,address,sitename,payment,title,descr) VALUES('$Mnumber','$email','$fname','$address','$sitename','$payment','$title','$descr')");
echo "<script>
alert(' You have registered Successfully !');
</script>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Monthly Paid Package</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Lib CSS -->
<link href="//fonts.googleapis.com/css?family=Rancho|Open+Sans:400,300,300italic,400italic,600,600italic,700,800italic,700italic,800" rel="stylesheet">
<link href="minify/rgen_min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- Favicons -->
<link rel="icon" href="images/favicons/glogo.png">
<link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sitename").keyup(function() {
var sitename = $('#sitename').val();
if(sitename=="")
{
$("#disp").html("");
}
else
{
$.ajax({
type: "POST",
url: "check_name.php",
data: "sitename="+ sitename ,
success: function(html){
$("#disp").html(html);
}
});
return false;
}
});
});
</script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!--[if IE 9 ]><script src="js/ie-matchmedia.js"></script><![endif]-->
<script type="text/javascript">
function resetActive(event, percent, step) {
$(".progress-bar").css("width", percent + "%").attr("aria-valuenow", percent);
$(".progress-completed").text(percent + "%");
$("div").each(function() {
if ($(this).hasClass("activestep")) {
$(this).removeClass("activestep");
}
});
if (event.target.className == "col-md-2") {
$(event.target).addClass("activestep");
}
else {
$(event.target.parentNode).addClass("activestep");
}
hideSteps();
showCurrentStepInfo(step);
}
function hideSteps() {
$("div").each(function() {
if ($(this).hasClass("activeStepInfo")) {
$(this).removeClass("activeStepInfo");
$(this).addClass("hiddenStepInfo");
}
});
}
function showCurrentStepInfo(step) {
var id = "#" + step;
$(id).addClass("activeStepInfo");
}
</script>
</head>
<style>
.hiddenStepInfo {
display: none;
}
.activeStepInfo {
display: block !important;
}
.underline {
text-decoration: underline;
}
.step {
margin-top: 27px;
}
.progress {
position: relative;
height: 25px;
}
.progress > .progress-type {
position: absolute;
left: 0px;
font-weight: 800;
padding: 3px 30px 2px 10px;
color: rgb(255, 255, 255);
background-color: rgba(25, 25, 25, 0.3);
}
.progress > .progress-completed {
position: absolute;
right: 0px;
font-weight: 800;
padding: 3px 10px 2px;
}
.step {
text-align: center;
}
.step .col-md-2 {
background-color: #fff;
border: 1px solid #C0C0C0;
border-right: none;
}
.step .col-md-2:last-child {
border: 1px solid #C0C0C0;
}
.step .col-md-2:first-child {
border-radius: 5px 0 0 5px;
}
.step .col-md-2:last-child {
border-radius: 0 5px 5px 0;
}
.step .col-md-2:hover {
color: #F58723;
cursor: pointer;
}
.step .activestep {
color: #F58723;
height: 100px;
margin-top: -7px;
padding-top: 7px;
border-left: 6px solid #5CB85C !important;
border-right: 6px solid #5CB85C !important;
border-top: 3px solid #5CB85C !important;
border-bottom: 3px solid #5CB85C !important;
vertical-align: central;
}
.step .fa {
padding-top: 15px;
font-size: 40px;
}
</style>
<body>
<div class="container" style="margin-top: 100px; margin-bottom: 100px;">
<div class="row">
<div class="progress" id="progress1">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
</div>
<span class="progress-type">Overall Progress</span>
<span class="progress-completed">20%</span>
</div>
</div>
<div class="row">
<div class="row step">
<div id="div1" class="col-md-2" onclick="javascript: resetActive(event, 0, 'step-1');">
<span class="fa fa-file-text-o"></span>
<p>Registration Form</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 20, 'step-2');">
<span class="fa fa-mobile-phone"></span>
<p>Mobile Number</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 40, 'step-3');">
<span class="fa fa-search-plus"></span>
<p>Security Question</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 60, 'step-4');">
<span class="fa fa-viacoin"></span>
<p>Verification Code</p>
</div>
<div class="col-md-2" onclick="javascript: resetActive(event, 80, 'step-5');">
<span class="fa fa-usd"></span>
<p>Payment</p>
</div>
<div id="last" class="col-md-2" onclick="javascript: resetActive(event, 100, 'step-6');">
<span class="fa fa-thumbs-up"></span>
<p>Finish</p>
</div>
!</div>
</div>
<div class="row setup-content step activeStepInfo" id="step-1">
<div class="col-xs-12">
<div class="col-md-12 well">
<i class="fa fa-mobile-phone"></i>
<h3 class="title small"></h3>
<p style="color: #d5d5d5"></p>
<form id="add-form" method="post">
<input class="form-control" required data-msg="Please enter First Name." type="text" id="fname" name="fname" value="" placeholder="Your First Name" autocomplete="off" required /><br>
<input class="form-control" required data-msg="Please enter Email." type="email" id="email" name="email" value="" placeholder="Your Email" required /><br>
<input class="form-control" required data-msg="Please enter Mobile Number." type="text" id="Mnumber" name="Mnumber" value="" placeholder="Your Mobile Number" required /><br>
<input class="form-control" required data-msg="Please enter Address." type="text" id="address" name="address" value="" placeholder="Your Address" required /><br>
<p align="left" style="color: #080808"></p>
<input class="form-control" required data-msg="Please enter Site Name." type="text" id="sitename" name="sitename" value="" onkeyup="copyText()" placeholder="Your Site name" autocomplete="off" /><br>
<div id="disp"></div>
<input class="form-control" required data-msg="Please enter Title." type="text" id="title" name="title" value="" placeholder="Title of your Web Site" /><br>
<input class="form-control" required data-msg="Please enter Description." type="text" id="descr" name="descr" value="" placeholder="Description of Web Site" /><br>
<button class="btn btn-primary" type="submit" id="btn-signup" name="btn-signup" >Submit</button>
</form>
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-2">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h2>Please Enter Your Mobile Number</h2>
<br/>
<input class="form-control" required data-msg="Please enter Mobile Number." type="text" id="Mnumber" maxlength="10" name="Mnumber" value="" placeholder="Your Mobile Number" required />
<br/><br/>
<button class="btn btn-primary " type="submit" id="btn-signup" name="btn-signup" >Continue</button>
</div>
</div>
</div>
<div class="row setup-content step hiddenstepInfo" id="step-3">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h2>Please Enter Verification Code</h2>
<br/>
<h4 >Check your mobile device, you will receive verification code from us,please enter it correctly in Following Text box</h4>
<br/>
<input class="form-control" required data-msg="Please enter Mobile Number." type="text" id="Mnumber" maxlength="10" name="Mnumber" value="" placeholder="Your Verification Code" required />
<br/><br/>
<button class="btn btn-primary " type="submit" id="btn-signup" name="btn-signup" >Continue</button>
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-4">
<div class="col-xs-12">
<div class="col-md-12 well text-center" >
<h2>Security Question</h2>
<br>
<p align="left">Security Question 1</p>
<select class="form-control input-lg">
<option value="What was the name of your first pet?">What was the name of your first pet?</option>
<option value="Where did you first attend school?">Where did you first attend school?</option>
<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
<option value="What is your favorite car model?">What is your favorite car model?</option>
</select>
<br>
<p align="left">Enter Response</p>
<input class="form-control input-lg">
<br>
<button class="btn btn-primary " type="submit" id="btn-signup" name="btn-signup" >Continue</button>
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-5">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 5</h1>
<h3 class="underline">Instructions</h3>
Upload the application.
This may require a confirmation email.
</div>
</div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-6">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1>STEP 6</h1>
<h3 class="underline">Instructions</h3>
Send us feedback on the overall process.
This step is not obligatory.
</div>
</div>
</div>
</div>
<script src="minify/rgen_min.js"></script>
<script async src="js/rgen.js"></script>
</body>
</html>