How can I get previous input inside the same ?
I have the following table:
start-loop
<td>...</td>
<td>...</td>
<td align=center>
<input type="hidden" id="ContactPW" name="ContactPW" value="#UserPW#" />
<input type="hidden" id="ContactEmail" name="ContactEmail" value="#UserEmail#" />
<input type="hidden" id="ContacName" name="ContactName" value="#UserName#" />
<input class="btn btn-primary" type="button" onclick="test();" value="Login" />
</td>
end- loop
I would like to get in my test() function the values for "ContactPW", "ContactEmail", and "ContactName", but using $("#ContactPW").val() I just get the first item in the loop, not the row that I click the button.
Does anyone know how I can do it?
Thanks
in your test function, you can use jquery .parent().find() which means, your btn elem will look for parent and find the child with the name that you define. function as sample below,
html
<input class="btn btn-primary" type="button" onclick="test(this);" value="Login" />
javascript
function test(e){
$(e).parent().find("[name='ContactPW']").val();
}
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
I have developed spring boot web application, on front end I have JSP pages.
I am displaying list of user in table and there are corresponding action(form for each action) like update, reset, delete etc in my each row. On Delete action I am first displaying confirm message. If user press Ok I am making Ajax get call to Controller which delete user from database and return status 0 or 1. I have notice that on first record it show confirm and on OK it send the call and proper response is return back. When I click on second record delete button it does not show confirm message and submit the form which return error 405 Get Method not supported. I have also observe no other record is work as per behavior.
My JSP code is as below
I have tried different way to show confirm message like onclick I have tried to execute it but same is result.
I have remove all other js/css libraries and only j query on my page but it produce same output. I have also tried to create a simple page and simulate same behavior it also show same.
<div id="disabledContent" class="container border rounded bg-light"
style="margin-top: 5px; margin-bottom: 10px;">
<form method="post" action="/createUserDetails">
<button type="submit" value="Add User"
class="btn btn-success btn-lg">+</button>
</form>
<table class="table table-light">
<thead class="thead-light">
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th colspan="6" scope="col">Actions</th>
</tr>
</thead>
<tbody>
<c:forEach items="${userList}" var="item">
<tr>
<td>${item.firstName}</td>
<td>${item.lastName}</td>
<td>
<form method="post" action="/assignUserLicense">
<input type="hidden" name="userId" value="${item.id}">
<input type="hidden" name="customerUniqueId"
value="${customerUniqueId}">
<button type="submit" value="Assign License"
class="btn btn-warning">Assign License</button>
</form>
</td>
<td>
<form method="post" action="/unassignUserLicense">
<input type="hidden" name="userId" value="${item.id}">
<input type="hidden" name="customerUniqueId"
value="${customerUniqueId}">
<button type="submit" value="UnAssign License"
class="btn btn-warning">Unassign License</button>
</form>
</td>
<td>
<form method="post" action="/modifyUserDetails"
id="modifyUserDetailsForm">
<input type="hidden" name="userId" id="userId"
value="${item.id}"> <input type="hidden"
name="customerUniqueId" id="customerUniqueId"
value="${customerUniqueId}"> <input type="hidden"
name="displayName" id="displayName"
value="${item.displayName}"> <input type="hidden"
name="userPrincipalName" id="userPrincipalName"
value="${item.userPrincipalName}"> <input
type="hidden" name="firstName" id="firstName"
value="${item.firstName}"> <input type="hidden"
name="lastName" id="lastName" value="${item.lastName}">
<button type="submit" value="Modify User"
class="btn btn-warning">Modify User</button>
</form>
</td>
<td>
<form method="post" action="/resetUserUserDetails">
<input type="hidden" name="userId" value="${item.id}">
<input type="hidden" name="customerUniqueId"
value="${customerUniqueId}">
<button type="submit" value="Get User"
class="btn btn-warning">Reset Password</button>
</form>
</td>
<td>
<form id="myDeleteFrom">
<input type="hidden" name="userId" value="${item.id}">
<input type="hidden" name="customerUniqueId"
value="${customerUniqueId}">
<button type="submit" value="Get User"
class="btn btn-warning">Delete User</button>
</form>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div></div>
</div>
my javascript code
$(document)
.ready(
function() {
$("#myDeleteFrom")
.submit(
function() {
var confirmResponse = confirm("Are you sure you want to delete this user");
if (confirmResponse) {
//Ajax get call
} else {
return false;
}
});
});
I am expecting it should work on any row delete form submit button click.
I want to access text placed inside rows of a dynamic table in javascript.
My table structure:-
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="650px" border="2">
<TR >
<TD><INPUT type="checkbox" name="chk[]" /></TD>
<TD ><INPUT type="text" name="txt[]" /></TD>
<TD>
<INPUT type="text" name="time[]" />
</TD>
</TR>
</TABLE>
</BR>
</BR>
<INPUT type = "button" value = "Submit" onclick = "myFunction()"></BODY>
--
Thanks
if you mean to get the whole input value in the table, you can do this.
var a = document.getElementById("dataTable").getElementsByTagName("input");
so var a became an array and inside it are elements that you wanted to get the value just use loop.
var e = a.length; // get how many input inside the table
for(x=0;x<e;x++){
console.log(a[x].name+" the value inside is "+a[x].value);
}
Do you have id for specified row? If you dont have place id on row from where you want to change text and "catch" it with javascript. function is called var a= document.getElementById('ID_OF_SAMPLE_ROW').value and text is stored into variable a. This function must be called on click or something similar so you must specify when you read and from which row.
Simply grab the elements in question with .getElementsByName(), and then return their .value. You can see whether the checkbox is checked or not with .checked.
Note that .getElementsByName() returns a NodeList collection of objects, so you'll want to grab the first result with [0].
This can be seen in the following:
function myFunction() {
let chk = document.getElementsByName('chk[]')[0].checked;
let txt = document.getElementsByName('txt[]')[0].value;
let time = document.getElementsByName('time[]')[0].value;
console.log("Checkbox checked?:", chk);
console.log("Text:", txt);
console.log("Time:", time);
}
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="650px" border="2">
<TR>
<TD>
<INPUT type="checkbox" name="chk[]" />
</TD>
<TD>
<INPUT type="text" name="txt[]" />
</TD>
<TD>
<INPUT type="text" name="time[]" />
</TD>
</TR>
</TABLE>
<BR />
<BR />
<INPUT type="button" value="Submit" onclick="myFunction()" />
</BODY>
Note that your final <input> is missing the closing /, and your </br> tags should be <br />. These have been fixed in the above example.
I've written this code for this purpose: I want to have a form for search, whenever the user clicked on the delete bottom all the html tages in that row must be deleted (the whole div) and whenever they click on the add word bottom another group of field for search must be added. the same for add group bottom. after clicking on add group bottom all the field set should repeat and by the next click again and again. now the problem is where to add and what to delete!! as you see the form is copying and its out of my control to delete or add what I want ( for example after clicking on delete bottom on the first row just the first row must go away not others. I hope I am clear. is there any solution?
<form action="search1.php" method="post">
<fieldset style="width:50%;" id="g1">
<legend>search form</legend>
<table>
<tr>
<td style="border-left:1px solid #000">
<select name="opration" size="1">
<option>AND</option>
<option>OR</option>
</select>
</td>
<td>
<div id="w2">
<input type="text" name="textfield" placeholder="search here" />
<input type="submit" name="delete" value="delete" onclick="DoDelete()" /> synonimes
<input type="checkbox" name="checkfield" onchange="DoAlert()" />
</div>
</br>
<div id="w1">
<input type="text" name="textfield" placeholder="search here" />
<input type="submit" name="delete" value="delete" onclick="DoDelete()" /> synonime
<input type="checkbox" name="checkfield" />
</div>
</br>
<input type="submit" name="addw" value="add word" onclick="DoAddW()" />
</td>
</tr>
</table>
</fieldset>
<input type="submit" name="addg" value="add group" onclick="DoAddG()" />
</br>
<input type="submit" name="search" value="search" />
</form>
<script>
function DoDelete() {
$("w1").remove();
}
function DoAddW() {
alert("add word");
$("#w").append(" </br><div id='w1'><input type='text' name='textfield' placeholder='search here'/><input type='submit' name='delete' value='delete' onclick='DoDelete()'/>synonime<input type='checkbox' name='checkfield' /> </div></br> ");
}
function DoAddG() {
alert("add group");
$("#g").append(" <fieldset style='width:50%;' id='g1'><legend>serach form</legend><table><tr><td style='border-left:1px solid #000'><select name='opration' size='1'><option>AND</option><option>OR</option>/select></td><td><div id='w1'><input type='text' name='textfield' placeholder='search here' /><input type='submit' name='delete' value='delete' onclick='DoDelete()'/>synonime<input type='checkbox' name='checkfield' /></div></br><input type='submit' name='addw' value='add word' onclick='DoAddW()'/></td></tr></table></fieldset>
");
}
function DoAlert() {
alert("I want to add some synonimes")
}
</script>
You should try including the element which you click in the javascript methods you invoke in the onClick event.
<input type="submit" name="delete" value="delete" onclick="DoDelete(this)" />
In your action methods you are specifying the element in which you perform the action instead of making them flexible for using them in any element.
Try this
function DoDelete(){
$(this).closest('div').remove();
}
Add id to the td which contains W like this
<td id="forW">
<div id="w2">
<input type="text" name="textfield" placeholder="search here" />
<input type="submit" name="delete" value="delete" onclick="DoDelete()" /> synonimes
<input type="checkbox" name="checkfield" onchange="DoAlert()" />
</div>
</td>
function DoAddW() {
alert("add word");
$("#forW").append(" </br><div id='w1'><input type='text' name='textfield' placeholder='search here'/><input type='submit' name='delete' value='delete' onclick='DoDelete()'/>synonime<input type='checkbox' name='checkfield' /> </div></br> ");
}
I have two <input type=Button>. When clicked, both will load one dialogue box contained inside a div.
I want to add a separate button and text into the div which is only viewable when the second button is clicked. Instead of rewriting this one for btn one and one for btn two. How can I make the extra text and button only available if the 2nd btn is clicked?
<div id="LabourOrPlantDialog" title="Comments" style="display:none;">
<table class="table">
<tr>
<th>Item</th>
</tr>
<tr>
<td id="Item"></td>
</tr>
</table>
<br />
<textarea id="ExistingComments" type="text" runat="server" rows="7" cols="30" maxlength="2000"></textarea>
<input id="SubmitComment" type="button" value="Submit" onclick="SubmitButton()" />
<!-- BELOW IS THE TEXT AND BTN I ONLY WANT AVAILABLE WHEN 2ND BTN IS CLICKED -->
<input type="text" name="BoqTextBox" />
<input type="AddValueButton" value="+" onclick="Add(BoqTextBox)" />
</div>
Some sort of bool im guessing? Have never done this before...any help would be great. Thanks
EDIT:
<input id="SubmitCommentsForOne" type="button" value="Comments" onclick="ShowComment('<%: item.ItemCode %>')" />
<input id="SubmitCommentsForTwo" type="button" value="Comments" onclick="ShowComment('<%: item.Number %>')" />
var Code
function ShowCommentBoxForBOQ(Number) {
Code = Number;
Work.DisplayBoxForBOQ(Number);
$("#LabourOrPlantDialog").dialog({ modal: true });
}
LabourOrPlantDialog loads the div.
EDIT: Can I give anything else which would help? Does anyone have any idea a tall? Thank you for any replies
Add this wherever you'd like the new text & button:
<div id="hiddenBox">
<input type="text" name="BoqTextBox" />
<input type="button" value="+" onclick="Add(BoqTextBox);" />
</div>
Add this somewhere in your stylesheet:
#hiddenBox{display:none;}
Add this somewhere in your javascript
$("#SubmitCommentsForTwo").click(function(){
$("#hiddenBox").show();
});