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.
Related
My code use 2 same value of dropdown list of Product : in html and javascript.
When i edit my product data, need double update in 2 place.
In html:
<td ><select name="product_text" id="new_product">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
In Javascript
product.innerHTML='<select id="product_text'+no+'">\
<option value="A" id="option-1">A</option>\
<option value="B" id="option-2">B</option>\
<option value="C" id="option-3">C</option>\
</select>' ;
How can i use function in javascript to reduce display dropdown database again in javascript?
My code link: https://jsfiddle.net/bvotcode/b6wj85dt/21/
HTML
<meta name="Table dropdown number va date" content="dropdown number va date">
<html>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Date</th>
</tr>
<tr>
<td ><select name="product_text" id="new_product">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
<td><input type="number" id="new_quantity"></td>
<td><input type="date" id="new_date"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
Javascript
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var product=document.getElementById("product_row"+no);
var quantity=document.getElementById("quantity_row"+no);
var date=document.getElementById("date_row"+no);
var product_data=product.innerHTML;
var quantity_data=quantity.innerHTML;
var date_data=date.innerHTML;
product.innerHTML='<select id="product_text'+no+'">\
<option value="A" id="option-1">A</option>\
<option value="B" id="option-2">B</option>\
<option value="C" id="option-3">C</option>\
</select>' ;
document.getElementById("product_text"+no).value = product_data;
quantity.innerHTML="<input type='number' id='quantity_text"+no+"' value='"+quantity_data+"'>";
date.innerHTML="<input type='date' id='date_text"+no+"' value='"+date_data+"'>";
}
function save_row(no)
{
var product_val=document.getElementById("product_text"+no).value;
var quantity_val=document.getElementById("quantity_text"+no).value;
var date_val=document.getElementById("date_text"+no).value;
document.getElementById("product_row"+no).innerHTML=product_val;
document.getElementById("quantity_row"+no).innerHTML=quantity_val;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_product=document.getElementById("new_product").value;
var new_quantity=document.getElementById("new_quantity").value;
var new_date=document.getElementById("new_date").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='product_row"+table_len+"'>"+new_product+"</td><td id='quantity_row"+table_len+"'>"+new_quantity+"</td><td id='date_row"+table_len+"'>"+new_date+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_product").value="";
document.getElementById("new_quantity").value="";
document.getElementById("new_date").value="";
}
First off, consider posting this over at https://codereview.stackexchange.com/ to get an extensive review of your code, because there is a lot that could be done better. Two suggestions for now:
Avoid hard coding HTML inside your JS (this question is a first good step)
There is normally no need to give everything a unique ID. Instead you usually can reference everything in relation to each other, possibly with help of classes. For example, the edit/save/delete buttons can look up which table row their in to find the elements they needs.
In this specific case you could clone the existing select from the HTML:
val productText = document.getElementById("product_text").cloneNode();
// Change the ID
productText.id = "product_text" + no;
// Set the value
productText.value = product_data;
// Clear the parent
// (There are better ways to empty an element, but I'm just using this for now)
product.innerHTML = "";
// Insert the cloned element
product.appendChild(productText);
i'm create form for expose item i want fresh text field. when user click button ADD
function fncAdd() { //ADD ROW AND CLONE
var tb = document.getElementById('tbl');
var tbody = document.createElement('tbody'); // fixed IE :>
tb.insertBefore(tbody, null);
var clone = document.getElementById('cln').cloneNode(true);
tbody.insertBefore(clone, null);
}
function fncDelete() { //DELETE ROW
var tb = document.getElementById('tbl');
var del = tb.rows.length;
if (del > 1) {
tb.deleteRow(del - 1);
}
}
<tr id="cln"> //CALL CLONE FUNCTION
<div align="center">1</div>
</td>
<?php //CONNECT DATABASE
include 'dbConfig.php';
$query = $db->query("SELECT * FROM accountcode ORDER BY acc_id ASC ");
$rowCount = $query->num_rows;
?>
<td>
<select id="accountcode"> //DROPDOWN 2ND BY AJAX
<option value=""> - - Please select - - </option>
<?php
if($rowCount > 0){
while($row=$query->fetch_assoc()){
echo '<option value="'.$row['acc_id'].'">'.$row['acc_name'].'</option>';
}
}else{
echo '<option value="">Accountcode not available</option>';
}
?>
</select>
</td>
<td>
<select id="item"> //DROPDOWN 2ND BY AJAX
<option value=""> - - Select accountcode first - -</option>
</select>
</td>
<td> //DETAIL BOX
<textarea rows=4 cols=25 class="txtDETAIL" maxlength="100"> </textarea>
</td>
<td>
<input type="text" class="txtAMOUNT" size="5"> //AMOUNT BOX
</td>
<td>
<input type="text" class="txtUNIT" size="5"> //UNIT BOX
</td>
<td> //NOTE BOX
<textarea rows=4 cols=15 class="note" maxlength="60"> </textarea>
</td>
<td> //UPLOADFILE FOR PICTURE OR STOCK
<a href='upload.php?id={$row[' id="id" ']}'>CLICK</a>
</td>
</table>
<p>
<input type="button" value="ADD" onClick="fncAdd()"> //BUTTON ADD
<input type="button" value="DELETE" onClick="fncDelete()"> //BUTTON DELETE
</p>
I am having trouble to create text field value when user click button i want to clone function not copy old value from 1st row and column NO can auto increment
how can i do that
EXAMPLE
To clear form data you can use,
document.getElementById("form1").reset();
Your form should look like,
<form id="form1">
<input .....
</form>
Something to be aware of, is the cloned element has unique ID's (eg, append -1 etc onto the original ID).
Also, I've recently done this using jQuery, however, I used string.replace(regex, ''); instead of this method.
Oh yeah, an example to edit to suit your situation:
var element = document.getElementById('id-of-element').cloneNode(true);
element.childNodes[x].nextSibling.childNodes[y].value = '';
document.getElementById('target-element').insertBefore(element, null);
Kind regards,
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()
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)
I have a form calculator, when customer submit the form(input.php), it will open another page display the results(output.php target _blank). However, when they want to use the same page(input.php) to get the result again, the submit button not working anymore, unless they change some value in the input field, and for the drop down menu, the submit button won't work, even you changed the drop down value.
Can someone please help me to fix the problems? thanks. I just want the button enabled all the time, here is the partially code from input.php.
<form name="form1" action="output.php" method="post" target="_blank">
<table id="distax" width="750">
<th colspan="6">F. Discount & Taxes</th>
<tr>
<td width="120"><b><input type="radio" name="discountmu" id="disc" value="-" />Discount (-)<br /> <input type="radio" name="discountmu" id="mu" value="+" />Markup (+)</b></td>
<td width="80">% <input type="text" name="discmuv" size="3" value="0"></td>
<td width="120"><b>2. Tax Goods:</b></td>
<td width="80">% <input type="text" name="txgood" size="3" value="0" onkeyup="data_change(this);"></td>
<td width="120"><b>3. Tax Services:</b><br />(for items in G)</td>
<td width="*">% <input type="text" name="txservice" size="3" value="0" onkeyup="data_change(this);"></td>
</tr>
<table id="extra" width="750">
<th colspan="6">E. Extras</th>
<tr>
<td width="170"><b>1. Extra railing (total):</b></td>
<td width="70"><input type="text" name="extrail" size="2" value="0" onkeyup="data_change(this);">ft</td>
<td width="110"><b>2. Custom Color: </b></td>
<td width="*"><select size="1" value="<?=$_SESSION['name']?> " name="R4" id="R4" onchange="showme()">
<option selected value="noSS">Sand Stone (Ral 1019)</option>
<option value="noEW">Euro White (Ral 9010)</option>
<option value="noQG">Quartz Grey (Ral 8014)</option>
<option value="noJB">Java Brown (Ral 8014)</option>
<option value="yes">Custom</option>
</select>
<input type="text" id="color1other" name="color1other" style=" position:relative;display:none;" Size=20 value="enter custom color here">
</td>
</tr>
<tr>
<td width="170"> <b>3. Height adjustment [ft // cm]:</b></td>
<td width="*">
<select size="1" name="D8">
<option value="1.125">+2'6" // +76cm</option>
<option value="1.1">+2'0" // +61cm</option>
<option value="1.075">+1'6" // +46cm</option>
<option value="1.05">+1'0" // +30cm</option>
<option value="1.025">+0'6" // +15cm</option>
<option selected value="1">0</option>
<option value="0.985">-0'6" // -15cm</option>
<option value="0.97">-1'0" // -30cm</option>
<option value="0.955">-1'6" // -46cm</option>
<option value="0.94">-2'0" // -61cm</option>
<option value="0.925">-2'6" // -76cm</option>
<option value="0.91">-3'0" // -91cm</option>
</select>
</td>
<td width="110"><b>4. Freight (Sea/Land/Air): </b></td>
<td width="*">
<input type="text" id="freight" name="freight" Size=12 value="0"><b>USD</b>
</td>
</tr>
<input type="Submit" Value="Get your quote"> as
<input type="radio" value="detail" checked name="report">Dealer <input type="radio" name="report" value="short"> Client version in English
</form>
thanks for the reply, here is the code for the javascript, didn't see anything related to the submit button
//Date: 05/27/2009 Edited by EG
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
var val3=document.form1.load.value;
//Date: 07/27/2009 Edited by EG
//self.location=self.location + '&cat=' + val + '&load=' + val3;
//self.location='webcalc_input.php?PHPSESSID=' + ssidjs + '&cat=' + val + '&load=' + val3;
self.location='webcalc_input.php?cat=' + val + '&load=' + val3;
}
function reload3(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
var val2=form.subcat.options[form.subcat.options.selectedIndex].value;
var val3=document.form1.load.value;
//Date: 07/27/2009 Edited by EG
self.location= 'webcalc_input.php?cat=' + val + '&cat3=' + val2 + '&load=' + val3;
//self.location='webcalc_input.php?PHPSESSID=' + ssidjs + '&cat=' + val + '&cat3=' + val2 + '&load=' + val3;
}
function data_change(field) {
var check = true;
var value = field.value; //get characters
//check that all characters are digits, ., -, or ""
for (var i = 0; i < field.value.length; ++i) {
var new_key = value.charAt(i); //cycle through characters
if (((new_key < "0") || (new_key > "9")) && !(new_key == "") && (new_key != ".")) { //Included . to enable decimal entry
check = false;
break;
}
}
//apply appropriate colour based on value
if (!check) {
field.style.backgroundColor = "red";
}
else {
field.style.backgroundColor = "white";
}
}
function validateEmpty(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error = "The required field has not been filled in.\n"
} else {
fld.style.background = 'White';
}
return error;
}
The text input contains a javascript function which you don't show in your code called data_change(). If I understand the question, its likely that that function is disabling the submit button and enabling it when the text changes. This is only an assumption without seeing your javascript code.
enter code here
Find the definition of the data_change() function and look for something relating to the submit button and comment it out.
You may remove the onkeyup="data_change(this);" from the <input> tag, but that could break other functionality!