$(".incrementer").click(function(){
var values = $("#layernumber").val();
var item = $("input[type=file]:last").clone(true);
var txt = $(".layer_selector:last").after('<br>').clone(true);
if($("#layernumber").val() < 4){
$("#attach").append(item);
$("#attach").append(txt);
}
if($("#layernumber").val() > 2){
$(".incrementer").hide();
}
});
The above code increments the value of layers
as the layers increments the file upload option will also.
But this works only in Chrome. Not in FireFox or Internet Explorer.
HTML code is:
<div class="tab-pane active" id="tab2">
<h3 class="block">Provide your layer details</h3>
<div class="form-group">
<label class="control-label col-md-3">Number of layer
<span class="required" aria-required="true"> * </span>
</label>
<div class="col-md-4">
<div class="input-group bootstrap-touchspin">
<span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
<input id="layernumber" type="text" class="form-control" name="layernumber" style="display: block;">
<span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
<span class="input-group-btn-vertical">
<button class="btn btn-default bootstrap-touchspin-up" type="button">
<i class="glyphicon glyphicon-plus incrementer"></i>
</button>
<button class="btn btn-default bootstrap-touchspin-down" type="button">
<i class="glyphicon glyphicon-minus decrementer"></i>
</button>
</span>
</div>
<span class="help-block"> Provide your number of layers </span>
</div>
</div>
<!-- fileupload starts-->
<!-- -->
<div class="form-group">
<label class="control-label col-md-3">Choose Layer
<span class="required" aria-required="true"> * </span>
</label>
<div class="col-md-9">
<div id="attach">
<div id="previewImg"></div>
<div class="col-md-9">
<input type="file" name="layerimages[]" onchange="preview(this);" class="myfile" id="fileid" multiple="">
<select id="layerid" class="layer_selector" name="layer_selector">
<option value="">Please Select</option>
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Intermediate</option>
<option value="3">Final</option>
</select>
</div>
</div>
<br>
</div>
</div>
<!-- fileupload ends-->
</div>
I have made a fiddle for this.
https://jsfiddle.net/w1gy8ruj/1/
The changes i did to your code is basically initialise the value of the layernumber input to 0 and increment it on every click.
$(document).ready(function() {
$(".incrementer").click(function() {
var values = $("#layernumber").val();
var item = $("input[type=file]:last").clone(true);
var txt = $(".layer_selector:last").after('<br>').clone(true);
if ($("#layernumber").val() < 4) {
$("#attach").append(item);
$("#attach").append(txt);
}
if ($("#layernumber").val() > 2) {
$(".incrementer-button").hide();
}
values++;
$("#layernumber").val(values);
});
});
You do not use
var values = $("#layernumber").val();
anywhere in this scope, so this is unneeded unless you don't want to use it in the if statement below and for incrementing.
And you do not increment the layernumber, so
if($("#layernumber").val() > 2) {
will never execute. You should increment it and set it like
$("#layernumber").val(values)
Related
I'm using Asp.NetCore, C#,Ajax javascript and jquery .I created a Model Component in my application.
the model component is shown but the hidden element didn't show. when I choose my option in the Axe option it doesn't show any one of the GRaison / DRaison / PRaison / CRaison. I try it with "show" and doesn't work even I set the option: selected and doesn't work too. I don't have any idea to make this code work
here's the page :
#model Segment
<div class="modal fade" id="addSegment">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-uppercase text-white" style="height:5%;">
<h5 class="modal-title" id="addSegmentLabel">Create Segment</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span>x</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label asp-for="SName" class="control-label">Name : </label>
<div class="col-md-12">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input asp-for="SName" class="form-control" placeholder="Enter segment name" />
<span asp-validation-for="SName" class="text-danger"></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group ">
<label asp-for="SRang" class="control-label">Rang</label>
<input asp-for="SRang" class="form-control" />
<span asp-validation-for="SRang" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="SType" class="control-label">Type</label>
<select asp-for="SType" class="form-control" id="SType">
<option selected disabled>Selectionnez type..</option>
<option id="Compte">Compte</option>
<option id="Contact">Contact</option>
</select>
<span asp-validation-for="SType" class="text-danger"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group ">
<label asp-for="Description" class="control-label"></label>
<textarea class="form-control" rows="3"></textarea>
<span asp-validation-for="Description" class="text-danger"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label asp-for="Axe" class="control-label"></label>
<select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="Html.GetEnumSelectList<Axe>()">
<option value="null" selected>Selectionnez Axe..</option>
</select>
<span asp-validation-for="Axe" class="text-danger"></span>
</div>
<div class="form-group" id="g" hidden>
<label asp-for="GRaison" class="control-label">Raison</label>
<select asp-for="GRaison" class="form-control">
<option> Personalité </option>
<option> Soucis</option>
<option> Intérêt</option>
<option>Valeurs</option>
</select>
<span asp-validation-for="GRaison" class="text-danger"></span>
</div>
<div class="form-group" id="d" hidden>
<label asp-for="DRaison" class="control-label">Raison</label>
<select asp-for="DRaison" class="form-control">
<option> Age </option>
<option> Sexe</option>
<option> Education</option>
<option> Revenu</option>
</select>
<span asp-validation-for="DRaison" class="text-danger"></span>
</div>
<div class="form-group" id="p" hidden>
<label asp-for="PRaison" class="control-label">Raison</label>
<select asp-for="PRaison" class="form-control">
<option> Personalité, </option>
<option> Soucis</option>
<option> Intérêt</option>
<option>Valeurs</option>
</select>
<span asp-validation-for="PRaison" class="text-danger"></span>
</div>
<div class="form-group" id="c" hidden>
<label asp-for="CRaison" class="control-label">Raison</label>
<select asp-for="CRaison" class="form-control">
<option> Pays</option>
<option> Ville</option>
<option> Language</option>
<option> Population</option>
</select>
<span asp-validation-for="CRaison" class="text-danger"></span>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#section Scripts{
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#SType").change('pageload', function () {
if ($(this).val() == "Contact") {
$(function () {
$("#Axe").change('pageload', function () {
if ($(this).val() == 0) {
$("#g").removeAttr('hidden');
$("#p,#c,#d").hide();
} else if ($(this).val() == 1) {
$("#p").removeAttr('hidden');
$("#g,#c,#d").hide();
} else if ($(this).val() == 2) {
$("#c").removeAttr('hidden');
$("#p,#g,#d").hide();
} else {
$("#d").removeAttr('hidden');
$("#p,#c,#g").hide();
}
});
});
} else {
$("#g,#p,#c,#d").hide();
}
});
});
</script>
}
when I choose my option in the Axe option it doesn't show any one of the GRaison / DRaison / PRaison / CRaison. I try it with "show" and doesn't work even I set the option: selected and doesn't work too.
Firstly, we can find that you set id="Axeya ij" for select in your code as below, which would cause you can not get that element using $("#Axe").
<select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="Html.GetEnumSelectList<Axe>()">
Secondly, if you check the source code of your hidden element after you run .hide() method, you can find it would help add style="display: none;" inline style to the element(s), it does not add hidden attribute.
To fix the issue and achieve your requirement, you can try to modify the code like below.
$(function () {
$("#SType").change('pageload', function () {
if ($(this).val() == "Contact") {
$("select[name='Axe']").change('pageload',function () {
if ($(this).val() == 0) {
$("#g").removeAttr('hidden');
$("#g").show();
$("#p,#c,#d").hide();
} else if ($(this).val() == 1) {
$("#p").removeAttr('hidden');
$("#p").show();
$("#g,#c,#d").hide();
} else if ($(this).val() == 2) {
$("#c").removeAttr('hidden');
$("#c").show();
$("#p,#g,#d").hide();
} else {
$("#d").removeAttr('hidden');
$("#d").show();
$("#p,#c,#g").hide();
}
});
} else {
$("#g,#p,#c,#d").hide();
}
});
});
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 have different file inputs I want displayed once the previous one has been selected. At the moment I have
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
But I also have a lot more hidden rows for up to 10 inputs. So I dont need to create new code for each input within my Javascript, I am trying to display things dynamically. Essentially, if I select a file, it should display the next file input.
At the moment I have this
$(".fileGroup").on('change',function(){
var id = $(this).attr('id');
if (id.length) {
$(this).parents('.row').nextSibling('.row').child('.hiddenDiv').css("display", "table-footer-group");
}
});
So I get the id of the changed fileGroup. I then attempt to get its parents row, then get the next row, and display its hidden div. At the moment this does not seem to work. What would be the best way to display the next input block?
Thanks
Try with this code:
$(".fileGroup").on('change',function(){
var $next_element = $(this).parents('.row').next('.row').find('input[type="file"]');
if ($next_element.length) {
$next_element.prop('disabled', false);
}
});
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
The code is rather simple:
1. grab .row parent
2. look for the next element with .row class
3. find an file input in the next .row element
4. if the input exists, set its disabled attribute to
false
there is form in my html and I am using default validation "required" field property to validate the fields and checking using $valid at last and calling a function which is not getting invoke. when I removed "batchAttForm.$valid" then funciton is working but with that line its not getiing called. what can be the problem ??
html
<form id="batchAttForm" name="batchAttForm" class="form-horizontal">
<div class="form-group row">
<label class="control-label col-md-1" align="right" for="batchDate"></label>
<label class="control-label col-md-1" align="right" for="batchDate">Date</label>
<div class="col-md-2 ">
<div class="input-group" >
<span class="input-group-btn">
<button class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span>
<input type="text" id="batchDate" ng-change="dateChange()" name="batchDate" ng-model="batch.date" datepicker class="form-control digits" required>
</div>
</div>
<label class="control-label col-md-1" align="right" for="selectBatch">Batch</label>
<div class="col-md-2" >
<select id="selectBatch" name="selectBatch" ng-change="selectedBatch(batch.id)" ng-model="batch.id" class="form-control" required>
<option value="">Select</option>
<option ng-repeat="batch in batch.batches" value="{{batch.id}}">{{batch.batch}}</option>
</select>
</div>
<label class="control-label col-md-1" align="right" for="selectBatch">Timing</label>
<div class="col-md-2 ">
<select id="selectBatch" name="selectBatch" ng-model="batch.time" class="form-control" required>
<option value="">Select</option>
<option ng-repeat="time in batch.times" value="{{batch.time}}">{{time.start_time_string}} - {{time.end_time_string}}</option>
</select>
</div>
</div>
<br>
<div class="form-group form-action">
<label class="control-label col-md-3" align="right" for=""></label>
<div class="col-md-2">
<button type="submit" id="reschedule" ng-click="batchAttForm.$valid && reschedule()" class="btn btn-default"><i class="fa fa-undo"></i> Re-schedule</button>
</div>
<div class="col-md-2" >
<button type="submit" id="punchAtt" ng-click="batchAttForm.$valid && punchAttendance()" class="btn btn-success"> <i class="fa fa-check"></i> Punch </button>
</div>
</div>
</form>
controller
app.controller('batchAttendanceController',function($scope,apiCall) {
$scope.batch = {};
$scope.batch.date = moment().format("DD-MM-YYYY");
//methods
$scope.selectedBatch = selectedBatch;
$scope.punchAttendance = punchAttendance;
$scope.reschedule = reschedule;
$scope.dateChange = dateChange;
function punchAttendance() {
console.log("foo");
}
function reschedule() {
console.log("bar");
}
function dateChange() {
initController($scope.batch.date);
}
function selectedBatch(batch_id) {
var b = $scope.batch.batches;
for (var i=0; i < b.length; i++) {
if (b[i].id == batch_id) {
for (var j=0; j < b[i].batch_time.length; j++) {
b[i].batch_time[j].start_time_string = moment(b[i].batch_time[j].start_time,"HH:mm:ss").format("hh:mm A");
b[i].batch_time[j].end_time_string = moment(b[i].batch_time[j].end_time,"HH:mm:ss").format("hh:mm A");
}
$scope.batch.times = b[i].batch_time;
} else {
$scope.batch.times = [];
}
}
}
});
The reason for error is, you have two form elements select with same name and idattribute . This is the reason, your form is always invalid. .
<label class="control-label col-md-1" align="right" for="selectBatch">Batch</label>
<div class="col-md-2" >
<select id="selectBatch" name="selectBatch" ng-change="selectedBatch(batch.id)" ng-model="batch.id" class="form-control" required>//same name and id
<option value="">Select</option>
<option ng-repeat="batch in batch.batches" value="{{batch.id}}">{{batch.batch}}</option>
</select>
</div>
<label class="control-label col-md-1" align="right" for="selectBatch">Timing</label>
<div class="col-md-2 ">
<select id="selectBatch" name="selectBatch" ng-model="batch.time" class="form-control" required>//same name and id
<option value="">Select</option>
<option ng-repeat="time in batch.times" value="{{batch.time}}">{{time.start_time_string}} - {{time.end_time_string}}</option>
</select>
</div>
Try using the ng-click as ng-submit in form element and remove ng-click in button
I have a form, but within that form I have a Add Schedule button which is to generate four input fields (Base Date Key, Forward Backward, Schedule ID) and a Add Schedules button. Additionally, that Add Schedules button (which is a child of the Add Schedule button) can generate five input fields (Schedule Amount, Schedule Charge Code, Frequency, Schedule date, Schedule type).
I have made attempt to doing so, but it is not working out for me at all. Here is a snippet of the html :
<ng-form name="" ng-repeat="form in forms1">
<button class="btn btn-success btn-md" ng-click="addNewSchedule(form)">
<i class="fa fa-plus-circle fa-fw"></i> Add Schedule
</button><br>
<div ng-repeat="cont in form.schedule">
<div class="row">
<div class="col-md-6">
<label>Base Date Key <span style="color: red;">*</span></label>
<select name="base_date_key" class="form-control" ng-model="cont.base_date_key" ng-options="base_key for base_key in base_date_key">
<option value="">Select Base Date Key</option>
</select>
</div>
<div class="col-md-6">
<label>Forward Backward <span style="color: red;">*</span></label>
<select name="forward_backward" class="form-control" ng-model="cont.forward_backward" ng-options="forward for forward in forward_backward">
<option value="">Select Forward Backward Option</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Schedule ID </label>
<input type="text" name="schedule_id" class="form-control" ng-model="cont.schedule_id">
</div>
</div>
<button class="btn btn-success btn-md" ng-click="addNewSchedules($index)">
<i class="fa fa-plus-circle fa-fw"></i> Add Schedules
</button><br>
<div ng-repeat="scheduleData in schedules">
<div class="row">
<div class="col-md-4">
<label>Schedule Amount <span style="color: red;">*</span></label>
<input type="text" name="schedule_amount" class="form-control" ng-model="scheduleData.schedule_amount">
</div>
<div class="col-md-4">
<label>Schedule Charge Code</label>
<select name="charge_code" class="form-control" ng-model="scheduleData.schedule_charge_code" ng-options="charge_two.key as charge_two.value for charge_two in schedule_charge_code track by charge_two.key">
<option value="">Select Schedule Charge Code</option>
</select>
</div>
<div class="col-md-4">
<label>Frequency <span style="color: red;">*</span></label>
<input type="text" name="frequency" class="form-control" ng-model="scheduleData.frequency">
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<label>Schedule Date <span style="color: red;">*</span> </label>
<input type="text"
class="form-control"
datepicker-popup="yyyy-MM-dd"
ng-model="scheduleData.schedule_date"
is-open="schedule_date.open"
ng-click="schedule_date.open = true"
datepicker-options="scheduleDateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" />
</div>
<div class="col-md-4">
<label>Schedule Type <span style="color: red;">*</span></label>
<select name="schedule_type" class="form-control" ng-model="scheduleData.schedule_type" ng-options="schedule for schedule in schedule_type">
<option value="">Select Schedule Type</option>
</select>
</div>
</div>
</div>
</div>
<br>
Also here is what I have done on JavaScript side :
var schedules = [];
$scope.forms1 = [{base_date_key: "",forward_backward: "",schedule_id: ""}];
$scope.addNewSchedule = function(form1){
console.log(form1.schedule);
if(typeof form1.schedule === 'undefined') {
form1.schedule = [];
}
form1.schedule.push({name:"",base_date_key: "",forward_backward: "",schedule_id: ""});
schedules = form1.schedule;
};
$scope.addNewSchedules = function(index){
console.log(index);
$scope.schedules.push({schedule_amount : "", schedule_charge_code:"", frequency: "M", schedule_date:"" ,schedule_type:""});
};
the end result should be in a JSON format like this:
[{
schedule : [
base_date_key: "",
forward_backward:"",
schedule_id:"",
schedules : [{
schedule_amount : "",
schedule_charge_code: "",
frequency: "",
schedule_date: "",
schedule_type: ""
}]
]
}]
Thanks in advance for your help.