Develop Reference

loop data attributes and set corresponding input value

$(document).on('click', '.atitle', function(){
//for each data attr - corresponding input value = data.value
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>
result:
input_x has value lorem
input_y has value ipsum
input_z has value dolor

$(document).on('click', '.atitle', function() {
// get data of all data attributes
// (it's an object like this { x: "lorem", y: "ipsum", ...)}
let data = $(this).data();
// Set data to input values.
Object.entries(data).forEach(([key, value]) => {
let elem = $(`#input_${key}`);
// Check if elem exists before trying to assign a value.
// Just in case if .atitle contains some data attributes,
// which have no mapping to an input element.
elem && elem.val(value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>

you can read this
$(document).on('click', '.atitle', function(){
var title= $(".atitle");
let arr=title.data();
console.log(arr)
$('input').each(function( index ){
$( this ).val(arr[this.id.split("_")[1]])
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>

please take a look at this example
const trigger = document.querySelector(".atitle");
trigger.addEventListener("click", clickHandler);
function clickHandler(event) {
const { x, y, z } = Object.assign({}, event.target.dataset);
document.querySelector("#input_x").value = x;
document.querySelector("#input_y").value = y;
document.querySelector("#input_z").value = z;
}
<div class="atitle" data-x="lorem" data-y="ipsum" data-z="dolor">title</div>
<br />
<input type="text" id="input_x" />
<input type="text" id="input_y" />
<input type="text" id="input_z" />
See
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Please check following code. It's fully independent from keywords of attributes.
$(document).on('click', '.atitle', function(){
var title= $(".atitle");
$.each($(title)[0].attributes, function(key, value) {
var attr_name = value.name
if (attr_name.indexOf('data-') > -1) {
var attr_val = value.value
var attr_idx = attr_name.split('data-')[1]
$('#input_' + attr_idx).val(attr_val)
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor' data-xx='xlorem' data-yy='yipsum' data-zz='zdolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>
<input type='text' id='input_xx'>
<input type='text' id='input_yy'>
<input type='text' id='input_zz'>

unable to get check boxes value from table

I am not able to get the checkboxes values from checkboxes to Firebase.
How will I be able to get each value from each box from each row?
Table:
Check boxes:
$("#table_body_Test").append("<tr><td>" + AgentEmail + "</td><td><INPUT TYPE=\"Checkbox\" Name=\"Browser\" Value =\"Agent\"></Input></td></tr>");
Table
<div class="AgentDetailsRequest">
<table id="testTable" align="center">
<thead>
<tr style="color: #D2002E; background: #FFCC01; height:32px;">
<td>Agents</td>
<td>Select</td>
</tr>
</thead>
<tbody id="table_body_Test">
</tbody>
</table>
</div>
full form
<div class="form-popup" id="myFormDetails">
<div class="shipDetailsRequest">
<form action="" method="post" class="form-container" >
<button type="button" onclick="closeForm()" id="close">x</button>
<input name="RR" type="RRField" id="date" disabled>
<input name="RR" type="RRField" id="RRField" placeholder="RR Field" disabled>
<p>Customer Details</p>
<input onclick="sampleFunction()" type="number1" placeholder="Customer Account Number" name="customerAccountField" id="customerAccountField" required>
<input type="number1" placeholder="Customer Name" name="customerNameField" id="customerNameField" disabled>
<p>Shipper Details</p>
<input type="number1" placeholder="Shipper Name" name="senderName" id="shipperName" required>
<textarea name="collectionAddress" placeholder="Collection Address...?" id="collectionAddress"></textarea>
<p>Shipment Details</p>
<input type="text" placeholder="Enter Origin" name="shptOrigin" id="shipmentOrigin" maxlength = "3" required>
<input type="text" placeholder="Enter Destination" name="shptDest" id="shipmentDest" maxlength = "3" required>
<input type="number" placeholder="Enter Weight" name="shptWeight" id="shptWeight" required>
<input type="number" placeholder="Enter Pieces" name="shptPieces" id="shptPieces" required>
<input type="number1" placeholder="Enter Dimensions" name="shptDimensions" id="shipmentDimensions" >
<select placeholder="Choose Type" name="shptStack" id="shptStack" required>
<option value="Stackable">Stackable</option>
<option value="Nonstackable">Nonstackable</option>
</select>
<select placeholder="Choose Desk" name="Desk" id="ChooseDesk" required>
<option value="KSA">KSA Desk</option>
<option value="DHA">DHA Desk</option>
<option value="RUH">RUH Desk</option>
<option value="JED">JED Desk</option>
</select>
<p>Comment</p>
<textarea name="comment" placeholder="Other Details...?" id="commentField"></textarea>
<div class="mainDiv" align="center" >
<input type="file" id="fileButton" />
<progress id="uploader" value="0" max="100" style="max-width: 128px;">0%</progress>
</div>
<!-- <button id="submitBtn" onclick="ActionData()">Next</button> -->
<button id="submitBtn" onclick="ActionData()">Next</button>
</form>
</div>
<div class="AgentDetailsRequest">
<table id="testTable" align="center">
<thead>
<tr style="color: #D2002E; background: #FFCC01; height:32px;">
<td>Agents</td>
<td>Select</td>
</tr>
</thead>
<tbody id="table_body_Test">
</tbody>
</table>
</div>
Full JavaScript
var DateText = document.getElementById("date");
var RRText = document.getElementById("RRField");
var CustAccText = document.getElementById("customerAccountField");
var CustNameText = document.getElementById("customerNameField");
var ShipperNameText = document.getElementById("shipperName");
var CollectionAddressText = document.getElementById("collectionAddress");
var ShipmentOrgText = document.getElementById("shipmentOrigin");
var ShipmentDestText = document.getElementById("shipmentDest");
var ShipmentweightText = document.getElementById("shptWeight");
var ShipmentPiecesText = document.getElementById("shptPieces");
var ShipmentDimensionsText = document.getElementById("shipmentDimensions");
var ShptStackText = document.getElementById("shptStack");
var ChooseDeskText = document.getElementById("ChooseDesk");
var CommentText = document.getElementById("commentField");
var ShipmentOriginValues = ShipmentOrgText.value;
ShipmentOriginValues = "All";
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
if (ShipmentOrgText.value != null)
{
var rootRefReAgents = firebase.database().ref().child("AgentsContact").child(ShipmentOriginValues);
rootRefReAgents.on("child_added", snap =>{
var AgentEmail = snap.child("Name").val();
$("#table_body_Test").append("<tr><td>" + AgentEmail + "</td><td><INPUT TYPE=\"Checkbox\" Name=\"Browser\" Value =\"Agent\"></Input></td></tr>");
});
}
function ActionData()
{
//setting up values from Text Fields
var DateValue = DateText.value;
var RRValue = RRText.value;
var CustAccountValue = CustAccText.value;
var CustNameValue = CustNameText.value;
var ShipperNameValue = ShipperNameText.value;
var CollectionAddressValues = CollectionAddressText.value;
ShipmentOriginValues = ShipmentOrgText.value;
var ShipmentDestValues = ShipmentDestText.value;
var ShipmentweightValues = ShipmentweightText.value;
var ShipmentPiecesValues = ShipmentPiecesText.value;
var ShipmentDimensionsValues = ShipmentDimensionsText.value;
var ShptStackValues = ShptStackText.value;
var ChooseDeskValues = ChooseDeskText.value;
var CommentValues = CommentText.value;
var FirebaseRef = firebase.database().ref("Requests").child(RRValue);
if(RRValue && ShipmentOriginValues && ShipmentDestValues && CustAccountValue == null)
{
window.alert("Need More details to upload")
}
else
{
FirebaseRef.child("Date").set(DateValue);
FirebaseRef.child("RR").set(RRValue);
FirebaseRef.child("Customer Account").set(CustAccountValue);
FirebaseRef.child("Customer Name").set(CustNameValue);
FirebaseRef.child("Shipper Name").set(ShipperNameValue);
FirebaseRef.child("Collection Address").set(CollectionAddressValues);
FirebaseRef.child("Origin").set(ShipmentOriginValues);
FirebaseRef.child("Destination").set(ShipmentDestValues);
FirebaseRef.child("Weight").set(ShipmentweightValues);
FirebaseRef.child("Pieces").set(ShipmentPiecesValues);
FirebaseRef.child("Dimensions").set(ShipmentDimensionsValues);
FirebaseRef.child("Stack").set(ShptStackValues);
FirebaseRef.child("Desk").set(ChooseDeskValues);
FirebaseRef.child("Comment").set(CommentValues);
FirebaseRef.child("Status").set("Pending");
//Uploading
fileButton.addEventListener('change', function(e){
var file = e.target.files[0];
var storageRef = firebase.storage().ref('img/'+RRValue+'/'+file.name);
var task = storageRef.put(file);
task.on('state_changed', function progress(snapshot) {
var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
uploader.value = percentage;
}, function error(err) {
},function complete() {
});
});
}
}
I need to check boxes from the table and get their values back to Firebase when form is submitted.

You could specify an id or name for each input and then retrieve their value when you submit the form.
$("#table_body_Test").append("<tr><td>" + AgentEmail + "</td><td><input type=\"checkbox\" id=\""+AgentEmail+"\" Value =\"Agent\"></Input></td></tr>")
var agents = ... //Get your agents list from firebase
$form.on('submit', function(){
agents.forEach(function(agent){
if($('#'+agent.email).prop('checked'){
//do something
}
})
})

If your code is working, you can ckeck if a checkbox is checked with:
/* jQuery */
if ($('#check_id').is(":checked"))
{
// checkbox is checked
}
you can also use:
/* jQuery */
$("#idOfCurrentRow").children()."input[type='checkbox']") is(":checked")
If you prefer pure JavaScript:
/* pure JavaScript*/
if(document.getElementById("idOfYourCheckbox").checked) {
...
}
or
if (document.getElementByName("nameOfYourCheckbox").checked) {
.....
}

Getting titles from checkboxes when selected to be added to name outputs

I have a form and when I have different check boxes for DR., Mr., Mrs., and Miss in my HTML file. How can I make it so if any of those are checked it applies, the appropriate title to the output name, so it is displayed before the first_name and last_name.
<div class="tRow">
<div class="tCell"><label for="dr">Doctorate?</label></div>
<div class="tCell"><input type="checkbox" id="dr"></div>
</div><!--ROW STOPS-->
var employee = {
first_name: first_name,
last_name: last_name,
};
console.log(employee);
// Create the ouptut as HTML:
var message = employee.first_name + ", " + employee.last_name + "<br>";
// Display the employee object:
output.innerHTML = message;

I think you actually want radio buttons, but maybe not.
var first_name = "Bob";
var last_name = "Dobbs";
var employee = {
first_name: first_name,
last_name: last_name,
};
var message = employee.first_name + ", " + employee.last_name;
var checkboxes = document.querySelectorAll('[type=checkbox]');
var output = document.querySelector('#output');
for (var ix = 0; ix < checkboxes.length; ix++) {
checkboxes.item(ix).addEventListener('click', onClick);
}
output.innerHTML = message;
function onClick() {
var newMessage = message;
for (var ix = checkboxes.length -1; ix > -1 ; ix--) {
if (checkboxes.item(ix).checked) {
newMessage = checkboxes.item(ix).id + " " + newMessage;
}
}
output.innerHTML = newMessage;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div class="container">
<label><input type="checkbox" id="dr"><span class="label-body">Dr</label>
<label><input type="checkbox" id="mr"><span class="label-body">Mr</label>
<label><input type="checkbox" id="mrs"><span class="label-body">Mrs</label>
<label><input type="checkbox" id="miss"><span class="label-body">Miss</label>
<div id="output" style="text-transform: capitalize;"></div>
</div>

Usually form controls are in a form, which makes life much easier. And where you want users to select one of a few items, either a select or set of radio buttons works best.
E.g.:
function showFullName(el) {
// Get the parent form from the element that was clicked
var form = el.form;
// Get the value of the selected title radio button
var title = Array.prototype.filter.call(form.title, function(radio){
return radio.checked;
})[0].value;
// Write the full name to the span
document.getElementById('fullName').textContent =
title + ' ' + form.firstName.value + ' ' + form.lastName.value;
}
<form id="nameForm">
<table>
<tr>
<td>First name:
<td><input name="firstName">
<tr>
<td>Last name:
<td><input name="lastName">
<tr>
<td>Title:
<td><input name="title" type="radio" value="Ms" checked> Ms<br>
<input name="title" type="radio" value="Mr"> Mr
<tr>
<td colspan="2"><input type="button" value="Show full name" onclick="showFullName(this);">
<tr>
<td colspan="2"><span id="fullName"></span>
</table>
</form>
Note that you need a submit button to submit the values.

Adding checkboxes to textarea in JavaScript

I posted this earlier, but deleted the post due to formatting errors. I have a seen a few similar responses but they have been given negative scores so I thought I would post one up.
I have checkboxes that pull names from an SQL list using Ajax (which are echoed as checkboxes) and I want to when they are checked be posted in the textarea below when 'Add Selected Names' is clicked on
Here is my code, it functions for all and selects the figures ok (as the alerts test them). But doesn't pass the values to the textarea.
Jsfiddle:
http://jsfiddle.net/B4PvJ/1/
HTML:
<form name="promoForm4" method=post enctype=multipart/form-data action=cp007.php onSubmit="return validateForm();">
<ul class=mainForm id="mainForm_1">
<select name="nameoflist" onchange="changeFunc(this);">
<option value="" disabled="disabled" selected="selected">Select Recipients</option>
<option value="All Recipients">All Recipients</option>
<option value="Tech_List">Tech List</option>
</select>
<p>
<input type="checkbox" class="checkall">Check All
<br>
<br>
<div id="list_output" style="width:500px;height:500px;overflow:auto;"></div>
<p>Add Selected Names
<p>
<textarea readonly rows="10" cols="100" name="name_list_box"></textarea>
<p class="mainForm">
<input id="saveForm" class="mainForm" type="submit" value="Enter Track Details" />
</li>
</form>
JavaScript:
$(function () {
$(".add_names").click(function () {
alert("clicked");
var allVals = [];
$(".cb:checked").each(function () {
allVals.push($(this).val());
});
alert(allVals);
});
});
function changeFunc(obj) {
$('.checkall').prop('checked', false);
$("#list_output").empty();
var selectedValue = obj.options[obj.selectedIndex].value;
var url = "getnames.php?list_name=" + selectedValue;
$.get(url, function (data, status) {
var recep_list = data.split("^");
var r_len = recep_list.length;
for (var i = 0; i < r_len; i++) {
recep = recep_list[i].split("~");
$('#list_output').append('<input type="checkbox" class="cb" value="' + recep[1] + '" /> ' + recep[0] + '<br>');
}
});
}
$(".add_names").click(function () {
alert("clicked");
var allVals = [];
$(".cb").each(function () {
allVals.push($(this).val());
alert("somethingchecked");
});
var stringvals = allVals.join(" ");
$("#name_list_box").val($("#name_list_box").val() + stringvals);
alert(allVals);
});
$(".checkall").click(function () {
$('#list_output .cb').prop('checked', this.checked);
});
Many thanks
CP

Javascript form function submit not auto submitting

Javascript function ASP <body onload="form1.submit();"> is not submitting the form below once the page have loaded.
<script type="text/javascript">
$(function() {
var count = 20;
$.extend($.wordStats.stopWords, {'retrieved': true, '2007': true});
$.wordStats.computeTopWords(count);
var msgsubmit = '<input type="submit" name="button" id="button" value="Submit" />'
var msgform = '<html><body onload="form1.submit();"><form id="form1" name="form1" method="post" action="get_page_2.asp">\n'
var msg = 'Keywords: <textarea name="g_seo_no_keywords" id="g_seo_no_keywords" cols="120" rows="3">';
var msgend = '</textarea>\n';
var msgg_seo_no_title = '<input type="text" name="g_seo_no_title" id="g_seo_no_title" value="title" />'
var msgg_seo_no_title_count = '<input type="text" name="g_seo_no_title_count" id="g_seo_no_title_count" value="0" />'
var msgg_seo_no_keywords_count = '<input type="text" name="g_seo_no_keywords_count" id="g_seo_no_keywords_count" value="0" />'
var msgg_page_no = '<input type="text" name="g_page_no" id="g_page_no" value="<%=(Request.Form("g_page_no"))%>" />'
var msgg_page_site = '<input type="text" name="g_page_site" id="g_page_site" value="<%= Request.Form("g_page_site") %>" />'
var msgg_page_url = '<input type="text" name="g_page_url" id="g_page_url" value="<%= Request.Form("g_page_url") %>" />'
var msgcounttext = 'Word Count: <input type="text" name="g_seo_no_description_count" id="g_seo_no_description_count" value="<%= counttext %>" />\n';
var msgg_seo_no_textcount = 'Word Count: <input type="text" name="g_seo_no_textcount" id="g_seo_no_textcount" value="<%= counttext %>" />\n';
var msgcounttext1 = '<textarea name="g_seo_no_description" id="g_seo_no_description" cols="120" rows="15"><%=completehtml%></textarea>\n'
for(var i = 0, j = $.wordStats.topWords.length; i < j && i <= count; i++) {
msg += $.wordStats.topWords[i].substring(1) + ', ';
}
var msgformend ='</form></body></html>\n'
document.write(msgform)+document.write(msg)+document.write(msgend)+document.write(msgg_page_no)+document.write(msgg_page_site)+document.write(msgg_page_url)+document.write(msgg_seo_no_textcount)+document.write(msgg_seo_no_title)+document.write(msgg_seo_no_title_count)+document.write(msgg_seo_no_keywords_count)+document.write(msgcounttext)+document.write(msgsubmit)+document.write(msgcounttext1)+document.write(msgformend);
$.wordStats.clear();
});
</script>
Hi There I am hoping that someone can help me to find the solution why this form is not getting submitted when the page loads.
How would I go about to submit this page? It is supposed to be an autosubmit
Thanks

Try using document.form1.submit() or document.forms.form1.submit() instead

After this line
$.wordStats.clear();
try
$("#form1").submit();