We Keep Coding

On change attribut is not initialised in thymeleaf

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

Selector is not working in jquery

Hi I've HTML code which is
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">
Now I want to search a value in my notes fields which is Towing amount paid Order ID 000000001 and I want to empty these fields and my javascript/jquery code is
$(document).ready(function() {
if($("input[name^=notes]").val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
} else {
$("#testing").text('not found');
}
});
But this code is giving me not found message what is wrong in my code I've tried different selectors but didn't work for me.

You can use jQuery :contains pseudo it will find the first element that contains the required text
Ref: https://api.jquery.com/contains-selector/
Code:
if($("input[name^='notes']:contains('Towing amount paid Order ID ')")) {
$("#testing").text('found it');
} else {
$("#testing").text('not found');
}
Demo: http://jsfiddle.net/La1bq789/

This code searches only in the input which has value - This is test notes.
To look in all fields use $.each:
$(document).ready(function () {
$("input[name^='notes']").each(function () {
if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
} else {
$("#testing").text('not found');
}
});
});
JSFiddle - http://jsfiddle.net/FakeHeal/362o548n/
Edit for clearing the fields: http://jsfiddle.net/FakeHeal/362o548n/1/

The main problem is that you checking only one element value and you need to check all elements.
I did make some changes with your code, now it's working:
$("input[name^=notes]").each(function(){
if($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
} else {
$("#testing").text('not found');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">

$(document).ready(function() {
$("input").each(function() {
if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">

$("input[name^=notes]").val() will only ever return the value of the first element in the page than matches that selector.
In order to check all of them you need to look at each instance
I would suggest you modularize the repeating groups by wrapping each group in a container to help locate other related elements within each group
<div class="input-group">
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
</div>
Then loop over the inputs you want to focus on
var hasNotes = $("input[name^=notes]").filter(function(){
return this.value.indexOf("Towing amount paid Order ID ") > -1
}).length;
var message = hasNotes ? 'found it' :'not found'
$('#testing.text(message);
If you need to make adjustments to other values, use an each lopp and traverse within the container

Allow the user to add form input fields: Why is append() only working once?

I'm trying to create an order form that has an "add new product" section within a table. Basically the user should be able to click on the "Add Row" link and a new input line will appear to allow the user to add another product to the order list. I'm able to have this work once, but after that the form won't add any new lines. In the console.log I can see that the event handler is only working on the original form element, not the new product input line. I have a shortened fiddle of what I'm working with here:
http://jsfiddle.net/scottm1164/eTBr6/5/
Here is my jQuery:
<script>
$(document).ready(function () {
(function () {
var start = $('table'),
newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
$('.addRow').on('click', function () {
$(start).append(newRow);
console.log(this);
});
})(); //end SIAF
}); //END document ready
</script>
Here is my Form:
<form enctype="multipart/form-data" method="post" action="#" id="orderForm">
<ul>
<li>Name:
<br>
<input type="text" id="name" />
</li>
<li>Email:
<br>
<input type="email" id="email" />
</li>
<li>Company:
<br>
<input type="text" id="company" />
</li>
<li>Phone:
<br>
<input type="tel" id="phone" />
</li>
<li>Delivery Address:
<br>
<input type="text" id="delAddress" />
</li>
<li>PO Number:
<br>
<input type="text" id="poNum" />
</li>
<li>If you have a document for your order, attach it here:
<br>
<input type="file" id="docs" />
</li>
<li>
<table id="prodTable" width="auto" border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td>Quantity</td>
<td>Product Number</td>
<td>Product Description</td>
<td> </td>
</tr>
<tr>
<td>
<input type="text" class="quantity" name="quantity_" />
</td>
<td>
<input type="text" class="prodNum" name="prodNum_" />
</td>
<td>
<textarea cols="15" rows="1" name="prodDesc_"></textarea>
</td>
<td>
<p class="addRow">Add a Row</p>
</td>
</tr>
</tbody>
</table>
</li>
<li>Special Delivery Instructions:
<br>
<textarea cols="30" rows="10" id="instructions"></textarea>
</li>
</ul>
<input type="submit" id="submit" />
</form>
Can somebody explain to me what is going wrong with this code, I'm fairly new to jQuery/Javascript so I just don't understand why the code only works once, but not after subsequent clicks to the "add a row" link, and only on the original "add a row" links but not on the newly created link.

Try this
http://jsfiddle.net/eTBr6/8/
$('form').on('click', '.addRow', function () {
var start = $('table'),
newRow = $('<tr><td><input type="text" class="quantity" /></td>' +
'<td><input type="text" class="prodNum" /></td>' +
'<td><textarea cols="15" rows="1"></textarea></td>' +
'<td><p class="addRow">Add a Row</p></td></tr>');
$(start).append(newRow);
});
Put variables inside the click handler and also use event delegation by having the form as your context

Working DEMO
I guess this is what you need. For dynamically loaded elements a delegate $(document).on() is necessary than a normal function(), since normal event work only on page load.
here is the code
$(document).ready(function () {
var start = $('table'),
newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>';
$(document).on('click', '.addRow', function () {
$(start).append(newRow);
});
}); //end document.ready
Hope this helps, Thank you

I did something similar to johnathan, just not as quickly.
Fiddle here: http://jsfiddle.net/xCNqP/1/
(function () {
var start = $('table'),
newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><input type="text" maxlength="15"/></td><td><p class="addRow">Add a Row</p></td></tr>';
$(document).on('click', '.addRow', function () {
$(start).append($(newRow));
});
})(); //end SIAF
Primary change I used was set newRow to just a string, since declaring the element will allow you to only append it once. Re-declaring (which jonathan did by moving the declaration inside the handler) is required to re-append.
The correct usage of on so it will attach to new elements was also included.

http://jsfiddle.net/LK5sj/ stick your newrow inside the function and make the function recursive, and don't forget to clear and reassign the event handler or you'll get way more new rows than you want
var start = $('table');
function addRow(){
newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
$(start).append(newRow);
$('.addRow').off('click');
$('.addRow').on('click', function() {
addRow();
});
}
$('.addRow').on('click', function() {
addRow();
});

Assingning unique id and names?

I have a html table with one prototype row. Prototype row has few tds and each td has input element. I am trying to clone the row and assign unique ids and names. But in Fire fox new ids and names are assigned properly. But in IE unique ids and names are not assigned. This logic works fine in FF. But in IE7 it does not work.
html Table:
<table class="myTable">
<tr class="prototype">
<td>
<label for="myValue1">MY Value ONE:</label><br>
<input class="required email" id="myValue1" type="text" value="" name="myValue1">
</td>
<td>
<label for="myValue2">MY Value TWO:</label><br>
<input class="required email" id="myValue2" type="text" value="" name="myValue2">
</td>
<td>
<label for="myValue3">MY Value THREE:</label><br>
<input class="required email" id="myValue3" type="text" value="" name="myValue3">
</td>
<td>
<label for="myValue4">MY Value FOUR:</label><br>
<input class="required email" id="myValue4" type="text" value="" name="myValue4">
</td>
</tr>
</table>
JQuery code:
$("#new").click(function(e) {
e.preventDefault();
var d = new Date();
var counter = d.getTime();
var master = $("table.myTable");
var prot = master.find("tr.prototype").clone();
prot.removeClass('prototype');
prot.addClass("contact");
prot.find("#myValue1").attr('id',"myValue1"+counter);
prot.find("#myValue2").attr('id',"myValue2"+counter);
prot.find("#myValue3").attr('id',"myValue3"+counter);
prot.find("#myValue4").attr('id',"myValue4"+counter);
prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);
jQuery('table.myTable tr:last').before(prot);
});
But with the above code unique ids and names are not assigned.am i doing anything wrong here?
Thanks!

You don't needs IDs:
<label>MY Value ONE:<br /><input class="required email" type="text" name="myValue1[]" /></label>
Now you can clone this label as many times as needed, and it'll work.
On the server side, you can then access (for example in PHP) $_POST['myValue1'] as an array.

Sorry to tell you, but everything seems fine with what you did. I tried the example you gave on IE and it seems to work.
If you inspect it with Developer Tools you still see the old id? what version of IE?
here is the code I tried:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
$("#new").click(function(e) {
e.preventDefault();
var d = new Date();
var counter = d.getTime();
var master = $("table.myTable");
var prot = master.find("tr.prototype").clone();
prot.removeClass('prototype');
prot.addClass("contact");
//$(prot.find("input")[0])
prot.find("#myValue1").attr('id',"myValue1"+counter);
prot.find("#myValue2").attr('id',"myValue2"+counter);
prot.find("#myValue3").attr('id',"myValue3"+counter);
prot.find("#myValue4").attr('id',"myValue4"+counter);
prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);
jQuery('table.myTable tr:last').before(prot);
counter++;
});
});
</script>
</head>
<body>
<table class="myTable">
<tr class="prototype">
<td>
<label for="myValue1">MY Value ONE:</label><br>
<input class="required email" id="myValue1" type="text" value="" name="myValue1">
</td>
<td>
<label for="myValue2">MY Value TWO:</label><br>
<input class="required email" id="myValue2" type="text" value="" name="myValue2">
</td>
<td>
<label for="myValue3">MY Value THREE:</label><br>
<input class="required email" id="myValue3" type="text" value="" name="myValue3">
</td>
<td>
<label for="myValue4">MY Value FOUR:</label><br>
<input class="required email" id="myValue4" type="text" value="" name="myValue4">
</td>
</tr>
</table>
<input type="button" id="new" />
</body>
</html>

Adding a new item to a checklist

I am trying to create a checklist that allows users to add their own items.
This is part of my HTML:
<tr>
<td>
<input name="checkbox65" id="checkbox65" type="checkbox" />
</td>
<td>
<label for="checkbox65">Get directions for where you are going</label>
</td>
</tr>
<h3>
My items
</h3>
<fieldset data-role="controlgroup">
<label for="textinput4">Add new item</label>
</td>
<input name="new_item" id="textinput4" placeholder="" value="" type="text"
/>
</fieldset>
<input type="submit" id="add" value="Add" />
And this is my script:
<script>
$('#add').on('click', function (e) {
var $this = $(this);
var $newRow = $this.closest('table').find('tr:first').clone();
$newRow.find(':input').val('');
$newRow.insertAfter($this.parent());
});
</script>
But I just do not get any response..

Is this what you need ?
HTML
<h3>My items</h3>
<table id="myTable">
<tr>
<td>
<label for="checkbox65">
<input name="checkbox65" class="checkbox65" type="checkbox" />
Get directions for where you are going
</label>
</td>
</tr>
<tr><td>
<fieldset data-role="controlgroup">
<label for="textinput4">
Add new item
<input name="new_item" id="textinput4" placeholder="" value="" type="text" />
</label>
</fieldset>
<button id="add">Add</button>
</td></tr>
</table>
Notice I've changed id="checkbox65" to class="checkbox65" because you can't use same id twice. Also changed input type=submit to <button> for adding new elements.
JS
$('#add').on('click', function (e) {
var $this = $(this);
var $firstRow=$this.closest('table').find('tr:first');
var $newRow = $firstRow.clone();
$newRow.find(':input').prop('checked', false);
$newRow.insertAfter($firstRow);
});
DEMO.
Update: Or maybe this one or this one.