The post method is not supported for this route - html

I'm new to laravel and I want to submit a form which have three attachments plus some arrays
but when I click submit button laravel says
"The POST method is not supported for this route. Supported methods: GET, HEAD."
I've searched a lot but couldn't find any errors
My View
<div>
<form action="insertquotation" method="post" enctype="multipart/form-data">
#csrf
<table border="1" id="formTable">
<thead>
<tr>
<td>procurment_request_number</td>
<td>quotationer</td>
<td>shop_name</td>
<td>shop_account_number</td>
<td>shop_permit</td>
<td>shop_quatation</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="procurment_request_number" id="procurment_request_number" value="{{$result->first()->request_number}}">
{{--<select name="procurment_request_number[]" id="procurment_request_number">--}}
{{--#foreach($result as $results)--}}
{{--<option value="{{$results->request_number}}">{{$results->request_number}}</option>--}}
{{--#endforeach--}}
{{--</select>--}}
</td>
<td><input type="text" id="quotationer1" name="quotationer1"></td>
<td><input type="text" name="shop_name1" id="shop1_name"></td>
<td><input type="text" name="shop_account_number1" id="shop1_account_number"></td>
<td><input type="text" name="shop_permit1" id="shop1_permit"></td>
<td><input type="file" accept="application/pdf" name="shop_quatation1" id="shop_quatation"></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="quotationer" name="quotationer2"></td>
<td><input type="text" name="shop_name2" id="shop1_name"></td>
<td><input type="text" name="shop_account_number2" id="shop1_account_number"></td>
<td><input type="text" name="shop_permit2" id="shop1_permit"></td>
<td><input type="file" accept="application/pdf" name="shop_quatation2" id="shop_quatation"></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="quotationer" name="quotationer3"></td>
<td><input type="text" name="shop_name3" id="shop1_name"></td>
<td><input type="text" name="shop_account_number3" id="shop1_account_number"></td>
<td><input type="text" name="shop_permit3" id="shop1_permit"></td>
<td><input type="file" accept="application/pdf" name="shop_quatation3" id="shop_quatation"></td>
</tr>
<tr>
<td>Item_ID</td>
<td>Quantity</td>
<td>Unit_ID</td>
<td>description</td>
<td>Shop1_price</td>
<td>Shop2_price</td>
<td>Shop3_price</td>
</tr>
#foreach($result as $results)
<tr>
<td><input type="text" name="itemid[]" id="itemid" value="{{$results->id}}"></td>
<td><input type="text" name="quantity[]" id="quantity" value="{{$results->quantity}}"></td>
<td><input type="text" name="units_id[]" id="units_id" value="{{$results->units_id}}"></td>
<td><input type="text" name="description[]" id="description" value="{{$results->description}}"></td>
<td><input type="text" name="shop1_price[]" id="shop1_price"></td>
<td><input type="text" name="shop2_price[]" id="shop2_price"></td>
<td><input type="text" name="shop3_price[]" id="shop3_price"></td>
</tr>
</tbody>
#endforeach
</table>
{{--<input value="addrow" type="button" id="addrow" onclick="javascript: addRow();">--}}
<input type="submit" value="submit">
</form>
</div>
My Controller
public function insertquotation(request $request)
{
if ($file = $request->file('shop1_quatation')) {
$name = $file->getClientOriginalName();
$file->move('procurement_files', $name);
$file2 = $request->file('shop2_quatation');
$name2 = $file2->getClientOriginalName();
$file2->move('procurement_files', $name2);
$file3 = $request->file('shop2_quatation');
$name3 = $file2->getClientOriginalName();
$file3->move('procurement_files', $name3);
$procurment_request_number = $request->input('procurment_request_number');
$quotationer1 = $request->input('quotationer1');
$quotationer2 = $request->input('quotationer2');
$quotationer3 = $request->input('quotationer3');
$shop_name1 = $request->input('shop_name1');
$shop_account_number1 = $request->input('shop_account_number1');
$shop_permit1 = $request->input('shop_permit1');
$shop_name2 = $request->input('shop_name2');
$shop_account_number2 = $request->input('shop_account_number2');
$shop_permit2 = $request->input('shop_permit2');
$shop_name3 = $request->input('shop_name3');
$shop_account_number3 = $request->input('shop_account_number3');
$shop_permit3 = $request->input('shop_permit3');
$numbers = $request->input('itemid');
for ($i = 0; $i < count($numbers); $i++) {
$itemid = $request->input('itemid');
$shop1_price = $request->input('shop1_price');
$shop2_price = $request->input('shop2_price');
$shop3_price = $request->input('shop3_price');
DB::insert("INSERT INTO procurment_quotations (`procurment_request_number`, `itemid`, `quotationer1`, `quotationer2`, `quotationer3`, `shop1_name`, `shop1_account_number`, `shop1_permit`, `shop1_quatation`, `shop1_price`, `shop2_name`, `shop2_account_number`, `shop2_permit`, `shop2_quatation`, `shop2_price`, `shop3_name`, `shop3_account_number`, `shop3_permit`, `shop3_quatation`, `shop3_price`, `created_at`, `updated_at`) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,)", [$procurment_request_number, $itemid[$i],$quotationer1,$quotationer2,$quotationer3,$shop_name1,$shop_account_number1,$shop_permit1,$name,$shop1_price,$shop_name2,$shop_account_number2,$shop_permit2,$name2,$shop2_price,$shop_name3,$shop_account_number3,$shop_permit3,$name3,$shop3_price]);
}
}
}
and my route
Route::Post('insertquotation','Home#insertquotation');
The error is
"The POST method is not supported for this route. Supported methods: GET, HEAD."

Give the route a name in your routes/web.php file:
Route::post('insertquotation','Controllername#methodname')
->name('insertquotation');
And then change the form action in your blade file to point to that route:
<form action="{{ route('insertquotation') }}" method="post" enctype="multipart/form-data">

Couple of things which I need to point out on your code
It is always better to use route names while creating routes so that when you need to change the route URL to something else, you only need to change it inside routes file (not view files)
Route::post('insertquotation','Home#insertquotation')->name('insertquotation');
Now inside your view, you need to do this
<form method="POST" enctype="multipart/form-data" action="{{ route('insertquotation') }}"> ... </form>
In the future when you want (maybe not) to change the URL to /quotation/insert, all you have to do is to change it inside the routes file.
Now, inside your controller,
There is a function to check whether the file exists $request->hasFile('shop1_quatation') which more correct to use inside an if condition rather passes in the file.
Also, it is much better to use Laravel eloquent for inserting data into the database. Learn more here

I think from action="insertquotation", you should make it into action="{{url('insertquotation')}}"
And may I see the codes in your routes/web.php file? you should declare the route insertquotation there
For example:
Route::post('insertquotation', 'YourController#yourMethod');

Related

HTML: How to save form values in local folder

I haven't played with HTML in over 15 years, and I've never done any other coding (I know... I'm a delight already, yeah?). This is only to be opened in browser on an offline PC for little kids. It's part of a homebrew html-based adventure game. I harvested code from several other sites to get this small bit - but idk how to make it work. I'd like kids to be able to answer the questions appropriately, and then save them as a text document (or really saved any way possible that I can view later) in the Downloads folder or any folder. There is no 'server' or any network - this is an old Windows 98 that kids play on.
edit:Something similar to this download function:https://stackoverflow.com/a/29376481/14739116
Here is what I have - please feel free to murder it:
<html><head>
<title>What did I do today?</title>
</head><body>
<form onsubmit="download(this['name'].value, this['form'].value)">
<h3>My name is...
<br>
<textarea rows=2 cols=25 name="text"></textarea>
<br><br>
Please select the appropriate response.
<table width="660" border>
<tr align="center">
<td width="500"></td>
<td width="50">1</td>
<td width="50">2</td>
<td width="50">3</td>
<td width="50">4</td>
</tr>
<tr align="center">
<td width="500">I brushed my teeth today.</td>
<td><input type="checkbox" id="1"></td>
<td><input type="checkbox" id="2"></td>
<td><input type="checkbox" id="3"></td>
<td><input type="checkbox" id="4"></td>
</tr>
<tr align="center">
<td width="500">I washed my hands today.</td>
<td><input type="checkbox" id="1"></td>
<td><input type="checkbox" id="2"></td>
<td><input type="checkbox" id="3"></td>
<td><input type="checkbox" id="4"></td>
</tr>
<tr align="center">
<td width="500">I ate all of my vegetables today.</td>
<td><input type="checkbox" id="1"></td>
<td><input type="checkbox" id="2"></td>
<td><input type="checkbox" id="3"></td>
<td><input type="checkbox" id="4"></td>
</tr>
<tr align="center">
<td width="500">I fed the fish this week.</td>
<td><input type="checkbox" id="1"></td>
<td><input type="checkbox" id="2"></td>
<td><input type="checkbox" id="3"></td>
<td><input type="checkbox" id="4"></td>
</tr>
</table>
<br>
<input type="submit" value="SAVE">
</body></html>
Your HTML is workable, though the main issue I see with it is the duplicate ids (which is invalid) -- what you would want instead is to set the value attribute.
The good thing is, you won't need a server or anything for downloading the responses as a file, as that can be done in JavaScript. You can try some of the solutions discussed here: JavaScript: Create and save file. (You just need to make sure the browser settings will download the file to your desired location by default).
You would also need to write some JS to extract the selected checkboxes & the entered name (which would be a suitable filename -- with some appropriate sanitization).
I assume on an old system like that, there's probably an old version of IE. If so, you'll be more limited with JS functionality. (If possible, try installing a later version or another browser to get things working).
Below is a snippet that works on Firefox/Chrome and IE10+ (also available in this fiddle).
The latter half of it is based on the answer that I previously linked here.
The JS will generate a CSV format of the answers and use the entered name as the filename.
You just need to set the browser settings to automatically download to your desired folder.
<html>
<head>
<title>What did I do today?</title>
</head>
<body>
<form onsubmit="saveResponses()">
<h3>My name is...</h3>
<textarea rows=2 cols=25 name="text"></textarea>
<br><br>
Please select the appropriate response.
<table width="660" border>
<tr align="center">
<td width="500"></td>
<td width="50">1</td>
<td width="50">2</td>
<td width="50">3</td>
<td width="50">4</td>
</tr>
<tr align="center">
<td width="500">I brushed my teeth today.</td>
<td><input type="checkbox" value="1"></td>
<td><input type="checkbox" value="2"></td>
<td><input type="checkbox" value="3"></td>
<td><input type="checkbox" value="4"></td>
</tr>
<tr align="center">
<td width="500">I washed my hands today.</td>
<td><input type="checkbox" value="1"></td>
<td><input type="checkbox" value="2"></td>
<td><input type="checkbox" value="3"></td>
<td><input type="checkbox" value="4"></td>
</tr>
<tr align="center">
<td width="500">I ate all of my vegetables today.</td>
<td><input type="checkbox" value="1"></td>
<td><input type="checkbox" value="2"></td>
<td><input type="checkbox" value="3"></td>
<td><input type="checkbox" value="4"></td>
</tr>
<tr align="center">
<td width="500">I fed the fish this week.</td>
<td><input type="checkbox" value="1"></td>
<td><input type="checkbox" value="2"></td>
<td><input type="checkbox" value="3"></td>
<td><input type="checkbox" value="4"></td>
</tr>
</table>
<br>
<input type="submit" value="SAVE">
</form>
<script type="text/javascript">
// StackOverflow question https://stackoverflow.com/questions/65084239
function saveResponses() {
// Windows-safe filename
var name = document.getElementsByTagName('textarea')[0].value.replace(/[<>:"/\|?*]/g, ' ') + '.txt';
var responses = [];
var questions = document.getElementsByTagName('tr');
for (var i = 1; i < questions.length; i++) {
var question = questions[i].getElementsByTagName('td')[0].innerHTML;
// Save responses in CSV format
responses.push('"' + question + '"');
var checkboxes = questions[i].querySelectorAll('input[type=checkbox]:checked');
for (var j = 0; j < checkboxes.length; j++) {
responses[responses.length - 1] += ',"' + checkboxes[j].value + '"';
}
}
responses = responses.join('\r\n');
// console.log(responses);
download(responses, name, 'text/plain');
}
// Borrowed from https://stackoverflow.com/a/30832210
function download(data, filename, type) {
var file = new Blob([data], {type: type});
if (window.navigator.msSaveOrOpenBlob) { // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
} else { // Others
var a = document.createElement('a');
var url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
}
</script>
</body>
</html>

How to update the existing rows add insert new rows in table in laravel for multiple array values

i have a table of data with array input values , as like below
<table>
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
</tr>
<tr>
<td><input type="text" name="user_id[]" value="1"></td>
<td><input type="text" name="name[]"></td>
<td><input type="text" name="email[]"></td>
<td><input type="text" name="phone[]"></td>
</tr>
<tr>
<td><input type="text" name="user_id[]" value="2"></td>
<td><input type="text" name="name[]"></td>
<td><input type="text" name="email[]"></td>
<td><input type="text" name="phone[]"></td>
</tr>
<tr>
<td><input type="text" name="user_id[]" value=""></td>
<td><input type="text" name="name[]"></td>
<td><input type="text" name="email[]"></td>
<td><input type="text" name="phone[]"></td>
</tr>
<tr>
<td><input type="text" name="user_id[]" value=""></td>
<td><input type="text" name="name[]"></td>
<td><input type="text" name="email[]"></td>
<td><input type="text" name="phone[]"></td>
</tr>
</table>
And i m trying to update the first two rows with user_id value and trying to insert last two rows as new rows.
I m using the below insert query in laravel controller :
if(!empty(Input::get('user_id')))
{
for($i = 0; $i < count(Input::get('name')); $i++)
{
$id = Input::get('user_id')[$i];
$data = User::find($id);
$data->name = Input::get('name')[$i];
$data->email = Input::get('email')[$i];
$data->phone = Input::get('phone')[$i];
$data->save();
}
}
if(empty(Input::get('user_id')))
{
for($i = 0; $i < count(Input::get('name')); $i++)
{
$new = new User();
$new->name = Input::get('name')[$i];
$new->email = Input::get('email')[$i];
$new->phone = Input::get('phone')[$i];
$new->save();
}
}
But its not working properly . can somebody suggest me any solution for this ?
You should be using a foreach loop to, well, loop through the fields and do something if it is empty or not.
Maybe, something like this would help you.
$fields = Input::get('user_id');
foreach($fields as $field)
{
if(! empty($field))
{
// field is not empty
// update here
}
else
{
// field is empty
// do something here
}
}

HTML - Issue with form submission

Issue with submitting form, I don't see anything wrong with the form section.
This is an example of my code, The ticket number and user ID is being pushed into from MYSQL. When it gets to the server side after submitting, I am getting only 2 of 21 items. The readonly is only on the top 2 items, the rest is entered by end user.
<form action="<?php echo $NAV_includes_Research_Upload; ?>" method="POST">
<table class="Table_Center">
<tr>
<td>Ticket number:</td>
<td><input type="text" id="ticket" class="all" value="<?php echo "1"; ?>" readonly></td>
</tr>
<tr>
<td>User ID:</td>
<td><input type="text" id="user" class="all" value="<?php echo "test"; ?>" readonly>
</tr>
<tr>
<td>Site:</td>
<td><input type="url" id="website" class="all" autofocus required <?php if ($testing === 'ON') {echo 'value="http://www.google.com"';}?>></td>
</tr>
</table>
<table class="Table_Center">
<tr>
<td><input type="reset" value="Reset"></td>
<td><input type="submit" class="f_right" value="Submit"></td>
</tr>
</table>
</form>
Thank you, it was the name section that was missing.
I will have to remember that.
In your form code, I am unable to find name attribute of input fields. In an HTML form Post, values entered by the user and submitted are called by the name attribute.

HTML Validation Issue

Line 101, Column 86: document type does not allow element "input" here; missing one of "th", "td" start-tag
Here is the code:
<input type="submit" name = "b1" value = "Calculate" onclick = "calculate()"/>
<form name="frm1" action="">
<fieldset>
<table>
<tr>
<td>Weight:</td>
<td><input type="text" name="number1"/></td>
<td>Distance:</td>
<td><input type="text" name="number2"/></td>
<td>Answer =</td>
<td><input type="text" name="number3"/></td>
<input type="submit" name = "b1" value = "Calculate" onclick = "calculate()"/>
</tr>
</table>
</fieldset>
</form>
Here is the function:
<script type="">
function calculate()
{
A = document.frm1.number1.value;
B = document.frm1.number2.value;
C = (A*B*1.036);
document.frm1.number3.value = C
}
</script>
It sounds like you are trying to put an input element as a child element of a table row.
That isn't allowed and does not make sense.
Either place it outside the table or inside a table cell.
It should look like this
<form name="frm1" action="">
<fieldset>
<table>
<tr>
<td>Weight:</td>
<td><input type="text" name="number1"/></td>
<td>Distance:</td>
<td><input type="text" name="number2"/></td>
<td>Answer =</td>
<td><input type="text" name="number3"/></td>
<td><input type="submit" name = "b1" value = "Calculate" onclick = "calculate()"/></td>
</tr>
</table>
</fieldset>
</form>

HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?

I can best describe this as follows:
I want this (entire table in editmode and save button in every row).
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </td>
</tr>
<tr>
<td><input type="hidden" name="id" value="1" /></td>
<td><input type="text" name="name" value="Name" /></td>
<td><input type="text" name="description" value="Description" /></td>
<td><input type="submit" value="Save" /></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="2" /></td>
<td><input type="text" name="name" value="Name2" /></td>
<td><input type="text" name="description" value="Description2" /></td>
<td><input type="submit" value="Save" /></td>
</tr>
<!-- and more rows here ... -->
</table>
Where should I put the <form> tags?
It's worth mentioning that this is possible in HTML5, using the "form" attribute for input elements:
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </td>
</tr>
<tr>
<td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>
<td><input form="form1" type="text" name="name" value="Name" /></td>
<td><input form="form1" type="text" name="description" value="Description" /></td>
<td><input form="form1" type="submit" value="Save" /></td>
</tr>
<tr>
<td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>
<td><input form="form2" type="text" name="name" value="Name" /></td>
<td><input form="form2" type="text" name="description" value="Description" /></td>
<td><input form="form2" type="submit" value="Save" /></td>
</tr>
</table>
While clean in its lack of JS and use of original elements, unfortunately this isn't working in IE10.
I had a similar question and this answer in question HTML: table of forms? solved it for me. (Not sure if it is XHTML, but it works in an HTML5 browser.)
You can use css to give table layout to other elements.
.table { display: table; }
.table>* { display: table-row; }
.table>*>* { display: table-cell; }
Then you use the following valid html.
<div class="table">
<form>
<div>snake<input type="hidden" name="cartitem" value="55"></div>
<div><input name="count" value="4" /></div>
</form>
</div>
You can't. Your only option is to divide this into multiple tables and put the form tag outside of it. You could end up nesting your tables, but this is not recommended:
<table>
<tr><td><form>
<table><tr><td>id</td><td>name</td>...</tr></table>
</form></td></tr>
</table>
I would remove the tables entirely and replace it with styled html elements like divs and spans.
I wrote the below over ten years ago, when the world was a different place. These days I know of many ways to crack this particular nut, but a quick and dirty solution that will validate is to do much the same but use CSS tables for layout, not a regular HTML table.
I'd say you can, although it doesn't validate and Firefox will re-arrange the code (so what you see in 'View generated source' when using Web Developer may well surprise). I'm no expert, but putting
<form action="someexecpage.php" method="post">
just ahead of the
<tr>
and then using
</tr></form>
at the end of the row certainly gives the functionality (tested in Firefox, Chrome and IE7-9). Working for me, even if the number of validation errors it produced was a new personal best/worst! No problems seen as a consequence, and I have a fairly heavily styled table. I guess you may have a dynamically produced table, as I do, which is why parsing the table rows is a bit non-obvious for us mortals. So basically, open the form at the beginning of the row and close it just after the end of the row.
The answer of #wmantly is basicly 'the same' as I would go for at this moment.
Don't use <form> tags at all and prevent 'inappropiate' tag nesting.
Use javascript (in this case jQuery) to do the posting of the data, mostly you will do it with javascript, because only one row had to be updated and feedback must be given without refreshing the whole page (if refreshing the whole page, it's no use to go through all these trobules to only post a single row).
I attach a click handler to a 'update' anchor at each row, that will trigger the collection and 'submit' of the fields on the same row. With an optional data-action attribute on the anchor tag the target url of the POST can be specified.
Example html
<table>
<tbody>
<tr>
<td><input type="hidden" name="id" value="row1"/><input name="textfield" type="text" value="input1" /></td>
<td><select name="selectfield">
<option selected value="select1-option1">select1-option1</option>
<option value="select1-option2">select1-option2</option>
<option value="select1-option3">select1-option3</option>
</select></td>
<td><a class="submit" href="#" data-action="/exampleurl">Update</a></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="row2"/><input name="textfield" type="text" value="input2" /></td>
<td><select name="selectfield">
<option selected value="select2-option1">select2-option1</option>
<option value="select2-option2">select2-option2</option>
<option value="select2-option3">select2-option3</option>
</select></td>
<td><a class="submit" href="#" data-action="/different-url">Update</a></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="row3"/><input name="textfield" type="text" value="input3" /></td>
<td><select name="selectfield">
<option selected value="select3-option1">select3-option1</option>
<option value="select3-option2">select3-option2</option>
<option value="select3-option3">select3-option3</option>
</select></td>
<td><a class="submit" href="#">Update</a></td>
</tr>
</tbody>
</table>
Example script
$(document).ready(function(){
$(".submit").on("click", function(event){
event.preventDefault();
var url = ($(this).data("action") === "undefined" ? "/" : $(this).data("action"));
var row = $(this).parents("tr").first();
var data = row.find("input, select, radio").serialize();
$.post(url, data, function(result){ console.log(result); });
});
});
A JSFIddle
You just have to put the <form ... > tag before the <table> tag and the </form> at the end.
Hopte it helps.
In fact I have the problem with a form on each row of a table, with javascript (actually jquery) :
like Lothre1 said, "some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element"
which makes my input fields OUTSIDE the form, therefore I can't access the children of my form through the DOM with JAVASCRIPT..
typically, the following JQUERY code won't work :
$('#id_form :input').each(function(){/*action*/});
// this is supposed to select all inputS
// within the form that has an id ='id_form'
BUT the above exemple doesn't work with the rendered HTML :
<table>
<form id="id_form"></form>
<tr id="tr_id">
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</table>
I'm still looking for a clean solution (though using the TR 'id' parameter to walk the DOM would fix this specific problem)
dirty solution would be (for jquery):
$('#tr_id :input').each(function(){/*action*/});
// this will select all the inputS
// fields within the TR with the id='tr_id'
the above exemple will work, but it's not really "clean", because it refers to the TR instead of the FORM, AND it requires AJAX ...
EDIT : complete process with jquery/ajax would be :
//init data string
// the dummy init value (1=1)is just here
// to avoid dealing with trailing &
// and should not be implemented
// (though it works)
var data_str = '1=1';
// for each input in the TR
$('#tr_id :input').each(function(){
//retrieve field name and value from the DOM
var field = $(this).attr('name');
var value = $(this).val();
//iterate the string to pass the datas
// so in the end it will render s/g like
// "1=1&field1_name=value1&field2_name=value2"...
data_str += '&' + field + '=' + value;
});
//Sendind fields datawith ajax
// to be treated
$.ajax({
type:"POST",
url: "target_for_the_form_treatment",
data:data_string,
success:function(msg){
/*actions on success of the request*/
});
});
this way, the "target_for_the_form_treatment" should receive POST data as if a form was sent to him (appart from the post[1] = 1, but to implement this solution i would recommand dealing with the trailing '&' of the data_str instead).
still I don't like this solution, but I'm forced to use TABLE structure because of the dataTables jquery plugin...
Im late to the party, but this worked great for me and the code should explain itself;
<script type="text/javascript">
function formAJAX(btn){
var $form = $(btn).closest('[action]');
var str = $form.find('[name]').serialize();
$.post($form.attr('action'), str, function(data){
//do stuff
});
}
<script>
HTML:
<tr action="scriptURL.php">
<td>
Field 1:<input type="text" name="field1"/>
</td>
<td>
Field 2:<input type="text" name="field2" />
</td>
<td><button type="button" onclick="formAJAX(this)">Update</button></td>
</tr>
If you try to add a form warping a tr element like this
<table>
<form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</form>
</table>
some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element
something like this
<table>
<form></form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</table>
This issue is still valid for warping multiple table cells
As stereoscott said above, nesting tables are a possible solution which is not recommended.
Avoid using tables.
<table >
<thead >
<tr>
<th>No</th><th>ID</th><th>Name</th><th>Ip</th><th>Save</th>
</tr>
</thead>
<tbody id="table_data">
<tr>
<td>
<form method="POST" autocomplete="off" id="myForm_207" action="save.php">
<input type="hidden" name="pvm" value="207">
<input type="hidden" name="customer_records_id" value="2">
<input type="hidden" name="name_207" id="name_207" value="BURÇİN MERYEM ONUK">
<input type="hidden" name="ip_207" id="ip_207" value="89.19.24.118">
</form>
1
</td>
<td>
207
</td>
<td>
<input type="text" id="nameg_207" value="BURÇİN MERYEM ONUK">
</td>
<td>
<input type="text" id="ipg_207" value="89.19.24.118">
</td>
<td>
<button type="button" name="Kaydet_207" class="searchButton" onclick="postData('myForm_207','207')">SAVE</button>
</td>
</tr>
<tr>
<td>
<form method="POST" autocomplete="off" id="myForm_209" action="save.php">
<input type="hidden" name="pvm" value="209">
<input type="hidden" name="customer_records_id" value="2">
<input type="hidden" name="name_209" id="name_209" value="BALA BAŞAK KAN">
<input type="hidden" name="ip_209" id="ip_209" value="217.17.159.22">
</form>
2
</td>
<td>
209
</td>
<td>
<input type="text" id="nameg_209" value="BALA BAŞAK KAN">
</td>
<td>
<input type="text" id="ipg_209" value="217.17.159.22">
</td>
<td>
<button type="button" name="Kaydet_209" class="searchButton" onclick="postData('myForm_209','209')">SAVE</button>
</td>
</tr>
</tbody>
</table>
<script>
function postData(formId,keyy){
//alert(document.getElementById(formId).length);
//alert(document.getElementById('name_'+keyy).value);
document.getElementById('name_'+keyy).value=document.getElementById('nameg_'+keyy).value;
document.getElementById('ip_'+keyy).value=document.getElementById('ipg_'+keyy).value;
//alert(document.getElementById('name_'+keyy).value);
document.getElementById(formId).submit();
}
</script>