Added textbox via javascript not detected by form when submitted - javascript

I have a javascript which adds text boxes when clicked,
I tried to submit the data but it can only detect the original textbox
Here is the code of javascript
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.setAttribute('name','description[]');
textbox.setAttribute('id', 'tasks');
textbox.setAttribute('class', 'form-control form-control2');
textbox.setAttribute('required', 'true');
textbox.setAttribute('placeholder', 'Describe Problem Encountered...');
document.getElementById('appendtb').appendChild(textbox);
Here is a part of code in html
<tr>
<td colspan="6" id="appendtb">
<!-- this is the textbox that it detects-->
<?php echo form_input(['name'=>'description[]','placeholder'=>'Describe Problem Encountered...','class'=>'form-control form-control2','required'=>'true','id'=>'task']); ?>
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" id="addTask" onclick="addTaskfield()" class="btn btn-outline-primary" name="btnAddTask" value="Add Task"/>
</td>
<td colspan="3" align="right">
<?php echo form_submit(['name'=>'submit','value'=>'Submit Request','class'=>'btn btn-outline-success btn-submitC']); ?>
</td>
</tr>
Here is the PHP code
$description = $this->input->post('description');
print_r($description);
exit();

Related

Get button value printed by php and process them via javascript

I have dynamic table where results from database are printed.
<table id="table" class="table datatable-responsive">
<thead>
<tr class="bg-teal">
<th>#</th>
<th>Datum & Vrijeme</th>
<th>Stavka</th>
<th><center>Izabrana količina</center></th>
<th><center><i class="icon-pencil"></i></center></th>
<th><center><i class="icon-bin"></i></center></th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
while ($r=$q->fetch()) {
$a = 0;
$a += 1;
$id = $r['Id'];
$datum = $r['Datum'];
$time = date("H:i:s",strtotime($datum));
$time2 = date("d/m/Y",strtotime($datum));
$stavka = $r['Stavka'];
$kolicina = $r['Kolicina'];
?>
<tr>
<td><?php echo $i; $i++; ?></td>
<td><?php echo $time2 .' & '.$time; ?></td>
<td><?php echo $stavka; ?></td>
<td class="nr"><center><?php echo $kolicina; ?></center></td>
<td><center><button type="button" value="<?php echo $id?>" name="izmjena" onClick="showDiv()"><i class="icon-pencil text-danger"></i></center></button>
</td>
<td><center><button type="submit" value="<?php echo $id ;?>" name="brisi" class="icon-bin text-danger"></button></center></td>
</tr>
<?php } ?>
</tbody>
<!--<a onClick="window.open('edit/korpa.php?id= <?=$r['Id']?>','E-cart','width=800,height=500,left=0,top=100,screenX=0,screenY=100,menubar=yes,scrollbars=yes')"> -->
</table>
In the table I have button for editing "Kolicina". Once I click on button in a row, It needs to open div.
In that div, I need to pass values and print them by using js. Once I do that, I need to save it in db by php
Once I click on button div below shows (it works).
<div class="col-lg-9" id="IzmjenaDiv" style="display:none;" >
<div class="panel panel-flat">
<table class="table table-bordered">
<tr>
<th class="">Količina</th>
<td class=""><input type="text" id="id" value="" class="form-control text-info border-info"></td>
<td class=""><input type="text" id="kolicina" name="kolicina" placeholder="Upišite novu količinu" class="form-control text-danger border-danger"></td>
<td class="">
<select class="form-control" id="mjera" name="mjera">
<option value="KG">KG </option>
<option value="KOM">KOM </option>
</select>
</td>
</tr>
</table><hr/>
<div class="pull-right">
<button type="button" class="btn btn-success btn-sm" onclick="savechanges()"> Snimi <i class="icon-play3 position-right"></i></button>
</div>
<br/><br/><br/>
</div>
</div>
I need to make script which willl get two values from row, one from button one from row "Kolicina". Then I need to print those values in div that shows on click.
I made script but it automatically closes div I want to open.
<script>
function showDiv() {
document.getElementById('IzmjenaDiv').style.display = "block";
var y = $(object).parent("center").parent("td").parent("tr").find(".nr center").text();
var x = $(object).attr("value");
window.location.href = "korpa.php?w1=" + x + "&w2=" + y;
}
</script>
Any advice is appreciated
Pass the reference of the TD tag as an argument in the showDiv() function. Change the HTML:
<td><center><button type="button" value="<?php echo $id?>" name="izmjena" onClick="showDiv(this)"><i class="icon-pencil text-danger"></i></center></button>
</td>
Javascript:
function showDiv(obj) {
document.getElementById('IzmjenaDiv').style.display = "block";
var id = $(obj).parent("center").parenrt("td").parent("tr").find(".nr center").text();
}

