I'm building a web site, and want to show a progress bar that indicates the average of all the input numbers I am getting from a form in html.
I do have experience with javascript. I have my Html and css code but I need the javascript code.
<div class="">
<h3 class="card-header">Notes</h3>
<div class="card-body">
<div class="alert alert-warning" role="alert">
Note: Please introduce the grade of the courses from 0 to 20
</div>
<div class="form-group row">
<label class="col-12 col-sm-4 col-form-label text-sm-right">Math:</label>
<div class="col-12 col-sm-8 col-lg-3">
<input id="math" type="number" required="" name="math" class="form-control" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-4 col-form-label text-sm-right">history:</label>
<div class="col-12 col-sm-8 col-lg-3">
<input id="history" type="number" required="" name="history" class="form-control" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-4 col-form-label text-sm-right">biology:</label>
<div class="col-12 col-sm-8 col-lg-3">
<input id="biology" type="number" required="" name="biology" class="form-control" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-4 col-form-label text-sm-right">geography:</label>
<div class="col-12 col-sm-8 col-lg-3">
<input id="" type="number" required="" name="geography" class="form-control" min="0" max="20">
</div>
</div>
<input type="submit" value="Enviar" class="btn btn-space btn-primary" onclick="submitForms()">
</div>
</div>
</form>
How can I write the javascript code, so after submit the results the averages of the notes give me a horizontal progress bar with the corresponding note?
Can anyone help me?
Thanks in advance.
You need to use Bootstraps progress bar classes to show this
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
You can try this out here
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_progressbar1&stacked=h
Related
I have group of input elements in my form. The user have to add rows to insert multiple values for different date transaction. Now before adding another row, I have to validate the date field and amount field.
My form:
<div id="content_add" class="d-none">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<div class="row ">
<div class="col-md-2 ">From Location</div>
<div class="col-md-1 ">From Date</div>
<div class="col-md-2 ">To Location</div>
<div class="col-md-1 ">To Date</div>
<div class="col-md-1 ">Expenses</div>
<div class="col-md-1 ">
<i class="fa fa-plus"></i> add
</div>
</div>
<div id="content_show">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<script>
$('#add_servicing').click(function (e) {
e.preventDefault();
let html_clone = $('#content_add').html();
$('#content_show').append(html_clone);
});
</script>
When the user presses the add button, I have to check for the added row, whether from date is smaller than to date or not and expenses should be always be less than 2500 for each row. How can I do this?
I have created a web application (i.e. an Ecommerce site). Here I have implemented a radio button where I am selecting one from two options. When I select any of them, then other elements should be visible. For example: I have a time slot option. When I click on multi option (from radio button check) then there are 5 or 6 more options should be displayed. And when I select uni option (from radio button check) then there are 1 option should be visible. I have done with that part. I got stuck where I need to send all those parameters to my servlet controller.
I want when multi option selected then only those 5 or 6 parameters should be sent when forms submitted. Below code is to show and hide div for selected radio button. I am facing problem when I select uni option, then I am getting as message - some parameters missing.
function selectoption(id){
if(id == 'multitime'){
document.getElementById('multidiv').style.display= 'contents';
document.getElementById('unidiv').style.display = 'none';
}else{
document.getElementById('unidiv').style.display = 'contents';
document.getElementById('multidiv').style.display = 'none';
}
}
Below code is to submit all data of form and send to controller of springboot.
function setpincode(){
var pincode = document.getElementById('pincode').value;
var delivercityid = document.getElementById('deliverycityid').value;
var status = "";
if(document.getElementById('activestatus').checked){
status = document.getElementById('activestatus').value;
}else{
status = document.getElementById('inactivestatus').value;
}
var timeslot = "";
if(document.getElementById('multitime').checked){
timeslot = document.getElementById('multitime').value;
}else{
timeslot = document.getElementById('unitime').value;
}
var nightservice = "";
if(document.getElementById('multinightservice').checked){
nightservice = document.getElementById('multinightservice').value;
}else{
nightservice = document.getElementById('uninightservice').value;
}
var midnightcharge = document.getElementById('midnightcharge').value;
var morningservice = "";
if(document.getElementById('activeservice').checked){
morningservice = document.getElementById('activeservice').value;
}else{
morningservice = document.getElementById('inactiveservice').value;
}
var earlymorningcharge=document.getElementById('morningcharge').value;
var fixedtimeservice = "";
if(document.getElementById('afixedtimeservice').checked){
fixedtimeservice=document.getElementById('afixedtimeservice').value;
}else{
fixedtimeservice=document.getElementById('inacfixedtimeservice').value;
}
var fixedcharge = document.getElementById('fixedcharge').value;
var fixedtimeslot = document.getElementById('fixedtimeslot').value;
var deliverycharge = document.getElementById('deliverycharge').value;
var deliveryslot = document.getElementById('deliveryslot').value;
var unitimeslot = document.getElementById('unitimeslot').value;
var deliverytime = document.getElementById('deliverytime').value;
document.getElementById('addpincodeform').submit();
}
Below is my HTML code:
<form action="addpincode" method="post" id="addpincodeform"
name="addpincodeform" enctype="multipart/form-data">
<div class="floating-form">
<div class="row">
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="pincode"
id="pincode" placeholder=" ">
<span class="highlight"></span>
<label>Pin Code</label>
</div>
</div>
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="city"
id="city" placeholder=" ">
<span class="highlight"></span>
<label>City</label>
</div>
</div>
<div class="col-md-6 col-12 mb-4">
<div class="row">
<div class="col-md-6 col-12">
<h6>Status</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="activestatus" value="1">Active
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="inactivestatus" value="0">
InActive
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Time Slot</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="multitime" value="multi"
onchange="selectoption('multitime')">Multi
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="unitime" value="uni"
onchange="selectoption('unitime')">Uni
</div>
</div>
</div>
<div style="display:none;" id="multidiv">
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Mid Night Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="multinightservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="uninightservice"
value="no">No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="midnightcharge"
id="midnightcharge" placeholder=" ">
<span class="highlight"></span>
<label>Mid Night Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Early Morning Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="activeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="inactiveservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="earlymorningcharge"
id="morningcharge" placeholder=" ">
<span class="highlight"></span>
<label>Early Morning Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Fixed Time Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="afixedtimeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="inacfixedtimeservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="fixedcharge"
id="fixedcharge" placeholder=" ">
<span class="highlight"></span>
<label>Fixed Charge</label>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverycharge"
id="deliverycharge" placeholder=" ">
<span class="highlight"></span>
<label>Standard Delivery Charge</label>
</div>
</div>
<div style="display:none;" id="unidiv">
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="unitimeslot"
id="unitimeslot" placeholder=" ">
<span class="highlight"></span>
<label>Uni Time Slot</label>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverytime"
id="deliverytime" placeholder=" ">
<span class="highlight"></span>
<label>Last Delivery Time</label>
</div>
</div>
<div class="col-12 mt-4">
<button type="button" class="btn btn-outline-danger px-5"
onclick="setpincode()">Save</button>
</div>
</div>
</div>
</form>
I want to display first two fields i.e garage_quoted_amt and quoted_amt from given division , so please help me out. i'm newbie in jquery.
i have used this condition to show below condition
$("#priceDifference div.row:not(:nth-of-type(3))").show();
please direct me in correct way.
<div class="row" id="priceDifference" style="display:none;">
<div class="row">
<div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
<label style="padding-top:5px;"> Quoted Price</label>
</div>
<div class="col-xs-4">
<div class="form-group">
<input type="number" name="quoted_amt" id="gobumpr_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
<label style="padding-top:5px;"> Garage Quoted Price</label>
</div>
<div class="col-xs-4">
<div class="form-group">
<input type="number" name="garage_quoted_amt" id="garage_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
<label style="padding-top:5px;"> Local Garage Quote</label>
</div>
<div class="col-xs-4">
<div class="form-group">
<input type="number" name="local_garage_quoted_amt" id="local_garage_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
</div>
</div>
</div>
</div>
1.Remove style="display:none;" from parent div <div class="row" id="priceDifference">
2.use :gt() Selector
$("#priceDifference div.gt(1)").hide();
Working snippet:-
$(document).ready(function(){
$("#priceDifference .row:gt(1)").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="priceDifference"><!-- remove style="display:none;"-->
<div class="row">
<div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
<label style="padding-top:5px;"> GoBumpr Quoted Price</label>
</div>
<div class="col-xs-4">
<div class="form-group">
<input type="number" name="quoted_amt" id="gobumpr_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
<label style="padding-top:5px;"> Garage Quoted Price</label>
</div>
<div class="col-xs-4">
<div class="form-group">
<input type="number" name="garage_quoted_amt" id="garage_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
<label style="padding-top:5px;"> Local Garage Quote</label>
</div>
<div class="col-xs-4">
<div class="form-group">
<input type="number" name="local_garage_quoted_amt" id="local_garage_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
</div>
</div>
</div>
</div>
You cannot show a child of a hidden element. Once an element is hidden, all of its childs are hidden. What you can do, is to show the parent container and hide all of its childs except the ones you need to be shown.
Maybe add a class of hidden on the rows you dont want to display and add that class to your css like .hidden { display: none; } or set their style to display:none directly in html like you did with the parent row.
Found out that for a particular page the bootstrap-datepicker popup appears way at the top.
Here's the html of these elements
<label class="col-md-4 col-sm-4 font-normal">When does this job start?</label>
<div class="col-md-7 col-sm-6">
<input class="form-control" id="start-date" placeholder="Select a date">
</div>
<div class="col-md-12 col-sm-12 input-padding"></div>
<label class="col-md-4 col-sm-4">Job post will expire on</label>
<div class="col-md-7 col-sm-6">
<input class="form-control" id="end-date" placeholder="Select a date">
</div>
<div class="col-md-12 col-sm-12 input-padding"></div>
and a recording of this https://youtu.be/ZB1AxU-pzyM
Quite new to angular JS and need some help. How do I use ng-if to display or hide different input fields? I'm currently using ng-show but it doesn't completely remove the DOM, therefore making it difficult during validation. I want the input fields displaying within a specific div to become mandatory ONLY when selected.
When I click Select Fund, I want the showme2 div to display and the fields to become mandatory. When I click Select Product, I want the showme1 div to display and the fields to become mandatory. See my current code below:
<div ng-show="showme1">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1">
</div>
</div>
<<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" align="center" ng-click="showme2=true; showme1=false"><a>(or Select Fund)</a><br /></div>
</div>
</div>
<div ng-show="showme2">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1">
</div>
</div>
<<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" ng-click="showme1=true; showme2=false" align="center"><a>(or Select Product)</a></div>
</div>
</div>
Reference this stackoverflow answer to understand how ng-if is used.
You can use ng-if to achieve if(){..} else{..} in Angular.js.
<div ng-if="data.id == 5">
<!-- If block -->
</div>
<div ng-if="data.id != 5">
<!-- Your Else Block -->
</div>
Additionally, I've modified your code snippet in a CodePen to use ng-if, see here. https://codepen.io/silicaRich/pen/PjwwPv
JS
var TestApp = angular.module("TestApp", []);
HTML
<html>
<head>
</head>
<body ng-app='TestApp'>
<!-- Will display if showme == true -->
<div ng-show="showme">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1">
</div>
</div>
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" align="center" ng-click="showme=false;"><a>(or Select Fund) // showme2</a><br /></div>
</div>
</div>
<!-- Will display if showme == false -->
<div ng-show="!showme">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1">
</div>
</div>
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" ng-click="showme=true;" align="center"><a>(or Select Product) // showme1</a></div>
</div>
</div>
</body>
</html>
Hope this helps.