We Keep Coding

Jquery how to pass value id from one event handler to another

I have an add-row button. On its click I am adding a row into my datatable.
$('.add-row').on('click', function() {
id = 0;
name = $('#name').val();
email = $('#email').val();
cno = $('#cno').val();
bdy = $('#bday').val();
t.row.add([
name,
email,
cno,
bdy,
'<button class ="btn btn-danger del">Delete</button>' + '' + '<button class="btn btn-warning upd" data-id="'+$('#example').DataTable().rows().count()+'">Edit</button>'
]).draw(false);
$("#name").val('');
$("#email").val('');
$("#cno").val('');
$("#bday").val('');
});
In the above code, I am using data-id and adding row id to it. On my edit button click I am getting the data-id value.
$("body").on("click", ".upd", function(e) {
const id = $(this).attr("data-id");
console.log(id);
// Prevent event propagation
e.stopPropagation();
var $row = $(this).closest('tr');
var data = t.row($row).data();
//alert('Edit ' + data[0]);
name = data[0];
email = data[1];
cno = data[2];
bdy = data[3];
console.log(name);
console.log(email);
console.log(cno);
console.log(bdy);
$("#name1").val(name);
$("#email1").val(email);
$("#cno1").val(cno);
$("#dob1").val(bdy);
$("#myModal").modal('show');
});
The above code takes input data from modal. In my modal I have a save button having id btnsubmit. Now on this button click, I want to pass my data-id.
$("#btnsubmit").on('click',function () {//in this event i want to pass the `data-id`
var new_name = $("#name1").val();
var new_email = $("#email1").val();
var new_cno = $("#cno1").val();
var new_dob = $("#dob1").val();
$("#myModal").modal("hide");
});
How can I pass the value of data-id in it?
Any help would be highly appreciated.

you could stock your data in html modal like this:
$("#myModal").data('id', id);
and use:
var id = $("#myModal").data('id');

Dynamically Create/Alter Form Fields from URL Parameters (Not Prepopulate Existing Fields)

In a formstack form, I need to be able to pass a list to the form as a parameter and, from that list, create checkboxes or dropdown menus that the user can select and that are saved in formstack's database and sent to integrations like all other fields. Here's an example of what I'd like to send in:
http://theformurl?list=option1,option2,option3,option4
From this, I'm trying to use code insertion in either (or a mixture of) the head, footer, or a code embed to create a new field on load that looks and acts like all the other fields.
I've been tinkering with Jenna Molby's approach to dynamically modifying html with url parameters found here:
https://jennamolby.com/tutorial-examples/dynamic-content-based-on-a-url-parameter-example/
But no luck so far. At present, I've not succeeded in getting dynamic text to populate in the form, let alone a form field that then talks to formstack's back end.
Is this doable, and if so, can anyone recommend an approach or a thread to pull on to figure it out?
--update
Thanks to Eric's suggestion, I was able to get halfway there. This code in the footer can commandeer a checkbox that you've already inserted in the form by id. It will replace that checkbox with the values you send in the url. But the selections don't get caught by Formstack when you submit.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var url = new URL(window.location.href);
//Put field number in var fieldNumber
var fieldNumber = "12345678";
//Put the parameter you're searching for in var param
var param = "parameter name";
//if you want a prefix before your values in the checkbox, use prefix
var prefix = "Prefix ";
//Put the question you want to ask here.
var theQuestion = "Which of the values that came through the url will you select?";
//What should the single checkbox say if no parameters are passed?
var theDefaultBox = "No variables were contained in the parameter.";
var theField = "field" + fieldNumber;
var theFieldID = "fsCell"+fieldNumber;
var values = url.searchParams.get(param).split(",");
var theFieldHTMLfront = "";
if (values) {theFieldHTMLfront = "<fieldset id=\"label"+fieldNumber+"\"><legend class=\"fsLabel fsLabelVertical\"><span>"+theQuestion+"</span></legend><div class=\"fieldset-content\"><label class=\"fsOptionLabel vertical\" for=\""+theField+"_1\"><input type=\"checkbox\" id=\""+theField+"_1\" name=\""+theField+"[]\" value=\""+ prefix + values[0] + "\" class=\"fsField vertical\" />"+ prefix + values[0] + "</label>";} else {theFieldHTMLfront = "<fieldset id=\"label"+fieldNumber+"\"><legend class=\"fsLabel fsLabelVertical\"><span>Which values may have observed or have knowledge about this event?</span></legend><div class=\"fieldset-content\"><label class=\"fsOptionLabel vertical\" for=\""+theField+"_1\"><input type=\"checkbox\" id=\""+theField+"_1\" name=\""+theField+"[]\" value=\""+theDefaultBox+"\" class=\"fsField vertical\" />test</label>";}
var theFieldHTMLback = "</div></fieldset>";
for (var i = 1; i < values.length; i++) {
theFieldHTMLfront += "<label class=\"fsOptionLabel vertical\" for=\""+theField+(i+1)+"\"><input type=\"checkbox\" id=\""+theField+(i+1)+"\" name=\""+theField+"[]\" value=\""+prefix+values[i]+"\" class=\"fsField vertical\" />"+ prefix + values[i] + "</label>";
}
var theFieldHTML = theFieldHTMLfront + theFieldHTMLback;
document.getElementById(theFieldID).innerHTML = theFieldHTML;
});
</script>
Any thoughts on how to get it to talk to Formstack on submit?

