Develop Reference

Didn't focus this select box in my table by arrow key but all another field successfully focus

I am beginner in jQuery and I have a scenario in which I have select boxes and text fields in my table; I implemented the arrow keys (down for next, up for prev) for shifting the focus to the field by giving a class to each field.
The problem is the select box that shows its options through Ajax is not focusing.
jQuery for arrow key shift:
var classNames = $(this).attr("class").split(" ");
// console.log("aftersplit:" + classNames);
for ( var contarray = 0, l = classNames.length; contarray < l; contarray++ )
{
var current_iterating_class=classNames[contarray];
if(current_iterating_class.indexOf("table2_index_")!= -1)
{
var current_class=current_iterating_class;
// console.log("currently:=="+current_class);
}
// console.log("current_iterating_class===" +current_iterating_class );
}
console.log("current_class=="+current_class);
var pos= current_class.substr(current_class.indexOf("_") +7);
// console.log("position"+pos);
pos=Number(pos);
if(e.keyCode == 40){ //downarrow(forw)
pos += 1;
// console.log("pos+1=" + pos);
$(".table2_index_"+pos).focus();
if(this.tagName == "SELECT" || this.tagName == "select") {
}
// console.log("down"+pos);
}
if(e.keyCode==38){
pos -= 1;
$(".table2_index_"+pos).focus();
// console.log("upp"+pos);
}
Table HTML:
<td>
<select class="typecode inputbox input_table2 table2_index_1" name="typecode[]">
<option value="S">S</option>
<option value="R">R</option>
<option value="O">O</option>
</select>
</td>
<td><input type="text" class="code inputbox input_table2 table2_index_2" name="code[]" style="width: 100%">
<input type="hidden" class="product_id" name="product_id[]" style="width: 100%">
</td>
<td id="item" class="item" align="center">
<select class="select_item inputbox input_table2 table2_index_3" name="item[]">
<option selected="selected"></option>
</select>
<input type="hidden" name="product_id_val" value="0">
</td>
<td><input type="text" class="type inputbox input_table2 table2_index_4" name="type[]" style="width: 100%"></td>
Ajax for select's options:
$(".select_item").select2({
ajax: {
url: "' . $selectitem . '",
dataType: "json",
}
}).on("change", function () {
var this_=$(this);
this_.closest("tr.rowacc").find(".product_id").val(this.value);
getitemvalues( this.value,this_);
});
The other static select boxes are working and I can't find the issue.

$('#id').select2('open');
//Init Select2
$('.b_select').select2();
// Make Select2 respect tab focus
function dropdownFocus(){
$(window).keyup(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 40 && jQuery('.select2-search__field:focus').length) {
jQuery('.b_select').select2('open');
}
});
}
dropdownFocus();//init function

Loop through dynamically generated HTML elements with the same Class and build objects with their data

