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>
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 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>
I have a multiple div in the form. On click button, we open accordion. When I'm in second accordion , the first should be closed dynamically.
For moment , in click current button to open accordion , the last accordion clicked still opened .
<form name="form" id="formId">
<div class="form-group">
<button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-parent="#form" aria-expanded="false" aria-controls="departement">
Form group 1 <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false"></i>
</button>
<div id="form-group1" class="collapse">
<fieldset>
<div class="checkbox-option">
<label class="option"><span>vehicle1 </span> <input type="checkbox" name="" value="" /> </label>
</div>
<div class="checkbox-option">
<label class="option"><span>vehicle2 </span> <input type="checkbox" name="" value="" /> </label>
</div>
</fieldset>
</div>
</div>
<div class="form-group">
<button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-parent="#form" aria-expanded="false" aria-controls="departement">
Form group 2 <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false"></i>
</button>
<div id="form-group2" class="collapse">
<fieldset>
<div class="checkbox-option">
<label class="option"><span>vehicle1 </span> <input type="checkbox" name="" value="" /> </label>
</div>
<div class="checkbox-option">
<label class="option"><span>vehicle2 </span> <input type="checkbox" name="" value="" /> </label>
</div>
</fieldset>
</div>
</div>
<div class="form-group">
<button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-parent="#form" aria-expanded="false">
Form group 3<i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false"></i>
</button>
<div id="form-group3" class="collapse">
<fieldset>
<div class="checkbox-option">
<label class="option"><span>vehicle1 </span> <input type="checkbox" name="" value="" /> </label>
</div>
<div class="checkbox-option">
<label class="option"><span>vehicle2 </span> <input type="checkbox" name="" value="" /> </label>
</div>
</fieldset>
</div>
</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");
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);