Develop Reference

Javascript function: how to reference the element that calls the function - and extract that element's value

I am trying to make a table with a button for each row, each button I want to have it copy and paste the value of the button itself to the desired field.
my problem is I don't get texttocopy to be the <input button value="">
copypaste(id) {
var texttocopy = document.getElementById(this);
var wheretocopy = document.getElementById(id);
wheretocopy.value = texttocopy.value;
}
I've tried a few other variations on this, and looking up the syntax has been unfruitful.
function copypaste(id) {
var texttocopy = this;
var wheretocopy = document.getElementById(id);
wheretocopy.value = texttocopy.value;
}
texttocopy is the value of whatever calls the function.
the html is inside php so that's the reason for the . connectors and the switching of " and '.
where the button is:
php
echo '<input TYPE="BUTTON" id="barcodebutton" value ="'.$row['barcode1'].'" onclick="copypaste('."'primaryRFID'".');">'
field to input data into:
html
<INPUT TYPE="TEXT" id="primaryRFID" NAME="primaryRFID">
the expected result is the input of primaryRFID becomes the value of the button pressed.

When you call a function from inside an onclick attribute, the function is called without any this binding. However, this is bound while executing the onclick code itself, so you can just pass that as a regular argument:
onclick="copypaste(this, '."'primaryRFID'".');"
So now get that argument value via the function parameters:
function copypaste(texttocopy, id) {
var wheretocopy = document.getElementById(id);
wheretocopy.value = texttocopy.value;
}

Append localstorage data to the body element on All session (Works also with reload)

I have some code from input, and I wanna to save it to some body element.
I can add it to the body, but it disappear when page is reloaded
function store(){
var nameOfbook = document.getElementById("nameOfbook");
var value = localStorage.setItem("nameOfbook", nameOfbook.value);
var storedValueBockName = localStorage.getItem("nameOfbook");
var par = document.createElement('P');
par.innerText = storedValueBockName;
document.body.appendChild(par);
}
<form action="\" class="form-login" method="post" />
<input name="text" type="text" id="nameOfbook" required="" placeholder="Book name" />
<button onclick="store()" type="button">StoreText</button>
</form>

This question is basically asking how to retrieve a stored value from localStorage.
So you're setting the value in localStorage, but when you reload the page, you need to have a script that checks to see if there's a value in localStorage and add that data to your page if it is found there.
I would suggest something like:
<script>
var setText = function(text) {
var par = document.createElement('P');
par.innerText = text;
document.body.appendChild(par);
}
var checkLocalStorage = function() {
var value = localStorage.getItem("nameOfbook")
if (value) {
setText(value)
}
}
checkLocalStorage()
function store(){
var nameOfbook = document.getElementById("nameOfbook");
var value = localStorage.setItem("nameOfbook", nameOfbook.value);
var storedValueBockName = localStorage.getItem("nameOfbook");
setText(storedValueBockName)
}
</script>
So I moved the code that appends the title to the page into its own function so that it can be used by both store() and checkLocalStorage(). checkLocalStorage looks to see if there's a value set for nameOfbook and, if there is, passes that value to setText.
Should do the trick.

Preserve value of the text field with javascript

I build a little snippet with javascript to add more fields by clicking a button. It works fine and add the field as it should but it discards the values of the already existing fields on clicking the add more button.
You can run the snippet below to check the issue ... Please add 2-3 fields and type something in those fields and then add another field. You'll see what is happening.
var fldsContainer = document.getElementById('fields');
var fld = '<p><input name="test[]" type="text"></p>';
function addField() {
fldsContainer.innerHTML += fld;
}
<div id="fields"></div>
<button onclick="addField()">Add More Field</button>
I know in jQuery we can simply .append() but I need a solution in javascript. Is there append method in javascript?
Or any other method to resolve my issue would be appreciated :)

