I am cloning the last row in table but i need unique multidimensional name for each input...
<tr>
<td><input type="text" name='input[1][Name]'></input></td>
<td><input type="text" name='input[1][address]'></input></td>
<td><input type="text" name='input[1][contactInfo]'></input></td>
</tr>
next row should be
<tr>
<td><input type="text" name='input[2][Name]'></input></td>
<td><input type="text" name='input[2][address]'></input></td>
<td><input type="text" name='input[2][contactInfo]'></input></td>
</tr>
...........
jquery
$(".alternativeRow").click(function(){
i=2;
$("table tr:last").clone().find("input").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'name': function(_, name) { return name + i },
'value': ''
});
}).end().appendTo("table");
i++;
});
For multidimensional name no need to give explicit index to the names. directly you can write like this.
<input type="text" name='input[][Name]'></input>
This will automatically take the index no when you receive the form data on server side.
$(".alternativeRow").click(function(){
i=2;
$("table tr:last").clone().find("input").each(function() {
this.name = this.name.replace(/\[(\d+)\]/, function(){
return '[' + i +']';
});
})
.end().appendTo("table");
i++;
});
Related
I have two input fields with same class name and the same data.
Here is my while loop generated input field
<tr>
<td>
<input onchange="mySubmit(this.form)" class="ot_value" name="ot_value" type="text" value="10">
<input type="hidden" name="ot_id" class="ot_id" value="1">
</td>
</tr>
<tr>
<td>
<input onchange="mySubmit(this.form)" class="ot_value" name="ot_value" type="text" value="11">
<input type="hidden" name="ot_id" class="ot_id" value="2">
</td>
</tr>
I was trying to send data from ajax to php when user change any value.
Here is my jquery
function mySubmit(theForm) {
var ot_value= $(".ot_value").val();
var ot_id= $(".ot_id").val();
$.ajax({
type:"post",
url:"../apis/update_ot.php",
data: "ot_value=" + ot_value+ "&ot_id=" + ot_id,
success:function(data){
alert(data);
}
});
}
I was able to send data when user is changing any input field data. But the problem is that, it's taking only the 1st row data.
How can I get the exact data, that what user are changing in input field.
You have jQuery, use it
remove onchange="mySubmit(this.form)" from the field and do
$(function() {
$(".ot_value").on("change", function() {
const ot_value = $(this).val();
const ot_id = $(this).next(".ot_id").val();
console.log("about to submit",ot_value,ot_id)
$.ajax({
type: "post",
url: "../apis/update_ot.php",
data: "ot_value=" + ot_value + "&ot_id=" + ot_id,
success: function(data) {
alert(data);
}
});
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input class="ot_value" name="ot_value" type="text" value="10">
<input type="hidden" name="ot_id" class="ot_id" value="1">
</td>
</tr>
<tr>
<td>
<input class="ot_value" name="ot_value" type="text" value="11">
<input type="hidden" name="ot_id" class="ot_id" value="2">
</td>
</tr>
</tbody>
</table>
I'm very new in web programming, especially on Codeigniter. And now I'm looking for how to pass/submit array from view to controller.
This part of my HTML script in view:
<tr class="rowdim"> <!-- ROW 1 -->
<td><input type="text" id="bookid1" name="book_id[]" /></td>
<td><input type="text" id="qty1" name="qty[]" /></td>
<td><input type="text" id="uom1" name="uom_id[]" /></td>
</tr>
<tr class="rowdim"> <!-- ROW 2 -->
<td><input type="text" id="bookid2" name="book_id[]" /></td>
<td><input type="text" id="qty2" name="qty[]" /></td>
<td><input type="text" id="uom2" name="uom_id[]" /></td>
</tr>
<tr class="rowdim"> <!-- ROW 3 -->
<td><input type="text" id="bookid3" name="book_id[]" /></td>
<td><input type="text" id="qty3" name="qty[]" /></td>
<td><input type="text" id="uom3" name="uom_id[]" /></td>
</tr>
My ajax:
var det_book = document.getElementsByName("book_id[]");
var det_qty = document.getElementsByName("qty[]");
var det_uom = document.getElementsByName("uom_id[]");
var vdata = {det_book:det_book,det_qty:det_qty,det_uom:det_uom}
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>trans/StockIn/saveData",
data:vdata,
success:function(returnmsg){
if (returnmsg=='""'){
window.alert(msg);
} else {
window.alert(returnmsg);
}
});
Controller:
$det_book=$_POST["det_book"];
$det_qty=$_POST["det_qty"];
$det_uom=$_POST["det_uom"];
$details = array();
$index=0;
foreach ($det_book as $baris){
array_push($details,array(
'book_id'=>$baris,
'quantity'=>$det_qty[$index],
'uom_id'=>$det_uom[$index]
));
$index++; }
$error="";
if (!$this->db->insert_batch('trx_inbound_detail',$details))
{
$error = $this->db->error();
}
Any miss or something wrong with my code?
Already search in community but still no luck.
Appreciate if you also suggest other ways.
Thanks
Your first mistake is get the textbox value in multiple fields:
var det_book = $('input[name^=book_id]').map(function(idx, elem) {
return $(elem).val();
}).get();
var det_qty = $('input[name^=qty]').map(function(idx, elem) {
return $(elem).val();
}).get();
var det_uom = $('input[name^=uom_id]').map(function(idx, elem) {
return $(elem).val();
}).get();
In php you didnot mention the index in foreach:
foreach ($det_book as $index => $baris) {
array_push($details,array(
'book_id'=>$baris,
'quantity'=>$det_qty[$index],
'uom_id'=>$det_uom[$index]
));
}
print_r($details);
exit();
Yes, you missed something.
Element with name book_id[] doesn't exist. Also you have three inputs with same name.
Check this link to see how to pass array with ajax.
I have created a dynamic table using jquery as follows:
$.ajax({
data : data,
type : "get",
url : url,
dataType : "json",
error : function(resp){
alert("Error !!");
},
success : function(resp){
table = '';
$.each(resp,function(indx,obj){
table += '<tr>';
table += '<td>'+parseInt(indx+1)+'</td>';
table += '<td>'+'<input type="text" value="'+obj.ServiceDetail.service_code+'">'+'</td>';
table += '<td>'+'<input type="text" value="'+obj.ServiceDetail.name+'">'+'</td>';
table += '<td>'+'<input type="text" value="'+obj.ServicePrice.discount_price+'">'+'</td>';
table += '</tr>';
});
$("tbody#sevice_table_body").append(table);
}
});
and a button :
<input type="button" class = "btn btn-success btn-sm" value="submit" >
now i want to get all input value in a array by click submit button so that can be inserted in a database table using jquery ajax.
You can use this code for cycling the input and add them to an array
var arrayOfVar = []
$.each($("input[type='text']"),function(indx,obj){
arrayOfVar.push($(obj).val());
});
You can use .serializeArray() it Encode elements as an array of names and values.
Find below fiddle for more info
$(function() {
var data = $("#tbl2 :input").serializeArray(); // For converting it to array
//If needed below code is converting it to object
var obj = {};
for (var i = 0, l = data.length; i < l; i++) {
obj[data[i].name] = data[i].value;
}
console.log(data); // Print Array in Console
console.log(obj);// Print Object in Console
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl2">
<tr>
<td>
<input type="text" name="tb3" value="1" />
</td>
</tr>
<tr>
<td>
<input type="text" name="tb4" value="2" />
</td>
</tr>
<tr>
<td>
<input type="text" name="tb5" value="3" />
</td>
</tr>
<tr>
<td>
<input type="text" name="tb6" value="4" />
</td>
</tr>
</table>
Add attribute name with name and array .
$.ajax({
data : data,
type : "get",
url : url,
dataType : "json",
error : function(resp){
alert("Error !!");
},
success : function(resp){
table = '';
$.each(resp,function(indx,obj){
table += '<tr>';
table += '<td>'+parseInt(indx+1)+'</td>';
table += '<td>'+'<input type="text" name="service_code[]" value="'+obj.ServiceDetail.service_code+'">'+'</td>';
table += '<td>'+'<input type="text" name="name[]" value="'+obj.ServiceDetail.name+'">'+'</td>';
table += '<td>'+'<input type="text" name="discount_price[]" value="'+obj.ServicePrice.discount_price+'">'+'</td>';
table += '</tr>';
});
$("tbody#sevice_table_body").append(table);
}
});
Here you go with a solution
var inputData = [];
$('button[value="submit"]').click(function(){
$('input[type="text"]).each(function(){
inputData.push($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hope this will help you.
In your table section, add name attribute like this:
$.each(resp,function(indx,obj){
table += '<tr>';
table += '<td>'+parseInt(indx+1)+'</td>';
table += '<td>'+'<input name="services[' + indx + '][code]" type="text" value="'+obj.ServiceDetail.service_code+'">'+'</td>';
table += '<td>'+'<input name="services[' + indx + '][name]" type="text" value="'+obj.ServiceDetail.name+'">'+'</td>';
table += '<td>'+'<input name="services[' + indx + '][price]" type="text" name="service[' + indx + '][price]" value="'+obj.ServicePrice.discount_price+'">'+'</td>';
table += '</tr>';
});
This will produce names like services[0][code], services[0][name], etc.,
Now you can access the input values as an array in PHP:
$services = $_POST['services'];
foreach ($services as $index => $service) {
$code = $service['code'];
$name = $service['name'];
$price = $service['price'];
echo "$index : $code, $name, $price \n";
}
I am using JQuery autocomplete option to get values from database using PHP. I have 2 text boxes and I am trying to use same PHP file to get the required results.
My HTML code is
<tr>
<td>LOB</td>
<td><input autocomplete="off" type="text" name="ABC" class="autocomplete"/></td>
</tr>
<tr>
<td>Project Name</td>
<td><input autocomplete="off" type="text" name="PQR" class="autocomplete"/></td>
</tr>
and my JQuery is
$(document).ready(function() {
$( ".autocomplete" ).autocomplete({
source: 'LiveSearch.php?name='+ $(".autocomplete").attr('name') + '&',
minLength: 2
});
});
But as these there are 2 elements with same class. I am not getting correct arrr('name'). MySQL will differ based on this name. I tried (this) but still not getting the result.
If I am in the first text box then name should be of that text box etc..
Please let me know if I am missing anything.
You can target the textbox using name.
$('[name=ABC]').val()
Use id to differentiate
<tr>
<td>LOB</td>
<td><input autocomplete="off" type="text" name="ABC" id="id1" class="autocomplete"/></td>
</tr>
<tr>
<td>Project Name</td>
<td><input autocomplete="off" type="text" name="PQR" id="id2" class="autocomplete"/></td>
</tr>
//Script
$(document).ready(function() {
$( ".autocomplete" ).autocomplete({
source: 'LiveSearch.php?name='+ $("#id1").attr('name') + '&',
minLength: 2
});
});
You're mixing the scope of 'all autocompletes' and 'the current automplete'. One way of dealing with this is to use jQuery's each() method:
$('.various-things').each(function () {
console.log($(this).attr('something');
});
This would log the 'something' attribute of each .various-things on the page. It looks like what you'd need is:
$(document).ready(function() {
$( ".autocomplete" ).each(function () {
$(this).autocomplete({
source: 'LiveSearch.php?name='+ $(this).attr('name') + '&',
minLength: 2
});
});
});
Now it'll find all autocompletes and set them up using their own name.
I'm not sure if what I'm trying to do is simple or not but here it is:
I have rows of data in a table. The last 3 fields are text fields that take user input. Each row has it's own UPDATE button.
I'm using the following code to try and do a jQuery .ajax post but I'm seeing my issue - I'm assigning IDs to my input fields and you can only have one ID declared per page so I'm sure that's one issue.
I'm trying to make it so that when you click the UPDATE button, it passes the variables from that row in the INPUT boxes and the hidden INPUT field for the rowID, and calls a .php file that updates the DB.
$(function() {
$(".submit").click(function() {
var status = $("#status").val();
var ly = $("#ly").val();
var rt = $("#rt").val();
var offerout = $("#offerout").val();
var lineid = $("#lineid").val();
var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&lineid=' + lineid;
$.ajax({
type: "POST",
url: "post/updatedata.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
and on line of my form (each line is the same but with a different hidden ID variable):
<form method="POST" name="form">
<td>This one</td><td>Los Angeles</td>
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status" name="status"></td>
<td><input size="6" type="text" id="ly" name="ly"></td>
<td><input size="6" type="text" id="rt" name="rt"></td>
<td><select id="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" id="lineid" value="97">
<td><input type="submit" class="submit" value="Update"></td>
</form>
Thanks in advance, been working for days on this!
Duplicating id attributes will cause problems. When you say $("#ly"), you'll probably get the first one on the page and that's usually not the one you want. That's easy to solve:
Drop the id attributes in favor of class attributes. You could also use attribute selectors.
Adjust your jQuery selectors to go up to an ancestor and come back down to the thing you want.
First the HTML:
<td><input size="6" type="text" class="status" name="status"></td>
<td><input size="6" type="text" class="ly" name="ly"></td>
<td><input size="6" type="text" class="rt" name="rt"></td>
<td><select class="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" class="lineid" value="97">
Then your jQuery:
var $form = $(this).closest('form');
var status = $form.find(".status").val();
var ly = $form.find(".ly").val();
var rt = $form.find(".rt").val();
var offerout = $form.find(".offerout").val();
var lineid = $form.find(".lineid").val();
Also, since you are doing a POST request, you should just hand jQuery an object and let it worry about serializing it:
var data = {
status: status,
ly: ly,
rt: rt,
offerout: offerout,
lineid: lineid
};
$.ajax({
type: "POST",
url: "post/updatedata.php",
data: data,
success: function() {
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
That should take care of your client-side issues.
You could store a row number data variable in each submit and use that to determine which row was clicked and thus which inputs you need to pull values from.
$(function() {
$(".submit").each(function () {
var rowNum = $(this).attr('data-rownum');
$(this).click(function () {
var status = $("#status" + rowNum).val();
var ly = $("#ly" + rowNum).val();
var rt = $("#rt" + rowNum).val();
....
});
});
});
<form method="POST" name="form">
....
<td><input size="6" type="text" id="status1" name="status"></td>
<td><input size="6" type="text" id="ly1" name="ly"></td>
<td><input size="6" type="text" id="rt1" name="rt"></td>
<input type="hidden" name="lineid" id="lineid1" value="97">
<td><input type="submit" class="submit" value="Update" data-rownum="1"></td>
</form>
I remove hidden field and assign database id to update button as button will click get that id and corespondent data.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<form method="POST" name="form">
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status_97" name="status"></td>
<td><input size="6" type="text" id="ly_97" name="ly"></td>
<td><input size="6" type="text" id="rt_97" name="rt"></td>
<td><select name="offerout" id="offerout_97"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<td><input type="submit" class="submit" value="Update" name="97"></td>
</form>
</tr>
<tr>
<form method="POST" name="form">
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status_96" name="status"></td>
<td><input size="6" type="text" id="ly_96" name="ly"></td>
<td><input size="6" type="text" id="rt_96" name="rt"></td>
<td><select name="offerout" id="offerout_96"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" id="lineid_96" value="96">
<td><input type="submit" class="submit" value="Update" name="96"></td>
</form>
</tr>
</table>
java script code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
$(".submit").click(function() {
var rowToUpdate = $(this).attr('name');
var status = $("#status_"+rowToUpdate).val();
var ly = $("#ly_"+rowToUpdate).val();
var rt = $("#rt_"+rowToUpdate).val();
var offerout = $("#offerout_"+rowToUpdate).val();
var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&rowToUpdate='+ rowToUpdate;
$.ajax({
type: "POST",
url: "post/updatedata.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
</script>
I hope this will help you..