I want to sum the two field automatically using javascript ,
After searching more about what I want exactly I found this example on table please how can I change it to work on divs
http://jsfiddle.net/gXdwb/3/
Those are my fields
<div> class="form-group">
<label for="nbStudentA" >Number student A</label>
<div>
{{ form_widget(form.nbStudentA, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group">
<label for=" nbStudentB " >Number Student B</label>
<div class="col-sm-9">
{{ form_widget(form.nbStudentB, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group">
<label for="Sum" >Sum Students :</label>
<div>
<input type="text" class="Sum" name="total" value=""/>
</div>
</div>
update:
what I have tried before is to sum the two variables using twig but it's done on the server side and what I want is the effectuate the sum just when the user enter the variables:
<div >
<label>Sum </label>
<div >
{% set foo = form.nbStudentA + form.nbStudentB %}
{{ foo }}
</div>
</div>
Don't know exactly what you want but this does work.If you want from only div
<div id="std-1">1</div>
<div id="std-2">2</div>
<div>{{one + two}}</div>
</div>
//scripts
$scope.one=parseInt(document.getElementById('std-1').innerHTML);
$scope.two=parseInt(document.getElementById('std-2').innerHTML);
or you don't mind input fields and making it dynamic
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="std-1">
Student one: <input ng-model="student.one " type="number"/>
</div>
<div class="std-2">
Student two: <input ng-model="student.two " type="number"/>
</div>
<div>Sum: {{student.one + student.two}}</div>
</div>
Make it simple
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app>
<div id="first">
<input ng-model="first" placeholder="First number" type="text" />
</div>
<div id="second">
<input ng-model="second" placeholder="Second number" type="text" />
</div>
<h1> Sum: {{first--second}} </h1>
</div>
Related
I am trying to calculate multiple values based on multiple selections from a and then have the data add up and display in an on the same form. I tried some jquery stuff but didn't really work at all. I've tried using some Javascript to do the calcultions but nothing seems to be happening.
Blade:
#extends('layout.layouts')
#section('content')
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NCIC - Reports</title>
</head>
<body>
<br>
<h1>New Report</h1>
<br>
<form action="{{ 'storereport' }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title">
</div>
<div class="form-group">
<label for="author">Reporting Officer</label>
<input type="text" class="form-control" name="author" value="{{ Auth::user()->name }}">
</div>
<div class="form-group">
<label for="profileid">SSN</label>
<input type="text" class="form-control" name="profileid">
</div>
<div class="form-group">
<label for="report">Report</label>
<textarea class="form-control" name="report" rows="10"></textarea>
</div>
<div class="form-group">
<label for="selectpicker">Select Offences</label>
<select class="selectpicker" id="lawspicker" name="laws[]" data-width="100%" data-live-search="true" multiple>
#foreach($laws as $law)
<option value="{{ $law->name }} {{ $law->fine }} {{ $law->months }}">Offence: {{ $law->name }} </option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment">
</div>
<hr style="background-color:white;">
<button type="submit" class="btn btn-success">Submit</button>
<a class="btn btn-info float-right" href="{{ route('reports') }}">Main menu</a>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#lawspicker").keyup(function(){
$("#punishment").val(parseFloat($("{{ $law->months }}").val()) + parseFloat($('{{ $law->fine }}').val()));
})
$("#lawspicker").change(function(){
$("#punishment").val(parseInt($("#lawspicker").val());
})
</script>
<style>
body{
background-color: #353b48;
color:white;
}
</style>
</html>
#endsection
To clarify, I want {{ $law->months }} & {{ $law->fine }} to add up and then display in #punishment <input>
Thanks for looking!
You can do some thing like this.
Update <option> tag to this
<option data-fine="{{$law['fine']}}" data-months="{{$law['months']}}" value="{{ $law['name'] }} {{ $law['fine'] }} {{ $law['months'] }}">Offence: {{ $law['name'] }} </option>
and you can get data attribute of the selected <option> tag in your script like this.
`$("#lawspicker").change(function() {
var fine = $(this).find(':selected').data('fine');
let months = $(this).find(':selected').data('months');
$("#punishment").val(parseInt(fine+months));
});`
Thanks.
I would be tempted to replace your select element with checkboxes personally.
An example below using jquery to calculate the fine and months when a button is clicked but could be an event of your choosing. I stripped it back from your example so it was easier to see what is going on.
Checkbox example
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<h4>Select Offences</h4>
<div class="d-flex">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-a" data-fine="100" data-months="12" class="custom-control-input offence">
<label for="law-a" class="custom-control-label">Law A</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-b" data-fine="999" data-months="6.5" class="custom-control-input offence">
<label for="law-b" class="custom-control-label">Law B</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-c" data-fine="123.5" data-months="8" class="custom-control-input offence">
<label for="law-c" class="custom-control-label">Law C</label>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment" readonly>
</div>
</div>
<div class="col-12">
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
Then some javascript (jquery)
$(function() {
$("#submit").click(function() {
let fine = 0;
let months = 0;
$(".offence").each(function(index, obj) {
if (obj.checked) {
fine += parseFloat($(obj).data("fine"));
months += parseFloat($(obj).data("months"));
}
})
$("#punishment").val("Fine: "+ fine + " Months: " + months);
})
});
When you click submit, the javascript will loop through each element with the offence class and then read the value of the data-fine and calculate the totals.
An example fiddle: https://jsfiddle.net/dbtas60w/
Multiselect example
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<h4>Select Offences</h4>
<div class="d-flex">
<div class="custom-control custom-checkbox">
<select class="selectpicker" id="lawspicker" name="laws[]" multiple>
<option data-fine="100" data-months="12">Law A</option>
<option data-fine="999" data-months="6.5">Law B</option>
<option data-fine="123.5" data-months="8">Law C</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment" readonly>
</div>
</div>
<div class="col-12">
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
javascript
$(function() {
$("#submit").click(function() {
let fine = 0;
let months = 0;
$("#lawspicker>option").each(function(index, obj) {
if (obj.selected) {
fine += parseFloat($(obj).data("fine"));
months += parseFloat($(obj).data("months"));
}
})
$("#punishment").val("Fine: "+ fine + " Months: " + months);
})
});
Example fiddle: https://jsfiddle.net/dbtas60w/1/
Suppose I have a form with some input values(name, mobile_number, age and gender).
After fill up the form while I clicked submit button, I want to print the form values.
I have already tried with jQuery but not get the exact result.
Here is my result
But I want to print the form data like this
Name : Raff
Mobile Number : 016*******
Age : **
Gender : Male
Here is my form
<form action="{{url('/add-prescription')}}" method="post" id="new_prescription_form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row clearfix">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-8">
<div class="card">
<div class="body">
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Name: </b>
<input type="text" id="name" class="form-control" placeholder="" name="name" required/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Mobile Number: </b>
<input type="text" id="mobile_number" class="form-control" placeholder="" name="mobile_number" required/>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Age: </b>
<input type="text" id="age" class="form-control" placeholder="" name="age" required/>
</div>
</div>
</div>
<div class= "col-sm-6">
<b>Gender: </b>
<select id="gender" class="form-control show-tick" name="gender" required>
<option value="">-- Please select --</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Others</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="form-group">
<button type="submit" class="btn btn-primary m-t-15 waves-effect" value="print" onclick="PrintElem()">SUBMIT</button>
</div>
</div>
</form>
jQuery
function PrintElem()
{
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
How to solve this ? Anybody help please.
You have to get the values of input fields and add those into the print HTML, this can be achieved using JavaScript , you don't need JQuery for this.
Update your PrintElem function with this and check
function PrintElem()
{
var name = document.getElementById('name').value;
var mobile_number = document.getElementById('mobile_number').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()"><div><p><lable>Name :</lable><span>'+name+'</span></p><p><lable>Mobile Number :</lable><span>'+mobile_number+'</span></p><p><lable>Age:</lable><span>'+age+'</span></p><p><lable>Gender</lable><span>'+gender+'</span></p></div></body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Hope this works for you
<html>
<head>
<title>jQuery example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#InputText').keyup(function() {
$('#OutputText').val($(this).val());
$('#DIVTag').html('<b>' + $(this).val() + '</b>');
});
});
</script>
</head>
<body>
<div id="JQDiv">
<form id="JQForm" action="">
<p>
<label for="InputText">
Enter Name :
</label><br />
<input id="InputText" type="text" name="inputBox" />
</p>
<p>
<label for="OutputText">
Output in box
</label><br/>
<input id="OutputText" type="text" name="outputBox" readonly="readonly" />
</p>
<p>
Output in div
</p>
<div id="DIVTag"></div>
</form>
</div>
</body>
</html>
Similarly you can do it for other form fields.
Also use angularjs to achieve same functionalities you can
This is what you are looking for?
Let me know.
My javascript code doesnt seem to run when i use this codes to validate the radio button is clicked. Its suppose to dropdown the inputs when the card radio button is clicked and it is suppose to slide up the inputs when the paypal button is clicked.1st code javascript. 2nd code html.
if (document.getElementById('paypal').checked) {
//Paypal radio button is checked
$(".input-fields").slideDown("slow");
} else if (document.getElementById('card').checked) {
//Card radio button is checked
$(".input-fields").slideUp("slow");
};
<div class="panel-body">
<h2 class="title">Checkout</h2>
<div class="bar">
<div class="step active"></div>
<div class="step active"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<div class="payment-method">
<label for="card" class="method card">
<div class="card-logos">
<img src="img/visa_logo.png" />
<img src="img/mastercard_logo.png" />
</div>
<div class="radio-input">
<input id="card" type="radio" name="payment"> Pay $<%= total %> with credit card
</div>
</label>
<label for="paypal" class="method paypal">
<img src="img/paypal_logo.png" />
<div class="radio-input">
<input id="paypal" type="radio" name="payment"> Pay $<%= total %> with PayPal
</div>
</label>
</div>
<div class="input-fields">
<div class="column-1">
<label for="cardholder">Cardholder's Name</label>
<input type="text" id="cardholder" />
<div class="small-inputs">
<div>
<label for="date">Valid thru</label>
<input type="text" id="date" placeholder="MM / YY" />
</div>
<div>
<label for="verification">CVV / CVC *</label>
<input type="password" id="verification" />
</div>
</div>
</div>
<div class="column-2">
<label for="cardnumber">Card Number</label>
<input type="password" id="cardnumber" />
<span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
</div>
</div>
</div>
All you missed was to add the logic inside a function and add it to an event using addEventListener() for value change.
We use document.getElementById() to get both the input elements by ID and then add the event listener to fire on change of value.
document.getElementById("card").addEventListener("change", validate);
document.getElementById("paypal").addEventListener("change", validate);
function validate() {
if (document.getElementById('paypal').checked) {
//Paypal radio button is checked
$(".input-fields").slideDown("slow");
} else if (document.getElementById('card').checked) {
//Card radio button is checked
$(".input-fields").slideUp("slow");
};
}
document.getElementById("card").addEventListener("change", validate);
document.getElementById("paypal").addEventListener("change", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<h2 class="title">Checkout</h2>
<div class="bar">
<div class="step active"></div>
<div class="step active"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<div class="payment-method">
<label for="card" class="method card">
<div class="card-logos">
<img src="img/visa_logo.png" />
<img src="img/mastercard_logo.png" />
</div>
<div class="radio-input">
<input id="card" type="radio" name="payment"> Pay $<%= total %> with credit card
</div>
</label>
<label for="paypal" class="method paypal">
<img src="img/paypal_logo.png" />
<div class="radio-input">
<input id="paypal" type="radio" name="payment"> Pay $<%= total %> with PayPal
</div>
</label>
</div>
<div class="input-fields">
<div class="column-1">
<label for="cardholder">Cardholder's Name</label>
<input type="text" id="cardholder" />
<div class="small-inputs">
<div>
<label for="date">Valid thru</label>
<input type="text" id="date" placeholder="MM / YY" />
</div>
<div>
<label for="verification">CVV / CVC *</label>
<input type="password" id="verification" />
</div>
</div>
</div>
<div class="column-2">
<label for="cardnumber">Card Number</label>
<input type="password" id="cardnumber" />
<span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
</div>
</div>
</div>
References:
Event Listeners
You need to add your javascript inside an event listener. For Example
$("input[name='payment']").click(function ()
{
if (document.getElementById('paypal').checked)
{
//Paypal radio button is checked
$(".input-fields").slideDown("slow");
}
else if (document.getElementById('card').checked)
{
//Card radio button is checked
$(".input-fields").slideUp("slow");
}
;
});
I have an HTML page generated with some default values for input fields. Here is the HTML and JavaScript:
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').val("Young man");
content.find('#age').val("25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
I am trying to get the div assigned to a variable, then change the values of name and age through this handle. The first alert method confirms that they are changed. But why is content.html() still outputs the original html? How can I make html() output the updated data?
jQuery .val() method never updates the value attribute. You can change it with .attr() method.
$('#trigger').click(function() {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
Assign the new value using attr().
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
console.log(content.find('#name').val());
console.log(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
I have to check validation on two fields with ng-change. The selected values cannot be same so i have implemented below logic but this function is not even being called. Its been hours and i cannot figure out what i am doing wrong. Please check if logic is being implemented correctly.
So far tried code....
main.html
<div class="panel-body">
<form name="addAttesForm" id="addAttesForm" novalidate k-validate-on-blur="false">
<div class="row">
<div class="form-group col-md-6">
<label for="roleType" class="col-md-4">Role Type:</label>
<div class="col-md-8">
<select
kendo-drop-down-list
data-text-field="'text'"
data-value-field="'id'" name="roleType"
k-option-label="'Select'"
k-data-source="roleTypeDataSource"
ng-model="attestorDTO.riskAssessmentRoleTypeKey"
id="roleType">
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="attestorWorker" class="col-md-4">Attestor:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" readonly="readonly"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="proxyWorker" class="col-md-4">Proxy :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" readonly="readonly"/>
<p class="text-danger" ng-show="addAttesForm.proxyWorker.$error.dateRange">Attestor and Proxy can not be same</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary pull-right" type="button" ng-disabled="addAttesForm.$invalid" ng-click="saveAttestor()">Add attestor</button>
</div>
</div>
</form>
</div>
main.js
$scope.validateProxy = function(startField, endField) {
console.log("calling validation...");
var isValid = ($scope.attestorDTO[startField]) <= ($scope.attestorDTO[endField]);
$scope.addAttesForm[endField].$setValidity('dateRange',isValid);
$scope.addAttesForm.$setValidity('dateRange',isValid);
};
Remove the readonly attribute. ng-change will not fire on the readonly input elements and the model should be changed via the UI not by the javascript code.
Try like this:
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" />
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" />