Develop Reference

add values in a textarea using a add button & it should be displayed in other textarea appended in a new row

How to add values in a textarea using a add button & that values should be displayed in other textarea using HTML5
<script src="http://code.jquery.com/jquery-1.11.3.min.js">
jQuery('#constraint_btn').click(function(){
var newVal = jQuery('#consEditor_txtarea').attr('value');
jQuery('#new_html').show();
jQuery('#new_consEditor_txtarea').attr('value',newVal);
});
</script>
<table>
<tr>
<td valign="top"><label>Constarint Editor </label></td>
<td><textarea id="consEditor_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="constraint_btn" value="Add Constraint" /></td>
</tr>
<tr id="new_html">
<td><label>Added Constraints </label></td>
<td><textarea id="new_consEditor_txtarea"></textarea></td>
</tr>
</table>

You need to close the script tags with the src and start a new script tag - if there is a src attribute, then you cannot have content inside the script
You need https (and preferably update the jquery to a newer version) in the jQuery source
You did not call the fields the same in the code as in the HTML
You need to execute the code after the page has loaded or the fields rendered - here I wrapped in the $(function() {}) load event handler
#new_html {
display: none;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('#constraint_btn').click(function() {
let oldVal = $('#consEditor_txtarea').val().trim();
let newVal = $('#new_consEditor_txtarea').val().trim();
const vals = newVal.split("\n").filter(item => item);
if (oldVal) vals.push(oldVal);
$('#consEditor_txtarea').val(""); // remove
$('#new_html').show();
$('#new_consEditor_txtarea').val(vals.join("\n"));
});
});
</script>
<table>
<tr>
<td valign="top"><label>Constraint Editor </label></td>
<td><textarea id="consEditor_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="constraint_btn" value="Add Constraint" /></td>
</tr>
<tr id="new_html">
<td><label>Added Constraints </label></td>
<td><textarea id="new_consEditor_txtarea"></textarea></td>
</tr>
</table>

jQuery .val() passes null to server side

when I populate my input field with an onClick event with jQuery and inserting that clicked value into the input upon sending the form to the database I get the next error :
SEVERE: Servlet.service() for servlet [ws.ApplicationConfig] in
context with path [/CRUDAngularJS_Server] threw exception
org.hibernate.PropertyValueException: not-null property references a
null or transient value: entities.Product.startdate
this is the input setup
<div id="bookmenu">
<fieldset>
<legend>Booking Information</legend>
<table cellpadding="2" cellspacing="2">
<tr>
<td>Name</td>
<td><input type="text" ng-model="product.name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" ng-model="product.email"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" ng-model="product.phone"></td>
</tr>
<tr>
<td>Service</td>
<!-- ng-options="product.service.text for product.service in objectList track by product.service.Main Haircut" - returns null -->
<td><select type="text" ng-model="product.service" id="serviceSelect">
<option value="Man Haircut">Man Haircut</option>
<option value="Woman Haircut">Woman Haircut</option>
<option value="Hair Dye">Hair Dye</option>
<option value="Abu Agela">Abu Agela</option>
</select>
</td>
</tr>
<tr>
<td>Start date</td>
<td><input type="text" ng-model="product.startdate" id="startdateID" readonly></td>
</tr>
<tr>
<td>End date</td>
<td><input type="text" ng-model="product.enddate" id="enddateID"></td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Book" ng-click="add()">
and this is the jquery script surrounded with setTimeout to see if I refresh the selection after fetching it will actually apply it to the field.
the complete onClick function
select: function(start, end) {
// Booking Form Toggle
if ($('#bookmenu').css('display') === "none") {
$('#bookmenu').show();}
// Fetching data from click event to booking form
var startString = start;
startString = new Date(startString).toUTCString();
startString = startString.split(' ').slice(0, 5).join(' ');
setTimeout(function() {
$("#startdateID").val(String(startString));
console.log($("#startdateID").val());
}, 500);
// Constructing the end date based on start date + service.duration
},
console.log($("#startdateID").val());
returns the appropriate selection.
if I copy-paste the data that populated in that field and submit it works fine but I want that field to be readonly.

Trying to pull table values from a selected check box correctly

