I have several divs tag, each with a button inside. Clicking on each button will show a hidden div tag.
<div class="box-form">
<label class="control-label">name : </label>
<span class="text text-info txt_modelname">#Model.Name</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
<div class="box-form">
<label class="control-label">family : </label>
<span class="text text-info txt_modelname">#Model.family</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
I want to create a function that displays every button on this div below it
Btn_editName.click(function () {
$('.box-edit-name').toggle();
});
You could select the corresponding div via:
$("button.btn.btn-primary.btn-sm.edit__field").click(function(){
$(this).next().next().toggle()
})
You use two .next() calls because the div comes after a <br />
$("button.btn.btn-primary.btn-sm.edit__field").click(function() {
$(this).next().next().toggle()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-form">
<label class="control-label">name : </label>
<span class="text text-info txt_modelname">#Model.Name</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
<div class="box-form">
<label class="control-label">family : </label>
<span class="text text-info txt_modelname">#Model.family</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
Related
I have a weight data form and i want to make a validation on it where net weight = loaded weight - empty weight, if not the form not submit
<fieldset class="form-group">
<legend class="h5 text-center text-danger">empty weight</legend>
<div class="form-group">
<label for="text">empty weight</label>
<input type="number" class="form-control form-control-lg" id="empty_weight"
name="empty_weight" min="15000" max="35000" step="20" oncopy="return false"
onpaste="return false">
</div>
</fieldset>
<fieldset>
<legend class="h5 text-center text-danger">loaded weight</legend>
<div class="form-group">
<label for="text">loaded weight</label>
<input type="number" class="form-control form-control-lg" id="loaded_weight"
name="loaded_weight" min="35000" max="120000" maxlength="6" step="20"
oncopy="return false" onpaste="return false">
</div>
</fieldset>
<fieldset>
<legend class="h5 text-center text-danger">net weight</legend>
<div class="form-group">
<label for="text">net weight</label>
<input type="number" class="form-control form-control-lg font-weight-bolder" id="net_weight"
name="net_weight" maxlength="5" step="20" oncopy="return false"
onpaste="return false">
</div>
</fieldset>
<div class="modal-footer">
<button type="submit" class="btn btn-success ui-button">تاكيد</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">اغلاق</button>
</div>
</form>
I'm making a modal with bootstrap.
I'm new to Web Engineering and need some help.
My modal is supposed to have two dynamic tabs, one for Sign In, and one for Sign Up. I wanted to use two concepts in one task so I'm using dynamic tabs along with modal.
Please let me know what's wrong in it. The sign in tab works fine, but when I click on sign up, it shows the sign up credentials below the fixated div and items of sign in above, rather than overwriting it like it happens in dynamic tabs.
It looks like this: Modal Image
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-dialog">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
</ul>
</div>
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar" style="height:200px; width:200px; align:center; margin-left: 220px">
</div>
<div class="modal-body" style="padding:40px 50px;">
<div class="tab-pane fade active in" id="signin">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<!-- Login button-->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</div></div>
</form>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
<!-- MODAL SIGN UP-->
<div class="tab-pane fade" id="signup">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="humancheck">Humanity Check:</label>
<div class="controls">
<label class="radio inline" for="humancheck-0">
<input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
<label class="radio inline" for="humancheck-1">
<input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
</html>
you're putting the signup div inside of the signing div :
<div class="modal-body" style="padding:40px 50px;">
<div class="tab-pane fade" id="signup">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked="">Remember me</label>
</div>
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="humancheck">Humanity Check:</label>
<div class="controls">
<label class="radio inline" for="humancheck-0">
<input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
<label class="radio inline" for="humancheck-1">
<input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
</div>
</div>
</form></div><div class="tab-pane fade active in" id="signin">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked="">Remember me</label>
</div>
<!-- Login button-->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</div></div>
</form>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
<!-- MODAL SIGN UP-->
</div>
</div>
you need to put the signup div outside of the signing div :
you must provide "show" or "hide" parameter inside modal function.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal("show");
});
});
</script>
// optional
hide modal on button click
$("#myModal").modal("hide");
i would ask about clear input,i don't know how to clear input work with jquery/javascript.
so here my code:
<div class="form-inline" id="clear">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<button class="btn btn-primary black">clear</button>
<button class="btn btn-warning" id="btn-search">Search</button>
</div>
how to create function reset button in javascript?
Use reset() method to clear form
index.php
<form id="frmTest" name="frmTest">
<div class="form-inline" id="clear">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<button class="btn btn-primary black" onClick="clearForm(event);">clear</button>
<button class="btn btn-warning" id="btn-search">Search</button>
</div>
</form>
<script>
function clearForm(e) {
e.preventDefault();
document.getElementById("frmTest").reset();
}
</script>
you can use this code
first you need to use form tag and close form tag. then you can use rest function to clear all form data
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="FormData" name="FormData" action="" method="post">
<div class="form-inline" id="clear">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<button class="btn btn-primary black" onclick="clearFormData(event);">clear</button>
<button class="btn btn-warning" id="btn-search">Search</button>
</div>
</form>
<script>
function clearFormData(e) {
e.preventDefault();
$("#FormData")[0].reset()
}
</script>
My Html Code
<div class="col-md-6" id="buyerblock">
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername1" id="buyername1" style="margin-bottom: 3px;margin-right : 5px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail1" id="buyeremail1" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername2" id="buyername2" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text"><input class="form-control" name="buyeremail2" id="buyeremail2" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button></div></div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername3" id="buyername3" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail3" id="buyeremail3" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="addbuyerbtn" class="btn btn-primary addbutton" style="margin-left: 19px;">+</button>
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
</div>
My JS code
var check = $("div.buyerdiv").last().$(".form-group").children().length;
alert(check);
I want to get the count of child elements of form-group class under last buyerdiv class. How can i achieve it ?
Any help is much appreciated...
Use find()
var check = $("div.buyerdiv").last().find(".form-group").children().length;
alert(check);
Instead of $ use find()
var check = $("div.buyerdiv").last().find(".form-group").children().length;
console.log(check);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-md-6" id="buyerblock">
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername1" id="buyername1" style="margin-bottom: 3px;margin-right : 5px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail1" id="buyeremail1" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername2" id="buyername2" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text"><input class="form-control" name="buyeremail2" id="buyeremail2" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button></div></div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername3" id="buyername3" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail3" id="buyeremail3" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="addbuyerbtn" class="btn btn-primary addbutton" style="margin-left: 19px;">+</button>
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
</div>
Here is an example on fiddle with find().
var count = $('#buyerblock').find('.form-group').size();
alert(count);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6" id="buyerblock">
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername1" id="buyername1" style="margin-bottom: 3px;margin-right : 5px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail1" id="buyeremail1" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername2" id="buyername2" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text"><input class="form-control" name="buyeremail2" id="buyeremail2" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button></div></div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername3" id="buyername3" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail3" id="buyeremail3" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="addbuyerbtn" class="btn btn-primary addbutton" style="margin-left: 19px;">+</button>
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
</div>
Please try following code, just use following line
$("div.buyerdiv").last().find(".form-group").children().length;
var check = $("div.buyerdiv").last().find(".form-group").children().length;
alert(check);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6" id="buyerblock">
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername1" id="buyername1" style="margin-bottom: 3px;margin-right : 5px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail1" id="buyeremail1" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername2" id="buyername2" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text"><input class="form-control" name="buyeremail2" id="buyeremail2" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button></div></div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername3" id="buyername3" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail3" id="buyeremail3" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="addbuyerbtn" class="btn btn-primary addbutton" style="margin-left: 19px;">+</button>
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
</div>
You have small mistake.
just use find() Instead of $
var check = $("div.buyerdiv").last().find(".form-group").children().length;
alert(check);
I have a form which has three input fields.Its working fine in jsfiddle but if I run in any browser then part of the input text field is coming out.However if i decrease the browser size then works fine.As i am using bootstrap so all the field must work same in all screen size whether its mobile or tab or computer.Please tell me how to make it function properly in all screen sizes.
This is the screen shot showing mobile text field coming out of the div
This is screenshot showing proper function of text fields in small size
this is code for the input fields
<div class="tab-pane" id="tab2">
<form class="well span9" action="insertNew" method="post">
<table border="1" id="mytable"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>
<div class="row">
<div class="span3">
<label>Name</label>
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required>
</div>
<div class="span3">
<label>Email Address</label>
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required>
</div>
<div class="span3">
<label>Mobile</label>
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required >
</div>
</div>
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form>
<div class="well span9"> <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
</div>
</div>
try something like this,FIDDLE
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" >Name</label>
<div class="controls">
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required />
</div>
</div>
<div class="control-group">
<label class="control-label" >Email Address</label>
<div class="controls">
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required />
</div>
</div>
<div class="control-group">
<label class="control-label" >Mobile</label>
<div class="controls">
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required />
</div>
</div>
<div class="control-group">
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
<input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
</div>
</form>