I am trying to collect data from a table that is dynamically generated on a button click. As you will see below, the button creates a new text box and a multiselect drop down. Currently, my code will only grab the first value from both the textbox and the dropdown.
My end goal is to create an object of key/values that will look like this:
{"group 1":[multiselect value, multiselect value], "group 2": [multiselect value, multiselect value, multiselect value], "group 3": [multiselect value, multiselect value]}
Below is my current code. Any guidance is appreciated!
function servicePackageAdd()
{
var serviceName = document.getElementById('servicePackageText').value;
var serviceList = document.querySelectorAll('.service');
var serviceGroupName = [];
for (var i = 0; i < serviceList.length; i++)
{
serviceGroupName.push(serviceList[i].querySelector('input.packageGroupName').value);
var sourceType = document.querySelector('select#multiple-checkboxes');
var serviceArray = [];
for (i = 0; i < sourceType.selectedOptions.length; i++)
{
serviceArray.push(parseInt(sourceType.selectedOptions[i].value));
}
var groupName = {};
groupName[serviceGroupName] = serviceArray;
ungroupedServiceArray = [];
}
}
document.getElementById('addGroup').onclick = duplicate;
function duplicate()
{
var original = document.getElementById('addService');
var rows = original.parentNode.rows;
var i = rows.length - 1;
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplic" + (i); // there can only be one element with an ID
original.parentNode.insertBefore(clone, rows[i]);
}
var divs = ["addService"];
var visibleDivId = null;
function toggleCheckbox(divId)
{
if(visibleDivId === divId)
{
visibleDivId = null;
} else
{
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs()
{
var i, divId, div;
for(i = 0; i < divs.length; i++)
{
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId)
{
div.style.display = "block";
}
else
{
div.style.display = "none";
}
}
}
function servicePackageName()
{
var servicePackageName = document.getElementById('servicePackageText').value;
var servicePackageNameBold = servicePackageName.bold().fontcolor('#337ab7');
document.getElementById('servicePackageInputName').innerHTML = servicePackageNameBold;
}
<div>
<div class="servicePackageCreation">
<h2><b>Service Package Administration</b></h2>
<br>
<span><p><b>Create Service Package: </b></p><p id="servicePackageInputName"></p></span>
<div class="form-group">
<input type="text" class="form-inline" id="servicePackageText" minlength= 1 placeholder=" Service Package Name" required>
<button type="button" class="btn btn-primary" onclick="toggleCheckbox('addService'); servicePackageName();" id="addGroupsAndServices">Next</button>
</div>
<table>
<tr id="addService" class="service" style="display:none">
<td>
<span><b>Service Group Name</b></span>
<input type="text" name="servicetype" id="packageGroupName" class="packageGroupName"/>
</td>
<td>
<span><b>Add Services</b></span>
<select id="multiple-checkboxes" multiple="multiple">
<?php echo $servicehtml ?>
</select>
</td>
</tr>
<tr>
<td>
<button id="addGroup" class="btn btn-primary" onclick="duplicate()">Add More</button>
</td>
</tr>
</table>
<button type="button" class="btn btn-success test1234" onclick="confirmAddButton()" id="adminBulkConfirm">Create</button>
<br>
<br>
</div>

Using Object.values Array#map and Array#reduce.
const services = document.querySelectorAll(".service");
const res = Object.values(services)
.map((service, i) => {
const inputText = service.querySelector('.packageGroupName').value;
return {
[inputText]: [...service.querySelectorAll('option:checked')].map(o => Number(o.value))
}
})
.reduce((a, c) => ({ ...a,...c}), {});
console.log(res);
table {
display: none;
}
<table>
<tr class="service">
<td>
<span><b>Service Group Name</b></span>
<input type="text" name="servicetype" id="packageGroupName" class="packageGroupName" value="Banana" />
</td>
<td>
<span><b>Add Services</b></span>
<select class="multiple-checkboxes" multiple="multiple">
<option value="1" selected>12</option>
</select>
</td>
</tr>
<tr class="service">
<td>
<span><b>Service Group Name</b></span>
<input type="text" name="servicetype" id="packageGroupName" class="packageGroupName" value="Orange" />
</td>
<td>
<span><b>Add Services</b></span>
<select class="multiple-checkboxes" multiple>
<option value="2" selected>2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" onclick="duplicate()">Add More</button>
</td>
</tr>
</table>

How to add the content of a textarea to the body of an email

Hi there: I've created a form in html with a table using select to choose between options. One option is "Other" which generates a new text area input field. Once the form has been completed the user can email it to themselves. I can get this to work for all the select options except the new 'Other" category. Instead of adding the new text to the email body it states "[object HTMLTableCellElement]". I have been trying to get this to work but have been unable to solve it or find an answer that helps me - as a relative newbie to coding I can't help thinking I'm missing something obvious...any help or suggestions would be great, thanks
`
Email new input
<form action="#" method="post" id="myForm">
<table id="myTable">
<tr>
<td><select name="variableList" id="variableList" class="select">
<option value="" disabled selected>Please choose...</option>
<option value="Var 1">Var 1</option>
<option value="Var 2">Var 2</option>
<option value="Var 3">Var 3</option>
<option value="Other">Other...</option>
</select></td>
</tr>
<tr>
<td id="newVariable"></td>
</tr>
<tr>
<td><input type="email" name="email" id="emailID" placeholder="Your email address..."></td>
</tr>
<tr>
<td><button type="button" class="buttons" onclick="sendEmail()" id="sendEmail()">Email</button></td>
</tr>
</table>
</form>`
And this is the javascript:
document.getElementById("variableList").addEventListener("change", generateTxtBox);
var x = 1;
function generateTxtBox(){
//Create new input textarea if "Other" is selceted from list of options
if (x==1 && document.getElementById('variableList').value == "Other") {
var input = document.createElement("input");
input.setAttribute('type', 'textarea');
input.setAttribute('placeholder', 'Your new variable...');
var parent = document.getElementById("newVariable");
parent.appendChild(input);
x += 1;
}
}
function sendEmail(){
var email = document.getElementById("emailID").value;
var subject = "Email variables";
var variableList = document.getElementById("variableList").value;
document.getElementById("newVariable").addEventListener("change", getText);
function getText(){
document.getElementById("newVariable").textContent = newVariable;
}
if (document.getElementById('variableList').value == "Other"){
window.location = "mailto:" + email + "?subject=" + subject + "&body=" + newVariable;
} else {
window.location = "mailto:" + email + "?subject=" + subject + "&body=" + variableList;
}
}

Assignments work like this: variable = [new value];
Next, you're adding an event listener right before "sending" the email, meaning the function you're setting as handler is never run. Even if it did run, the order is wrong.
Finally, newVariable is actually the id of the <td> you have, which means you're adding a textual representation of the table cell as body to the email link.
document.getElementById("variableList").addEventListener("change", txtBox);
function txtBox() {
// show textarea if "Other" is selected from list of options
document.getElementById("txtBoxRow").style.display = this.value == "Other" ? "table-row" : "none";
}
function sendEmail() {
var email = document.getElementById("emailID").value;
var subject = "Email variables";
var variableList = document.getElementById("variableList").value;
var body = variableList == "Other" ? document.getElementById("newVariable").value : variableList;
window.location = "mailto:" + email + "?subject=" + subject + "&body=" + body;
}
#txtBoxRow {
display: none
}
<table id="myTable">
<tbody>
<tr>
<td>
<select id="variableList" class="select">
<option value="" disabled selected>Please choose...</option>
<option>Var 1</option>
<option>Var 2</option>
<option>Var 3</option>
<option value="Other">Other...</option>
</select>
</td>
</tr>
<tr id="txtBoxRow">
<td>
<textarea id="newVariable"></textarea>
</td>
</tr>
<tr>
<td>
<input type="email" name="email" id="emailID" placeholder="Your email address...">
</td>
</tr>
<tr>
<td>
<button class="buttons" onclick="sendEmail()">Email</button>
</td>
</tr>
</tbody>
</table>

