Associating two fields with the same ID - javascript

The website I'm writing uses the ID of one date field to return some data associated with it from an API. I need to implement a new date field, giving the user two input options. How can I associate the date submitted on the new field I'm creating with the ID of the old field that is used to return the data?
<input class="dateinput" type="text" id="startDate" name="startDate">
Is later used by
var input_startDate = document.getElementById("startDate");
to return data. I need to add another input field just like the first one as an option for the user.
Merely changing getElementById to getElementsByClassName wasn't enough for it to work.
It would actually be better if I could somehow "copy" the value from one field to the other, thus registering the value from the new field into the old one and then keeping getting the element ID.

You can use getElementsByClassName in the below way to work.
var input_startDate_1 = document.getElementsByClassName("startDate")[0].value;
var input_startDate_2 = document.getElementsByClassName("startDate")[1].value;
console.log (input_startDate_1);
console.log (input_startDate_2);
<input class="dateinput startDate" type="text" value="01-01-2021" name="startDate_1" />
<input class="dateinput startDate" type="text" value="02-01-2021" name="startDate_2" />

Related

How to Append Prefix Value in AngularJs model text box dynamically

I have over 50 text box elements in page. I am trying to append minus symbol in every text box after enter value (ng-blur) by using one common javascript function. but i am unable to pass ng-model name to javascript function from jsp element ng-blur call to append minus symbol after enter value. any solution.
JSP element:
<input type="text" maxlength="10"
ng-blur="appendMinusSymbol('buzz.model1.rate')" ng-model="buzz.model1.rate"/>
<input type="text" maxlength="10"
ng-blur="appendMinusSymbol('buzz.model2.rate')" ng-model="buzz.model2.rate"/>
JS Function:
$scope.appendMinusSymbol = function(model){
// append minus symbol as prefix to ng model value
};
Note : Edited my question (model1, model2, model3 like having 50 fields)
Check my solution on this fiddle. If you can, then pass only model name like in the fiddle, otherwise you will need additional parsing. Of course you need here additional check when to append minus sign if already exists.
<input type="text" maxlength="10" ng-blur="appendMinusSymbol('model1')" ng-model="buzz.model1.rate"/>
$scope.appendMinusSymbol = function(modelName){
$scope.buzz[modelName]['rate'] = '-'+$scope.buzz[modelName]['rate'];
};

Selecting form field on a html page

I'm trying to prepare my first Greasmonkey script (with no experience in javascript/websites technologies) and I have problem with selecting field on a page. It is:
<input data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">
I've tested:
document.querySelectorAll("input.form-control");
document.querySelectorAll("input.form-control.u-text-normal");
document.getElementById("user/fullName").value
but non of them is returning what I need... and what I need is possibility to fill that form field with the script. Could you help, please?
EDIT:
The methods given in the following answers I try to run in the browser console and they do not return me any element. Maybe someone could try to run it and tell me what I'm doing wrong? The website is a shopping cart on the pizza site :) But to see it you need to add pizza to cart ("Do koszyka") for a minimum of 20 zł and then go to payment ("Do kasy"). Then the first field "Imie i nazwisko" is what I would like to fill at the beginning.
If you need to get a single element, give the html element an id example:
<html>
<input id='id_here'data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">
</html>
then get the element using
document.getElementById('id_here');
For multiple elements that share the same class you could use the query selector
document.querySelector('.form-control')
Is this what you wanted?
var example = document.querySelector('.form-control').value;
document.write(example);
<input data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal" value="test">
If you only want to select this element, use the most specific thing, in this case data-testid:
var x = document.querySelectorAll("[data-testid='user/fullName']")
console.log(x[0].value)
to select the element (here we select with the class and the data property to be the most accurate) =>
var element = document.querySelector('.form-control[data-testid="user/fullName"]');
After if you want add some value in this input =>
element.value = "My_value";
Regards
You can add 'id' or select your field by querySelector
let input = document.querySelector('[data-testid="user/fullName"]')
input.value='abc';
myField.value += '123';
<input id="myField" data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">
Update
I try my method and it works pizza site which you mention in your question update:
But it looks like that console 'see' dom input element after you find it using right click> inspect element - strange

How to store all siblings in a dynamic local storage array?

