I need help in sending the value of the button (yes, no or maybe) from the form.html to the table cell "attending" in table.html.
If the user clicks the "Yes" button, the yes value will insert into the attending table cell. Same for the other buttons pressed on the form.html to the table.html page.
How would I implement this?
My form.html:
<form method="post" action="savedConnections.html" id="add">
<p>Would you like to attend this event?</p>
<button class="btn btn-success" onclick="addValue();">Yes</button>
<button class="btn btn-info" onclick="addValue();">Maybe</button>
<button class="btn btn-danger" onclick="addValue();">No</button>
</form>
My table.html:
<div class="table">
<table class="table" id="tableEdit">
<thead>
<tr>
<th>Connections</th>
<th>Category</th>
<th id="attending">Attending?</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Releasing Sea Turtles back to the Ocean</td>
<td>Volunteer Trips</td>
<td class="r1"> </td>
<td><button type="button" class="btn btn-info" style="margin:5px;">Update</button>
<button type="button" class="btn btn-danger" value="delete" style="margin:5px;" onclick="deleteRow(this.parentNode.rowIndex)">
Delete </button></td>
</tr>
<tr>
<td>Learning about Sea Turtles</td>
<td>Educational Programs</td>
<td class="r2"> </td>
<td><button type="button" class="btn btn-info" style="margin:5px;">Update</button>
<button type="button" class="btn btn-danger" value="delete" style="margin:5px;" onclick="deleteRow(this.parentNode.rowIndex)">
Delete </button></td>
</tr>
<tr>
<td>Protect the Sea Turtles</td>
<td>Fundraisers</td>
<td class="r3"></td>
<td><button type="button" class="btn btn-info" style="margin:5px;">Update</button>
<button type="button" class="btn btn-danger" value="delete" style="margin:5px;" onclick="deleteRow(this.parentNode.rowIndex)">
Delete </button></td>
</tr>
</tbody>
</table>
</div>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I'm trying to add some text to an array that's dynamically outputted by my database. However, with the way my function is set up currently, it adds each value to it's own separate array. I need them to be pushed to the same array because I need to get the sum of all the numbers that are outputted.
This is my function to convert the text to a number and then push them to an array.
$(".sumCosts").each(function(){
let valuesArray = [];
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
console.log(valuesArray);
})
This is the HTML output. I'm interested in the <td> with class sumCosts, marked with *.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">analysts</td>
***<td class="text-end sumCosts">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">materials</td>
***<td class="text-end sumCosts">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">annual</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is what is logged to the console
[4091]
[6282]
[2873]
[1185]
[313]
I need to be able to put them into the same array so that I can get a sum of all the numbers. Any advice on how to achieve this is greatly appreciated! Thanks!
You had to just move valuesArray Outside the function nothing more !
Using vanilla js
JS
let ele = document.querySelectorAll(".sumCosts")
let ar = Array.from(ele)
let valuesArray = [];
ar.forEach(ele => {
let values = parseInt(ele.innerText.replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);
jQuery
let valuesArray = [];
$(".sumCosts").each(function() {
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);
Hi I'm trying to build a table with inputs for a budget tracking app. I'm having some trouble with the JS. Essentially I want the user to be able to add, edit and save rows.
I want only the save or edit button to be visible at one time. This works after editing and saving a row, but by default it shows all buttons. Also after editing a row the buttons are no longer in line but rather stacked on top of each other.
Any help would be really appreciated. This is my first time using JS.
My Code
<div>
<!-- ... -->
<div class="five">
<h1>Transactions</h1>
<div class="txlist">
<table cellspacing="0" cellpadding="0" border="0" width="1500">
<thead>
<th>Date</th>
<th>Account</th>
<th>Category</th>
<th>Amount</th>
<th></th>
</thead>
<tbody class="txlist" id="data_table">
<tr id="addtx">
<td><input type="date" id="new_date" placeholder="Date"></td>
<td><input type="text" id="new_account" placeholder="Account"></td>
<td><input type="text" id="new_category" placeholder="Category"></td>
<td><input type="text" id="new_amount" placeholder="Amount"></td>
<td>
<input type="button" id="save_button3" value="Save" class="save" onclick="add_row();">
<input type="button" value="🗙" class="delete" onclick="nonew()">
</td>
</tr>
<tr id="row1">
<td id="date_row1">24.08.2020</td>
<td id="account_row1">Credit Card</td>
<td id="category_row1">Expense: Restaurants</td>
<td id="amount_row1">- $32.45</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edt" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="🗙" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="date_row2">24.08.2020</td>
<td id="account_row2">Cash</td>
<td id="category_row2">Transfer: Credit Card</td>
<td id="amount_row2">+ $250.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edt" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="🗙" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="date_row3">24.08.2020</td>
<td id="account_row3">Credit Card</td>
<td id="category_row3">Transfer: Cash</td>
<td id="amount_row3">- $250.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edt" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="🗙" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr id="row4">
<td id="date_row4">24.08.2020</td>
<td id="account_row4">Credit Card</td>
<td id="category_row4">Expense: Clothing</td>
<td id="amount_row4">- $84.95</td>
<td>
<input type="button" id="edit_button4" value="Edit" class="edt" onclick="edit_row('4')">
<input type="button" id="save_button4" value="Save" class="save" onclick="save_row('4')">
<input type="button" value="🗙" class="delete" onclick="delete_row('4')">
</td>
</tr>
<tr id="row5">
<td id="date_row5">23.08.2020</td>
<td id="account_row5">Cash</td>
<td id="category_row5">Expense: Groceries</td>
<td id="amount_row5">- $25.23</td>
<td>
<input type="button" id="edit_button5" value="Edit" class="edt" onclick="edit_row('5')">
<input type="button" id="save_button5" value="Save" class="save" onclick="save_row('5')">
<input type="button" value="🗙" class="delete" onclick="delete_row('5')">
</td>
</tr>
<tr id="row6">
<td id="date_row6">23.08.2020</td>
<td id="account_row6">Credit Card</td>
<td id="category_row6">Income: Salary</td>
<td id="amount_row6">+ $2500.00</td>
<td>
<input type="button" id="edit_button6" value="Edit" class="edt" onclick="edit_row('6')">
<input type="button" id="save_button6" value="Save" class="save" onclick="save_row('6')">
<input type="button" value="🗙" class="delete" onclick="delete_row('6')">
</td>
</tr>
<tr id="row7">
<td id="date_row7">23.08.2020</td>
<td id="account_row7">Checking Account</td>
<td id="category_row7">Transfer: Savings Account</td>
<td id="amount_row7">- $500.00</td>
<td>
<input type="button" id="edit_button7" value="Edit" class="edt" onclick="edit_row('7')">
<input type="button" id="save_button7" value="Save" class="save" onclick="save_row('7')">
<input type="button" value="🗙" class="delete" onclick="delete_row('7')">
</td>
</tr>
<tr id="row8">
<td id="date_row8">22.08.2020</td>
<td id="account_row8">Savings Account</td>
<td id="category_row8">Transfer: Checking Account</td>
<td id="amount_row8">+ $500.00</td>
<td>
<input type="button" id="edit_button8" value="Edit" class="edt" onclick="edit_row('8')">
<input type="button" id="save_button8" value="Save" class="save" onclick="save_row('8')">
<input type="button" value="🗙" class="delete" onclick="delete_row('8')">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var date=document.getElementById("date_row"+no);
var account=document.getElementById("account_row"+no);
var category=document.getElementById("category_row"+no);
var amount=document.getElementById("amount_row"+no);
var date_data=date.innerHTML;
var account_data=account.innerHTML;
var category_data=category.innerHTML;
var amount_data=amount.innerHTML;
date.innerHTML="<input type='date' id='date_date"+no+"' value='"+date_data+"'>"; //Should input type here be date?
account.innerHTML="<input type='text' id='account_text"+no+"' value='"+account_data+"'>";
category.innerHTML="<input type='text' id='category_text"+no+"' value='"+category_data+"'>";
amount.innerHTML="<input type='text' id='amount_text"+no+"' value='"+amount_data+"'>";
}
function save_row(no)
{
var date_val=document.getElementById("date_date"+no).value;
var account_val=document.getElementById("account_text"+no).value;
var category_val=document.getElementById("category_text"+no).value;
var amount_val=document.getElementById("amount_text"+no).value;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("account_row"+no).innerHTML=account_val;
document.getElementById("category_row"+no).innerHTML=category_val;
document.getElementById("amount_row"+no).innerHTML=amount_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_date=document.getElementById("new_date").value;
var new_account=document.getElementById("new_account").value;
var new_category=document.getElementById("new_category").value;
var new_amount=document.getElementById("new_amount").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='date_row"+table_len+"'>"+new_date+"</td><td id='account_row"+table_len+"'>"+new_account+"</td><td id='category_row"+table_len+"'>"+new_category+"</td><td id='amount_row"+table_len+"'>"+new_amount+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='🗙' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_date").value="";
document.getElementById("new_account").value="";
document.getElementById("new_category").value="";
document.getElementById("new_amount").value="";
}
I think there are better ways to achieve this, but all the same, your issue is that when saving and editing you are changing the button's style.display attribute to
document.getElementById("edit_button"+no).style.display="block";
you need to retain
document.getElementById("edit_button"+no).style.display="inline-block";
The markup you shared is broken. I see 2 opening <table> tags and 3 closing </table> tags.
Can you share a correct markup or minimal working code?
I cannot get my edit button to execute on a click.
Here's my HTML:
<table id="example" class="display" style="width:100%">
<thead><tr><th>First Name</th><th>Last Name</th><th>Email Address</th><th>Actions</th></tr></thead>
<tbody>
<tr role="row" class="even">
<td class="sorting_1">Someone</td>
<td>Foryou</td>
<td>someadd#gmail.com</td>
<td><button type="button" class="btn btn-info smallPadding edit">Edit</button> <button type="button" class="btn btn-success smallPadding">Export</button> <button type="button" class="btn btn-danger smallPadding">Delete</button>
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Someone</td>
<td>Foryou</td>
<td>someadd#gmail.com</td>
<td><button type="button" class="btn btn-info smallPadding edit">Edit</button> <button type="button" class="btn btn-success smallPadding">Export</button> <button type="button" class="btn btn-danger smallPadding">Delete</button>
</td>
</tr>
</tbody>
<tfoot><tr><th>First Name</th><th>Last Name</th><th>Email Address</th><th>Actions</th></tr></tfoot>
</table>
And here is my Javascript:
<script type="text/javascript">
jq(document).ready(function() {
jq('#example').DataTable( {
"ajax": basePath + '/'+localeCodeShort +'/users/api/get-users',
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button type='button' class='btn btn-info smallPadding edit'>Edit</button> <button type='button' class='btn btn-success smallPadding'>Export</button> <button type='button' class='btn btn-danger smallPadding'>Delete</button>"
}]});
jq("#example tbody button.edit").on("click",function(){alert("hi");});
});
</script>
For what it's worth, this seems to be working.
jq = $;
jq(function() {
jq('#example').DataTable({
// "ajax": basePath + '/'+localeCodeShort +'/users/api/get-users',
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent": "<button type='button' class='btn btn-info smallPadding edit'>Edit</button> <button type='button' class='btn btn-success smallPadding'>Export</button> <button type='button' class='btn btn-danger smallPadding'>Delete</button>"
}]
});
jq("#example tbody button.edit").on("click", function() {
alert("hi");
});
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js">
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr role="row" class="even">
<td class="sorting_1">Someone</td>
<td>Foryou</td>
<td>someadd#gmail.com</td>
<td><button type="button" class="btn btn-info smallPadding edit">Edit</button> <button type="button" class="btn btn-success smallPadding">Export</button> <button type="button" class="btn btn-danger smallPadding">Delete</button>
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Someone</td>
<td>Foryou</td>
<td>someadd#gmail.com</td>
<td><button type="button" class="btn btn-info smallPadding edit">Edit</button> <button type="button" class="btn btn-success smallPadding">Export</button> <button type="button" class="btn btn-danger smallPadding">Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
I have a form with a table and each row of that table is a different offer. So, I also have some buttons in each row to download the documentation of the offer or delete the offer. That buttons submit the form and they go to another php file that does the desired action.
My problem is that the radio button of the desired row has to be checked before I submit the form. Is there any way with javascript that when you click one of those two button, first it selects automatically the radio button of that row and then submits the form?
<form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
<table class="accountsTable">
<thead>
<tr>
<th>Selected</th>
<th>Project ID</th>
<th>Revision</th>
<th>Project Description</th>
<th>Customer</th>
<th>Date</th>
<th>Creator</th>
<th>Documentation</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="selectedOffer" id="selectedOffer" required="" value="1-1"></td>
<td>1</td>
<td>1</td>
<td>Test</td>
<td>Info</td>
<td>2020-02-10</td>
<td>Name</td>
<td>
<button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
</td>
<td>
<button type="submit" class="delete" name="action" value="Delete" onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')">
<i class="far fa-trash-alt"></i>
</button>
</td>
</tr>
</tbody>
</table>
<br>
<button name="action" class="nextButton" type="submit" value="Next"><i class="fas fa-arrow-alt-circle-right fa-2x"></i></button>
</form>
You can target the closest tr to find the specific radio button. Then set the checked attribute using setAttribute().
You can try the following way:
var buttons = document.querySelectorAll('button[type=submit');
buttons.forEach(function(btn){
btn.addEventListener('click', function(el, e){
this.closest('tr').querySelector('[type=radio]').setAttribute('checked', 'checked');
alert(this.closest('tr').querySelector('[type=radio]').getAttribute('checked'));
});
})
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<form class = "filterSelection" action = "../php/editOffer/getInfo.php" method = "POST">
<table class = "accountsTable">
<thead>
<tr>
<th>Selected</th>
<th>Project ID</th>
<th>Revision</th>
<th>Project Description</th>
<th>Customer</th>
<th>Date</th>
<th>Creator</th>
<th>Documentation</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="selectedOffer" id="selectedOffer" value="1-1">
</td>
<td>1</td>
<td>1</td>
<td>Test</td>
<td>Info</td>
<td>2020-02-10</td>
<td>Name</td>
<td><button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
</td>
<td><button type="submit" class="delete" name="action" value="Delete" onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')"><i class="fa fa-trash"></i></button></td>
</tr>
<tr>
<td><input type="radio" name="selectedOffer" id="selectedOffer" value="1-1">
</td>
<td>1</td>
<td>1</td>
<td>Test</td>
<td>Info</td>
<td>2020-02-10</td>
<td>Name</td>
<td><button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
</td>
<td><button type="submit" class="delete" name="action" value="Delete" onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')"><i class="fa fa-trash"></i></button></td>
</tr>
</tbody>
</table><br>
<button name="action" class="nextButton" type="submit" value="Next"><i class="fa fa-arrow-alt-circle-right fa-2x"></i> </button>
</form>
You need to make some small changes in you form like below :
<form class="filterSelection" id="filter-form" action="../php/editOffer/getInfo.php" method="POST">
<table class="accountsTable">
<thead>
<tr>
<th>Selected</th>
<th>Project ID</th>
<th>Revision</th>
<th>Project Description</th>
<th>Customer</th>
<th>Date</th>
<th>Creator</th>
<th>Documentation</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="selectedOffer" id="selectedOffer-1" value="1-1"></td>
<td>1</td>
<td>1</td>
<td>Test</td>
<td>Info</td>
<td>2020-02-10</td>
<td>Name</td>
<td><button type="button" name="action" data-row="1" onclick="btnAction(this)" value="Download"><i
class="fa fa-download" data-row="1" aria-hidden="true"></i> Download</button>
</td>
<td><button type="button" name="action" onclick="btnAction(this)" value="Delete">
<i class="far fa-trash-alt"></i> Delete</button></td>
</tr>
</tbody>
</table><br>
<button name="submit" class="nextButton" type="button" value="Next"><i
class="fas fa-arrow-alt-circle-right fa-2x"></i> Next</button>
</form>
Now here is the javascript code to check some validation :
<script>
function btnAction(btn) {
var row = btn.dataset.row;
var radio = document.getElementById("selectedOffer-"+row);
radio.checked = true;
document.getElementById("filter-form").submit();
}
</script>
Hope this will work for you solution
Finally I solved adding a hidden input and deleting the radio buttons. I have also change the structure of the forms. Now, this is my code that works:
<table class = "accountsTable">
<thead>
<tr>
<th>Project ID</th>
<th>Revision</th>
<th>Project Description</th>
<th>Customer</th>
<th>Date</th>
<th>Creator</th>
<th>Download</th>
<th>Delete</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
<td>1</td>
<td>1</td>
<td>Test</td>
<td>Info</td>
<td>2020-02-10</td>
<td>Name</td>
<td><button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
</td>
<td><button type="submit" class="delete" name="action" value="Delete"
onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')">
<i class="far fa-trash-alt"></i></button></td>
<td><button name="action" class="edit" type="submit" value="Next"><i class="fas fa-edit"></i></button></td>
<input type="hidden" name="selectedOffer" value="1-1"/>
</form>
</tr>
<tr>
<form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
<td>1</td>
<td>2</td>
<td>Demo</td>
<td>Info1</td>
<td>2020-02-13</td>
<td>Name1</td>
<td></td>
<td><button type="submit" class="delete" name="action" value="Delete"
onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')">
<i class="far fa-trash-alt"></i></button></td>
<td><button name="action" class="edit" type="submit" value="Next"><i class="fas fa-edit"></i></button></td>
<input type="hidden" name="selectedOffer" value="1-2"/>
</form>
</tr>
add on click event to the button
<td>
<button type="button" class="delete" name="action" value="Delete" onclick="someAction(this);">
<i class="far fa-trash-alt"></i>
</button>
</td>
Jquery Code
Add Jquery library to the page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Use below script
function someAction(ds) {
if(!$(ds).closest('tr').find('input[type="radio"]').is(':checked')){
$(ds).closest('tr').find('input[type="radio"]').prop('checked',true);
if(confirm('Do you want to delete the selected offer? This action can´t be undone')){
$(ds).parents('form').submit();
}
}
}
<script>
function mySubmit(index) {
if(index==3){
document.myForm.action='update.jsp';
}
if(index==4){
document.myForm.action='';
}
document.myForm.submit();
}</script>
This is my javascript function. And I use this from the code below.
<form name="myForm" method="post">
<table class="table">
<tbody>
<tr>
<input type="hidden" name=num id=num value=<%=article.getNum() %>>
...
<td class="col-md-2">작성자</td>
<td class="col-md-8"><input disabled="disabled" type=text name="writer" id="writer" value="<%=article.getWriter()%> "></td>
</tr>
...
<tr>
<td>비밀번호</td>
<td><input type=password name="passwd" id="passwd"></td>
</tr>
<tr>
<td id="buttons" colspan="2">
<input class="btn btn-xs btn-default" type="button" value="글수정" onclick="mySubmit(3)">
<input class="btn btn-xs btn-default" type="button" value="글삭제" onclick="mySubmit(4)">
<input class="btn btn-xs btn-default" type="button" value="목록보기" onclick="location.href='list.jsp'">
</td>
</tr>
</tbody>
</table>
</form>
This is a revising article page. I want to transfer values changed from original values, but it didn't work. It only transfer original values which are initialized in my code.
HELP!!