Adding new row to the table using javascript / jquery

I want to add row to the table on clicking Add button and delete row using Delete button using javascript/jquery. I have tried writing the following code:
<script src="/js/jquery-2.0.3.js"></script>
<script>
/* Javascript for phone numbers*/
$(document).ready(function()
{
var counter = 2;
var count= 4;
$("#add_phone").click(function()
{
alert("whoah it worked");
if(counter>=count)
{
alert("Only " + count + " Phone number allowed.");
return false;
}
var htmlToAppend = '<tr id="pn'+ counter +'"><th>
<select class="phone_no">
<option value="home">home</option>
<option value="Business">Business</option>
<option value="Business2">Business 2</option>
</select>
</th>
<td><input type="text"/></td></tr>';
$("#phone_number").append ( htmlToAppend );
newTableRow.appendTo("#phone_number");
counter++;
});
$("#delete_phone").click(function()
{
if(counter==2)
{
alert("Cannot remove phone number");
return false;
}
counter--;
$("#pn" + counter-1).remove();
});
});
But the alert message alert("whoah it worked"); doesn't get displayed i.e its not entering the function.
<div class="info_type">
Phone numbers <hr>
<table id="phone_number">
<tr id="pn1">
<th>
<select class="phone_no">
<option value="home">home</option>
<option value="Business">Business</option>
<option value="Business2">Business 2</option>
</select>
</th>
<td><input type="text"/></td>
</tr>
</table>
<input type="button" id="add_phone" value="Add"/>
<input type="button" id="delete_phone" value="Delete"/>
</div>
I really want this solution. Can anybody help me??
PS: I am using Ruby on rails

Your string append is not well formed.
var htmlToAppend = '<tr id="pn'+ counter +'"><th><select class="phone_no"> <option value="home">home</option> <option value="Business">Business</option> <option value="Business2">Business 2</option></select> </th><td><input type="text"/></td></tr>';
Working sample in fiddle http://jsfiddle.net/shree/jNA4x/

try to rewrite htmlToAppend variable with a \n\ in the end of each line
demo