It is because the content of fldsContainer is rerendered every time with a brand new list of fields. You need to append to the container. Try something like the insertAdjacentHTML() method.
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
var fldsContainer = document.getElementById('fields');
var fld = '<p><input name="test[]" type="text"></p>';
function addField() {
fldsContainer.insertAdjacentHTML('beforeend', fld);
}
<div id="fields"></div>
<button onclick="addField()">Add More Field</button>

It may seem larger and maybe overkill but i prefer tracking all my inputs into an array so that i separate myself from needing to possibly query DOM elements in future.
var fldsContainer = document.getElementById('fields');
var fields = [];
function render() {
fldsContainer.innerHTML = getFields();
}
function addField() {
fields.push(fields.length ? getField(fields.length) : getField(0));
render();
}
function setValue(input, i) {
fields[i].value = input.value;
}
function getFields() {
var str = ''
fields.forEach(function(field) {
str += (`<p><input name="${field.name}" value="${field.value}" type="text" onchange="setValue(this, ${field.index})"></p>`);
});
return str;
}
function getField(index) {
return {
index,
name: `test${index}`,
value: ''
}
}
<div id="fields"></div>
<button onclick="addField()">Add More Field</button>

How to Select hidden input tag with name in b/w the form tag in jquery/javascript

I want to select the hidden box with jquery.
What i did.
In a web page number of forms exists. I want to select the individual form and its in b/w hidden box with jquery. my Javascript code is:
function replace_val(clickval)
{
var id = $(clickval).attr('id');
var valuer = $(clickval).attr('value');
var formid = $("statictext"+id).val();
$('input[type=hidden][name="packagesale"]').val(valuer);
$('input[type=hidden][name="pre_post"]').val('Postpaid');
alert(formid >'input[type=hidden][name="packagesale"]').val());
}
My HTML Code where this function call.
<input style="width:85px;" class="btn btn-danger" onClick="replace_val(this);" type="button" id="<?php echo $sno;?>" value="<?php echo $value;"/>
I think something is wrong in my alert box code....

Your selector is wrong inside the alert(). You should use:
function replace_val(clickval)
{
var id = $(clickval).attr('id'),
valuer = $(clickval).attr('value'),
formid = $("#statictext"+id);
$('input[type=hidden][name="packagesale"]').val(valuer);
$('input[type=hidden][name="pre_post"]').val('Postpaid');
alert(formid.children('input[type="hidden"][name="packagesale"]').val());
}

you also have error on line
var formid = $("statictext"+id).val();
will be
var formid = $("#statictext"+id).val();
//or
var formid = $(".statictext"+id).val();// if using class
Don't over use jQuery if possible try in pure javascript only
var id = clickval.id;
var valuer = clickval.value;

Modify variable from input and place in new div based on input variable

This is related to my last questions, but that already had alot of answers so I did not want to modify it with more stuff to avoid confusion.
I can take the input from the input text with the id 'test', and I can display it on the div labeled 'result', but I am not able to modify the output to div
function createLinks()
{
var input = document.getElementById('test')
if(str.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin.value;
}
The HTML is working currently as follows:
<input type="text" id="test" size="16" title="Coming Soon" onkeypress="createLinks()"/>
<input type="submit" style="margin-left: 10px;" value="Search" class="button1"/>
<div id="result"></div>
I work with mainly CGI and have very limited knowledge of JS so I am probably missing something simple or this plain wont work. Thanks for the help in advance.

I fixed your code to what I think you wanted:
function createLinks()
{
var lin;
var input = document.getElementById('test');
if(input.value.indexOf("VALUE")>=0){
lin = "something";
}
else {
lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}
What was wrong was that:
[1] str was not defined
[2] lin was not globally defined, so you couldn't access it.
I updated the code so that it will make result say something if the textbox has VALUE typed in it and somethingelse if it doesn't, and that you can also press the Search button instead of pressing a key.

Try This: str not defined and lin is the value.
function createLinks()
{
var input = document.getElementById('test')
if(input.value.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}