Not familiar with formstack or what exactly you're getting from the URL and placing into forms or of what type, but I'll take a shot in the dark here.
Perhaps something like this:
var paramsToGet = ['param', 'param', 'param'];
document.addEventListener("DOMContentLoaded", function(event) {
let url = new URL(window.location.href);
paramsToGet.forEach((v)=>{
let thisParam = url.searchParams.get(param);
newFormElement(thisParam, x, x, "Default Value");
})
});
var newFormElement = (type, element_id, target_id, default_value) => {
default_value = default_value || null;
let el = document.createElement(type);
el.id = element_id;
if (default_value) {el.value = default_value;}
document.getElementById(target_id).appendChild(el);
}

So I've managed to find a solution that works for me. Thanks Eric for getting me started.
It requires adding two fields to the form you want to use this in: (1) a hidden text entry field where the selected values will be written, and (2) a placeholder checkbox field that this code will overwrite. You'll need to grab their id numbers, which I did by opening the live form and viewing source.
<script>
var selectedValues = [];
//This code goes in your Formstack theme footer. In the form that you want to add dynamic checkboxes to, create two fields using the WYSIWYG editor: a checkbox field and a text entry field. Make the text entry field hidden. You will need to know the id number of both the text entry and checkbox fields.
//Put the text entry field number in var textFieldNumber
var textFieldNumber = "field"+"12345678";
var index;
var checkboxFieldNumber = "12345679";
//Put the parameter you're searching for in var param
var param = "param";
//if you want a prefix before your values in the checkbox, use prefix
var prefix = "";
//Put the question you want to ask here.
var theQuestion = "Your question?";
//What should the single checkbox say if no parameters are passed?
var theDefaultBox = "Default message.";
document.addEventListener("DOMContentLoaded", function(event) {
var url = new URL(window.location.href);
//Put checkbox field number in var checkboxFieldNumber
//Build the replacement HTML for the placeholder checkbox field.
var theField = "field" + checkboxFieldNumber;
var theFieldID = "fsCell"+checkboxFieldNumber;
var values = url.searchParams.get(param).split(",") || null;
var theFieldHTMLfront = "";
if (values) {theFieldHTMLfront = "<fieldset id=\"label"+checkboxFieldNumber+"\"><legend class=\"fsLabel fsLabelVertical\"><span>"+theQuestion+"</span></legend><div class=\"fieldset-content\"><label class=\"fsOptionLabel vertical\" for=\""+theField+"_1\"><input type=\"checkbox\" id=\""+theField+"_1\" name=\""+theField+"[]\" value=\""+values[0]+"\" onchange=\"checkBoxToggle(this)\" class=\"fsField vertical\" />"+ prefix + values[0] + "</label>";} else {theFieldHTMLfront = "<fieldset id=\"label"+checkboxFieldNumber+"\"><legend class=\"fsLabel fsLabelVertical\"><span>Which values may have observed or have knowledge about this event?</span></legend><div class=\"fieldset-content\"><label class=\"fsOptionLabel vertical\" for=\""+theField+"_1\"><input type=\"checkbox\" id=\""+theField+"_1\" name=\""+theField+"[]\" value=\""+theDefaultBox+"\" onchange=\"checkBoxToggle(this)\" class=\"fsField vertical\" />test</label>";}
var theFieldHTMLback = "</div></fieldset>";
//iterate through the array found in the url parameters, adding a new checkbox option for each element in the array.
if (values) {for (var i = 1; i < values.length; i++) {
theFieldHTMLfront += "<label class=\"fsOptionLabel vertical\" for=\""+theField+(i+1)+"\"><input type=\"checkbox\" id=\""+theField+"_"+(i+1)+"\" name=\""+theField+"[]\" value=\""+values[i]+"\" onchange=\"checkBoxToggle(this)\" class=\"fsField vertical\" />"+ prefix + values[i] + "</label>";
};}
//finalize replacement HTML
var theFieldHTML = theFieldHTMLfront + theFieldHTMLback;
//write new HTML to DOM
document.getElementById(theFieldID).innerHTML = theFieldHTML;
});
function checkBoxToggle(thisBox) {
if(thisBox.checked) {
//When a new checkbox is selected, add its value to array selectedValues, sort it, and write it to the text entry field.
selectedValues.push(thisBox.value);
selectedValues.sort();
document.getElementById(textFieldNumber).value = selectedValues;
} else {
//When a checkbox is deselected, splice its value out of array selectedValues and write the array to the text entry field's value
index = selectedValues.indexOf(thisBox.value);
if (index > -1) {
selectedValues.splice(index, 1);
document.getElementById(textFieldNumber).value = selectedValues;
}
}
}
</script>

