Develop Reference

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()

How to get select box to show all its contents when checking from python script.

I want to have two select boxes, one empty and one populated. The user will move some of the items from the populated select box to the empty select box. I have that working. What I need help on is that when the items are moved over to the empty select box and submit is pressed, no data is sent concerning the empty select box that is now populated. I have found that this is because as the person moves items over they are not kept selected. Is there something besides a select box that looks like a select box that I can use or is there some other way for me to find out what has been moved from one box to the other?
I am doing the processing of the form in python and have attached the basic code that I am using.
.html:
<html>
<head>
</head>
<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
var SelID='';
var SelText='';
// Move rows from SS1 to SS2 from bottom to top
for (i=SS1.options.length - 1; i>=0; i--)
{
if (SS1.options[i].selected == true)
{
SelID=SS1.options[i].value;
SelText=SS1.options[i].text;
var newRow = new Option(SelText,SelID);
SS2.options[SS2.length]=newRow;
SS1.options[i]=null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList)
{
var ID='';
var Text='';
for (x=0; x < SelList.length - 1; x++)
{
for (y=x + 1; y < SelList.length; y++)
{
if (SelList[x].text > SelList[y].text)
{
// Swap rows
ID=SelList[x].value;
Text=SelList[x].text;
SelList[x].value=SelList[y].value;
SelList[x].text=SelList[y].text;
SelList[y].value=ID;
SelList[y].text=Text;
}
}
}
}
</script>
<body>
<form name="projectBuild" action="../cgi-bin/pythonTest.cgi" enctype="multipart/form-data" method="POST">
<table>
<tr>
<td align="center">
<SELECT NAME="selectList" style="width: 100%" MULTIPLE>
<!--<SELECT NAME="selectList" MULTIPLE>-->
<OPTION VALUE="crc">CRC</option>
<OPTION VALUE="vector">Vector</option>
<OPTION VALUE="mm">Matrix Multiply</option>
<OPTION VALUE="bubblesort">Bubble Sort</option>
<OPTION VALUE="quicksort">Quick Sort</option>
</SELECT>
</td>
<td align="center" >
<input type="button" name="add" value="Add >>" onClick="SelectMoveRows(document.projectBuild.selectList,document.projectBuild.userSelections)">
<br>
<input type="button" name="remove" value="<< Remove" onClick="SelectMoveRows(document.projectBuild.userSelections,document.projectBuild.selectList)">
</td>
<td allign="center">
<SELECT NAME="userSelections" style="width: 100%" MULTIPLE>
<!--<SELECT NAME="userSelections" MULTIPLE>-->
<!-- <OPTION VALUE="placeholder">placeholder</option> -->
</SELECT>
</td>
</tr>
<tr>
<td>
</td>
<td align="center">
<input type="submit" value="Submit">
</td>
</table>
</body>
</html>
.cgi:
#!/usr/bin/python
import cgi, os, sys, commands
myForm = cgi.FieldStorage()
pickedAcc = myForm.getvalue("userSelections")
leftAcc = myForm.getvalue("selectList")
print pickedAcc
print "Left Accelorator list: "
print leftAcc

Before submitting the form, loop through all the options in the userSelections select and set the selected attribute of each option to true. Modify your form as follows
<form name="projectBuild"
onSubmit="selectAll(document.projectBuild.userSelections)"
action="../cgi-bin/pythonTest.cgi"
enctype="multipart/form-data"
method="POST">
In the selectAll method, you loop through all the options and set the selected attribute to true.
Execute a JavaScript when a form is submitted
Javascript loop through ALL HTML select (See the 2nd answer)

naming duplicate drop downs

I have this inside my <table> in jsp. Whenever the add (+) button is clicked, new set of number field and drop down is displayed. I am wondering how can i access the new set of number field and drop down in my servlet. Considering that I can access the first set of number field and drop down given its name="productquantity" and name="productline" by request.getParameter("productline") in my servlet.
HTML:
<td>
<div id="inline">
<p id="addFields">
<input type="number" required name="productquantity" min="1" max="99">
<select name="productline" id="materials">
<option value="CCTV Cameras">CCTV Cameras</option>
<option value="FDAS">FDAS</option>
<option value="Fire Extinguishers">Fire Extinguishers</option>
<option value="Fire Pumps">Fire Pumps</option>
</select>
<br>
</p>
</div>
</td>
<td valign="top">
<button type="button" onclick="addFields();">+</button>
</td>
Javascript:
function addFields() {
document.getElementById('addFields').innerHTML += '<input type="number" min="1" max="99">';
var select = document.getElementById('materials').cloneNode(true);
document.getElementById('addFields').appendChild(select);
document.getElementById('addFields').innerHTML += "<br>";
}

Obviously when you add a field, give it a new name.
var nameAndID = "whatever_" + counter;
element.innerHTML += "<input name='"+nameAndID+"' id='"+nameAndID+" />";
counter = counter + 1;
In your servlet use request.getParameterNames to get a list of all parameter names and loop through it.

Change value of select option using Js without page refresh

So I want to change the select option using javascript but without reloading the page.
I am able to change other element data using document.getElementById.value
but not the select element
This is what I am trying to do: there is a form and a table inside my webpage , the table data is fetched dynamically using php. The form will edit the data. so when the edit button is pressed the row data against it will be automatically filled into the form.
All other elements of the form could fetch the data with my code. except the select option input element.
below is the the code I have used for each element of the form
jsfiddle here:http://jsfiddle.net/ZE6BX/11/
document.getElementById("l_type").value = data[1];
data array contains the values of the row against which edit is pressed!

u can check whether using index value or option value.
var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
if(opt[i].value == 'Ve'){
**opt[i].selected = true;** }
}
this will help u.

This works http://jsfiddle.net/ZE6BX/12/
YOu had a difference in case in between VE in the table and Ve as the value in the select.
Here's the code
HTML:
<div id="l-form">
<form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
<h3>Add</h3>
<label>Name</label>
<input type="text" class="field" id="l_name" name="l_name" />
<label>City</label>
<input type="text" class="field" id="l_city" name="l_city" />
<label>Phone</label>
<input type="text" class="field" id="l_phone" name="l_phone" />
<label>OP</label>
<div class="cl"> </div>
<input type="text" class="field" id="l_op" name="l_op" />
<label>Type</label>
<select class="select_field" id="l_type" name="l_type">
<option value=" ">Select type</option>
<option value="cu">Cu</option>
<option value="Ve">Ve</option>
<option value="Ex">Ex</option>
</select>
<div class="cl"> </div>
<div class="btnp">
<input type="submit" value="Save" name="submit" id="submit" />
</div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr style:padding-left:10px;>
<td>sweet_name</td>
<td>Ve</td>
<td style="display:none">dream_city</td>
<td style="display:none">123456</td>
<td style="display:none">SWAG</td>
<td>
<button class="edit_button" value="Edit" name="button">Edit</button>
</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
var data;
$("#existing").on("click", ".edit_button", function () {
data = $(this).closest("td").siblings().map(function () {
return $(this).text();
}).toArray();
console.log(data[0]); // name
console.log(data[1]); //type
console.log(data[2]); //city
console.log(data[3]); //phone
console.log(data[4]); //op
document.getElementById("l_name").value = data[0];
$("#l_type").value = data[1];
document.getElementById("l_city").value = data[2];
document.getElementById("l_phone").value = data[3];
document.getElementById("l_op").value = data[4];
});
});