I am working on a Struts2 application and facing a unique issue for which i need your help. The scenario is as below. I am also using Bootstrap for the same.
I have a form as below sample. In the page i can dynamically add New Rows to this form with the New button.
<form method="post" id="mainForm" action="editForm"/>
<body onload="Rows()">
<table id="mainTable" class="table table-striped table-hover table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th>ProcessName</th>
<th>PDate</th>
<th>Description</th>
</tr>
</thead>
<tbody id="Row">
<s:iterator value="list" var="voDetails" status="rowStatus">
<tr>
<td><input size="8" value="<s:property value="processName" />"/></td>
<td><input size="8" value="<s:date name="date_dt" format="MM/dd/YYYY"/>"/> </td>
<td><input size="8" value="<s:property value="description"/>"/></td>
</tr>
</s:iterator>
</tbody>
<button type="button" class="btn btn-primary btn-xs" onclick="Save()">Save</button>
<button type="button" class="btn btn-primary btn-xs" onclick="AddNewRow()">AddNewRow</button>
<button type="button" class="btn btn-primary btn-xs" onclick="Close();">Cancel</button>
The Javascript function Save is as below
function Save()
{
document.forms[0].action = click_save_buttom';
document.forms[0].submit();
}
function AddNewRow()
{
// code to add row dynamically to the page
}
function Rows(){
rows = document.getElementById("Row").rows.length;
for (i = 0; i < rows ; i++) {
var row = document.getElementById("Row").rows[i];
row.setAttribute("rowNum", i);
//alert("ROW: " + i);
for (j = 0; j < 3; j++) {
if(document.getElementById("listSize")!=null || rows > 1)
row.cells[j].children[0].setAttribute("name", "list[" + i + "]." + names[j]);
}
}
}
When i sumbit this form the values are getting mapped to the action and Save is working properly. Save also works when i dynamically add new row to the form.
The issue is that sometimes when this page has for example 1 row and i dynamically add a new row and totally there are 2 rows in the form table. When i submit the form then additional more than 2 rows(mapped to VO's in action) are being passed to the action. These additional rows are present in the previous page which is having a similar form table from where i select a row and land on the current page. The save function is happening for these additional rows(VO's) and after save when the page re loads these additional rows appear in the table.
Not sure why this is happening. I checked the number of rows in the table by putting an alert in Save function and it shows 2 as the length before the form submission. It is after the form submission that additional rows(VO's in action) are being mapped to action.
Can you please help me resolve this issue as i am stuck with it for a very long time now.
Thanks
Vikeng
New Edit: Ok, to me it looks like your issue is how you are looping. The rows value gives you an accurate number of rows- but you are looping starting with zero until you're greater than the number of rows it returns (would be two extra... which is accurately the problem you describe) Try this instead:
for (i = 1; i = rows ; i++) {
OLD Edit: Maybe try to call your form by id instead of by form index and see if somehow the form index could be causing the issue in the browser you are working in?
document.getElementById("mainForm").action = click_save_button;
document.getElementById("mainForm").submit();
.. and make sure you correct your click_save_button typo, if it is a typo.
OLD: It is very unclear what you are doing here:
document.forms[0].action = click_save_buttom';
Do you have a code you are running in a document called 'click_save_buttom' ? I believe this adds a form action to the first form on the page... like
<form action='click_save_buttom'></form>
Also instead of using form index, its better to give the form an id. Instead of submitting a form this way:
document.forms[0].submit();
consider submitting a form by using button type=submit
Related
Cordial greetings I am developing a project in Laravel where I perform a data update in a table dynamically, this data is an array that is created by selecting an item and the function I perform is that when I click on the green button updates the data entered in the array.
But a requirement that they have asked me is that the green button is not there, that when entering the data in the input and clicking outside the input, it updates automatically. To update my data I do it this way, This is my table
<table class="table table-bordered">
<tr>
<th style="font-size: 11.7px;">Item</th>
<th style="font-size: 11.7px;">Eliminar</th>
</tr>
#foreach ($cart as $servicio)
<tr>
<td style="font-size: 11.7px;">
<input type="text"
class="form-con-lg"
value="{{$servicio->n_item}}"
id="servicio_{{$servicio->id}}">
<a class="btn-update-item btn btn-success"
data-href="{{ route('servicio_update',$servicio->id)}}"
data-id="{{$servicio->id}}">
<i class="fas fa-sync-alt"></i>
</a>
</td>
<td>
<i class="fas fa-trash-alt"></i>
</td>
</tr>
#endforeach
</table>
and this is my script where I pass the data to update my array
<script type="text/javascript">
$(document).ready(function(){
$(".btn-update-item").on('click', function(e){
e.preventDefault();
var id = $(this).data('id');
var href = $(this).data('href');
var n_item = $("#servicio_" + id).val();
swal("Good job!", "You clicked the button!", "success");
window.location.href = href + "/" + n_item;
});
});
</script>
and my controller where I update my array
//UPADTE
public function update(Servicios $servicios,$n_item){
$cart = Session::get('cart');
$cart[$servicios->id]->n_item = $n_item;
Session::put('cart', $cart);
return redirect()->route('coti_show');
}
and my route
Route::get('/servicios/update/{servicios}/{n_item?}', 'Admin\CotizacionController#update')->name('servicio_update');
I would like to know how I can do that when I enter the data in the input and click outside the input it is automatically updated, thank you for your help.
As Bravo said, a blur handler could be used, and would probably be the most straightforward. The other route would be to add a click handler to the window (or some encapsulating parent within which you want to check for clicks) and check that the Event.target.id (or some other property of your liking) does not match that of the input.
That being said, the blur handler is most likely the more straightforward solution, just presenting alternatives.
I am creating a table with one rows which contain two input fields as friend_name and Contact_no , and a buttons as "add contact" when user click on add contact then again a row create but with only one column as contact no. so user can add multiple contact for single friend and save it into database. this is done for one friend with multiple contact_no. at a time very easily.
i am created for only one friend with multiple contact at a time as follow
<form action "..." mehtod="post">
<table id="table1">
<thead>
<tr>
<th>friend</th>
<th>Contact No.</th>
</tr>
</thead>
<tbody>
</table>
<button id="addcontact" type="button" float: right;" onclick="addcontact()">add contact</button>
<button id="deletecontact" type="button" float: right;" onclick="deletecontact()">delete contact</button>
<input type="submit" value="submit" name="submit">
</form>
<script>
function addcontact() {
document.getElementById("table1").insertRow(-1).innerHTML = '<td> <input type="hiddden"> </td><td> <input type="text" name="contact_no[]"></td>';
}
function deletecontact() {
var table = document.getElementById('table1');
var rowCount = table.rows.length;
table.deleteRow(rowCount -1);
}
<script>
and my controller is...
public function addfriendcontact(Request $request)
{
$count = count(Input::get('contact_no'));
for($i = 0; $i<$count; $i++)
{
$friend = new Friend;
$friend->name = $request->name;
$friend->contact_no = $request->contact_no[$i];
$friend->save();
}
return back();
}
but i want to create multiple friends and multiple contact of that friends at a time and save that data into database using laravel how can i do that.
1) You need to post your Form by adding in your action attribute one link. Also adding the csrf field. Because it protects your application from cross-site request forgery (CSRF) attacks. Without that, it will throw an error.
<form action="/contacts/insert-contact" mehtod="post">
{{ csrf_field() }}
2) You need to add this line to your web.php file. Note that the ControllerName must be your Actually Controller
Route::post('contacts/insert-contact','ControllerName#addfriendcontact');
3) Now in the Controller your have to insert your method. And that's it.
I hope it helps. :)
I have a dynamic table which gets values from db. I have a button which onclcik runs the query to delete the record from database. Currently instead of deleteing record(which was clicked ) its deleting the last record available. I am updating from here I figure out the issue when I provide ID to the post somehow the LAST ID is being sent to the query, is there anyway I can delete the ID which was selected.please look at the code for more info
//this is how im creating dynamic table
//just for the test
function() {
});
});
<table>
<thead>
<tr>
<td>
</td>
</tr>
</thead>
<tbody id="table"></tbody>
</table>
<button type="button" id="chochk" style="display:none" class="sukuti">delete</button>
.
Perhaps you may be better listening directly on the change event of the checkbox and then get the value of the event.target afterwards? There is something wrong with the way you are getting the variable ad in your code i suspect, but without seeing how that is derived it's hard to see why.
The example below shows a simple way to get the value of a checkbox, hopefully this might lead you to the correct answer.
$('.test').on('change', function(e) {
alert(e.target.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Value of 1: <input type="checkbox" class="test" value="1" /><br />
Value of 2: <input type="checkbox" class="test" value="2" />
Instead of a checkbox, use a radio button, so the user can only select one at a time. Then in the handler for the delete button, get the value of the checked button and send that to the server.
//this is how im creating dynamic table
//just for the test
function() {
var table = document.getElementById('tablebody');
for (var i = 0; i < (test.length); i = i + 2) { //test is an array of values from db
var row = table.insertRow(-1);
var cell3 = row.insertCell(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
cell1.innerHTML = //some html span
cell2.innerHTML = //some html span
//this is the checkbox which onclick shows the button
cell3.innerHTML = '<input type="radio" name="checkbox" class="your" value="ID of current row">';
}
///this is how i am displaying a button on click and also delete function
$(document).on('click', ".your", function() {
$('#chochk').show();
});
$(".sukuti").click(function() {
var ad = $(".your:checked").val();
$.post("test.jsp", {
id: ad //ad is the ID which will delete the specifIC ID being clicked
}, function(data) { //sending a query to delete from db working good
});
});
<table>
<thead>
<tr>
<td>
</td>
</tr>
</thead>
<tbody id="table"></tbody>
</table>
<button type="button" id="chochk" style="display:none" class="sukuti">delete</button>
I am trying to get the value of a hidden input inside a tag in html table element through javascript in a MVC view. i have get the respective value of the hidden input which is in a loop,when the the respective row is clicked. I have tried many codes but it returns the value of the first row alone for all the rows in the table. i tried the following:
#foreach (var item in Model)
{
<tr>
<td hidden><input value="#item.QuoteId" id="QuoteID" class="QuoteID"> </td>
</tr>
}
javascript:
$("tr").click(function () {
var quoteid=document.getElementById("#QuoteID").innerHTML
alert(quoteid);
alert($('.QuoteID').val());
}
if my db contains 3 values for quote,say 12,17,18.. it alerts 12 for all the row clicks.. Pls help,I am literally stuck. I have been trying it from 3 days,i cant figure it out. I guess it is some simple mistake from my side. Pls help. I am not able to finish the work assigned to me because of this simple error.
You're using the same id multiple times. The ID has to be unique!! To make this to work you could call the unique id, or put a onclick on the specific row and call your function with this. In your function you can use this.value.
<script>
function ShowMeThePower(myElement) {
alert(myElement.innerHTML);
}
</script>
<div onclick="ShowMeThePower(this);">This is great!</div>
http://jsfiddle.net/3RJVd/
Edit:
To satisfy the OP:
<table>
<tr>
<td><input type="text" id="show1" value="test1" /></td>
</tr>
<tr>
<td><input type="text" id="show2" value="test2" /></td>
</tr>
</table>
<script>
for (var i = 1; i < 3; i++){
alert(document.getElementById('show' + i).value);
}
</script>
If you see, it's the same logic. Just be sure to use unique id's.
http://jsfiddle.net/4gMy6/
I have a table that has plus or minus glyph-icons at the top that allow the user to add or subtract rows. The code I have works but if the user clicks the minus button too many times it will eat the whole table.
What I have tried is to add an unique ID tag to the rows I add and only delete the TRs with the ID but if 2 rows are added and the minus is pressed both rows will be deleted at once, I only want to delete one row at a time. Note: the code below does not reflect this attempt.
Glyphicons:
<div class="well" style="margin-bottom:0px;" id="addrow">
<span class="glyphicon glyphicon-plus" id="add"></span>
<span class="glyphicon glyphicon-minus" id="minus"></span>
Table:
<table class="table table-bordered table-striped" style="margin-bottom:0px;" id="myTable">
<tr>
<td>Customer Master #</td>
</tr>
<tr>
<td><input type="text" class="form-control" ></td>
</tr>
</table>
JS:
$(document).ready(function(){
$("#addrow").on("click", "span#add", function(){
var tablerow = '<tr><td><input type="text" class="form-control" ></td></tr>'
$("#myTable tr:last").after(tablerow);
})
$("#addrow").on("click", "span#minus", function(){
$('#myTable tr:last').remove();
} )
});
Not sure 100% you want changed with your code, but here is a fiddle which adds or removes - but will not remove the first row (won't eat the whole table).
http://jsfiddle.net/HR5se/
$('#myTable tr .form-control').size()
Will give you how many data (input) rows there are. In this fiddle, I check to see if there's greater than one data row, and if not, the remove doesn't happen.
Note: I turned your glyphs into "+" and "-" text so I could see them here.
See if changing the onclick event to mouseup has any effect. I had a similar problem a while back.
I added an if statement to only allow a row to be taken out if the table has 3 or more rows. This preserves the last two rows that I always want to be on the page.
if ($('#myTable tr').length > 2)
This seemed to solve the problem.
Full code:
$("#addrow").on("click", "span#minus", function(){
if ($('#myTable tr').length > 2) {
$('#myTable tr:last').remove();
};
} )