Problem loading JS when creating and modifying an element - javascript

I hope you can help me with these problems that I have with the execution of my JS, I have 2 problems that I will detail:
WHEN CREATING
I am using the change and select events to be able to know if I am selecting and changing an option from my question combobox. The problem is when I have selected the option 1 SINGLE / MULIPLE ANSWER of the question type. If when saving I do not have any checkbox selected from the available options, it will throw me the alert to select at least one option, so far everything works fine for me but when I select a checkbox from the options and try to save, the alert does not disappear. I've tried adding the event checked but it can't work for me. What I want to do is that when I save and I do not have an option selected, it throws me the alert message (this already does), and when I select an option, the alert disappears so that it allows me to save.
WHEN MODIFYING
The second problem occurs when I try to modify an element, the JS does not run, so that it can work I have to select another option and return to the previous one so that it can work.
HTML
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-opcion">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-opcion btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="opcion-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
JS
$(".dynamicform_wrapper").on("change","select",function(){
if ($(this).val()== 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan',2);
}else if ($(this).val()== 1){
//var numberNotChecked = $('#0').find('.option-item input:checkbox:not(":checked")').length;
var numberChecked = $('#0').find('.option-item input:checkbox:checked').length;
$('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.question').removeAttr('colspan',2);
$( "#dynamic-form" ).submit(function( event ) {
if(numberChecked > 0){
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({'border':'2px solid #dd4b39','background-color':'white'});
event.preventDefault();
}
});
}});
Hope you can help me with these problems, I am not very good at using javascript or jquery. I thank you in advance for your support.

