I have a bootstrap html page that contains already 2 auto update text field functions for its needs. Along with that I added another fields in a modal to complete the page and requires another auto calculation to be populated on a certain text field.
Base form for first and 2nd instance of auto update
<form role="form" id="myForm" action="cashier.php?submit=yes" method="post" data-toggle="validator">
<div class="form-group">
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Item</label>
<select onchange="GenPrice(this)" id="items" name="items" class="form-control" required>
<option value="" selected disabled>Select Item</option>
<?php
//some sql function for fetch
echo '<option value="'.$row['sup_eaprice'].'|'.$row['sup_name'].'" required>'.$row['sup_name'].'</option>';
}
}
?>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//FIRST INSTANCE AUTO UPDATING TEXT FIELD
<label for="exampleInputEmail1">Price (ea)</label>
<input type="text" class="form-control" id="eaprice" placeholder="No Item Selected" required disabled>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Quantity</label>
<input type="text" class="form-control calculate" onchange="GenTot(this)" name="quantity" id="quantity" placeholder="How many?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="3" data-minlength="1" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//2ND INSTANCE AUTO UPDATING TEXTFIELD
<label for="exampleInputEmail1">Total</label>
<input type="text" class="form-control" id="ztotal" name="ztotal" readonly>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group" align="right">
<button id="submit" type="submit" class="btn btn-primary" name="addcart">Add Cart</button>
</div>
</div>
</form>
Modal window 3rd instance
<!--create confirmation modal window-->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<b>Final Check</b>
</div>
<div class="modal-body">
<div class="row">
<form role="form" id="purchformx" action="cashier.php?submit=yes" method="post" data-toggle="validator">
<!-- hidden for purpose of change auto calc -->
<input type="hidden" name="thetotal" class="calchange" id="thetotal" value="<?php echo $overall; ?>">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Received</label>
<input type="text" class="form-control calchange" name="received" id="received" placeholder="How much given?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="4" data-minlength="1" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//3RD INSTANCE AUTO UPDATE NOT WORKING
<label for="exampleInputEmail1">Change</label>
<input type="text" class="form-control" id="thechange" name="thechange" readonly>
<div class="help-block with-errors"></div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
</div>
</div>
</div>
<!--end modal-->
JQUERIES
For first instance (working)
<script type="text/javascript">
function GenPrice(data) {
var xprice = data.value;
var zprice = xprice.split("|");
document.getElementById ("eaprice").value = zprice[0];
document.myForm.eaprice.value = zprice[0];
}
</script>
For second instance (working) based from Calculate total value inline form
<script type="text/javascript">
/* total value calculator */
$(document).ready(function () {
//Calculate both inputs value on the fly
$('.calculate').keyup(function () {
var Tot = parseFloat($('#eaprice').val()) * parseInt($('#quantity').val());
if(isNaN(Tot)) Tot = "";
$('#ztotal').val(Tot);
});
//Clear both inputs first time when user focus on each inputs and clear value 00
$('.calculate').focus(function (event) {
$(this).val("").unbind(event);
});
});
</script>
For third instance (not working) based from auto calculate total value
<script type="text/javascript">
$(document).ready(function(){
$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
if($(this).val() != '')
{
total = parseFloat($(this).val()) - parseFloat($('#thetotal').val());
}
});
$('#thechange').html(total);
});
})(jQuery);
</script>
I'm not sure why the 3rd instance which is inside a modal window doesn't auto update at all given ive just made a separate jquery class for it. Thanks in advance for further suggestions.
$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
if($(this).val() != '') {
total += parseFloat($(this).val());
}
});
var totalFinal = total - parseFloat($('#thetotal').val());
$('#thechange').val(totalFinal);
});
Related
I have a form with some inputs that are filled from the result of an AJAX request. When I submit the form I get only null on the back-end. I tried to submit the values without editing it and it works
this is my java script code
editPayment = function() {
if ($('#entrytransId').val() != '') {
if ($('#entryReceiptTypesselect').val() == "1") {
$.ajax({
type: "GET",
url: "#Url.Action("GetInvoiceNumber", "Payment")",
data: {transId: $('#entrytransId').val()},
success: function(response) {
if (response.invNo == 0) {
window.location.reload();
} else {
$('#reciptNo').val(response.invNo);
$('#enteryAmt').val(response.Amt);
$('#entrytransId').attr("disabled", "true");
$('#enteryhide').show(500);
}
},
error: function(reponse) {
window.location.reload();
}
});
}
}
This is Exactly My HTML Form with inputs I have tried more times and its failures
but when I deleted the javascript function and fill the data manually its works
<form action="/Payment/EditPayment" id="MF" method="post">
<div class="row">
<div class="col-md-2">
<label class="form-control">Receipt Type</label>
</div>
<div class="col-md-8">
<select class="form-control" id="entryReceiptTypesselect"
name="entryReceiptTypes" required="true"><option value="">-Choose</option>
<option value="1">MoF</option>
<option value="2">Zakah</option>
<option value="3">Tax</option>
<option value="4">Other Taxs</option>
<option value="5">M & S</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">Trans Id</label>
</div>
<div class="col-md-3">
<input required="" type="number" class="form-control" id="entrytransId" name="entrytransId">
</div>
<div class="col-md-2" hidden="" id="btnHidden">
<button type="button" class="btn btn-primary legitRipple" onclick="editPayment()">check</button>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label class="form-control" id="lblinvoice">reciptNo</label>
</div>
<div class="col-md-4">
<input required="" type="number" name="reciptNo" class="form-control" id="reciptNo">
</div>
</div>
<div class="row" hidden="" id="enteryhide">
<div class="col-md-2">
<label class="form-control">enteryAmt</label>
</div>
<div class="col-md-4">
<input required="" type="number" value="0" name="enteryAmt" class="form-control" id="enteryAmt">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">E15 userName</label>
</div>
<div class="col-md-8">
<input required="" type="text" class="form-control" id="userName" name="userName">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">password</label>
</div>
<div class="col-md-8">
<input required="" type="password" class="form-control" id="password" name="password">
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<input type="submit" value="submit" class="btn btn-block btn-success legitRipple" id="enterysubmit">
</div>
</div>
</form>
The issue is not with setting the values via javascript/jquery, but specifically with setting the inputs to disabled.
$('#entrytransId').attr("disabled", "true");
when an input is set to disabled, it is not included (it is excluded) from the form's POST, so will appear as null in the server-side code.
You can:
- not set them to disabled (will affect your UX)
- enable them just before POST (icky)
- use hidden fields
MVC does this for checkboxes, so you can copy that idea here:
<input type='text' name='entryid' />
<input type='hidden' name='entryid' />
POST uses the input's name field, not its id, so it's ok to have multiple inputs with the same name.
POST will then use the first input that is not disabled (so don't put the hidden one first...)
Then just update the jquery to apply the value to both inputs (if you also want it shown in the UI) rather than by id, eg:
$("name[entryid]").each(function() { $(this).val(newvalue); });
(other ways to set this may be better, not checked if .val() will apply to all, likely only applies to the first)
The proplem was on $('#entrytransId').attr("disabled", "true");
i have another function onselectChange() is disabled all inputs , i tried $('#entrytransId').attr("disabled", "true"); and its works well
I got a small problem that i have no clue how to solve. This HTML/PHP code bellow gets different values from a database and outputs them into the different input fields.
The HTML/PHP bellow is one element, and multiple of them are made with different values from the database. Then i got a small javascript that calulates some different values from the values that are inputted. The problem is that i got lets say 5 elements, and only wants to calculate for one of them, but if i press the "btn-oppdater" button it calculates for all the different elements.
How do i make it only calculate for the element where the button is?
Script
$('.btn-oppdater').click(function(){
$(".kval_spill").each(function(){
var fieldShow = $(this).next('.kval_spill_inner');
var b_value_kval_1 = fieldShow.find('.b_value_kval_1')[0].value;
var b_odds_kval_1 = fieldShow.find('.b_odds_kval_1')[0].value;
var e_odds_kval_1 = fieldShow.find('.e_odds_kval_1')[0].value;
var gebyr_kval = '0.02'
var q_value = ((b_odds_kval_1 / (e_odds_kval_1 - gebyr_kval)) * b_value_kval_1);
var q_tap = (b_odds_kval_1 - 1) * b_value_kval_1 - (e_odds_kval_1 - 1) * q_value;
var q_value_fixed = q_value.toFixed(2);
var q_tap_fixed = q_tap.toFixed(2);
fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
});
});
HTML/PHP
<?php while ($row = mysqli_fetch_assoc($result2)) { echo '
<form style="margin-top: 10px;" action="" method="post" class="">
<input type="hidden" class="kval_spill">
<div class="kval_spill_inner">
<input class="" type="hidden" name="id" value="'.$row['id'].'">
<div class="form-row">
<div class="form-group col-md-4">
<input type="text" class="form-control kval_kamp_1" name="kval_kamp_1" value ="'.$row['kval_kamp_1'].'" placeholder="Kamp">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<input type="text"class="form-control b_value_kval_1" name="b_value_kval_1" value ="'.$row['b_value_kval_1'].'" placeholder="Spill verdi">
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control b_odds_kval_1" name="b_odds_kval_1" value ="'.$row['b_odds_kval_1'].'" placeholder="Odds">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<input type="text" class="form-control kval_marked_1" name="kval_marked_1" value ="'.$row['kval_marked_1'].'" placeholder="Type marked">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<input type="text"class="form-control text-info q_value_1" name="q_value_1" value ="'.$row['q_value_1'].'" placeholder="Lay verdi">
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control e_odds_kval_1" name="e_odds_kval_1" value ="'.$row['e_odds_kval_1'].'" placeholder="Odds">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">Tap</span>
</div>
<input type="text" class="form-control text-danger q_tap_1" name="q_tap_1" value ="'.$row['q_tap_1'].'" placeholder
="0.00" readonly>
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-outline-secondary btn-oppdater">Regn ut</button>
</div>
</div>
</div>
</form>
<br>
'; }?>
Replace $(".kval_spill") with $(this).closest("form").find(".kval_spill").
But it looks like there's only one kval_spill and kvall_spill_inner in each form, so there's no need to use .each(). You can get rid of the .each() loop and just use:
var fieldShow = $(this).closest("form").find('.kval_spill_inner');
And instead of
fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
you can write:
fieldShow.find('.q_value_1').val(q_value_fixed);
fieldShow.find('.q_tap_1').val(q_tap_fixed);
I add a form using AJAX in a Php page now I add anther form within that form which is created using AJAX but it is not working.
This is the parent page.
<div class="col-xs-12 mg-top-30 text-left" id="studentstatus">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Are you a?</label>
</div>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="studentstatus" value="fresh">Freshman</label>
<label class="radio-inline mg-top-5">
<input type="radio" name="studentstatus" value="compart">Reappeared</label>
</div>
</div>
<div id="adddata"></div>`
JQuery to working with AJAX is the following for adding First form:
$(function () {
$('#studentstatus input:radio').change(
function () {
var index = this.value;
$.get(
"add_freshman_form_in_maprevios.php", {
studentstatus: index
},
function (data) {
$("#adddata").html(data);
}
);
}
);
});
add_freshman_form_in_maprevios.php page HTML code is:
$output='<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Roll No.</label>
</div>
<div class="col-sm-2">
<input type="number" class="btn-block input-sm" placeholder="Previous roll no.">
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-3">
<label for="" class="control-label">Write down the names of failed papers:</label>
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>
</div>
<div class="col-xs-12 text-left">
<div class="col-sm-1 hidden-xs"></div>
<button class="mg-left-15 color addanother"> <i class="fa fa-plus-circle " > <label for="">Add another</label></i></button>
<div id="compartpaper"></div>
</div>';
echo $output;
It is working very well but when I want another textbox in this form using AJAX than it is not working. I write JQuery code for this purpose into the main page.
$('.addanother').click(function (e) {
e.preventDefault();
$.get(
"add_compart_form_in_previous_paper.php", {
username: $("#username").val()
},
function (data) {
$("#compartpaper").append(data);
}
);
});
The Form which I want to add in this page is mean :
<?php
$output='<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>';
echo $output;
?>
You're referring to an element that does not exist when the page is loaded , it is why not enter on the click event. Try this instead.
$("#adddata").on("click", ".addanother", function(){
//your code
});
I am trying to load a simple full calender plugin and on click of each date i am trying to show a sample modal dialog that shows the user the option of selelcting the organization and branch which are fetched from the database , but the angular module is not getting loaded and the variables are not evaluated it stays as {{org.orgname}} and {{branch.branchName}}
Here is my javascript
<script type="text/javascript">
$(function()
{
var ScheduleApp = angular.module('ScheduleApp', ['ui.calendar','ui.bootstrap']);
ScheduleApp.controller('ScheduleAppContoller', function($scope,$http) {
$scope.organizations = [];
$scope.organization = "";
$scope.branches = [];
$scope.branch = "";
//$scope.managedEntities = [];
var getOrganization = "getOrganizations";
$http.post(getOrganization).success(function(data) {
$scope.organizations = data;
});
$scope.selectBranch = function() {
var orgId = $scope.organization;
var action = "getBranchByOrgId?";
var param = "orgId=" + orgId;
$http.post(action + param).success(function(data) {
$scope.branches = data;
});
}
});
});
</script>
and my html
<body ng-app="ScheduleApp">
<div id='calendar' style="Width: 90%; padding-left: 10%"></div>
<div id="createEventModal" class="well modal fade" tabindex="-1" style="Width: 40%; height: 550px; margin-left: 30%; margin-top: 20px;" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true" ng-controller="ScheduleAppContoller">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel1">Create a new Schedule</h3>
</div>
<div class="modal-body">
<form id="createAppointmentForm" class="form-horizontal">
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Title</label>
<div class="col-sm-6">
<input type="text" name="scheduleTitle" id="scheduleTitle"
class="form-control" data-provide="typeahead"> <input
type="hidden" id="apptStartTime" /> <input type="hidden"
id="apptEndTime" /> <input type="hidden" id="apptAllDay" />
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Managed
Entity Group:</label>
<div class="col-sm-6">
<input type="text" name="patientName" id="patientName"
class="form-control" style="margin: 0 auto;"
data-provide="typeahead" data-items="4"> <input
type="hidden" id="apptStartTime" /> <input type="hidden"
id="apptEndTime" /> <input type="hidden" id="apptAllDay" />
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Organization
:</label>
<div class="col-sm-6">
<select class="form-control" ng-model="organization"
ng-change="selectBranch()" id="organizationId"
name="organizationId">
<option value="">Please select Organization</option>
<option
ng-repeat="organization in organizations|orderBy:'orgName'"
value="{{organization.orgId}}">{{organization.orgName}}</option>
</select>
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Branch:</label>
<div class="col-sm-6">
<select class="form-control" ng-model="branch" name="branchId"
id="branchId" name="branchId" style="width: auto;">
<option value="">Please Select Branch</option>
<option value="{{br.id}}"
ng-repeat="br in branches | orderBy:branchName">{{br.branchName}}</option>
</select>
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Checklist
Type:</label>
<div class="col-sm-6">
<input type="text" name="patientName" id="patientName"
style="margin: 0 auto;" data-provide="typeahead" data-items="4"
class="form-control"> <input type="hidden"
id="apptStartTime" /> <input type="hidden" id="apptEndTime" />
<input type="hidden" id="apptAllDay" />
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Add
Recurrence Rule</label>
<div>
<input type="checkbox" name="isRecurrencePresent"
id="isRecurrencePresent" style="margin: 0 auto;"
data-provide="typeahead" data-items="4" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</div>
The calender is loaded properly and so is the modal dialog but im not able to load the drop down within this modal
ok I've change your import, because some of them were wrong (wrong order), so now we got a fullcalendar working with no errors on a console in this plunker if I understand this correct you want to call $scope.selectBranch = function() {...} and get all you brunches from $http ? when ng-change="selectBranch()" is trigger?! but selectBrunch is never trigger as there is nothing changing in that dropdown. You will need to load your 'Organization' before to use ng-change.
If you want to use $http to populate your you can check Typeahead, hope it helps, please let me know if you need some help.
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')" />