Text Box Search / Javascript Function Arrays **not corresponding**

I want the user to "Search" some "Authors" and if they select the one in the database they are sent to a corresponding HTML. Otherwise "No Author Found" displays...
For some reason I cannot wrangle it properly - pls help!
//Search by Author
function searchAuth() {
var search_string = document.getElementById('search_string').value;
var arrayelement = ["John","Stan","Henry","Paul","Samuel"];
for (i=0;i<arrayelement.length;i++) {
if (input == arrayelement.John) {
var itemLink = document.getElementById('demo').innerHTML =
"<a href='https://www.google.ca/?gws_rd=ssl'>Your link</a>";
} else if (input == arrayelement.Stan) {
var itemLink = document.getElementById('demo').innerHTML =
"<a href='https://www.google.ca/?gws_rd=ssl'>Your link</a>";
}else {
var itemLink = document.getElementById('demo').innerHTML =
"Author not found."
}
}
<!--Author-->
<h3>Search By Author</h3>
<form name="searchTest" onsubmit="return(searchAuth());" action="#">
<input type="text" id="search_string" />
<input type="submit"/>
<p id="demo"></p>

Perhaps you are trying to do things like these..
P.S this is just a demo, for you to start :)
EDIT: added few explanation on some stuffs you might get confuse with. :)
//events once textbox gets out focus
//the events varies on which or where do you want to add the event. it can be on click of a search button or submit button just like in your example.
document.getElementById('search-text-box-id').addEventListener("focusout", function() {
//searchString gets the textbox value.
var searchString = document.getElementById('search-text-box-id').value;
var searchList = ["John","Stan","Henry","Paul","Samuel"];
//Loop searchList
for (i=0; i < searchList.length; i++) {
//i which usually means the index or the key of the array's object(s).
var searchItem = "";
//searchList[i] loops its object by getting the index resulting to John, Stan and so on and so forth.
if (searchString == searchList[i]) {
searchItem = searchList[i];
document.getElementById('search-result-container').innerHTML = searchItem + " link";
//stop looping as the loop found a match.
return;
}
else {
searchItem = "Author not found.";
document.getElementById('search-result-container').innerHTML = searchItem;
}
}
});
<label for="search-text-box"></label>
<input type="text" id="search-text-box-id" name="search-text-box" />
<p id="search-result-container"></p>

