I am using PHP Codeigniter.I don't have good knowledge in JavaScript. My problem is that I have a table with editable columns and when I click on the submit button I want to send the table data to the Codeigniter function using POST method.
HTML code
<div class="col-md-12 top-20 padding-0">
<div class="col-md-12">
<div class="panel">
<div class="panel-heading"><h3>Data Tables</h3></div>
<div class="panel-body">
<div class="responsive-table">
<table id="data_table" class="table table-striped table-bordered" width="100%" cellspacing="0">
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
<input type="button" name="check" onclick="clik();">
</div>
</div>
</div>
</div>
</div>
JavaScript for editable table
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var name=document.getElementById("name_row"+no);
var country=document.getElementById("country_row"+no);
var age=document.getElementById("age_row"+no);
var name_data=name.innerHTML;
var country_data=country.innerHTML;
var age_data=age.innerHTML;
name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
country.innerHTML="<input type='text' id='country_text"+no+"' value='"+country_data+"'>";
age.innerHTML="<input type='text' id='age_text"+no+"' value='"+age_data+"'>";
}
function save_row(no)
{
var name_val=document.getElementById("name_text"+no).value;
var country_val=document.getElementById("country_text"+no).value;
var age_val=document.getElementById("age_text"+no).value;
document.getElementById("name_row"+no).innerHTML=name_val;
document.getElementById("country_row"+no).innerHTML=country_val;
document.getElementById("age_row"+no).innerHTML=age_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_name=document.getElementById("new_name").value;
var new_country=document.getElementById("new_country").value;
var new_age=document.getElementById("new_age").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='name_row"+table_len+"'>"+new_name+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</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='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_name").value="";
document.getElementById("new_country").value="";
document.getElementById("new_age").value="";
}
So in the given editable table data I want to push to my codeigniter function.
the best way now is to use Ajax in order to post those javascript value to the Codeigniter function
example on a simple ajax call :
var newName = 'John Smith';
$.ajax('myservice/codigniter_Function?' + $.param({id: 'some-unique-id'}), {
method: 'POST',
data: {
name: newName
}
})
.then(
function success(name) {
if (name !== newName) {
alert('Something went wrong. Name is now ' + name);
}
},
function fail(data, status) {
alert('Request failed. Returned status of ' + status);
}
);
please check the source for more information on how to use ajax with javascript in details.
Since your question includes vanilla Javascript, my answer will use XMLHttpRequest() . I have created the following function to send post data to the back end.
function ajax_req(url, params) {
var http = new XMLHttpRequest();
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
}
In your save_row()
function, create parameters to send to the back end, like name=billy&age=21&country=us
function save_row(no) {
var name_val = document.getElementById("name_text" + no).value;
var country_val = document.getElementById("country_text" + no).value;
var age_val = document.getElementById("age_text" + no).value;
document.getElementById("name_row" + no).innerHTML = name_val;
document.getElementById("country_row" + no).innerHTML = country_val;
document.getElementById("age_row" + no).innerHTML = age_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
// send values to back end
var params = "name=" + name_val + "&country=" + country_val + "&age=" + age_val;
ajax_req('/savedata', params);
}
<form action="<php echo base_url('controller_name/ method_name')?> method="POST">
<div class="col-md-12 top-20 padding-0">
<div class="col-md-12">
<div class="panel">
<div class="panel-heading"><h3>Data Tables</h3></div>
<div class="panel-body">
<div class="responsive-table">
<table id="data_table" class="table table-striped table-bordered" width="100%" cellspacing="0">
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr>
<td><input type="text" id="new_name" name="newname"></td>
<td><input type="text" id="new_country" name="country"></td>
<td><input type="text" id="new_age" name="age"></td>
</tr>
</table>
<input type="submit" name="check" class="btn btn-primary">
</div>
</div>
</div>
</div>
In Your Controller
public function function_name()
{
$post = $this>input->post();
$data = array(
'name' =>$post['newname'],
'country' =>$post['country'],
'age' =>$post['age'],
);
$this->load->model('model_name');
$this->model_name->function_name($data);
}
In your model
public function function_name($data) {
return $this->db->insert('table_name', $data);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.