Develop Reference

Input fields added dynamically through jquery not being submitted

I have made a table where if a user clicks on a td it converts into an input field with name and value.
The fields are created successfully but are not submitted along with the form.
In My HTML/PHP :
<tr>
<form action='form_handlers/assign_query.php' method='POST'>
<td >{$row['id']}</td>
<td class='editable-td' data-name='name'>{$row['name']}</td>
<td class='editable-td' data-name='phone_no'>{$row['phone_no']}</td>
<td class='editable-td' data-name='email'>{$row['email']}</td>
<td class='editable-td' data-name='type'>{$row['type']}</td>
<td class='short-cell editable-td textarea' data-name='query'>
<div class='scrollable'>{$row['query']}</div>
</td>
<td class='editable-td' data-name='agents'>{$row['agents']}</td>
<td class='editable-td'><button type='submit' class='cstm-btn' name='update_query'><i class='fa fa-pencil'></i></button></td>
</form>
</tr>
In my Js :
$('.editable-td').dblclick(function() {
if($(this).hasClass('enabled')) {
console.log('already enabled');
} else {
$(this).addClass('enabled');
if($(this).hasClass('textarea')) {
var text_content = $(this).find('.scrollable').html();
var name = $(this).data('name');
console.log(name);
$(this).html("<textarea name='"+name+"'>"+ text_content +"</textarea>");
}
else {
var text_content = $(this).html();
var name = $(this).data('name');
console.log(name);
$(this).html("<input type='text' name='"+name+"' value='"+ text_content +"' ></input>");
}
}
});
In form_hanlders/assign_query.php :
<?php
print_r($_POST);
?>
Input fields dynamically added by jQuery don't show up in $_POST array. But if I manually type in the exact same line that jQuery generates and paste it in the td, it gets submitted. Any help?
P.S : I have already read this , and this and this and they don't help.

The problem is because your HTML is invalid. You cannot have a form element as a child of a tr. If you check the HTML in the dev tools DOM inspector you'll see that the form element has either been moved outside of the table (so it no longer contains the input or textarea elements) or it has been removed completely.
To fix the problem the form needs to wrap the entire table, like this:
<form action="form_handlers/assign_query.php" method="POST">
<table>
<tbody>
<tr>
<td>{$row['id']}</td>
<td class="editable-td" data-name="name">{$row['name']}</td>
<!-- additional cells... -->
</tr>
</tbody>
</table>
</form>

add text field dynamically in to a html table