Show custom prompbox html and pass result to php

I have created a table where it displays the list of users. Every user has a message button. on click of message button, I want to show a custom prompt box where user will be able to type a message. On click of submit, typed message will be sent to php page.
<div style="overflow: auto;height: 400px; width: 100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Id</th>
<th>Package</th>
<th>Date</th>
<th>Referring Agent</th>
<th>Action</th>
</tr>
<?php if(!empty($records)){
foreach($records as $k=>$v){
?>
<tr>
<td><?php echo $v['id']; ?></td>
<td><h3><?php echo $v['package']; ?></h3></td>
<td><?php echo $v['submit_date']; ?></td>
<td><?php echo $v['agent']; ?></td>
<td>
<div class="pagging">
Message
</div>
</td>
</tr>
<?php
}
}else{
?>
<tr>
<td colspan="5" align='center'><?php echo "No record added yet"; ?>
</tr>
<?php
}
?>
<!--<tr class="odd">
<td>2</td>
<td><h3>Lorem ipsum dolor sit amet, consectetur.</h3></td>
<td>12.05.09</td>
<td>Administrator</td>
<td>
<div class="pagging">
Send Notification
</div>
</td>`enter code here`
</tr>-->
</table>
</div>
in php i am getting the id by this way and here I want the message typed as well. Kindly help
if (isset($_GET['id'])){
$id=$_GET['id'];
}
A quick example how to make one:
<input type="button" value="Show" onClick="showDiv()">
This is button that will trigger event (show div).
<div id="someDiv" style="display: none">
<form action="file.php" method="POST">
<textarea name="textArea" rows="4" cols="20"></textarea><br>
<input type="submit" name="submit" value="Submit message">
</form>
</div>
This is your custom prompt (message).
<script>
function showDiv()
{
var div = document.getElementById('someDiv');
if (div)
div.style.display = 'inherit';
}
</script>
This is JavaScript function that displays your custom prompt.
What you need to do is add onClick event to button and insert somewhere JavaScript function (better in separate JS file) and hide your prompt in the same HTML document.
Hope that helps!

Form does not submit or button submit not working

As far as I know this code must work but I when I coded it it does not work
The problem is that the form does not submit. How can I solve this ?
I don't even get the value of the checkbox when checked .
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
<th>Item Photo</th>
<th>Item Name</th>
<th>Stocks</th>
<th>Date Posted</th>
<th>Price</th>
<th>Actions</th>
</thead>
<tbody>
<form action ="<?php echo base_url()?>Shop/test" method="POST">
<?php
$x=1;
foreach($shop_items as $key)
{
?>
<tr>
<td><input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id?>"> <?php echo $x;?> </td>
<td><center><img src="<?php echo base_url()?>uploads/items_main/<?php echo $key->shop_item_main_pic;?>" style = "width:60px;height:50px;"alt=""></center></td>
<td><?php echo mb_strimwidth($key->shop_item_name, 0, 18,"...");?></td>
<td style="width:10px;"><center><button><span class="fa fa-eye"></span></button></center></td>
<td><?php echo date('F,d,Y',strtotime($key->shop_item_date_posted))?></td>
<td><?php if(!$key->shop_item_sale){ echo number_format($key->shop_item_orig_price);}
else{ echo "<font color='red'>".number_format(intval($key->shop_item_orig_price-($key->shop_item_orig_price*($key->shop_item_sale/100))))."</font> ";}?></td>
<td>
Bid | View
</td>
</tr>
<?php
$x+=1;
}
?>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
</tbody>
In the Controller, the structure is like this
if(isset($_POST['delete']))
{
if (isset($_POST["cb"])) {
// Checkbox is checked.
$cb = $_POST["cb"];
echo $cb;
}
else {
$cb = $_POST["cb"];
echo $cb;
}
}
If you emit all the PHP you are left with bad HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
</thead>
<tbody>
<form action="<?php echo base_url() ?>Shop/test" method="POST">
<tr>
<td>
<input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id ?>"> <?php echo $x; ?>
</td>
</tr>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete">
<span class="fa fa-times"></span> delete
</button>
</form>
</tbody>
</table>
form shoul not be a child of tbody. Any content in a table should be inside th or td tags. You should place the form outside of the table and the button inside td tags:
<form action="<?php echo base_url() ?>Shop/test" method="POST">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id ?>"> <?php echo $x; ?>
</td>
</tr>
<tr>
<td>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete">
<span class="fa fa-times"></span> delete
</button>
</td>
</tr>
</tbody>
</table>
</form>

