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.
Related
i have a problem when i want to login into my admin login panel i use username and password and the page refresh and stays the same without going to Settings.php path that i want to go in . if i can even try to add another script can give me permission to access that Settings.php file witout having to go trought that login.php file that causes the problem
*first code : Login.php file
*Second code : Settings.php file
<br/><br/><br/>
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-lock"></i> login</h4>
</div>
<div class="panel-body">
<?php echo form_open('/auth/login');?>
<input type="text" placeholder="username" class="form-control " name="_name" />
<br/>
<input type="password" placeholder="password" class="form-control " name="_pass" />
<br/>
<input type="submit" name="login" class="btn btn-success" value="login" />
<?php echo form_close();?>
</div>
</div>
</div>
<div class="col-md-4"></div>
------------------------------------------------------------------------------
------------------------------------------------------------------------------
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa fa-gear"></i> General Settings </h4>
</div>
<!--<form method="post" action="{site_url}/dashboard/save_settings" >-->
<?php echo form_open('/dashboard/save_settings');?>
<div class="panel-body">
<div class="form-group">
<label for="site_name">Site Name</label>
<input name="site_name" class="form-control" id="site_name" value="{site_name}" type="text">
</div>
<div class="form-group">
<label for="site_mail">Email</label>
<input name="site_mail" class="form-control" id="site_mail" value="{site_mail}" type="text">
</div>
<div class="form-group">
<label for="site_desc">SEO description</label>
<textarea name="site_desc" class="form-control" id="site_desc" rows="3">{site_desc}</textarea>
</div>
<div class="form-group">
<label for="site_keys">SEO Keywords</label>
<textarea name="site_keys" class="form-control" id="site_keys" rows="3">{site_keys}</textarea>
</div>
<div class="form-group">
<label for="ad_code">Ad Code <small>(add ad code here like google adsense code or html code.)</small> </label>
<textarea name="ad_code" class="form-control" id="ad_code" rows="3">{ad}</textarea>
</div>
<!-- Social Media -->
<h5><b>Social Media</b></h5>
<div class="input-group">
<span class="input-group-addon" id="facebook"><i class="fa fa-facebook"></i></span>
<input name="facebook" type="text" value="{facebook}" class="form-control" aria-describedby="facebook">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="twitter"><i class="fa fa-twitter"></i></span>
<input name="twitter" type="text" value="{twitter}" class="form-control" aria-describedby="twitter">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="googleplus"><i class="fa fa-google-plus"></i></span>
<input name="googleplus" type="text" value="{googlep}" class="form-control" aria-describedby="googleplus">
</div>
<!-- END / Social Media -->
</div>
<div class="panel-footer">
<!--<input class="btn btn-success" type="submit" name="update" value="save" />-->
<button class="btn btn-success" type="submit" name="update"><i class="fa fa-save"></i> save</button>
</div>
<!--</form>-->
<?php echo form_close();?>
</div>
</div>
<div class="col-md-3"></div>
In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags
My Projects
Add New Projects
My Projects Menu Click one form1 will be display?
Add New Projects Menu Click second form2 will be display?
Here my model code:
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#mp").hide();
});
});
$(document).ready(function() {
$("#addnewprojects").hide();
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#anp").hide();
});
});
</script>
my intention is which menu I will click that form will display in the model
Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#addnewprojects").hide();
// $(this).hide();
$("#anp").show();
});
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#myprojects").hide();
//$(this).hide();
$("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name1</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address1</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions1
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
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 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!
I'm so confused how to add/remove multiple input fields in my code.
This is my code :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
</div>
</div>
I want to add new group of input fields when i'm click the button.
Please advice, Thanks
Try this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="input-div">
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
<button id="b2" class="btn btn-success add-more"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
</div>
And this is de jquery code:
$('#b1').click(function(){
var newGroup = $('.input-div').last().html();
$('.input-div').last().after('<div class="input-div">'+newGroup+'</div>');
});
$('#b2').click(function(){
$('.input-div').last().remove();
});