$(document).ready(function() {
var maxField = 10;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = '<div><input type="text" name="Tape_Code[]" value=""/>delete</div>';
var x = 1;
$(addButton).click(function() {
if (x < maxField) {
x++;
$(wrapper).append(fieldHTML);
}
});
$(wrapper).on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
<?php
include_once 'dpconnect.php';
$que=mysqli_query($MySQLiconn,"select Backup_Name from admin_backup_list ");
if(isset($_POST['confirm'])) {
$Date=date('d/m/y');
$Backup_Name=$_POST['Backup_Name'];
$Tape_Code = $_POST['Tape_Code'];
$Operator_Approval = $_POST['Operator_Approval'];
$Operator_Remark = $_POST['Operator_Remark'];
$abc=mysqli_query($MySQLiconn,"insert into backup_details(Date, Backup_Name, Tape_Code,Operator_Approval,Operator_Remark)values('$Backup_Name','$Tape_Code','$Operator_Approval','$Operator_Remark')");
}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<?php $Date=date( 'd/m/y'); ?>
<form name="form2" action="" method="post">
<table>
<tr>
<td width="103">Date</td>
<td width="94">Backup_Name</td>
<td width="94">No Of Tapes</td>
<td width="53">Tape Code</td>
<td width="71">Operator Approval</td>
<td width="144">Operator Remark</td>
</tr>
<?php if ($que->num_rows > 0) { while ($row = mysqli_fetch_array($que)) { ?>
<tr>
<td>
<?php echo $Date; ?>
</td>
<td>
<?php echo $row[ 'Backup_Name']; ?>
</td>
<td>
<input type="text" name="No_Of_Backup">
</td>
<td>
<div class="field_wrapper">
<input type="text" name="Tape_Code" value="" />add
</div>
</td>
<td>
<input type="text" name="Operator_Approval">
</td>
<td>
<input type="text" name="Operator_Remark">
</td>
<td colspan="8">
<input type="submit" name="confirm" value="Confirm">
</center>
</td>
</tr>
<?php } } ?>
</table>
</form>
</body>
</html>
I'm doing this code in php. I need a help to add text fields dynamically in to the table's particular column. I have done the code using JavaScript also. But the problem is when I add field in one row, all rows are updating with extra fields. I need a help. How can I insert those data to MySQL?

The problem with your code is that you are using the class selector to select the elements. Class selector returns array like object of all the elements having that class.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
you can find out which element was clicked if you change your code similar to below one.
add
and in the script
function addButton(ev) {
var clickedElement = console.log(ev.target);
}
Now you have the element which was clicked by user and you can find the parent td/tr and append html for textbox.

In $Tape_Code = $_POST['Tape_Code']; You will get array of text input you have to insert it in database in form that you want.
$Tape_Code = $_POST['Tape_Code']
foreach($Tape_Code as $code){
echo $code;
}

How to insert autocomplete jquery in innerhtml generated textbox

The autocomplete jquery shows list of all users in the database, when atleast 2 characters are entered in the textbox. The autocomplete is working on a normal input field, but when genereated through innerHTML it is not working.
The autocomplete is working on the following field:-
<input type="text" id="j_d_permit_by[]" name="j_d_permit_by[]" >
A click on the button will add other fields as well calling the addjobdesc function:-
<img src="images/add.png" width="12" height="12"> Add New Job Description<br />
The function:-
function addjobdesc() {
var div = document.createElement('div');
div.className = 'row';
div.innerHTML = '<table id="tblObs" name="tblObs" width="70%" bgcolor="#CCCCCC"><tr bordercolor="#FFFFFF">
<td colspan="5"><b>Job Description (Work Ppermit/ Activity)</b></td></tr>
<tr bgcolor="#33CC00">
<td ><center> <b>Exact Location</b> </center></td> <td><b><center>Permit Initiated By<br />/<br />Activity Supervised by</center></b></td>
<td><b><center>Permit Accepted By<br />/<br />aActivity Executor</center></b></td><td><b><center>For What Permit Issued</center></b></td>
<td><b><center>Observation</center></b></td></tr>
<tr><td><center><select name="s_area[]" id="s_area" onchange="addSubArea()">
<option value="0">Chose Sub Area</option></select></center></td>
<td><input type="text" id="j_d_permit_by_add" name="j_d_permit_by[]"></td>
<td><center><select id="j_d_accept_by[]" name="j_d_accept_by[]" ><option value="0">Select User</option><?php $users = getUserS();
while($usersss = mysql_fetch_array($users)){ ?>
<option value="<?php echo $usersss[0];?>"><?php echo $usersss[4]." ".$usersss[5]; ?></option>
<?php } ?>
</select></td>
<td><center><textarea name="permit_ref[]" cols="30"> </textarea></center></td>
<td><center><textarea name="obs_permit[]" id="obs_permit" cols="30"></textarea></center></td></tr></table><input class="submit" type="button" value="Remove" onclick="removeR0ow__(this)">';
<!--<input type="hidden" name="j_d_Location[]" id="j_d_Location" value="" /><input type="text" name="area_Location[]" id="area_Location" value="" readonly="readonly" />-->
document.getElementById('job_desc').appendChild(div);
jQuery(document).ready(function(){
$('#j_d_permit_by_add').autocomplete({
source: 'suggest_name.php',
minLength:2
});
});
var Max_Length = parseInt(document.getElementsByName('s_area[]').length)-1;
document.getElementsByName('s_area[]').item(Max_Length).innerHTML = '';
document.getElementsByName('s_area[]').item(Max_Length).innerHTML = document.getElementById('sarea_div').innerHTML;
}
I want the autcomplete to work on the generated j_d_permit_by[] field in the innerHTML.
Really appreciate your help.

You have bind the autocomplete in jQuery(document).ready but at that time there is no input exists with id =j_d_permit_by_add and hence the function is not bind to the input. You are generating the input dynamically so you have to bind autocomplete function in following way..
Try this to Bind the autocomplete function:
jQuery(document).ready(function(){
$(document).on('#j_d_permit_by_add', selector, function() {
$(this).autocomplete({
source: 'suggest_name.php',
minLength:2
});
});
});
You can refer https://stackoverflow.com/a/25114244/1659563
#Guruprasad is also right, you can bind the autocomplete function after the input is generated dynamically in function addjobdesc()

Using Jquery Keyup function to pass variable from one input field to another

I am trying to autopopulate an input field (location-name) with the value entered in another field (location-address). I have looked online everywhere and managed to make the JS snippet work on a straightforward example, but for some reason this is not working with the following php code.
Just to clarify, I would like the value entered in "location-address to be passed to "location-name".
<script>
$('#location-address')
.keyup(function() {
var value = $(this).val();
$('#location-name').text(value);
})
.keyup();
</script>
<tr class="em-location-data-name">
<th style="padding-top: 14px;">
<?php _e ( 'Event unique identifier:', 'dbem' )?>
</th>
<td>
<input id="location-name" type="text" name="location_name" />
</td>
</tr>
<tr class="em-location-data-address">
<th style="padding-top: 14px;">
<?php _e ( 'Address:', 'dbem' )?> </th>
<td>
<input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
</td>
</tr>

Firstly your code needs to be placed in a document.ready handler. Secondly, you need to use val() not text() to set the value of an input field.
$(function() {
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val(value);
}).keyup();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="em-location-data-name">
<th style="padding-top: 14px;">
<?php _e ( 'Event unique identifier:', 'dbem' )?>
</th>
<td>
<input id="location-name" type="text" name="location_name" />
</td>
</tr>
<tr class="em-location-data-address">
<th style="padding-top: 14px;">
<? php _e( 'Address:', 'dbem') ?>
</th>
<td>
<input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
</td>
</tr>
</table>

You need to wrap your jQuery code in $(document).ready(); so that jQuery binds all HTML elements.
Corrected code:
<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val( value );
});
}).keyup();
</script>