You can't have line breaks in your htmlToAppend variable,
var htmlToAppend = '<tr id="pn'+ counter +'"><th><select class="phone_no"><option value="home">home</option><option value="Business">Business</option><option value="Business2">Business 2</option></select></th><td><input type="text"/></td></tr>';
$("#phone_number").append ( htmlToAppend );
Example Code
A common pitfall for me as well.

increment the counter you did not increments it.
for more help use like the below example.
<html>
<h1>Add remove dynamically</h1>
<head>
<title></title>
</head>
<body>
Living in:
<table id="purchaseItems" name="purchaseItems" style="display: inline-table;">
<tr id="tr_1">
<td>
<input type="text" name="living_1" class="tbDescription next" required />
</td>
<td>
<input type="text" name="biggest_1" class="next" required />
</td>
<td>
<input type="text" name="nextbiggest_1" class="nextRow" required />
</td>
<td>
<input type="button" name="addRow[]" id="remove_1" class="removeRow" value='-' />
</td>
<td>
<input type="button" name="addRow[]" id="add_1" class="add" value='+' />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$("#remove_1").hide();
$(document).ready(function () {
$(document).on('click', '#purchaseItems .add', function () {
var total_row = $('#purchaseItems tr').length;
var rows = $('#purchaseItems tr').length+1;
if(total_row < 5)
{
// clear the values
$('#purchaseItems tr:last').after('<tr id="tr_'+rows+'"><td><input type="text" name="living_'+rows+'" id="living_'+rows+'" class="tbDescription next"></td><td><input type="text" name="biggest_'+rows+'" id="biggest_'+rows+'" class="next"></td><td><input type="text" name="nextbiggest_'+rows+'" id="nextbiggest_'+rows+'" class="nextRow"></td><td><input type="button" name="addRow[]" id="remove_'+rows+'" class="removeRow" value="-"></td><td><input type="button" name="addRow[]" id="add_'+rows+'" class="add" value="+"></td></tr>');
$(".add").hide();
$(".removeRow").show();
$("#add_"+rows).show();
}
else
{
alert("Maximum limit reached.")
}
});
$(document).on('keypress', '#purchaseItems .next', function (e) {
if (e.which == 13) {
var v = $(this).index('input:text');
var n = v + 1;
$('input:text').eq(n).focus();
//$(this).next().focus();
}
});
$(document).on('keypress', '#purchaseItems .nextRow', function (e) {
if (e.which == 13) {
$(this).closest('tr').find('.add').trigger('click');
$(this).closest('tr').next().find('input:first').focus();
}
});
$(document).on('click', '#purchaseItems .removeRow', function () {
var total_row = $('#purchaseItems tr').length;
if ($('#purchaseItems .add').length > 1) {
$(this).closest('tr').remove();
var last_tr_id = $('#purchaseItems tr:last').attr("id").split("_")[1];
$("#add_"+last_tr_id).show();
}
if ($('#purchaseItems .add').length == 1) {
$(".removeRow").hide();
}
});
});
</script>

Try this way using Jquery
<form id="myForm">
<div class="clonedInput">
<input type="text" class="phone_oa" id="textPhone1" name="input1" placeholder="Enter phone number" style="width: 110px;" />
<input type="button" name="btnDelete1" class="btnDel" value="Remove" disabled="disabled" />
</div>
<div id="addDelButtons" style="margin-top: 10px;">
<button type="button" id="btnAdd" class="btn" >Add Another Number</button>
</div>
</form>
Script
var inputs = 1;
$('#btnAdd').click(function() {
$('.btnDel:disabled').removeAttr('disabled');
var c = $('.clonedInput:first').clone(true);
c.children(':text').attr('name','input'+ (++inputs) ).val('');
c.children(':text').attr('id','textPhone'+ (inputs) ).val('');
c.children(':button').attr('name','btnDelete'+ (inputs) );
$('.clonedInput:last').after(c);
$('#btnAdd').attr('disabled',($('.clonedInput').length > 4));
});
$('.btnDel').click(function() {
if (confirm('Confirm delete?')) {
--inputs;
$(this).closest('.clonedInput').remove();
$('.btnDel').attr('disabled',($('.clonedInput').length < 2));
$('#btnAdd:disabled').removeAttr('disabled');
fixNames();
}
});
function fixNames(){
var i = inputs;
while(i--) {
$('input:text')[i].name = 'input'+ (i+1);
$('input:button')[i].name = 'btnDelete'+ (i+1);
}
}
DEMO

Submit button not working unless change input

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!