In your current code you are using wrong selector to get total value of checked checkboxes.If you check your current jquery code its always giving 0 even if you checked any value. So , you can use input[type="checkbox"]:checked which will give you correct values of checked checkboxes.
Then , you have placed your submit event inside your change event that's the reason the warning shows for the first time but when you select some checkbox and again clicked save button it doesn't go away (also because of wrong selector) so i have separated it from the change event .
Also you have forget to show the tr which you have hide() when select-box value is 2 i.e : item-option so add .show() to it when value is 1.
Working Code :
$(".dynamicform_wrapper").on("change", "select", function() {
if ($(this).val() == 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan', 2);
} else if ($(this).val() == 1) {
// $('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.option-item:first').show(); //show option-item which is hidden
$('#0').find('.question').removeAttr('colspan', 2);
}
});
$("#dynamic-form").submit(function(event) {
//getting all inputs which is under tr
var numberChecked = $('#0').find('input[type="checkbox"]:checked').length;
console.log("No of checkbox checked=" + numberChecked)
if (numberChecked > 0) {
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
event.preventDefault();//remove this to submit
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({
'border': '2px solid #dd4b39',
'background-color': 'white'
});
event.preventDefault();
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-option">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-option btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="option-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
<br>
<br>
<br>
<br>

Related

How to change checkbox by icon validate not a input?

I have two forms. #form1 contains the date and the display button. The show button allows you to hide #form1 and display #form2. This form contains the chosen date and a datatable with checkboxes.
When I display the table I want just the checkboxes that verify these two conditions become a 'valid' icon, not the table input.
$(document).ready(function() {
$("#form2").hide();
$("#hide").click(function() {
$("#form1").hide();
$("#form2").show();
let dat = $("#dateS").val();
$("#da").text(dat);
$("tr").each(function(i, r) {
let mat = $(r)[0].cells[2].innerText;
for (var i = 0; i < 2; i++) {
if (dat == "2020-02-17" && mat == "52") {
$(r).find("input").first().replaceWith('<span style="color: green;font-weight: bolder;">✔</span>');
}
}
});
});
})
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="form1">
<div class=" col-md-10 col-md-offset-1">
<div class="form-group col-md-3">
<label for="titre">date</label>
</div>
<div class="form-group col-md-5">
<input type="date" name="dateS" id="dateS" class="form-control">
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group col-md-2">
<button class="btn btn-primary" id="hide" data-url="">show</button>
</div>
</div>
</div>
<div id="form2">
<div class="col-md-10 col-md-offset-1">
<h4>dateS : <span id="da"></span></h4>
</div>
<table class="table table-bordered" id="mytable">
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>nom</th>
<th>matricule</th>
<th>adresse</th>
<th>prime</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>najib</td>
<td>52</td>
<td>tihit</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>adil</td>
<td>62</td>
<td>tagmast</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button>
</div>
</div>
you need to add the type of input that you want to replace.
$(document).ready(function() {
$("#form2").hide();
$("#hide").click(function() {
$("#form1").hide();
$("#form2").show();
let dat = $("#dateS").val();
$("#da").text(dat);
$("tr").each(function(i, r) {
let mat = $(r)[0].cells[2].innerText;
for (var i = 0; i < 2; i++) {
if (dat == "2020-02-17" && mat == "52") {
$(r).find("input:checkbox").replaceWith('<span style="color: green;font-weight: bolder;">✔</span>');
}
}
});
});
})
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="form1">
<div class=" col-md-10 col-md-offset-1">
<div class="form-group col-md-3">
<label for="titre">date</label>
</div>
<div class="form-group col-md-5">
<input type="date" name="dateS" id="dateS" class="form-control">
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group col-md-2">
<button class="btn btn-primary" id="hide" data-url="">show</button>
</div>
</div>
</div>
<div id="form2">
<div class="col-md-10 col-md-offset-1">
<h4>dateS : <span id="da"></span></h4>
</div>
<table class="table table-bordered" id="mytable">
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>nom</th>
<th>matricule</th>
<th>adresse</th>
<th>prime</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>najib</td>
<td>52</td>
<td>tihit</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>adil</td>
<td>62</td>
<td>tagmast</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button>
</div>
</div>

Show error on specific input field in html table td using jQuery

I am trying to highlight the input field which is in html table td. I am looping the html table but unable to highlight the input field if quantity is 0 in input field. what i have tried is below.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>details</li>
<li>captain</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="details">
<div class="row">
<div class="col-sm-12">
<h4 class="info-text">
Let's start with the basic details.
</h4>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="persons">
<table class="table table-condensed table-hover" id="tblPurchaseOrders">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="B" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="B1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="B1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="1" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="tab-pane" id="captain">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<table class="table table-condensed table-hover" id="tbOrderDetail">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<div class="tab-content">
</div>
Below is my jquery code where i am looping the html table and want to highlight the input field which is in html table td.
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
if (index == 1) {
$('#tblPurchaseOrders').find('tr:has(td)').each(function() {
if (parseInt(($(this).find('#Quantity')).val()) == 0)
{
//show error
}
});
}
}
});
});
You are filtering per ID (#Quantity). Two (or more) elements cannot share the same ID. Try to select elements by name, for example:
$('#tblPurchaseOrders').find('td > input[name=Quantity]').each(function() {
var val = $(this).val();
if (parseInt(val) == 0)
{
// show error
// note: if needed, you can obtain a reference
// to container <tr> using: $(this).parent('tr');
}
});
Remember to change id property of Quantity elements to name.
Note: untested code that might not work as-is, I'm just showing you the right direction.
If your intention is to use the Twitter Bootstrap Wizard (TBW from now on) for your validation flow, you probably don't want this validation to trigger when you open the tab, which is what happens, when you place your code inside of the onTabShow function.
I assume you want the validation of the fields to be done when the user wants to go to the next step, by pressing the "Next" link you have, or rather, when you want to load the "next tab". For this, you should use onNext rather than onTabShow for your validation.
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
tabClass: 'nav nav-pills',
onNext: function(tab, navigation, index) {
var res = $("input[name='Quantity']").each(function() {
var val = $(this).val();
if(parseInt(val) == 0) {
$(this).focus();
// This will stop the .each-iteration
// We only want to focus the _first_ element, otherwise it
// would keep iterating, and change focus to the next 0-valued input
return false;
}
});
// We use the result returned from running the each function
// If false was returned at any point during the .each function,
// var res will be false. Pass this onto the onNext call, to
// prevent the the user to move to next tab.
if(!res) return false;
}
});
});
For this to work, you'll have to replace id="Quantity" with name="Quantity", in both your instances.
If you want to use .focus() on the first element, regardless of which input is invalid, you should remove $(this).focus() from the previous example, and instead replace if(!res) return false with the following:
if(!res) {
$("input[name='Quantity']").first().focus();
return false;
}
Can you try this
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>details</li>
<li>captain</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="details">
<div class="row">
<div class="col-sm-12">
<h4 class="info-text">
Let's start with the basic details.
</h4>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="persons">
<table class="table table-condensed table-hover" id="tblPurchaseOrders">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
<tbody id="dtTable">
<tr>
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="B" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="B1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="B1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" name="Quantity" value="1" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="tab-pane" id="captain">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<table class="table table-condensed table-hover" id="tbOrderDetail">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<div class="tab-content">
And Javascript code
$(document).ready(function () {
$('#rootwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
if (index == 0) {
$('#dtTable tr').each(function (i, row) {
$(this).find('[name=Quantity]').each(function () {
alert($(this).val())
})
if ($(this).val() == 1) {
///Do something
}
});
}
}
});
});