EDIT: add an identifier to a dynamically generated row

I'm pulling down two tables from the db. There's a Javascript function that adds a row from Table2 into the Table1. What i've been trying to do is get the data from Table1 on the confirm_trade.php page so I can put it into the db but can't figure out how to pull that row(item_id). I thought putting the table in a form would allow me to access them through the $_POST but that's not working. How to add an identifier to the jquery row so I can grab on the confirm page?
The appended rows coming from the jQuery function are the rows I need the item_id from.
function addto(obj)
{
var $row = $(obj).parents("tr");
var $table = $("#tradee");
var item_id = $row.find(".item-id").text();
var item_name = $row.find(".item-name").text();
var item_desc = $row.find(".item-desc").text();
var newTR = $("<tr><td>"+item_id+"</td><td>"+item_name+
"</td><td>"+item_desc+"</td></tr>");
$table.append(newTR);
}
Table2:
<div id='fixedDiv'>
<form action="confirm.php" method="post">
<table align="center" id="Table2">
<tr><td>Other Item</td></tr>
<?php while($rowi =$item->fetch_assoc())
{?>
<tr>
<td>
<?php echo $rowi['item_id']; ?>
</td>
<td>
<?php echo $rowi['item_name']; ?>
</td>
<td><?php echo $rowi['item_description'];?></td>
</tr>
<?php } ?>
<tr>
<td><input type="submit" name="submit" value="Continue"/></td>
</tr>
</table>
</form>
</div>
<br>
Table 1:
<table align="center" id="Table1">
<tr><th>item_id</th>
<th>Cat_id</th>
<th>Name</th>
<th>Description</th>
</tr>
<?php while($row =$item_results->fetch_assoc())
{?>
<tr></tr>
<tr>
<td class="item-id"> <?php echo $row['item_id']; ?> </td>
<td><?php echo $cat_id = $row['cat_id']; ?> </td>
<td class="item-name"><?php echo $item_id = $row['item_name'];?></td>
<td class="item-desc"><?php echo $item_descrip = $row['item_description'];?>
</td>
<td><input type="button" class="added" onclick="addto(this)"
value="Add" />
<td><input type="button" class="removed" onclick="remove()"
value="Remove" >
</td>
</tr>
<?php } ?>
</table>
Judging by your code, you can use <input type="hidden" name="some_hidden_data" value="field-value">. be sure that you also wrap your table with <form method="post"></form>
the hidden field will be then included as $_POST['hidden_field_name'];

add input type upon button click

I am trying to add an type upon clicking the button.
Here is my jquery script:
$(function(){
$("#add").click(function(){
$("#inputboxes").append("<tr class='light'><td colspan='3' class='header'>Subject Name</td><td colspan='3'><input type='text' name='subject_name' /></td></tr>");
})
});
Then my HTML markup:
<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table cellpadding="0" cellspacing="0" style="text-align:center;">
<thead>
<tr>
<th colspan="7">Add subject on the list of available subjects</th>
</tr>
</thead>
<tbody id="inputboxes">
<tr class="dark">
<td colspan="7">
<input type="button" id="add" value="Click to add a subject" />
</td>
</tr>
</tbody>
<tbody>
<tr class="dark">
<td colspan="7"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>
#on page top
if(isset($_GET['submit']) print_r($_GET); // the only entry of array is the [submit'] => "Submit"
I can successfully generate an box, however it seems that whenever I hit submit, the box doesn't seem to be passed. Also how can I generate an increment in the name="" of generated box.
For the record, I found the workaround for this, moved the form tag outside of the table. Thanks everyone.
For the submit button to work, you need to put your inputs in a form. You can add an increment in the name if you want to, but it is not necessary. If you submit inputs with the same name, they will be submitted as an array.
Adding increment:
$(function(){
var i = 1;
$("#add").click(function(){
$("#inputboxes").append("<tr class='light'><td colspan='3' class='header'>Subject Name</td><td colspan='3'><input type='text' name='subject_name" + (i++) + "' /></td></tr>");
})
});
Adding form:
<form action="url" method="POST">
<table>
<tbody id="inputboxes">
<tr class="dark">
<td colspan="7"><input type="button" id="add" value="Click to add a subject" /></td>
</tr>
</tbody>
<tbody>
<tr class="dark">
<td colspan="7"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>

Categories

Resources