I have a scenario in my project module which allows user to enter as many values as he wants in a form. I have given an array name to the field but when i try to get these values in my controller then it only returns the first value of the array. I have used java-script to append new input fields dynamically.
I can't figure out what mistake i am making.
Here is My code.
My view
<h1> <small>Order Details</small></h1>
<table class="table " id="dynamic_field">
<tr>
<td>
<input type="text" name="product_name[]" id="name" class="form-control name_list" placeholder="Product Name">
</td>
<td>
<button type="button" name="submit" id="add" class="btn btn- success">Add More</button>
</td>
</tr>
</table>
JavaScript Code
<script type="text/javascript">
var i = 1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="product_name[]" id="last_class" class="form-control name_list" placeholder="Product Name"></td><td><button type="button" name="remove" class="btn btn-danger btn_remove" name="remove" id="'+i+'"> X</button></td></tr>')
});
$(document).on('click','.btn_remove',function() {
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
</script>
When i try to print out the input field array using print_r it only returns the first value of the array even though we might have added more than 1 input fields.
Change your script and check
<script type="text/javascript">
var j = 1;
var i = 1;
$('#add').click(function()
{
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="product_name['+ j +']" id="last_class" class="form-control name_list" placeholder="Product Name"></td><td><button type="button" name="remove" class="btn btn-danger btn_remove" name="remove" id="'+i+'"> X</button></td></tr>');
j++ ;
});
$(document).on('click','.btn_remove',function()
{
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
</script>
Try this in your controller
$names=$this->input->post('product_name') ;
foreach($names as $pname) {
echo $pname;
}
Related
I've been using JavaScript to create new row on the table so that each input data will save in database. please refer example below.
Script for adding row on the table
<script type="text/javascript">
$(document).ready(function(){
var html='<tr><td><input type="text" size="2" class="form-control" name="qt[]" id="qt"
oninput="calculate();" required></td>
<input type="text" size="5" class="form-control" name="uc[]" id="cf" oninput="calculate();"
placeholder="₱0.00" required></td>
<td><center><input type="text" size="5" class="form-control" name="ta[]" id="result"
required></center></td><input type="button" class="form-control" name="remove" id="remove"
value="-"></td></tr>';
var x = 1;
$("#addd").click(function(){
$("#tb_field").append(html);
});
$("#tb_field").on('click','#remove',function(){
$(this).closest('tr').remove();
x--;
});
});
</script>
Script for multiplying two input types in the first row of the table
<script>
function calculate() {
var myBox1 = document.getElementById("qt").value;
var myBox2 = document.getElementById("cf").value;
var result = document.getElementById("result");
var myResult = myBox1 * myBox2;
var format2 = myResult.toLocaleString("USD");
document.getElementById("result").value = format2;
}
</script>
I made a working JSFiddle example. The code is:
<table id="myTable">
</table>
<input type="button" name="addRow" id="addRow" value="+">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?Version=43"></script>
<script>
function newRowHtml(rowNumber)
{
return '<tr id="row'+rowNumber+'"><td><input type="text" size="2" name="qt[]" class="qt" oninput="calculate('+rowNumber+');" value="0" required></td><td><input type="text" size="5" name="uc[]" class="cf" oninput="calculate('+rowNumber+');" value="0" required></td><td><center><input type="text" size="5" name="ta[]" class="ta" required></center></td><td><input type="button" name="remove" id="removeRow" value="-"></td></tr>';
}
var rowNumber = 1;
$("#addRow").click(function() {
$("#myTable").append(newRowHtml(rowNumber));
calculate(rowNumber);
rowNumber++;
});
$("#myTable").on('click', '#removeRow', function() {
$(this).closest('tr').remove();
});
function calculate(rowNumber)
{
let row = $("#row"+rowNumber);
let qt = parseInt(row.find(".qt").val());
let cf = parseInt(row.find(".cf").val());
row.find(".ta").val(qt * cf);
}
</script>
I have numbered the rows, which is easier than number cells, and make fully use of JQuery. I hope this makes some sense, and that you can adapt it to your needs.
You can, of course, use parseFloat() instead of parseInt(), but having values like ₱0.00 in your input could complicate things.
I am very new in jsp, and jquery
my code create dynamic text boxes and one drop-down menu based on button clicked,
after created textboxes I want to add one more textbox if the user select option male after the text boxes dynamically added.
the add code works, but the text box when selecting the male option not works.
please please help.
this is my code
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<br />
<div class="container">
<h3 align="center">Change Control Board (CCB)</h3>
<br />
<h4 align="center">Enter Change Details</h4>
<br />
<form name="form1" method="GET" action="jsv" id="form1">
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Enter Change Name</th>
<th>Enter Change Description</th>
<th>Enter Change GW</th>
<th>Enter Change AW</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$(document).on('click', '.add', function() {
var html = '';
html += '<tr> name="change_name1[]"';
html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html += '<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business" type="text" name="change_G[]" class="form-control change_GW" /></td>';
html += '<td><select id="purpose" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
});
});
$(document).ready(function() {
$('#purpose').on('change', function() {
if (this.value == '1') {
$("#business").show();
} else {
$("#business").hide();
}
});
});
</script>
First of all you have an error on the first line where you are concatenating the tr in the $html, it is '<tr> name="change_name1[]"'; where as it should be '<tr name="change_name1[]">'; but since the name attribute is not a valid attribute for tr you should change it to a unique id.
I hope the select menu and the input boxes that are generated by the click of a button are not multiple as there is an id attribute on the select input which needs to be unique in case there are multiple select boxes, but since it is not mentioned you make a slight change to your event binding like the code below
You must change the id attributes from static to dynamic something like appending a count along with their ids i have added it for you hope it solves your problem.
your final script will look like this
$(document).ready(function () {
var count = 0;
$(document).on('click', '.add', function () {
var html = '';
html += '<tr>';
html +='<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html +='<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html +='<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business_' + count +
'" type="text" name="change_G[]" class="form-control change_GW" /></td>';
html += '<td><select id="purpose_' + count +
'" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';
html +=
'<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
$('#purpose_' + count).on('change', function () {
if (this.value == '1') {
$("#business_"+count).show();
} else {
$("#business_"+count).hide();
}
});
count++;
});
$(document).on('click', '.remove', function () {
$(this).closest('tr').remove();
});
});
Cut this code:
$('#purpose').on('change', function() {
if ( this.value == '1')
{
$("#business").show();
}
else
{
$("#business").hide();
}
}
and paste it right behind $('#item_table').append(html);
Two $(document).ready() sections make no sense. And the event handler (on click) needs to be attached after you create the select box.
You are adding select dynamically at run time.so, after adding Select You need to bind it's change event.
So Just make change into your javascript code
<script>
$(document).ready(function(){
counter=0;
$(document).on('click', '.add', function(){
counter=counter+1;
var html = '';
html += '<tr> name="change_name1[]"';
html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html += '<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business_'+counter+'" type="text" name="change_G[]" class="form-control change_GW" /></td>';
html += '<td><select id="purpose_'+counter+'" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
$('#purpose_'+counter).on('change', function() {
if ( this.value == '1')
{
$("#business_"+counter).show();
}
else
{
$("#business_"+counter).hide();
}
});
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
});
</script>
i have add dynamic row using jquery now i want to add those column of the row. Down below is my code i am not able to add the column that is created dynamically.the first textbox is calculated and answer is displayed in grandtotal textbox but the rest textbox cannot be calculated.
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="a" class="form-control a" />
</td>
<td>
<input type="text" name="b" class="form-control b" />
</td>
<td>
<input type="text" name="c" class="form-control c" />
</td>
<td>
<input type="text" name="d" class="form-control d" />
</td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Grand-Total</td>
<td>
<input data-val="true" id="grdtol1" name="grdtol1" value="" class="form-control text-box single-line" type="text">
</td>
<td>
<input data-val="true" id="grdtol" name="grdtol2" value="" class="form-control text-box single-line" type="text">
</tr>
</tfoot>
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
$(document).ready(function (e) {
$("input").change(function () {
var grdtol1 = 0;
$("input[name=c]").each(function () {
grdtol1 = grdtol1 +parseInt( $(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
});
})
First, a piece of advice, don't create multiple $(document).ready() functions in the same javascript file, you just need one.
You haven't post your html code, so I'm guessing here, but I suppose you initially have row with the inputs and you also have an input with name="grdtol1" where you want to calculate the sum of the values of the column, and it has to refresh when you change the value in any of the inputs.
According to that, I see this problems...
You need to use event delegation for the input onchange event (like you do for the .deleteContact button). You're associating the event directly, so it only applies to the elements that are in the DOM when the page loads, and not for the rows you add dinamically. You can associate the event to the table and delegate it to the input, for example.
Inside of the event, you're selecting $("input[name=c]"), but according to the previous code, your inputs will have name="c' + rowCount + '". You chould use the class to select them.
If you delete one row, you should also recalculate the sum, because the input of that row will disappear.
Putting all together...
$(document).ready(function () {
$(document).on("click",".classAdd",function() {
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
function calculateGrandtotal() {
var grdtol1 = 0;
$('input.c').each(function() {
grdtol1 += parseInt($(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
}
$('#maintable').on('click','.deleteContact',function () {
$(this).closest('tr').remove();
calculateGrandtotal()
})
.on('change','input.c',function() {
calculateGrandtotal()
});
});
I hope it helps
I am adding rows using java script functions by taking input and showing data into input text fields.
I am using this datepicker https://github.com/T00rk/bootstrap-material-datetimepicker.
When I input time the only first value of time is copied into input fields while rest two value are copied but time value is not copied.
<div style="width:90%;margin:auto;">
<h1>Simple example of dynamically adding rows with jQuery</h1>
<form method="post">
<div id="itemRows">
Item quantity: <input type="text" name="add_qty" size="4" /> Item name: <input type="text" name="add_name" />Time:<input type="text" id="time" name="time" />
(This row will not be saved unless you click on "Add row" first)
<input onclick="addRow(this.form);" type="button" value="Add row" />
</div>
<p><input type="submit" name="ok" value="Save Changes"></p>
</form>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'">Time<input type="text" id="time" name="time[]" size="4" value="'+frm.time.value+'" > Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"><input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
frm.time.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
When you generate dynamic textbox with id and with date picker so you need to call one function for init datepicker on that text like below
$('input').bootstrapMaterialDatePicker();
function addRow(frm)
{
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'">Time<input type="text" id="time'+rowNum+'" name="time[]" size="4" value="'+frm.time.value+'" > Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"><input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
frm.time.value = '';
$('#time'+rowNum).bootstrapMaterialDatePicker();
}
In above function i add one id to time textbox and call bootstrap datepicker to init date on that textbox.
See working demo here
http://plnkr.co/edit/P0ZQsAjDJAXyJGs9kvT3?p=preview
I need to add multiple textboxes using a plus button and remove them using a minus button using Javascript.
After user fills up all the fields and clicks the submit button, I need to fetch all value using PHP.
Example:
Initially, there will only be 1 textbox. When user clicks on + button and already filled up the first field, the a second textbox will appear and also a - button used to remove the textbox. When a user clicks submit, the value in the textboxes will be submitted through PHP.
My code:
<?php
if(isset($_POST["userbtnsubmit"])){
}
?>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country" id="con" class="form-control oditek-form" placeholder="Add Country">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+">
<input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</form>
Note: As stated in the question, the user must type text in an input before another can be be shown.
addRemoveAnother('#plus', '#minus', '#con', '#counter', 3);
function addRemoveAnother(plusBtn, minusBtn, target, counter, limit) {
var i, ii = $(counter).val();
for(i = 0; i <= limit; i++) {
if (i != ii) {
$(target+i).hide();
}
}
$(plusBtn).click(function() {
ii = $(counter).val();
if ($(target+ii).val() != '') {
ii++;
if (ii <= limit) {
$(target+ii).show();
$(counter).val(ii);
}
}
});
$(minusBtn).click(function() {
ii = $(counter).val();
if (ii > 1) {
$(target+ii).val('');
$(target+ii).hide();
ii--;
$(counter).val(ii);
}
});
}
https://jsfiddle.net/curtisweeks/k4kanw6L/
You can combine jQuery PLUS AJAX to achieve the same.
Example :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$( "#plus" ).on("click", function() {
$( "#frmfeed" ).append( '<input type="text" name="country[]" class="form-control oditek-form" placeholder="Add Country"/>');
});
$("#minus").on("click", function(){
if($("input[name='country[]']").length > 1)
{
$("input[name='country[]']:eq("+(length-1)+")").remove();
}
});
$("#btnsubmit").on("click", function(){
var countries = [];
$("input[name='country[]']").each(function(){
countries.push($(this).prop("value"));
});
console.log(countries);
//AJAX Post Data To Your Server
var postDataObj = {
url: "YOUR_SERVER_FILE",
type: "post",
data: countries,
success: function(data){
//Response Data From Server
}
}
console.log(postDataObj);
$.ajax(postDataObj);
});
});
</script>
</head>
<body>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country[]" id="con" class="form-control oditek-form" placeholder="Add Country"><br/><br/>
</form>
<input type="button" class="btn btn-success" name="plus" id="plus" value="+"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</body>
</html>
JSFiddle Demo