This is part of my code where I send ID to url and I need to get that ID. But problem is that I get something like this
delete.x=5&delete.y=8&delete=Delete&ID=124&ID=125&ID=126&ID=127&ID=128&ID=129&ID=130&ID=131&ID=132&ID=133&ID=134&ID=135&ID=136
It sends all my IDs from table. But I need to just send one ID, depends which button do I click (delete or publish)
<tr>
<td>125</td>
<td>Blacksfeets Photos</td>
<td>di_do#yahoo.com</td>
<td>2929610140-09 M plava.pdf</td>
<td>24</td>
<td>570099</td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input name="delete" type="image" src="images/delete.png" value="Delete"><br>
<input name="publish" type="image" src="images/publish.gif" value="Publish">
<input type="hidden" value="125" name="ID">
</td>
</tr>
<tr>
<td>126</td>
<td>TimeSince</td>
<td>sanlic#windowslive.com</td>
<td>25189210140-09 M plava.pdf</td>
<td>24</td>
<td>614227</td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input name="delete" type="image" src="images/delete.png" value="Delete"><br>
<input name="publish" type="image" src="images/publish.gif" value="Publish">
<input type="hidden" value="126" name="ID">
</td>
</tr>
<tr>
<td>127</td>
<td>TimeSince</td>
<td>saic#windowslive.com</td>
<td>21813910140-09 M plava.pdf</td>
<td>24</td>
<td>966462</td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input name="delete" type="image" src="images/delete.png" value="Delete"><br>
<input name="publish" type="image" src="images/publish.gif" value="Publish">
<input type="hidden" value="127" name="ID">
</td>
</tr>
You seem to have one form for all your buttons. Use one form per ID instead, e.g.
<form method="get" action="whatever">
<input name="delete" type="image" src="images/delete.png" value="Delete"><br>
<input name="publish" type="image" src="images/publish.gif" value="Publish">
<input type="hidden" value="127" name="ID">
</form>
Related
This question already has answers here:
Form inside a table
(3 answers)
Closed 2 years ago.
form instructions:
the table consist of four columns and six rows.
the form is embedded inside a table
the table consist of two columns and six rows
the text and text box in Column 2, Row2 span four rows
There are two tags used to separate the text and text box
<table>
<form name="application" method="post" action="">
<tr>
<th>Application Form</th>
</tr>
<tr>
<td>First Name<input name="firstname" type="textbox" size="20"</td><br>
<td rowspan="4">Countries and places you wish to visit:<br><br>
<textarea></textarea></td></td>
</tr>
<tr>
<td>Last Name:<input type="textbox" size="20"></td>
</tr>
<tr>
<td>Phone number:<input type="textbox" size="20"></td>
</tr>
<tr>
<td>Email:<input type="textbox" size="20"></td>
</tr>
<tr>
<th colspan="4"><input type="submit" name="submit" id="submit" value="Submit">
<input type="reset" name="reset" id="reset" value="Reset"></th>
</tr>
</form>
I need to make this tableenter image description here
I have modified your codes, please check below:
Move out the form from table;
Add </table>
Adjust the textarea;
<form name="application" method="post" action="">
<table cellpadding="10px">
<tr>
<th>Application Form</th>
</tr>
<tr>
<td>First Name:<input name="firstname" type="textbox" size="20"</td>
<td>Countries and places you wish to visit:</td>
</tr>
<tr>
<td>Last Name:<input type="textbox" size="20"></td>
<td rowspan="3" valign="top">
<textarea></textarea>
</td>
</tr>
<tr>
<td>Phone number:<input type="textbox" size="20"></td>
</tr>
<tr>
<td>Email:<input type="textbox" size="20"></td>
</tr>
<tr>
<th colspan="4">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="reset" name="reset" id="reset" value="Reset">
</th>
</tr>
</table>
</form>
The following HTML Code displays input fields for Single Record and provides for saving this Single Record to the Database
<html>
<body>
<form method="post" action="demo_add.asp">
<table>
<tr>
<td>CustomerID:</td>
<td><input name="custid"></td>
</tr><tr>
<td>Company Name:</td>
<td><input name="compname"></td>
</tr><tr>
<td>Contact Name:</td>
<td><input name="contname"></td>
</tr><tr>
<td>Address:</td>
<td><input name="address"></td>
</tr><tr>
<td>City:</td>
<td><input name="city"></td>
</tr><tr>
<td>Postal Code:</td>
<td><input name="postcode"></td>
</tr><tr>
<td>Country:</td>
<td><input name="country"></td>
</tr>
</table>
<br>
<input type="submit" value="Add New">
<input type="reset" value="Cancel">
</form>
</body>
</html>
How is possible to save multiple such records in One Operation?
How I can get the value of input with id="new_amount" and put it properly in Change amount url path. What I am trying right now is obviously not correct:
<td>
<input type="button"
onclick="location.href='${pageContext.request.contextPath}/update?id=${object.id}&?amount=${document.getElementById("new_amount").value}';"
value="Change Amount" />
</td>
Can someone please help me.
<table class=goods>
<tr>
<td>Name</td>
<td>Amount</td>
</tr>
<c:forEach var="object" items="${goods}">
<tr>
<td id="name"><c:out value="${object.name}"></c:out></td>
<td id="amount"><c:out value="${object.amount}"></c:out></td>
<td id="new_amount"><p>New amount:</p> <input type="number" id="new_amount" /></td>
<td><input type="button"
onclick="location.href='${pageContext.request.contextPath}/update?id=${object.id}&?amount=${document.getElementById("new_amount").value}';" value="Change Amount" /></td>
<td><input type="button" onclick="location.href='${pageContext.request.contextPath}/delete?id=${object.id }';" value="Delete"/></td>
</tr>
</c:forEach>
<tr>
<td><a href="${pageContext.request.contextPath }/addgoods">Add new
goods</a></td>
</tr>
I have done some static workaround (for looping) with three rows. It will be helpful to you.
Give id to table, Instead of appending the value directly I am calling function and use hidden value for your object_id. Also added class to the element to find that(ID is not good idea for repeated elements).
All you need to do is, change static values with your JSTL code.
<table id="goods">
<tr>
<th>Name</th>
<th>Amount</th>
<th>New Amount</th>
<th>Actions</th>
</tr>
<tr>
<td>test1</td>
<td>100</td>
<td><input type="number" name="new_amount" class="amount" /></td>
<td><input type="button" onclick="updateObject(this)" value="Edit" /> / <input type="button" onclick="deleteObject(this)" value="Delete"/></td>
<input type="hidden" value="1" class="goods_id" />
</tr>
<tr>
<td>test2</td>
<td>200</td>
<td><input type="number" name="new_amount" class="amount" /></td>
<td><input type="button" onclick="updateObject(this)" value="Edit" /> / <input type="button" onclick="deleteObject(this)" value="Delete"/></td>
<input type="hidden" value="2" class="goods_id" />
</tr>
<tr>
<td>test3</td>
<td>300</td>
<td><input type="number" name="new_amount" class="amount" /></td>
<td><input type="button" onclick="updateObject(this)" value="Edit" /> / <input type="button" onclick="deleteObject(this)" value="Delete" /></td>
<input type="hidden" value="3" class="goods_id" />
</tr>
</table>
Use these functions to get values of clicked row,
window.updateObject = function(object){
// Get nearest text box values based on class.
var object_id = $(object).closest('tr').find('.goods_id').val();
var amount = $(object).closest('tr').find('.amount').val();
alert("ID : "+object_id+" Amount :"+amount);
}
window.deleteObject = function(object){
var object_id = $(object).closest('tr').find('.goods_id').val();
alert("ID : "+object_id);
}
See the Demo. If you required I can explain more. Hope this helps.
Update :
In HTML,
Your actual requirement is looks like below, I have done this using JSTL
<table id="goods">
<tr>
<td>Name</td>
<td>Amount</td>
<td>New Amount</td>
<td>Actions</td>
</tr>
<c:forEach var="object" items="${goods}">
<tr>
<td><c:out value="${object.name}"></c:out></td>
<td><c:out value="${object.amount}"></c:out></td>
<td><p>New amount:</p> <input type="number" id="new_amount" class="amount" /></td>
<td><input type="button" onclick="updateObject(this)" value="Change Amount" /> /
<input type="button" onclick="deleteObject(this)" value="Delete"/></td>
<input type="hidden" value="${object.id}" class="goods_id" />
</tr>
</c:forEach>
<tr>
<td><a href="${pageContext.request.contextPath }/addgoods">Add new
goods</a></td>
</tr>
In Script,
window.updateObject = function(object){
// Get nearest text box values based on class.
var object_id = $(object).closest('tr').find('.goods_id').val();
var amount = $(object).closest('tr').find('.amount').val();
//alert("ID : "+object_id+" Amount :"+amount);
location.href='${pageContext.request.contextPath}/update?id=object_id&?amount=amount';
}
window.deleteObject = function(object){
var object_id = $(object).closest('tr').find('.goods_id').val();
//alert("ID : "+object_id);
location.href='${pageContext.request.contextPath}/delete?id=object_id';
}
I have a table with multiple rows and multiple forms and I am trying to send each form to my PHP script.
When not using Ajax all the forms update correctly. However with Ajax I cannot get the PHP script to work. How can I get the Ajax to work?
On HTML part, I have multiple rows which belong to one form (In the example below all the rows belong to one form and I have multiple of these). I did read that a FORM tag cannot be under TR tag and even know when I look at the code it looks pretty ugly, but I am not sure how else I can build the table.
Ajax
$(document).ready(function(){
// click on button submit
$("#submit").on('click', function(){
// send ajax
$.ajax({
url: 'post.php', // url where to submit the request
type : "POST", // type of action POST || GET
dataType : 'json', // data type
data : $(this).serialize(), // post data || get data
})
});
});
HTML
<tbody>
<tr>
<form id="form1" method="POST" action=""></form>
<input type="hidden" name="ID" value="">
<td rowspan="6">bls</td>
<td rowspan="6">qasachin.dwxmp41#mailinator.com</td>
<td>Records</td>
<td>10</td>
<td>1</td>
<td><input type="text" size="1" value="" name="Records"></td>
<td>Contact</td>
<td></td>
<td><input type="text" size="1" value="" name="Contact"></td>
<td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td>
<td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td>
</tr>
<tr>
<td>Centers</td>
<td>15</td>
<td>1</td>
<td><input type="text" size="1" value="" name="Centers"></td>
<td>Company</td>
<td>Tadas</td>
<td><input type="text" size="1" value="" name="Company"></td>
</tr>
<tr>
<td>Duration</td>
<td>10</td>
<td>0</td>
<td><input type="text" size="1" value="" name="Duration"></td>
<td>Address</td>
<td></td>
<td><input type="text" size="1" value="" name="Address"></td>
<td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td>
</tr>
<tr>
<td>GCP</td>
<td>0</td>
<td></td>
<td><input type="text" size="1" value="" name="GCP"></td>
<td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td>
<td><a target="_blank" href="mailto:qasachin.dwxmp41#mailinator.com" class="btn btn-success>Email</a></td>
</tr>
<tr>
<td>RAND</td>
<td>0</td>
<td>0</td>
<td><input type="text" size="1" value="" name="RAND"></td>
<td>City</td>
<td>Amsterdam</td>
<td><input type="text" size="1" value="" name="City"></td>
</tr>
<tr>
<td>Price</td>
<td>€39</td>
<td>€18</td>
<td><input type="text" size="1" value="" name="Price"></td>
<td>Departm</td>
<td>IT</td>
<td><input type="text" size="1" value="" name="Departm"></td>
</tr>
You have invalid HTML markup.
Only td and th elements are allowed to be child elements of tr.
And you are immediately closing your form tag. Which means you don't have any fields inside your form.
You should put your whole table inside your form.
<form id="form1" method="POST" action="">
<input type="hidden" name="ID" value="">
<table>
<tbody>
<tr>
<td rowspan="6">bls</td>
<td rowspan="6">qasachin.dwxmp41#mailinator.com</td>
<td>Records</td>
<td>10</td>
<td>1</td>
<td><input type="text" size="1" value="" name="Records"></td>
<td>Contact</td>
<td></td>
<td><input type="text" size="1" value="" name="Contact"></td>
<td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td>
<td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td>
</tr>
<tr>
<td>Centers</td>
<td>15</td>
<td>1</td>
<td><input type="text" size="1" value="" name="Centers"></td>
<td>Company</td>
<td>Tadas</td>
<td><input type="text" size="1" value="" name="Company"></td>
</tr>
<tr>
<td>Duration</td>
<td>10</td>
<td>0</td>
<td><input type="text" size="1" value="" name="Duration"></td>
<td>Address</td>
<td></td>
<td><input type="text" size="1" value="" name="Address"></td>
<td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td>
</tr>
<tr>
<td>GCP</td>
<td>0</td>
<td></td>
<td><input type="text" size="1" value="" name="GCP"></td>
<td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td>
<td><a target="_blank" href="mailto:qasachin.dwxmp41#mailinator.com" class="btn btn-success>Email</a></td>
</tr>
<tr>
<td>RAND</td>
<td>0</td>
<td>0</td>
<td><input type="text" size="1" value="" name="RAND"></td>
<td>City</td>
<td>Amsterdam</td>
<td><input type="text" size="1" value="" name="City"></td>
</tr>
<tr>
<td>Price</td>
<td>€39</td>
<td>€18</td>
<td><input type="text" size="1" value="" name="Price"></td>
<td>Departm</td>
<td>IT</td>
<td><input type="text" size="1" value="" name="Departm"></td>
</tr>
</tbody>
</table>
</form>
You also need to handle the submit event on your form or your page will be reloaded.
You can do that by calling e.preventDefault() inside the handler.
$(function(){
// click on button submit
$("#form1").on("submit", function(e){
e.preventDefault(); // prevent page reload on submit
// send ajax
$.ajax({
url: 'post.php', // url where to submit the request
type : "POST", // type of action POST || GET
dataType : 'json', // data type
data : $(this).serialize(), // post data || get data
})
});
});
This seems (and should be) simple, but I have no idea why the values for my radio buttons appear empty
<!DOCTYPE html>
<html>
<body>
<form method="post" action="action_page.php">
<table>
<tr>
<th>Intermediate</th><th>Advanced</th><th>No selection</th>
</tr>
<tr>
<td colspan="3">
<label for="td1">1. Bash</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td1" id="td1" value="BashInter"/>
</td>
<td><input type="radio" name="td1" value="BashAdv"/>
</td>
<td><input type="radio" name="td1" value="" /></td>
</tr><tr>
<td colspan="3">
<label for="td1">2. C</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td2" id="td2" value="CInter"/>
</td>
<td><input type="radio" name="td2" value="CAdv"/>
</td>
<td><input type="radio" name="td2" value="" /></td>
</tr><tr>
<td colspan="3">
<label for="td1">3. C++</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td3" id="td3" value="C++Inter"/>
</td>
<td><input type="radio" name="td3" value="C++Adv"/>
</td>
<td><input type="radio" name="td3" value="" /></td>
</tr></table>
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
</body>
</html>
If run on W3Schools' (ugh) server, it correctly outputs the input.
e.g.
td1=BashInter&td2=CAdv&td3=
However, my server, for print_r($_POST); returns
[td1] => [td2] => [td3] =>
regardless of what is selected.
Looking at the HTTP headers confirms that nothing is being sent.
All other aspects of the form correctly send their values.
I have tried a number of variants in relation to the values, but nothing has altered the fact that no data actually appears to be sent by the radio buttons.
You didn't specified that your form must be send as a POST one, so used method is defaulted to GET.
Try with
<form action="action_page.php" method="POST">
Last radio button of every set has been kept empty and has black value.
Which means <input type="radio" name="td3" value="" /> needs to be replaced with <input type="radio" name="td3" value="Some value 3" />
So in case you are selecting last radio button from every set then obviously it wont return anything.
Apart from this there is not other problem as long as your HTML code is concerned. If you still face any problem please upload your PHP code as well.
I also suggest to give some some meaningful label to each radio.
Here is the code you may try
<!DOCTYPE html>
<html>
<body>
<form method="POST" action="action_page.php">
<table>
<tr>
<th>Intermediate</th><th>Advanced</th><th>No selection</th>
</tr>
<tr>
<td colspan="3">
<label for="td1">1. Bash</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td1" id="td1" value="BashInter"/> BashInter
</td>
<td><input type="radio" name="td1" value="BashAdv"/> BashAdv
</td>
<td><input type="radio" name="td1" value="Some value 1" /> Some value 1</td>
</tr><tr>
<td colspan="3">
<label for="td1">2. C</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td2" id="td2" value="CInter"/> CInter
</td>
<td><input type="radio" name="td2" value="CAdv"/> CAdv
</td>
<td><input type="radio" name="td2" value="Some value 2" /> Some value 2</td>
</tr><tr>
<td colspan="3">
<label for="td1">3. C++</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td3" id="td3" value="C++Inter"/> C++Inter
</td>
<td><input type="radio" name="td3" value="C++Adv"/> C++Adv
</td>
<td><input type="radio" name="td3" value="Some value 3" /> Some value 3</td>
</tr></table>
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
</body>
</html>