I want to make a "NumPad" where I can type in a 4-digit-keycode in an input field. After I click the four buttons, the submit-button gets pressed. I found a few code-snippets and it worked if I use the keyboard. This is how far I come:
function addNum(num){
document.getElementById('login').value += num;
}
$('#login').keyup(function(){
if(this.value.length == 4){
$('#enter').click();
}
});
#numpad {
width: 200px;
}
.row {
width: 100%;
}
.number {
min-width: 26%;
height: 60px;
float: left;
border: 1px solid;
margin: 10px;
vertical-align: middle;
display: block;
font-size: 2em;
padding-top: 8px;
padding-left: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
a:hover .number {
background: black;
color: white;
}
<form action="action.php" method="post" name="loginform" id="loginform">
<input type="password" class="form-control" name="login" id="login">
<input type="submit" id="enter" value="Submit">
</form>
<div id="numpad">
<div class="row">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
</div>
<div class="row">
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
</div><div class="row">
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
Add your submit check to your addNum() function:
function addNum(num)
{
document.getElementById('login').value += num;
if((document.getElementById('login').value.length == 4) && document.getElementById('login').value.match(/^\d{4}$/))
{
alert("Form Submitted");
document.forms["loginform"].submit();
}
}
$('#login').keyup(function() {
if((this.value.length == 4) && document.getElementById('login').value.match(/^\d{4}$/))
{
alert("Form Submitted");
document.forms["loginform"].submit();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="action.php" method="post" name="loginform" id="loginform">
<input type="password" class="form-control" name="login" id="login">
<input type="submit" id="enter" value="Submit">
</form>
<div id="numpad">
<div class="row">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
</div>
<div class="row">
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
</div><div class="row">
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
You may want to validate that it is actually a 4-digit number using regex:
document.getElementById('login').value.match(/^\d{4}$)
The form submission is blocked here that is why I put the alert in...
You can clean this up a fair bit by replacing your inline click events with a listener:
$(function(){
$('#numpad a').on("click",function(e){//listen for clicks on the numpad elements
e.preventDefault();//don't follow the link
$('#login').val($('#login').val()+$(this).text()).change();//append the value
});
$('#login').on("change keyup",function(){//on change or keyup
if($(this).val().length == 4){//if the val is 4 chars long
//$('#loginform').submit();//trigger submission
$('#enter').click();//or click the submit button if you dont want to bypass the browsers native validation
}
});
$('#loginform').on("submit",function(e){//on submit
if($(this)[0].checkValidity()){//if valid
e.preventDefault();//stop submission for this demo only (remove when live)
alert("submitted!");//do an alert (demo only, remove when live)
} else {
e.preventDefault();//prevent submission
alert("Invalid!");//do an alert
}
$('#login').val("");//reset the input
});
});
#numpad {
width: 250px;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
#numpad a {
width: 60px;
line-height: 60px;
display:inline-block;
border: 1px solid;
margin: 10px;
vertical-align: middle;
font-size: 2em;
text-align:center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#numpad a:hover {
background: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="action.php" method="post" name="loginform" id="loginform">
<input type="password" class="form-control" name="login" id="login" required="required" pattern="[0-9]{4}" title="4 numbers only" maxlength="4" />
<input type="submit" id="enter" value="Submit" />
</form>
<div id="numpad"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>0</a></div>
Related
my goal is to create something like this :enter image description here
So an area where I can put a form for authentification or create an account. I already created a form in php which is linked to my database like this
<form action="connection.php" method="post">
<div class="form-group">
<label >Nom</label>
<input name = nom>
</div>
<div class="form-group">
<label >Prénom</label>
<input name = prenom>
</div>
<div class="form-group">
<label >Email</label>
<input name = mail>
</div>
<div class="form-group">
<label >Numéro de telephone</label>
<input name = tel>
</div>
<div class="form-group">
<label >mot de passe</label>
<input type=password id="inputPassword" placeholder="Password"">
</div>
<button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
function inscription($db,$nom,$prenom,$mail,$tel,$mdp){
try{
$request_client = "INSERT INTO client (nom, prenom, mail, tel, mdp) VALUES (:nom, :prename, :email, :phone,:pass);";
$statement_client = $db->prepare($request_client);
$statement_client->bindParam(':nom', $nom);
$statement_client->bindParam(':prename', $prenom);
$statement_client->bindParam(':email', $mail);
$statement_client->bindParam(':phone', $tel);
$statement_client->bindParam(':pass', $mdp);
$statement_client->execute();
}
catch (PDOException $exception)
{
error_log('Request error: '.$exception->getMessage());
return false;
}
}
Is there something in boostrap or css or even js which can make me creat this blue area ?
You can do this with CSS, something like:
.blue-box {
max-width: 450px;
margin: 1rem auto;
padding: 1rem;
background: #3b52a5;
border-radius: 8px;
color: #fff;
}
.blue-box .form-group {
display: flex;
justify-content: space-between;
flex-direction: column;
margin: 0.5rem 0;
}
.blue-box .form-group input {
padding: 0.75rem 1rem;
margin-top: 0.25rem;
border: 1px solid #060537;
border-radius: 8px;
background: none;
outline: none;
color: #fff;
}
.blue-box button {
padding: 0.75rem 1rem;
margin: 0.5rem auto;
background: #060537;
border-radius: 8px;
width: 100%;
outline: none;
border: none;
color: #fff;
}
body {
background: #7db9ff;
font-family: sans-serif;
}
<form action="connection.php" method="post" class="blue-box">
<div class="form-group">
<label >Nom</label>
<input name = nom>
</div>
<div class="form-group">
<label >Prénom</label>
<input name = prenom>
</div>
<div class="form-group">
<label >Email</label>
<input name = mail>
</div>
<div class="form-group">
<label >Numéro de telephone</label>
<input name = tel>
</div>
<div class="form-group">
<label >mot de passe</label>
<input type=password id="inputPassword" placeholder="Password"">
</div>
<button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
</form>
Perhaps it might be enough to make the background color of <form> into the blue that you want and also add a little padding to it so that the form fields aren't right at the edge of the box.
HTML p-3 will be your padding but only on sites that use Bootstrap.
<form class="blueBox p-3" action="connection.php" method="post">
CSS
.blueBox{
background: blue;
}
I have a request form in which I have a table with pre-typed text (which belongs to other field in form in HR) which is in hide/show select option. I need some help in which when the user selects the selected it shows a table with pre-typed text and when the user submits in PHP form, the recipient so gets the exact data in the email.
I have the hide/show part working but the I'm having problems sending the table with text.
i have $usersGMGroup = nl2br($_POST["acc_GMGroup"]); so i can have the text can go to next line.
Currently, I didn't have any way in which I could submit the table so I have the same table text written in textarea, which works but when I submit the form with data and the recipient gets textarea text with the other request. For example, if I sent a request for an IT service the form also sends the textarea pre type text.
Is there any way i can make the textarea with pre type text only submit when its select is selected
$(function() {
$("#groups").change(function() {
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
}
});
});
$('#groups').trigger('change');
//---------------------Hide Functions When Program Loads--------------------------------//
$(document).ready(function() {
$("#acc_GMGroup").hide();
});
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
color: #666;
line-height: 19px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h1 {
position: absolute;
margin: 0;
font-size: 36px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 75%;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 50px 0 #095484;
}
.banner {
position: relative;
height: 300px;
background-image: url("");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
input {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 17px;
font-weight: bold;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 3px 0;
background: transparent;
font-size: 17px;
font-weight: bold;
}
.hiddenField {
display: none;
}
table.tb {
border-collapse: collapse;
width: 650px;
}
.tb th,
.tb td {
padding: 6px;
border: solid 1px #262626;
}
.tb th,
.tb td {
color: #262626;
}
.tb th {
background-color: lightblue;
}
textarea {
white-space: pre;
text-align: left;
width: 650px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3">
<div class="form-group">
<h2>Requestor's Information Employee's Information</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userReqEmp">Requestor Name</label>
<input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userNameEmp">Full Name</label>
<input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userComEmp">Comments (Optional)</label>
<textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12" for="userEIDEmp">Employee ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userOIDEmp">One ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userDateEmp">Start Date</label>
</div>
<div class="row">
<div class="col-12">
<input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12">Select Department</label>
</div>
<div class="row">
<div class="col-12">
<select id="groups" name="groups" class="form-control w-100">
<option value="">Select an option</option>
<option value="GM">GM</option>
<option value="AGM">AGM</option>
</select>
</div>
</div>
<br>
<!-- GM -->
<div class="row">
<div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
<h2>DC GM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
<!-- Title -->
</tr>
<tr>
<td>PUBLIC<br>FunctionManagers<br>Managers</td>
<!-- Content -->
</tr>
<tr>
<th>Distribution List</th>
<!-- Title -->
</tr>
<tr>
<td>Woodland Mgmt<br>DCManager<br>InboundManagers<br>SrManager</td>
<!-- Content -->
</tr>
<tr>
<th>Additional Access</th>
<!-- Title -->
</tr>
<tr>
<td>DCNet<br>AS400<br>VPN Non-Standard</td>
<!-- Content -->
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup">
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
</div>
</div>
</div>
<!-- End of Right Side -->
</div>
</div>
</form>
you can have it disabled by default by adding disabled attribute to it which will prevent the field from being submitted with the rest of the form
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup" disabled>
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
and re-enable it when option selected
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
$("#acc_GMGroup").prop('disabled','');
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
$("#acc_GMGroup").prop('disabled','disabled');
}
I am attempting to create a form that outputs the entered data when "submit" is clicked to a textarea.
Currently I can get it to submit to the area below the form but am unsure how to have multiple ID's in a single textarea.
<html>
<head>
<script>
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
document.getElementById('name').innerHTML =
document.getElementById("user_name").value;
document.getElementById('stepsTaken').innerHTML =
document.getElementById("user_stepsTaken").value.replace(/(?:\r\n|\r|\n)/g, '<br />');
document.getElementById('theDate').innerHTML =
document.getElementById("user_theDate").value.replace(/(?:\r\n|\r|\n)/g, '<br />');
}
</script>
</head>
<body>
<script type="text/javaScript">
function Qreplace(e) {
var textfield = document.getElementById(e);
var regex = /#test/gi;
textfield.value = textfield.value.replace(regex, "1. test\n2. test");
var regex = /#report/gi;
textfield.value = textfield.value.replace(regex, "1. report\n2. report");
}
</script>
<form action="javascript:void(0);">
<p>
<label><b>Enter a Message</b></label><p>
<input type="text" id="user_input" required><p>
<label><b>Enter a name</b></label><p>
<input type="text" id="user_name" required><p>
<textarea id="user_stepsTaken" onkeyup="Qreplace('user_stepsTaken')" placeholder="Actions taken and notes..." style="height: 91px; max-height: 350px;" required></textarea>
<label for="sme">TL/SME Assist*</label>
<br>
Yes <input required="" type="radio" onclick="javascript:smeCheck();" value="Yes" name="TL/SME" id="yesCheck">
No <input type="radio" onclick="javascript:smeCheck();" value="No" name="TL/SME" id="noCheck"><br>
<div id="ifyes" style="display:none">
<input type="text" id="smeAssist" name="smeAssist" placeholder="Name or Initials of the TL/SME that provided assistance">
<!-- Hide/Show SME additonal options based on radio check box -->
<script type="text/javascript">
function smeCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifyes').style.display = 'block';
} else document.getElementById('ifyes').style.display = 'none';
}
</script>
</div>
<div style="display:block; margin-left: 0px;">
<label for="dateStarted">Issue Started*</label>
<input type="date" id="user_theDate" name="theDate" class="select">
</div>
<input type="submit" onclick="showInput();"><br/>
</form>
<label>Your input: </label>
<p><span id='display'></span></p>
<p><span id='name'></span></p>
<div id='stepsTaken'></div>
<div id='theDate'></div>
</body>
</html>
Thank you for any help I am quite unfamiliar with Javascript.
So the end result I am trying to accomplish is have the user input to output into a textarea with the following formatting below.
Message: Message here
Name: Name here
Info: Actions Taken
Date: 2018-12-13
you should keep return false; in function showInput() as form get submitted and there will be nothing to show
or make input type="button" instead of type="submit"
I found a solution to the issue using Jquery as follows
$('#summary').click(function() {
var name = $('#clientName').val()
var message = $('#errorMessage').val()
var ret = "Name: "+name+" \n\rMessage: " + message;
console.log(ret)
$(".output-container").fadeIn();
$("#output").text(ret);
})
$("#copyForm").click(function(){
$("#output").select();
document.execCommand('copy');
$(".success").fadeIn();
});
body {font-family: Helvetica;background-color: #1E365E;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #1E365E;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button] {
background-color: #1E365E;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=radio] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=date] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit]:hover {
background-color: #1E365E;
}
input[type=button]:hover {
background-color: #1E365E;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 5%;
}
.output-container {
display: none;
margin-top: 50px;
}
#output {
height: 300px;
}
.success {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="container">
<h2>Testing Copy</h2>
<form id="myForm" action="/action_page.php">
<label for="cName">Client Name*</label>
<input type="text" id="clientName" name="cName" placeholder="Client Name...">
<label for="errorMessage">Error Message</label>
<input type="text" id="errorMessage" name="errorMessage" placeholder="Any error messages?">
</form>
<button id="summary">View Summary</button>
<div class="output-container">
<textarea id="output">
<h2>Form Content</h2>
</textarea>
<button id="copyForm">Copy Summary</button>
</div><!-- #end output-container -->
<p class="success"><strong>Form successfully copied</strong></p>
</div>
I want to display an error message in my multiple step form in jquery if
I click on next button with out filling any value it should gives error message as soon as enter value error message disappear.if i click on next bttton with out filling any value it should gives error message as soon as enter value error message disappear
function isEmail(str) { // simple email validation
return /(.+)#(.+){2,}\.(.+){2,}/.test($.trim(str));
}
function isEmpty(str) { // test for empty string
return $.trim(str) === "";
}
function validate($div) { // validates any div - will not let you leave the div if error
var $fields = $div.find("input"), hasError = false;
$fields.each(function() {
$(this).removeClass("error")
hasError = this.name=="pword" && isEmpty(this.value);
if (hasError) {
$("#pword").addClass("error").focus();
return false;
}
hasError = this.name=="email" && (isEmpty(this.value) || !isEmail(this.value));
if (hasError) {
$("#email").addClass("error").focus();
return false;
}
hasError = isEmpty(this.value); // the rest of the fields
if (hasError) {
$(this).addClass("error").focus();
return false;
}
})
return hasError?false:true;
}
$(function() {
// validate all divs on submit, but actually only necessary to validate thediv the submit is on
$("#myForm").on("submit",function(e) {
$(".page").each(function() {
if (!validate($(this))) {
e.preventDefault(); // stop submission
return false;
}
});
});
$(".nav").on("click", function() {
var $parent = $(this).closest("div");
var $nextDiv = $(this).hasClass("next") ? $parent.next() : $parent.prev();
if (validate($parent)) { // is the div this button is on valid?
$parent.fadeOut(function() { // fade it out and fade the next one in
if ($nextDiv.length) {
$nextDiv.fadeIn()
for (var i=$(".page").length;i> $nextDiv.index(); i--) {
$("#bar" + i).css({"background-color": "#D8D8D8"}); // we are going backwards
}
$("#bar" + $nextDiv.index()).css({"background-color": "#38610B"});
}
});
}
});
});
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #D8D8D8;
}
#wrapper {
width: 995px;
padding: 0px;
margin: 0px auto;
font-family: helvetica;
position: relative;
}
#wrapper .baricon {
display: inline-block;
border-radius: 100%;
padding: 12px;
background-color: #38610B;
color: white;
}
#wrapper .progress_bar {
width: 200px;
height: 5px;
border-radius: 20px;
background-color: #D8D8D8;
display: inline-block;
}
#wrapper form div {
margin-left: 340px;
padding: 10px;
box-sizing: border-box;
width: 300px;
margin-top: 50px;
background-color: #585858;
}
#wrapper form div p {
color: #F2F2F2;
margin: 0px;
margin-top: 10px;
font-weight: bold;
}
#wrapper form div .form_head {
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
}
#wrapper form div input[type="text"] {
width: 200px;
height: 40px;
padding: 5px;
border-radius: 5px;
border: none;
margin-top: 10px;
}
#wrapper form div input[type="button"],
input[type="submit"] {
width: 80px;
height: 40px;
border-radius: 5px;
border: 2px solid white;
background: none;
color: white;
margin: 5px;
margin-top: 10px;
}
#user_details,
#qualification {
display: none;
}
.error { background-color:pink !important}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
<br>
<span class='baricon'>1</span>
<span id="bar1" class='progress_bar'> </span>
<span class='baricon'>2</span>
<span id="bar2" class='progress_bar'> </span>
<span class='baricon'>3</span>
<form method="post" action="" id="myForm">
<div id="account_details" class="page">
<p class='form_head'>Account Details</p>
<p>Email Address</p>
<input type="text" name="email" id="email" placeholder='Email Address'>
<p>Password</p>
<input type="text" name="pword" id="pword" placeholder='Password'>
<br>
<input type="button" value="Next" class="nav next" />
</div>
<div id="user_details" class="page">
<p class='form_head'>User Details</p>
<p>First Name</p>
<input type="text" name="fname" id="fname" placeholder='First Name'>
<p>Last Name</p>
<input type="text" name="lname" is="lname" placeholder='Last Name'>
<p>Gender</p>
<input type="text" name="gender" id="gender" placeholder='Gender'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="button" value="Next" class="nav next" />
</div>
<div id="qualification" class="page">
<p class='form_head'>Qualification</p>
<p>Qualification</p>
<input type="text" placeholder='Qualification'>
<p>Hobbies</p>
<input type="text" placeholder='Hobbies'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="Submit" value="Submit">
</div>
</form>
</div>
You can use jQuery Steps plugin for these multiple steps form. This will be very easy to handle.
I have created a tab section without using Jquery UI. Now I have to set some condition on it.
1) If the user already logged in then the first tab will hide and directly jump to the second tab.
2) I have to disabled next tab until and unless the user does not field all the details in the current tab content.
Would you help me in this?
$(document).ready(function() {
$(".tab_target a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("active_tab");
$(this).parent().siblings().removeClass("active_tab");
var tab = $(this).attr("href");
$(".tab_inside").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
body{
margin: 0;
padding: 0;
}
.tab_section{
width: 700px;
margin: 0 auto;
}
.tab_section ul.tab_target{
position: relative;
display: block;
list-style: none;
padding: 0;
clear: both;
/*background: #f8f8f8;*/
}
.tab_section ul.tab_target li{
display: inline-block;
margin: 10px;
}
.tab_section ul.tab_target li a{
padding: 06px 45px;
border: 1px solid #ccc;
text-decoration: none;
}
.tab_section ul.tab_target li a:hover{
color: #fff;
background-color: #00a63f;
}
.border{
border:1px solid #ccc;
}
.tab_inside
{
padding: 20px 30px;
box-sizing: border-box;
display: none;
}
.tab_inside form .text-fields{
padding: 20px 0;
}
.tab_target li.active_tab {
position: relative;
background-color: #fff;
border-bottom: 1px solid #fff;
z-index: 5;
}
#tab1 {
display: block;
}
.all_tab {
border: 1px solid #d4d4d1;
background-color: #fff;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<?php session_start(); ?>
<div class="tab_section">
<ul class="tab_target">
<li class="active_tab">Demo1</li>
<li>Demo2</li>
<li>Demo3</li>
<li>Demo4</li>
</ul>
<div class="all_tab">
<?php if (!isset($_SESSION['username'])) {?>
<div id="tab1" class="border tab_inside">
<h2>Demo1</h2>
<form action="#" method="post">
<div class="text-fields">
<label>username</label>
<input type="text" name="username">
</div>
<div class="text-fields">
<label>Password</label>
<input type="password" name="password">
</div>
<input type="submit" name="submit" value="submit">
</form>
</div><!--tab1-->
<?php
} ?>
<div id="tab2" class="border tab_inside hide_tab">
<h2>Demo2</h2>
<form action="#" method="post">
<div class="text-fields">
<label>Email </label>
<input type="email" name="email">
</div>
<div class="text-fields">
<label>Mobile no</label>
<input type="text" name="mobile">
</div>
<input type="submit" name="submit" value="submit">
</form>
</div><!--tab2-->
<div id="tab3" class="border tab_inside">
<h2>Demo3</h2>
<form action="#" method="post">
<div class="text-fields">
<label>Address</label>
<textarea name="address"></textarea>
</div>
<div class="text-fields">
<label>Address2</label>
<textarea name="address2"></textarea>
</div>
<input type="submit" name="submit" value="submit">
</form>
</div><!--tab4-->
<div id="tab4" class="border tab_inside">
<h2>Demo4</h2>
<h2>Success</h2>
</div><!--tab4-->
</div><!--all_tab-->
</div>
for me i will use php direct jump to second tab
or u can set a var in js by php to control jump or not jump
not sure help or not
if u load all the page together
<?php
$session=2;// example of session data value
?>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
$(function()
{
$("[name='dv']").css("display","none");
<?php
if(isset($session))
echo"$('#d2').css('display','');";
else
echo"$('#d1').css('display','');";
?>
});
</script>
<form>
<div id="d1" name="dv">
reg page
</div>
<div id="d2" name="dv">
tab 2
</div>
</form>
if u load the page one by one
<?php
$session=2;// example of session data value
?>
<form>
<?php if(isset($session))
{?>
<div id="d1" name="dv">
reg page
</div>
<?php }
else
{
?>
<div id="d2" name="dv">
tab 2
</div>
<?php }?>
</form>
not sure what u want , sorry
my English is too poor