I am currently working on a web application that required a registration form. After the data entered in and click the button to submit the data, a pop up window will show up with specific data entered in the form and then the form can be reset for new entry.
I am working the project in VS 17 and I've used MVC empty project template to make my web application.
The coding as follow:
HTML code used for button action
<button type="submit" class="registerbtn" id="register" onclick="button_action()">Register</button>
<script>button_action();</script>
JS file for pop up window :
function button_action() {
$(document).ready(function () {
$("#register").submit(function () {
$("#myModal").modal();
});
});
}
HTML code used to create pop up window modal :
#* model *#
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
#* model content *#
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px" ;>
<h3> THANK YOU FOR REGISTERING WITH NIKINI LEARNING </h3>
</div>
#* body of the model *#
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
#* Customer Registration Reference No. display*#
<div class="form-group">
<label for="crf">
<span class="glyphicon glyphicon-user"></span>
Customer Registration No. :
</label>
<input type="text" class="form-control" id="crf" />
</div>
#* Customer Name DIsplay*#
<div class="form-group">
<label for="name">
<span class="glyphicon glyphicon-user"></span>
Customer Name :
</label>
<input type="text" class="form-control" id="name" />
</div>
#* Customer Contact No. Display*#
<div class="form-group">
<label for="contact">
<span class="glyphicon glyphicon-user"></span>
Contact No. :
</label>
<input type="text" class="form-control" id="contact" />
</div>
#* Customer Email Display*#
<div class="form-group">
<label for="email">
<span class="glyphicon glyphicon-user"></span>
Email address :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Customer registered course display*#
<div class="form-group">
<label for="course">
<span class="glyphicon glyphicon-user"></span>
Registered course :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Customer registered date display*#
<div class="form-group">
<label for="date">
<span class="glyphicon glyphicon-user"></span>
Registered date :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Course duration display*#
<div class="form-group">
<label for="duration">
<span class="glyphicon glyphicon-user"></span>
Course duration :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Course price display*#
<div class="form-group">
<label for="duration">
<span class="glyphicon glyphicon-user"></span>
Course price :
</label>
<input type="text" class="form-control" id="email" />
</div>
<h4><i>Please use your Customer Registration Reference Number (CRF) to do the payment </i></h4>
</form>
#* footer of the model *#
<div class="modal-footer">
#* edit button *#
<button type="button" class="btn btn-submit btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-edit"></span> edit
</button>
#* new button *#
<button type="reset" class="btn btn-submit btn-default pull-right" data-dismiss="modal">
<span class="glyphicon glyphicon-ok"></span> New
</button>
</div>
</div>
</div>
</div>
</div>
</div>
When I click the button without filling the fields in the form, pop up window showed up. So, I've changed the click function in the JS code with submit. Then the pop up window won't show up when the data is not filled in required field but even after the data is filled and click the submit button, the form just reset and pop up window won't show up.
I need some advice to rectify this problem since this took so much time to complete my project.
Any other methods that I can use to do the same job also preferred.
Here's the whole code of the view for those who need:
#{
ViewBag.title = "Customer Registration";
Layout = "~/Views/Shared/Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/register.css" rel="stylesheet" />
<link href="~/Content/nav.css" />
<script src="~/Scripts/layout.js"></script>
<script src="~/Scripts/register.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<navbar>
<div class="topnav" id="myTopnav">
Login
Payment
Customer Registration
Course Details
User Info
<a href="javascript:void(0);" class="icon" onclick="myfunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</navbar>
#* Register form *#
<form>
#* Main container *#
<div class="container">
#* form heading *#
<p class="my_heading1">
<b>
Customer Registration Form
</b>
</p>
<p class="my_text_type1">
<i>
Please fill out the form to Register in Nikini Learning Courses.
</i>
</p>
#* Data entry container *#
<div class="entry_container">
#* status entry *#
<label for="status"><b>Status</b></label>
<input type="text" name="status" required />
#*Name Entry *#
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter your name" name="name" required />
#*Name with initials entry *#
<label for="namei"><b>Name with initials</b></label>
<input type="text" placeholder="Your name with initials" name="namei" required />
#*NIC entry*#
<label for="nic><b>NIC / Passport No. </b></label>
<input type="text" placeholder="Enter your NIC / Passport No." name="nic" required />
#*Contact No entry*#
<label for="contact"><b>Contact No.</b></label>
<input type="text" placeholder="Enter your Mobile / Land line No." name="contact" required />
#*Email entry*#
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
#*Involvement type entry*#
<label for="type"><b>Type:</b></label>
<div class="checkboxes">
<input type="checkbox" name="person" value="person" /><label>Personal</label>
<input type="checkbox" name="comp" value="comp" /><label>Company</label>
</div>
#*Address entry*#
<label for="address"><b>Address</b></label>
<input type="text" placeholder="Enter your address here" name="address" required />
#*Company / Institute Name entry*#
<label for="Com_In"><b>Company / Institute Name</b></label>
<input type="text" placeholder="Enter your Company / Institute Name" name="Com_In" required />
#*Job / Field of Study entry*#
<label for="job_field"><b>Job title / Field of study</b></label>
<input type="text" placeholder="Enter your Job title / Field of Study" name="job_field" required />
#*Course date entry*#
<label for="date"><b>Starting date of the course</b></label>
<input type="date" name="date" required />
#*Course Name entry*#
<label for="course"><b>Course Name</b></label>
<input type="text" placeholder="Enter the course name" name="course" required />
<p></p>
#*Price entry*#
<label for="price"><b>Course price</b></label>
<input type="text" name="price" required />
<p></p>
#*Duration entry*#
<label for="duration"><b>Duration of the course</b></label>
<input type="text" name="duration" required />
</div>
#* submit button :
- by clicking the button, a pop-up window will be displayed with the data entered to the database.
*#
<button type="submit" class="registerbtn" id="register" onclick="button_action()">Register</button>
<script>button_action();</script>
</div>
</form>
<div>
#* model *#
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
#* model content *#
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px" ;>
<h3> THANK YOU FOR REGISTERING WITH NIKINI LEARNING </h3>
</div>
#* body of the model *#
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
#* Customer Registration Reference No. display*#
<div class="form-group">
<label for="crf">
<span class="glyphicon glyphicon-user"></span>
Customer Registration No. :
</label>
<input type="text" class="form-control" id="crf" />
</div>
#* Customer Name DIsplay*#
<div class="form-group">
<label for="name">
<span class="glyphicon glyphicon-user"></span>
Customer Name :
</label>
<input type="text" class="form-control" id="name" />
</div>
#* Customer Contact No. Display*#
<div class="form-group">
<label for="contact">
<span class="glyphicon glyphicon-user"></span>
Contact No. :
</label>
<input type="text" class="form-control" id="contact" />
</div>
#* Customer Email Display*#
<div class="form-group">
<label for="email">
<span class="glyphicon glyphicon-user"></span>
Email address :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Customer registered course display*#
<div class="form-group">
<label for="course">
<span class="glyphicon glyphicon-user"></span>
Registered course :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Customer registered date display*#
<div class="form-group">
<label for="date">
<span class="glyphicon glyphicon-user"></span>
Registered date :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Course duration display*#
<div class="form-group">
<label for="duration">
<span class="glyphicon glyphicon-user"></span>
Course duration :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Course price display*#
<div class="form-group">
<label for="duration">
<span class="glyphicon glyphicon-user"></span>
Course price :
</label>
<input type="text" class="form-control" id="email" />
</div>
<h4><i>Please use your Customer Registration Reference Number (CRF) to do the payment </i></h4>
</form>
#* footer of the model *#
<div class="modal-footer">
#* edit button *#
<button type="button" class="btn btn-submit btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-edit"></span> edit
</button>
#* new button *#
<button type="reset" class="btn btn-submit btn-default pull-right" data-dismiss="modal">
<span class="glyphicon glyphicon-ok"></span> New
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
change button_action() function to below function
function button_action() {
$("#myModal").modal();
}
Related
Hello I am creating a Login / Registration system on the same page using PHP and MySQl I am having trouble with the post method and action as it is on the same page. Someone knows how I can resolve this problem.
Below is my code for the login and registration/ signup system the page is separated with a slider using JavaScript, my problem is that I cannot use the Post method and action to save the form in my DB
<html>
<!--WEB-APP Login / Register Page Title-->
<title>Envision: Login/Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--External styling CSS / Font-Family Style / Swiper CSS-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Product+Sans' rel='stylesheet' type='text/css'>
<!--Custom Styling CSS-->
<link rel="stylesheet" type="text/css" href="CSS/Access.css">
<!--Font Awesome Script -->
<script src="https://kit.fontawesome.com/26011c24ac.js" crossorigin="anonymous"></script>
<!--Custom js script-->
<script defer src="js/Custom_JS/log_slider.js"></script>
<script defer src="js/Custom_JS/selector.js"></script>
</html>
<body>
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--Back Button to Landing Page-->
<div class="back">
<button onClick="location.href='Main.php'" class="back-btn">
<i class="fas fa-arrow-alt-circle-left" style="font-size: 36px;">
<div class="back_text">
Back
</div>
</i>
</button>
</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--CONTAINER CONTAINS LOGIN / SIGN-UP SECTIONS-->
<div class="container">
<!--LOGIN SECTIONS STARTS HERE-->
<div class="form Login" action="php/check_login.php" method="post">
<form id="login" class="login_input">
<h2>Login</h2>
<div class="form_log">
<span>
Username
</span>
<input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_log">
<span>
Password
</span>
<input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="forgot_password">
<p>Forgotten you're Password ?</p>
</div>
<button class="submit" type="submit">
Login
</button>
</form>
</div>
<!--LOGIN SECTION ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<!--SLIDER TO TOGGLE BTW LOGIN SECTION AND SIGN-UP SECTION-->
<div class="slider_form">
<div class="slider">
<div class="slide_text user_signup">
<h2>
Don't have an account ?
</h2>
<p>
Sign-Up and get instant access to Envision skill & personal competency project management web-application
</p>
</div>
<div class="slide_text user_login">
<h2>
Already have an Account ?
</h2>
<p>
Login and get access to your projects !
</p>
</div>
<div class="slide_btn">
<span class="user_signup">Sign-up</span>
<span class="user_login">Login</span>
</div>
</div>
<!--SLIDER ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<!--SIGN-UP SECTIONS STARTS HERE-->
<div class="form Signup">
<form id="signup" class="signup_input" method="post" >
<h2>
Sign-up
</h2>
<div class="form_signup">
<span>
Username
</span>
<input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Email Address
</span>
<input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Password
</span>
<input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Confrim Password
</span>
<input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="role_title">
<h4>Select User Type: </h4>
</div>
<label class="reg_selector">
<select name="role">
<option selected value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
</label>
<button type="submit" class="submit">
Sign-Up
</button>
</form>
</div>
<!--SIGN-UP SECTION ENDS HERE-->
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------->
</div>
</body> ``
Your action attribute in the login form is misplaced and is missing in signup. It should be in the form tag.
<!--LOGIN SECTIONS STARTS HERE-->
<div class="form Login" >
<form id="login" class="login_input" action="php/check_login.php" method="post">
<h2>Login</h2>
<div class="form_log">
<span>
Username
</span>
<input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_log">
<span>
Password
</span>
<input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="forgot_password">
<p>Forgotten you're Password ?</p>
</div>
<button class="submit" type="submit">
Login
</button>
</form>
</div>
<!--LOGIN SECTION ENDS HERE-->
Similarly assuming your signup script is php/signup.php the signup form will be
<!--SIGN-UP SECTIONS STARTS HERE-->
<div class="form Signup">
<form id="signup" class="signup_input" method="post" action="php/signup.php" >
<h2>
Sign-up
</h2>
<div class="form_signup">
<span>
Username
</span>
<input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Email Address
</span>
<input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Password
</span>
<input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Confrim Password
</span>
<input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="role_title">
<h4>Select User Type: </h4>
</div>
<label class="reg_selector">
<select name="role">
<option selected value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
</label>
<button type="submit" class="submit">
Sign-Up
</button>
</form>
</div>
<!--SIGN-UP SECTION ENDS HERE-->
In the example above the scripts to handle the signup and login will be done on two separate scripts check_login.php and signup.php. Please change the action attribute with the actual location of the scripts responsible for managing signup and login
Buttons in navbar.blade.php file
Each time when user click on edit button then its correspondence ID should be pass through the this Form...
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Edit</button>
and this button is redirected to this form
<form action="-----------" method="POST" role="form" class="form-horizontal">
{{ csrf_field() }}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Nav ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nav_id" placeholder="nav id" readonly="" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Nav Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nav_name" placeholder="nav name" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Nav Details</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nav_description" placeholder="nav details" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm">
Submit</button>
</div>
</div>
</form>
So how to update the record of selected ID from .blade file and what should i write here in navbarController.php and in its route file
public function edit(Request $request) {
}
}
It's the solution
add "edit-button" class to your button and using alt attribute to keep $ID
<button class="edit-button btn btn-primary" alt="<?=$ID?>" data-toggle="modal" data-target="#myModal">Edit</button>
add hidden field to keep $ID to your form
<input id="id" type="hidden" name="id" value=""/>
Using #section and #yield to write jquery code to adjust value for hidden fields when the user click on edit button. let's see https://laravel.io/forum/09-02-2014-using-section-and-yield
#section('javascript')
$("body").on('click','.edit-button',function(){
var activeEditId = $(this).attr('alt');
$("#id").val(activeEditId);
)});
#stop
I am working on a form where a user selects an option from radio buttons.
Then depending on option, a view of text fields appears. The user then inputs the required data and submits the form.
The options have different options and such data submitted should be different.
My challenge is how to submit only data from the selected radio button fields.
Anyone kindly help. Thank you
$(function () {
$('input[type="radio"]').on("click",function () {
$(".selections").hide(); // hide them all
if (this.value=="both") $(".selections").show(); // show both
else $("#"+this.value).show(); // show the one with ID=radio value
});
$('.selections input[type="checkbox"]').on("click",function() {
$(this).next().toggle(this.checked); // hide if not checked
});
$('.selections input[type="text"]').each(function() { // initialise
$(this).toggle($(this).prev().is(":checked"));
});
});
.selections { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" name="bill_type" value="percentage">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<!-- flat_rate radio button option -->
<div id="flat_rate" class="selections">
<input type="hidden" name="bill_type" value="flat_rate">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at">
</div>
<!-- variable radio button option -->
<div id="variable" class="selections">
<input type="hidden" name="bill_type" value="variable">
<div class="form-group">
<label for="limit" class="col-md-4 control-label">Limit</label>
<div class="col-md-4">
<input id="limit" placeholder="10" type="number" class="form-control" name="limit" autofocus>
</div>
</div>
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" name="send_at">
<br/>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
You should try to use Bootstrap Tabs [imho], but if you want to go with radios...
Disabling all inputs will prevent them from being submited:
$("#div :input").attr("disabled", true);
or
$('#div').find('input, textarea, button, select').attr('disabled','disabled');
Code from this post
Firstly you don't need same field repeatedly.Try like this
$(function () {
$('input[name="billing"]').on('change',function(){
$('#bill_type').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" id="bill_type" name="bill_type" value="">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
After submission you can do whatever based on the value of bill_type.
I have two types content in each div. One is a table and another is the form. I want to swap it by pressing a button.
HTML
<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
<div id="table">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>001</td>
<td>DL650XT</td>
<td>369000</td>
</tr>
</table>
</div>
<div id="formDiv">
<form class="form" method="post" action="" name="contact" id="contact">
<fieldset>
<legend> Contact Form </legend>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
<button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
</div>
</fieldset>
</form>
</div>
</div>
Javascript
$(document).ready(function() {
$('#formDiv').css('border', 'red !important');
//swap content
$('#btn').on('click',function() {
$('#table').hide();
$('#formDiv').prop('display', 'show');
})
});
It's only working once. I want the content swap every click.
Here's the fiddle : https://jsfiddle.net/krm85qq3/5/
You can use toggle function in order to display or hide the matched elements.
$('#btn').on('click',function() {
$('#table').toggle();
$('#formDiv').prop('display', 'show');
})
$(document).ready(function() {
$('#btn').on('click', function() {
$('#table').toggle();
$('#formDiv').toggle();
});
});
#formDiv {
display: none;
border: red;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
<div id="table">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>001</td>
<td>DL650XT</td>
<td>369000</td>
</tr>
</table>
</div>
<div id="formDiv">
<form class="form" method="post" action="" name="contact" id="contact">
<fieldset>
<legend> Contact Form </legend>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
<button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
</div>
</fieldset>
</form>
</div>
</div>
You can use the jQuery toggle() function to... toggle between a show/hide state automatically :)
Toggle works great, but you can also handle it manually. For example, if you want to be able to perform certain functionality when the contact form is showing vs when the table is showing. The following code does the same thing the toggle would do, only applied manually. Just for variety. :)
$(document).ready(function() {
var formEl = $("#formDiv"),
tableEl = $("#table"),
btnEl = $("#btn");
//swap content
btnEl.on('click',function() {
if (tableEl.is(":visible")) {
tableEl.hide();
formEl.show();
btnEl.find("i").text(" Return to Table");
} else {
tableEl.show();
formEl.hide();
btnEl.find("i").text(" Contact Us");
}
})
});
#formDiv {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
<div id="table">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>001</td>
<td>DL650XT</td>
<td>369000</td>
</tr>
</table>
</div>
<div id="formDiv">
<form class="form" method="post" action="" name="contact" id="contact">
<fieldset>
<legend> Contact Form </legend>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
<button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
</div>
</fieldset>
</form>
</div>
</div>
In the above example, if the table is showing and you click on the button, I also wanted to change the text of the btn el. Thus, knowing the state of the table el and using that as my manual toggle point, I can tinker with the state of other elements at will.
I have developed a mail box form where i want to hide cc , bcc option initially. cc, bcc will when i click on their option.
I am not able to do this.
<form class="inbox-compose form-horizontal" id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="inbox-compose-btn">
<button class="btn green">
<i class="fa fa-check"></i>Send</button>
<button class="btn default inbox-discard-btn">Discard</button>
<button class="btn default">Draft</button>
</div>
<div class="inbox-form-group mail-to">
<label class="control-label">To:</label>
<div class="controls controls-to">
<input type="text" class="form-control" name="to">
<span class="inbox-cc-bcc">
<span class="inbox-cc"> Cc </span>
<span class="inbox-bcc"> Bcc </span>
</span>
</div>
</div>
<div class="inbox-form-group input-cc display-hide">
<label class="control-label">Cc:</label>
<div class="controls controls-cc">
<input type="text" name="cc" class="form-control"> </div>
</div>
<div class="inbox-form-group input-bcc display-hide">
<label class="control-label">Bcc:</label>
<div class="controls controls-bcc">
<input type="text" name="bcc" class="form-control"> </div>
</div>
<div class="inbox-form-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" class="form-control" name="subject"> </div>
</div>
<div class="inbox-form-group">
<textarea class="inbox-editor inbox-wysihtml5 form-control" name="message" rows="12"></textarea>
Please help me to make my form better
Initially hide the div like:
<span class="inbox-cc-bcc" style="display:none;">
<span class="inbox-cc"> Cc </span>
<span class="inbox-bcc"> Bcc </span>
</span>
and show it by adding an event listener on cc, bcc button using jquery show() method
You can use the hide class to hide sections that you would like to hide initially.
HTML
<form class="inbox-compose form-horizontal" id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="inbox-compose-btn">
<button class="btn green">
<i class="fa fa-check"></i>Send</button>
<button class="btn default inbox-discard-btn">Discard</button>
<button class="btn default">Draft</button>
</div>
<div class="inbox-form-group mail-to">
<label class="control-label">To:</label>
<div class="controls controls-to">
<input type="text" class="form-control" name="to">
<span class="inbox-cc-bcc">
<span class="inbox-cc" style="cursor: pointer;cursor: hand;"> Cc </span>
<span class="inbox-bcc" style="cursor: pointer;cursor: hand;"> Bcc </span>
</span>
</div>
</div>
<div id="divCC" class="inbox-form-group input-cc display-hide hide">
<label class="control-label">Cc:</label>
<div class="controls controls-cc">
<input type="text" name="cc" class="form-control"> </div>
</div>
<div id="divBCC" class="inbox-form-group input-bcc display-hide hide">
<label class="control-label">Bcc:</label>
<div class="controls controls-bcc">
<input type="text" name="bcc" class="form-control"> </div>
</div>
<div class="inbox-form-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" class="form-control" name="subject"> </div>
</div>
<div class="inbox-form-group">
<textarea class="inbox-editor inbox-wysihtml5 form-control" name="message" rows="12"></textarea></div>
<div id="push"></div>
</form>
jQuery
$('.inbox-bcc').click(function(){
console.log('bcc');
$('#divBCC').toggleClass('hide');
});
});
Here is a working fiddle: http://www.codeply.com/go/iPH6UVoHkc
Hope this helps!