How to get input value based on option value selected?

I have a dynamic input form like this (open the link): this is the
form
The option value is "Debit" and "Kredit".
In my case, I wanna get the Jumlah's value based on the option selected. As you can see in that picture, in first row, I input the Jumlah's value with 10 and then I select the "Debit", so the Total Debit value will change to 10 and Total Kredit value still 0.
And then, in the next row, I input the Jumlah's value with 3 and then I select "Kredit", so the Total Debit value still 10 and Total Kredit change to 3.
Then, when I change the second row to Debit, the Total Debit should be 13 and Total Kredit is 0. But, it makes Total Debit to 13 and Total Kredit still 3.
So, how can I solve this? Any suggestions or another alternatives?
Here is my form's code:
<form action="" method="post">
{{ csrf_field() }}
<div class="form-group">
<label for="nojurnal">Nomor Jurnal:</label>
<input type="text" class="form-control" id="nojurnal" value="{{ $noJurnal+1 }}" name="no_jurnal" readonly>
</div>
<div class="form-group">
<label for="tgljurnal">Tanggal Jurnal:</label>
<input type="date" class="form-control" id="tgljurnal" name="tgl_jurnal">
</div>
<div class="form-group">
<label for="keterangan">Keterangan:</label>
<textarea name="keterangan_jurnal" id="keterangan" class="form-control" rows="8" cols="80"></textarea>
</div>
<hr>
<div class="form-group table-responsive">
<table class="table table-striped">
<thead>
<th>Nomor Rekening</th>
<th>Nama Rekening</th>
<th>Keterangan</th>
<th>Jumlah</th>
<th>Jenis Rekening</th>
<th></th>
</thead>
<tbody class="tabel-body">
<tr class="row-rekening">
<td>
<div class="form-group">
<select class="form-control kodeRekening" name="kode_rekening[]">
#foreach($rekenings as $rekening)
<option class="listKodeRekening" value="{{ $rekening->kode_rekening }}" nm="{{ $rekening->nama_rekening }}">{{ $rekening->kode_rekening }}</option>
#endforeach
</select>
</div>
</td>
<td>
<div class="form-group">
<input class="form-control namaRekening" type="text" name="" value="" readonly>
</div>
</td>
<td>
<div class="form-group">
<input class="form-control keterangan" type="text" name="keterangan[]" value="">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control jumlahDK" type="text" name="jumlah[]" value="">
</div>
</td>
<td>
<div class="form-group">
<select class="form-control jenisRekening" name="d_k[]">
<option value="">-- Pilih --</option>
<option value="D" class="debit">Debit</option>
<option value="K" class="kredit">Kredit</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<button type="button" class="form-control glyphicon glyphicon-plus btn-success more-input" name="button"></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group col-sm-12">
<label for="total-debit" class="col-sm-2">Total Debit</label>
<span class="col-sm-4"><input type="text" id="jumlah-debit" class="form-control" name="" value="" readonly></span>
</div>
<div class="form-group col-sm-12">
<label for="total-kredit" class="col-sm-2">Total Kredit</label>
<span class="col-sm-4"><input type="text" id="jumlah-kredit" class="form-control" name="" value="" readonly></span>
</div>
<input type="submit" class="btn btn-success" value="Simpan">
</form>
And this is my javascript code:
$(document).on('change', '.jenisRekening', function(e){
if ($(this).val()=='D' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalDebit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val())
}
else if($(this).val()=='K' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalKredit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val())
}
$('#jumlah-debit').val(totalDebit)
$('#jumlah-kredit').val(totalKredit)
});
The variables totalDebit and totalCredit should be reinitialised to zero in your jQuery code before they're recomputed. It seems that their old value is retained and therefore a simple solution would be:
$(document).on('change', '.jenisRekening', function(e){
totalDebit = 0;
totalKredit = 0;
if ($(this).val()=='D' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalDebit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val());
}
else if($(this).val()=='K' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalKredit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val());
}
$('#jumlah-debit').val(totalDebit);
$('#jumlah-kredit').val(totalKredit);
});