Use this
<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val( value );
});
});
</script>

Take checkbox values and add them to text input

I have a text input that holds email addresses, each one gets separated by a , to indicate a breaking point for php.
<input type="text" name="to" class="form-control">
Rather than having to retype every email address every time, I have came up with a table that holds all my email addresses and allows me to select the ones I want to send emails to.
<table class="table">
<thead>
<tr>
<th>
</th>
<th>
Client
</th>
<th>
Email
</th>
</tr>
</thead>
<tbody>
<?php foreach($clients as $client): ?>
<tr>
<td>
<input id="toList" name="to" type="checkbox">
</td>
<td>
<?php echo $client->name.' '.$client->last_name; ?>
</td>
<td>
<?php echo $client->email; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Add To Email
Now, I just need to figure out a way, using javascript that when the add button is clicked javascript adds all the values of all the checked checkboxes to the to input field dividing each one by ,.

hi i have created a jsfiddle for you..
code:-
$(document).ready(function() {
$("#btn").click(function() {
var checkedEmails = $("input[name=to]:checked").closest("tr");
var data = [];
$.each(checkedEmails, function() {
data.push($.trim($(this).find("td:eq(2)").text()));
});
var str = data.join(",");
$("#txt").val(str);
});
});
working example:-
http://jsfiddle.net/XUjAH/1102/
thanks

Change your checkbox to look like this
<input id="toList<?php echo $counter; ?>" class="email-check-box" name="to" type="checkbox" value="<?php echo $client->email;?>">
Javascript part
$(".add").on("click", function() {
$('.email-check-box').each(function () {
var current= (this.checked ? $(this).val() : "");
if(current) {
$(".form-control").val(
$(".form-control").val() + current+ ","
);
}
});
});