DTM: capture form elements that have been changed

I have a requirement to capture into eVar a string of fields that have been changed when user updated their details.
I am using DTM and am thinking how to make it work.
Firstly I wrote this code and saved it as Data Element in the DTM:
var oldMobileNo = document.getElementById('mobileNumber').value;
var oldAnotherNo = document.getElementById('additionalTelephoneNumber').value;
var oldEmail = document.getElementById('emailConfirmed').value;
document.forms['editContactVO'].onsubmit = function(){
var newMobileNo = document.getElementById('mobileNumber').value;
if(oldMobileNo != newMobileNo) {
var MobileNo = "mobile number changed";
}
else {
var MobileNo = "";
}
var newAnotherNo = document.getElementById('additionalTelephoneNumber').value;
if(oldAnotherNo != newAnotherNo) {
var AnotherNo = "additional number changed";
}
else {
var AnotherNo = "";
}
var newEmail = document.getElementById('emailConfirmed').value;
if(oldEmail != newEmail) {
var Email = "email changed";
}
else {
var Email = "";
}
return MobileNo;
return AnotherNo;
return Email;
}
var Final = MobileNo + "," + AnotherNo + "," + Email;
return Final;
Then I tried to reference it with the event based rule set on the form submit button click. The rule definitely worked until I called this Data Element. The rule stopped working.
As far as I understand this code has to be set on the page with form to be able to capture original values and it should be active when the form is updated.
Is it possible to this via DTM? If yes, how to? Or may be somebody did it in the different way?

function only works one time

This is my first question on here. I use this site all of the time, but have never posted on here.
When I call the function writeMessage(), when the checkbox is checked, the textarea is created. When I uncheck the checkbox, the textarea is removed. When I check the checkbox the second time, the function is not called. Any suggestions? I need for it to show the textarea any time the checkbox is checked, not just the first time around. Below is my code.
HTML:
<table>
<th>
<input type = "checkbox" name = "os0" id = "spaceForMsg" onClick = "writeMessage()">
<label for "gift"> Gift for someone</label>
</th>
</table>
<table >
<tr id = 'parent'>
<div id = 'printMsg'></div>
</tr>
</table>
javascript function:
function writeMessage() {
var x = document.getElementById('spaceForMsg');
var docBody = document.getElementById('parent');
var element = document.createElement('textarea');
element.cols='60';
element.rows='8';
element.id = 'msgArea';
if (x.checked) {
give = 'Type your gift message here: ';
docBody.appendChild(element);
} else {
give = '';
y = document.getElementById('parent').parentNode;
y.removeChild(y.childNodes[0]);
}
document.getElementById('printMsg').innerHTML = give;
}

writeMessage is removing "the first child of the parent of document.getElementById('parent') (which happens to be equal to docBody). This means that you are removing docBody itself.
The next time you call writeMessage after removing docBody, the document will fail to find a proper parent, thus docBody.appendChild(element); will fail.
Try this instead:
function writeMessage() {
var give;
var x = document.getElementById('spaceForMsg');
var docBody = document.getElementById('parent');
if (x.checked) {
var element = document.createElement('textarea');
element.cols='60';
element.rows='8';
element.id = 'msgArea';
give = 'Type your gift message here: ';
docBody.appendChild(element);
} else {
give = '';
y = docBody.removeChild(docBody.getElementsByTagName('textarea')[0]);
}
document.getElementById('printMsg').innerHTML = give;
}

You are removing <div id='parent'></div>, with this line y.removeChild(y.childNodes[0]);, so you can't put anything in there since it doesn't exist.