AngularJS: radio buttons aren't checked by default

I'm coding some radio buttons in angular, but I cannot make one of the radios appears marked as default.
This is my code:
<!-- language: lang-js -->
//And this is the JavaSctipt:
$scope.locationLookup = 1;
$scope.updateDropdownValuesBreedingLocation = function() { // Change state for breeding
// location radio
$scope.dropdownValues = ($scope.localData.useFavorites) ? $scope.variableDefinition.possibleValuesFavorite : $scope.variableDefinition.possibleValues;
$scope.locationLookup = 1;
};
$scope.updateDropdownValuesAllLocation = function() { // Change state for all locations radio
$scope.dropdownValues = ($scope.localData.useFavorites) ? $scope.variableDefinition.allFavoriteValues : $scope.variableDefinition.allValues;
$scope.locationLookup = 2;
};
<!-- language: lang-html -->
<!-- show-setting-form-element-new.html -->
<div ng-switch="widgetType">
<div ng-switch-when="DROPDOWN">
<input type="hidden" ui-select2="dropdownOptions" class="form-control select2" ng-model="valuecontainer[targetkey]" value-as-object="false" ng-change="changefunction()" ng-disabled="blockInput"/>
<div ng-if="isLocation">
<div class="possibleValuesDiv">
<input type="radio" ng-disabled="blockInput"
ng-model="locationLookup" value=1 ng-change="updateDropdownValuesBreedingLocation()">
<span th:text="#{show.breeding.location}">Breeding locations</span>
<input type="radio" ng-disabled="blockInput"
ng-model="locationLookup" value=2 ng-change="updateDropdownValuesAllLocation()">
<span th:text="#{show.all.location}">All locations types</span>
</div>
<div class="possibleValuesDiv">
<input type="checkbox" ng-model="localData.useFavorites" ng-checked="true" ng-change="updateDropdownValuesFavorites()">
<span th:text="#{show.favorite.location}">Show only favorite locations </span>
</div>
</div>
<div ng-if="isBreedingMethod" class="possibleValuesDiv">
<!--TODO : handle rendering of breeding method dropdowns for completeness-->
</div>
</div>
<div ng-switch-when="NTEXT">
<input type="text" ng-disabled="blockInput" valid-decimal="" class="form-control numeric-input" ng-model="valuecontainer[targetkey]" ng-change="changefunction()"/>
</div>
<div ng-switch-when="SLIDER">
<input type="text" ng-disabled="blockInput" valid-decimal="" class="form-control numeric-input" ng-model="valuecontainer[targetkey]" ng-change="changefunction()"/>
</div>
<div ng-switch-when="CTEXT">
<input type="text" ng-disabled="blockInput" class="form-control character-input" ng-model="valuecontainer[targetkey]" ng-change="changefunction()"/>
</div>
<div ng-switch-when="TEXTAREA">
<textarea ng-disabled="blockInput" class="form-control character-input" rows="3" ng-model="valuecontainer[targetkey]" ng-change="changefunction()"/>
</div>
<div ng-switch-when="DATE">
<input type="text" ng-disabled="blockInput" placeholder="yyyy-mm-dd" class="form-control date-input" ng-model="valuecontainer[targetkey]" jq-datepicker="true" with-image="true" image-src="/Fieldbook/static/img/calendar.png" ng-change="changefunction()"/>
</div>
</div>
<!-- end snippet -->
And the container is this:
<!-- language: lang-html -->
<section-container th:attr="heading=#{trial.managesettings.trial.environment.specify.level}">
<div name="content">
<table datatable="ng" dt-options="dtOptions" dt-instance="nested.dtInstance"
class="table table-curved table-condensed fbk-table-with-check fbk-datatable-environments" width="100%">
<thead>
<tr>
<th data-sortable="false" class="fbk-delete-link"></th>
<th data-sortable="false" th:text="#{trial.managesettings.trial.environment.label}">Environment</th>
<th data-sortable="false" ng-repeat="key in settings.managementDetails.keys()"
ng-hide="settings.managementDetails.val(key).hidden">
{{settings.managementDetails.val(key).variable.name}}</th>
<th data-sortable="false" ng-repeat="key in settings.trialConditionDetails.keys()">
{{settings.trialConditionDetails.val(key).variable.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="environment in data.environments" ng-class="{even : $even, odd : $odd}">
<td class="fbk-delete-link fbk-table-delete-link">
<span ng-click="deleteEnvironment($index)" ng-show="data.noOfEnvironments > 1"
class="glyphicon glyphicon-minus-sign fbk-delete-sign"> </span>
</td>
<td>{{environment.managementDetailValues[TRIAL_INSTANCE_NO_INDEX]}}</td>
<td ng-repeat="key in settings.managementDetails.keys()"
ng-hide="settings.managementDetails.val(key).hidden">
<show-setting-form-element-new ng-if="isLocation" settings="settings.managementDetails" targetkey="{{key}}"
valuecontainer="environment.managementDetailValues"
changefunction="onLocationChange({key: environment.managementDetailValues[key]})"></show-setting-form-element-new>
<show-setting-form-element-new ng-if="!isLocation" settings="settings.managementDetails" targetkey="{{key}}"
valuecontainer="environment.managementDetailValues"></show-setting-form-element-new></td>
<td ng-repeat="key in settings.trialConditionDetails.keys()">
<show-setting-form-element settings="settings.trialConditionDetails" targetkey="{{key}}"
valuecontainer="environment.trialDetailValues"></show-setting-form-element></td>
</tr>
</tbody>
</table>
</div>
</section-container>
<!-- end snippet -->
Can you help me?
The most interesting is that if I put these radios outside the table, it works fine! But not inside it.

Array in ng-repeat isn't showing

I have a problem with my ng-repeat. I am working in a project and I'm designing a gradecontrol system. I have a form that when the user clicks in the button, it adds the $scope.grade to an array.
In the table below, it was supposed to show the array. But it isn't showing.
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject"> Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject"> Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher"/>
</div>
<div class="form-group">
<label for="inputScoreSubject"> Grade </label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade"/>
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() "> Submit your score!</button>
</form>
</div>
<br><br><br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings"> {{head}}</th>
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</table>
</div>
angular.module('myProjectApp')
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function(){
$scope.grades.push($scope.grade);
console.log($scope.grades);
}
});
Because you close off your tr element so your td elements are not considered in the same scope as your ng-repeat and do not get printed correctly. Not to mention it is also not valid html.
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
should be
<tr ng-repeat="gr in grades track by $index" >
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</tr>
Patrick beat me to it!
angular.module('myProjectApp', [])
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function() {
$scope.grades.push($scope.grade);
console.log(JSON.stringify($scope.grades));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myProjectApp" ng-controller="MainCtrl">
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject">Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject">Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher" />
</div>
<div class="form-group">
<label for="inputScoreSubject">Grade</label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade" />
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() ">Submit your score!</button>
</form>
</div>
<br>
<br>
<br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings">{{head}}</th>
<tr ng-repeat="gr in grades">
<td>{{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td>{{gr.score}}</td>
</tr>
</table>
</div>
</body>

Categories