I am trying to pull columns from a table if a checkbox was selected. Here is the table that contains the checkbox called 'selectedSched'
<tbody style="overflow-y: scroll; ">
<c:forEach var="row" items="${Updresults}">
<c:set var="sched" value="${row.getSCHEDULE_NUMBER()}" />
<c:set var="eftyear" value="${row.getEFT_CONTRACT_YEAR()}" />
<c:set var="EFTstatus" value="${row.getSTATUS()}" />
<c:set var="schedcombo" value="${sched}${eftyear}" />
<fmt:formatNumber var="schedTotl" value="${row.getTOTAL_AMOUNT()}" pattern="$##,###,##0.00"/>
<tr>
<td align="center">
<input style="width:50px;" type="checkbox" name="selectedSched"
value="<c:out value="${schedcombo}"/>"/>
</td>
<td id="ModifyScheduleNumber"><c:out value="${row.getSCHEDULE_NUMBER()}" /></td>
<td id="ModifyYear"><c:out value="${row.getEFT_CONTRACT_YEAR()}" /></td>
<td id="ModifyCreationDate"><c:out value="${row.getCREATION_DATE()}"/></td>
<td style="text-align: right; padding-right: 5px;"><c:out value="${row.getNUM_OF_PAY_RECORDS()}"/></td>
<td style="text-align: right; padding-right: 5px;"><c:out value="${schedTotl}"/></td>
<td><select style="width:45px;" size="1" id="ModifyStatus" name="ModifyStatus_<c:out value="${schedcombo}"/>"
class="combosmall">
<c:forEach items="${ModifyList}" var="statusValue">
<option value="${statusValue}"
<c:if test="${EFTstatus} = statusValue"> selected="selected"</c:if>
>${statusValue}</option>
</c:forEach>
</select> </td>
<td>
<input style="width:85px" id="ModifyStatusDate" name="ModifyStatusDate_<c:out value="${schedcombo}"/>"
type="text" class="texttable" value="${row.getSTATUS_DATE()}"/>
</td>
<td><c:out value="${row.getAPPR_HUD_EMPLOYEE()}"/></td>
</tr>
</c:forEach>
</tbody>
I am creating a function that is trying to compare the Creation date field to an input Status Date field. Here is my function call:
$("#submitMEFTS").mouseup(function ()
{
for(var i=0; i<updateformID.selectedSched.length; i++)
{
if(updateformID.selectedSched[i].checked == true)
{
var holdCreationDate = $('#ModifyCreationDate[i]').val();
var holdSchedule = $('#ModifyScheduleNumber[i]').val();
alert("The checked button was clicked");
}
else
{
alert("The checked button was not clicked") ;
}
}
});
I have the selected check working but I am getting an error trying to use the 'ModifyCreationDate' field. Clearly just putting a '[i]' at the end is invalid. What is the proper way to pull the correct index of this field?
I know with a servlet call I had to do something similar to the ModifyStatus field to create different "names" for each row but wondering if there is a better/cleaner option.
Thanks again

Event listener for TD content

I need to have a function triggered when anything changes on a table. I have an event listener and it works perfectly if anything changes in the table, except simple text in <td>. I need the event listener (or anything else) to capture changes in the following structure:
<td id="x">Text</td>
Please find below the full code that I use. I need the alert to be displayed when anything on the last row of the table changes (last - IDs "2,0" and "2,1"). The "Change Text" button changes the text in the s that I am interested of capturing the events of.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<table id="foobar">
<tr>
<td id="aaa" name="YYY">
<select name="001" id="0,0">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td id="bbb" name="XXX"><input name="CCC" id="0,1" type="text"></td>
</tr>
<tr>
<td><input name="CCC2" id="1,0" type="text"></td>
<td><input name="CCC3" ud="1,1" type="text"></td>
</tr>
<tr>
<td id="2,0" name="abc">TEST 1</td>
<td><div id="2,1">TEST 2</div> </td>
</tr>
<br><br>
</table>
<input type='button' onclick='changeText()' value='Change Text'/>
<script>
function changeText(){
var x=Math.random(100);
document.getElementById('2,1').innerHTML = x;
}
document.getElementById('foobar').addEventListener('change',function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
var name = target.id || target.getAttribute('name');
alert('the ' + name + ' element changed!');
},false);
</script>
</body>
</html>

Creating a new form on click of link

How could I make it so the code below retains what it does now but does the following:
a) When the add menu link/button is clicked it shows the bookingName menu div and the same item and qty boxes
b) When the above happens it also needs the abilty to add more rows to that particular just added menu
Demo of current work
jQuery:
$(document).ready(function () {
$('<tr/>', {
'class': 'menuDetails',
html: getMenuHTMLDetails()
}).appendTo('#addMoreItemsButton');
$('#addItem').click(function () {
$('<tr/>', {
html: getMenuHTMLDetails()
}).hide().appendTo('.menuDetailsBlock').slideDown('slow');
});
})
function getMenuHTMLDetails() {
var $clone = $('.menuDetails').clone();
$clone.find('[name="item[]"]')[0].name = "item";
$clone.find('[name="qty[]"]')[0].name = "qty";
return $clone.html();
}
HTML:
<div class="formBlock">
<p><span class="bookingName">Menu<span class="required">*</span></span><span class="bookingInput"><input type="text" name="menu"/></span></p>
</div>
<div class="formBlock">
<table class="menuDetailsBlock">
<tr>
<td><span class="bookingName">Item<span class="required">*</span></span></td>
<td><span class="bookingName">QTY<span class="required">*</span></td>
</tr>
<tr class="menuDetails">
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
</table>
<div class="appendMoreItems"></div>
</div>
<div class="formBlock">
Add Item Add Menu
</div>
</div>

The first thing you should be aware of is that your html is invalid. You can't have something like:
<td><span>...</td><td>...</span></td>
Because this form needs the ability to be duplicated, you need to remove all IDs (and ideally change to them classes). e.g. id="addMenu" -> class="addMenu".
Instead of using your standard click handler, you should use delegates to handle any clicks within your outer container - read http://api.jquery.com/on/.
As for your duplication problem, place a template of your elements to be duplicated inside a script tag with an id you can reference and clone (with .html()), or, even better, consider looking into http://handlebarsjs.com/ or http://akdubya.github.io/dustjs/.