I update input with id='total' with event onchange. When I fill quantity input, the input total is updated with correct value but when i try to get the value from controller, it returns null. Any idea? Thanks
This is the code:
<div class="form-group" >
<input type="text" name="quantity" class="form-control" id="quantity" onchange="updateInput(this.value)" >
</div>
</td>
<td align="center">
<div class="form-group ">
<input type="text" class="form-control" id="total" name="total" value="" disabled >
</div>
</td>
And this is function onchange
function updateInput(x)
{
var price=parseFloat(document.getElementById('price').value);
document.getElementById('total').value=parseFloat(x)*price;
}
Solved it, just removed disabled attribute and it works.
Related
I have the following problem with javascript integrated into thymeleaf template.
I have the following table with different input fields which are filled up with data from a model.
Furthermore i have for each of this input field a hidden additional input field.
Idea is that when I change not hidden input tag, the hidden ones will receive the new value
<tr th:each=" item : ${products}">
<td>
<input class="form-control" type="text" th:value="${item.product.name}" id="productName" name="productName" />
</td>
<td>
<input class="form-control" type="text" th:value="${{item.product.price}}" id="productPrice" name="productPrice" />
</td>
<td>
<input class="form-control" type="text" th:onchange="substituteOnClick()" th:value="${item.quantity}" id="quantityItem" name="quantityItem" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.MinQuantity}" th:onchange="substituteOnClick()" id="minquantityItem" name="minquantityItem" />
</td>
<td>
<form th:action="#{/deleteWarehouseItem/{id_del}/(id_del=${item.id})}" method="post" role="form" class="ui form">
<button type="submit" class="ui form" name = "itemDel" th:value="${item.id}">Löschen</button>
</form>
</td>
<td>
<form class="ui form" method="post" th:action="#{/updateItem}" >
<input type="hidden" name="productName_mvc" id="productName_mvc" value="0" th:value="${item.product.name}"/>
<input type="hidden" name="productPrice_mvc" id="productPrice_mvc" value="0" th:value="${{item.product.price}}"/>
<input type="hidden" name="quantityItem_mvc" id="quantityItem_mvc" value="0" th:value="${item.quantity}"/>
<input name="minquantityItem_mvc" id="minquantityItem_mvc" value="0" />
<input type="hidden" name="inventoryIdentifier_mvc" id="inventoryIdentifier_mvc" th:value="${item.id}"/>
<button type="submit" class="ui labeled icon button" name = "updateItem" th:text="#{management.updateItem}">
</button>
</form>
</td>
</tr>
Here is my javascript file
function substituteOnClick() {
var pN=document.getElementById("productName").value;
var pP=document.getElementById("productPrice").value;
var qI=document.getElementById("quantityItem").value;
var MqI=document.getElementById("minquantityItem").value;
document.getElementById("productName_mvc").value=pN;
document.getElementById("productPrice_mvc").value=pP;
document.getElementById("quantityItem_mvc").value=qI;
document.getElementById("minquantityItem_mvc").value=MqI;
}
As you see my problem is that for each row I need 2 buttons for different actions, since that I decided that It would be useful just to change values of hidden inputs. It is possible because I use hidden inputs only if I need to update an object and it happens mainly on change event. But my problem is that even if I write anything new in not hidden inputs, it does not influence my hidden ones. I have cheked it by not hidding one of them.
How is it possible to change values in other inputs by changing them firstly in other ones.
Best wishes
first of all, you need to remove these extra brackets from this line
<input class="form-control" type="text" th:value="${{item.product.price}}" id="productPrice" name="productPrice" />
and then in your javascript use console.log() to check whether on onchange event its fetching the change value or not like
console.log("In js function");
console.log(qI);
if you are not getting these values then Instead of onchange event add a button for each input or for all input use a single button inside form and then use the onClick function or onsubmit like this:
<form onsubmit="return substituteOnClick()">
<td>
<input class="form-control" type="text" th:value="${item.product.name}" id="productName" name="productName" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.product.price}" id="productPrice" name="productPrice" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.quantity}" id="quantityItem" name="quantityItem" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.MinQuantity}" id="minquantityItem" name="minquantityItem" />
</td>
<input type="submit" name="Submit" value="Submit"/>
</form>
Let me know if this helps
So I've been working on a code that would try to pre-fill some disabled inputs with a keyup() function from another enabled input that are all enclosed in one div element. What happens is that upon key release, it tries to change the value of the disabled inputs from that specific row of divs. Here's what I currently have on my code
<div class="container-fluid" id="clonegrp">
<div class="row grpit">
<div class="col-md-7">
<input type="text" name="it[]" class="form-control" id="item" placeholder="Chemical/Equipment*" required="true">
</div>
<div class="col-md-2">
<input type="text" name="amount[]" class="form-control" placeholder="Amount*" required="true">
</div>
/<div class="col-md-1">
<input type="text" class="form-control" id="max" placeholder="Max" readonly="readonly">
</div>
<div class="col-md-1">
<input type="text" class="form-control" id="unit" placeholder="Unit" readonly="readonly">
</div>
</div>
so this group of inputs can be cloned by some button and through this JQuery code
var $button2=$('#add-item'),
$row2=$('.grpit').clone(),
$try2=$('#clonegrp');
$button2.click(function() {
$row2.clone().appendTo($try2);
});
the problem lies at the part where I try to do the live keyup function
$(document).ready(function() {
$('#clonegrp').on('keyup','#item', function() {
$('#max').val('some text');
});
});
I know that this is wrong since the id part would mess up which of the cloned inputs with the #max id gets to change the input. I can't seem to figure out how to get the #max sibling of the currently focused #item input. How do I do that?
i have the below script where i want to pass the text field value to a variable
and display in alert window
<form name='searchdata' id="search_form" >
<div class="col-xs-4" id="form_submit_ins">
<label for="usr">Search Instance</label>
<input type="text" class="form-control" id="ins" id"searchval" placeholder="Instance Name"><br/>
<button class="btn btn-danger navbar-btn" onclick="form_submit();" >Search</button>
</div>
<div>
</div>
</form>
</div>
<script type="text/javascript">
function form_submit() {
var item = document.getElementById('searchval').value;
alert(item);
}
You have a typo:
id"searchval"
Should be:
id="searchval"
id should be equal to searchval i.e id="searchval"
There is something wrong with your HTML (does it have two ID fields? Is one missing a "=" sign?
Your code should work if you fix the HTML to:
<input type="text" class="form-control" id="searchval" placeholder="Instance Name">
Your input has two id's, it can only have one id
change:
<input type="text" class="form-control" id="ins" id"searchval" placeholder="Instance Name">
To:
<input type="text" class="form-control" id="searchval" placeholder="Instance Name">
I have a problem with ng-repeat function from angularjs in html. My input with id 'add-price' in every single cartproduct change the same way, for example when I increase value in first cartproduct from 1 to 2 in second, third and other cartproducts value in input increase from 1 to 2 too.
Here is my code:
<tr ng-repeat="cartproduct in store.cartproducts" bs-popover>
<td>{{cartproduct.cartname}}</td>
<td>{{cartproduct.cartbrutto}}</td>
<td>
<div class="form-group">
<input id="add-price" class="form-control" type="number" min="1" step="any" name="counter" ng-model="product.counter" ng-change="store.calculateRow(cartproduct.cartbrutto)" placeholder="1">
</div>
</td>
<td>
<div class="form-group">
<input id="add-final-price" class="form-control" type="text" name="row" ng-model="product.row" placeholder="{{cartproduct.cartbrutto}}">
</div>
</td>
</tr>
Help please!
Regards!
Its updating same everywhere because, you are sharing same reference of counter on each ng-model
I'd say that make that counter value relative to cartproduct instead of having it in product
Markup
<input id="add-price" class="form-control" type="number" min="1"
step="any" name="counter" ng-model="cartproduct.counter"
ng-change="store.calculateRow(cartproduct.cartbrutto)" placeholder="1">
i have a table that generated from yii2, i want to make a tabular input but before sending submit, there are a client validation to the input field. Consider i dont know the input id, because it is generated by yii2. Here's the code snippet of first row
<tr class="kv-tabform-row" data-key="4">
<td class="kv-align-center kv-align-middle">1</td>
<td class="kv-grid-hide kv-align-top">
<div class="form-group field-kegbulan-4-id">
<input type="hidden" id="kegbulan-4-id" class="form-control" name="KegBulan[4][id]" value="4">
<div class="help-block"></div>
</div>
</td>
<td class="kv-grid-hide kv-align-top">
<div class="form-group field-kegbulan-4-id_keg_ta_uk required">
<input type="hidden" id="kegbulan-4-id_keg_ta_uk" class="form-control" name="KegBulan[4][id_keg_ta_uk]" value="6">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-middle" style="width:300px;">Pengadaan Barang Kuasi, Buku Uji, Plat Uji dan Stiker Uji</td>
<td class="kv-align-middle">
<input type="text" id="kegbulan-4-anggaran" class="anggaran" name="KegBulan-[4][anggaran]" value="300,000,000" disabled="disabled" style="width:100px;"></td>
<td class="kv-align-top">
<div class="form-group field-kegbulan-4-sp2d required">
<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos()">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-persen_sp2d required">
<input type="text" id="kegbulan-4-persen_sp2d" class="form-control" name="KegBulan[4][persen_sp2d]" value="2">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top">
<div class="form-group field-kegbulan-4-spj required">
<input type="text" id="kegbulan-4-spj" class="form-control" name="KegBulan[4][spj]" value="680000">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-persen_spj required">
<input type="text" id="kegbulan-4-persen_spj" class="form-control" name="KegBulan[4][persen_spj]" value="2">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-target required">
<input type="text" id="kegbulan-4-target" class="form-control" name="KegBulan[4][target]" value="0">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-pfisik required">
<input type="text" id="kegbulan-4-pfisik" class="form-control" name="KegBulan[4][pfisik]" value="10">
<div class="help-block"></div>
</div>
</td>
<td class="skip-export kv-align-center kv-align-middle" style="width:60px;"><a href="/yii2/yii-application/frontend/web/keg-bulan/view?id=4" title="View" data-pjax="0">
<span class="glyphicon glyphicon-eye-open"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/update?id=4" title="Update" data-pjax="0" style="display:none;">
<span class="glyphicon glyphicon-pencil"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/delete?id=4" title="Delete" data-confirm="Are you sure to delete this item?" data-method="post" data-pjax="0">
<span class="glyphicon glyphicon-trash"></span></a></td>
<td class="skip-export kv-align-center kv-align-middle kv-row-select" style="width:50px;">
<input type="checkbox" name="selection[]" value="4"></td>
</tr>
screenshoot : http://www.imagebam.com/image/569de2398154258
the input sp2d will check input anggaran and do some validation if (sp2d > anggaran) then "sp2d exceed anggaran limit"
Here the initial javascript function to check that function is triggered via onchange
function tesbos(){
var sp2d = $(".sp2d").attr("id");
console.log(sp2d);
}
when i go to row no 2 in sp2d input, still when i check my console log, it still print the sp2d input id of row #1, how to get my input id automatically/dynamically when i go to any row? any help would be appreciated
Assuming you can change the markup, you need to pass the element refernce to the click handler
<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos(this)">
then
function tesbos(el) {
alert(el.id)
}
But I would recommend using jQuery event handlers instead of inlined one, so remove onchange="" from the markup
<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000">
then
jQuery(function($){
$(".sp2d").change(function(){
alert(this.id)
})
})
If I understand correctly, each row of your table includes :
an anggaran (budget) field [fixed value]
a sp2d (spend to date) field [user entered].
And you want to perform a check, on change of every sp2d (spend to date) value against its corresponding anggaran (budget) value.
For this, you do not need to know either of the the fields' IDs. Simply find the anggaran field relative to whichever sp2d field triggers the change event.
First, delete onchange="tesbos()" from the HTML.
Then paste this code between <script></script> tags in your document's HEAD (or in a .js file if your code is organised that way).
jQuery(function($) {
$("#containerID").on('change', ".sp2d", tesbos); // where containerID is the ID of eg. a DIV in which the YII table sits
function tesbos() {
var sp2d_value = $(this).val();
var anggaran_value = $(this).closest("tr").find(".anggaran").val();//find the anggaran field in the same row, and grab its value.
console.log(anggaran_value, sp2d_value);
if(sp2d_value > anggaran_value) {
//anggaran is exceeded
...
} else {
//anggaran is not exceeded
...
}
}
});