I have 2 files - first.html & second.html
first.html - here the user will input a few fields: Name, Organization, JobTitle,...
second.html - this will output only the fields that were typed by the user using a textarea field
Purposer: My purpose is to (1) dynamically store all siblings of a particular span (id="spanBox") in an array and (2) to output all the element of that array using text area field in the second.html
Clarifications: Let me just clarify what do I mean by "dynamically store all siblings" in an array. In the next few lines, I will mention only a small part of the fields that will be stored in the array. Dynamically means, that I wouldn't have to store manually each one of the fields by its name, but instead, when an onClick event is triggered (after pressing the button) I'de call sendtoLastPage() that will store all the siblings dynamically in the array.
First.html:
function sendtoLastPage(){
//How do I dynamically store all the siblings of id=spanBox to an array?
window.location="second.html"; //Send users to the next page
}
<span class="box" id="spanBox">
Name<BR><input name="Name" id="Name" type="text" size=40>
Organization<BR><input name="Organization" id="Organization" type="text" size=40>
Job Title<BR><input name="JobTitle" id="JobTitle" type="text" size=40>
<button value="btn" onClick="sendtoLastPage();">Go to Next Page</button>
</span>
Note: I'm looking for a JavaScript solutions (not jQuery).
Thanks for dedicating the time to read this issue. I really tried to search for a solution in others threads, but I couldn't find any similar questions.
You could probably bind the following callback to your "Go to Next Page" button:
function handleSubmit(evt) {
var spanBox = document.querySelector('#spanBox');
var inputs = spanBox.querySelectorAll('input');
var data = {};
inputs.forEach(function(input) {
data[input.name] = input.value;
});
localStorage.setItem('savedData', JSON.stringify(data));
}
This will store the inputs to the localStorage and in the second.html file, you can access the localStorage data by using the savedData key.
It'd looks something like:
var textArea = document.querySelect('textarea');
var savedData = JSON.parse(localStorage.getItem('savedData'));
textArea.value = savedData;

Using JavaScript to Show/Hide multiple fields on the same form with same id name

I have to fields on the same Dynamics CRM form. One is Account Name and the other field is Company. They both share the same field id name which is parentcustomerid. I need to show/hide these fields based on the value of an option set of another field. I can get the Account name field to show/hide but the Company field will not show/hide.
function showHideSourceField() {
var type = Xrm.Page.data.entity.attributes.get("new_type").getValue();
var source = Xrm.Page.ui.controls.get("new_source");
var accountname = Xrm.Page.ui.controls.get("parentcustomerid");
var company = Xrm.Page.ui.controls.get("parentcustomerid");
//Type of Contact is Unaffiliated
if (type == 100000004) {
source.setVisible(true);
accountname.setVisible(false);
company.setVisible(false);
You have two possibilities:
1) They are two different fields, and you can simply check this in the form editor, for example one is name the other is parentcustomerid
2) They are the same field added twice to the form, this is possible inside Dynamics CRM, in this case the first field is parentcustomerid an the second is parentcustomerid1, and you can still check if it is the same field inside the form editor.
You mean same name attribute?
In Html you use:
id to provide a unique identifier.
class to provide a group/type/etc
I think the best solution for this is to provide a distinct name for each and use the same class for both.
<input id="account-name" class="parentcustomer" name="account" />
<input id="company" class="parentcustomer" name="company" />
Then you can:
$('.parentcustomer').hide();
$('.parentcustomer').show();

Insert the value retrieved from localstorage to the input field

I am using localStorage where in I am able to store in previous page and retrive it in this page. (Checked it using alert).
name12=localStorage.getItem("content");
Now my requirement is to display it into the input field and make it non-editable.
Please help me out with it. I have tried different things but I am not able to get it right.
Used onblur="localStorage.setItem(this.name, this.value) in the input tag
and also tried to use
if name_2.value = name12; in script tag
To make a field uneditable, you can use the html attribute disabled on the input field. http://www.w3schools.com/tags/att_input_disabled.asp
To set a default value for a field, you can use the html attribute value. In your case since the value is dynamic, you probably want do not want to do that inline in the html. One possible solution is to set the value attribute through javascript like below.
<script type="text/javascript">
var name2 = document.getElementById("name_2");
name2.value = localStorage.getItem("content");;
</script>
Set the value of an input field
You have to assign the value to input using javascript.
<input username" id="name_2" type="text" placeholder="name" name="name_2" required="required" autofocus="autofocus">
<script>
var n = "5"; // read from storage here
var inpt = document.getElementById("name_2");
inpt.value = n;
inpt.disabled = true;
</script>
There are many places to find this information. Try reading the jquery documentation when you get stuck. For example, here is a page that describes how to set the value of an input element. StackOverflow also has many questions about this topic. A quick google search brings up this question about setting the value of input elements. We can also find SO questions about disabling input elements easily, like this one.
I encourage that you attempt to use more resources to find what you need before bringing your questions here.
Based on the answers to the questions I linked, we can set the input and then disable it to keep the value from changing:
$('#input').val(name12);
$('#input').prop('disabled', true);

Categories