We Keep Coding

js get elements of element in HTML Page

im stack here allthe day trying to edit a value of input text using JS,
I don't know if there is another way to do this knowing that this text input doesn't have the id attribute and doesn't have the name attribute
but it is inside an element with a unique id (text-input-1 and text-input-2)
<div class="mat-form">
<text-input _ngcontent18="" formcontrolname="nom" class="ng-untouched " id="text-input-1">
<input _ngcontent29="" type="text" class="ng-touched">
</text-input>
</div>
<div class="mat-form">
<text-input _ngcontent18="" formcontrolname="prenom" class="ng-untouched " id="text-input-2">
<input _ngcontent29="" type="text" class="ng-touched">
</text-input>
</div>
so im trying to get the element inside id="text-input-1" give him an unique id,
example
<input id="prenom_input" _ngcontent-fno-c29="" type="text" class="ng-touched">
and then change the value with
document.getElementById("nom_input").value = "Jean";
and
document.getElementById("prenom_input").value = "leclaire";
or if there is other way how to do it
Thank you everybody.

You can access the inputs using querySelector because it is the same as CSS selectors:
// The first input
const inputNom = document.querySelector('text-input#text-input-1 input');
// The second input
const inputPrenom = document.querySelector('text-input#text-input-2 input');
// Set/get the values using JS
inputNom.value = '...';

because my question is related to same subjet its better to keep it in same Stackoverflow Question,
I have case that the parent element doses not have an unique id can i get the
input element inside some how else to change the value of this input.
<mail-input placeholder="Email" class="ng-untouched">
<input autocomplete="off" type="text" class="ng-touched">
</mail-input>
Thanks everybody

Get the id of input using it's name

I want to get the id of input using it's name,and to empty the input field.But it's not working.Is it possible?
html:
<input type="text" id="1" name="Color" maxlength="2" />
jQuery:
var myId="#";
myId=myId + $('[name="Color"]').attr('id');
$($myId).var('');

You can do this:
let id = $('input[name$="Color"]').val('').attr('id');
console.log(id);
$(`#${id}`).val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />

You can set the input value using the val() function.
<input type="text" id="1" name="Color" maxlength="2"/>
var myId='#' + $('[name="Color"]').attr('id');
$(myId).val('');
To get the input value use it like this:
$(myId).val();

Try this code.
const myId = $('input[name="Color"]').attr('id');
$("#"+myId).val(''); // you can set any value here or you can perform any other operations on this element -> $("#"+myId)
On first line of this JS code, we are getting id attribute and then on second line, we're using to manipulate element.
Now, if you want id only for performing some operations on that input element, you don't need to get id. You can also do like this.
let elem = $('input[name="Color"]');
elem.val(''); // only if same name is not used anywhere else.
I hope this helps you.

You can use attr directly to set a value. Moreover there is no need to append #.
let element = $('[name="Color"]');
console.log("before", element.attr('id'));
element.attr('id', null);
console.log("after", element.attr('id'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />

Full Name From User To be In Separated Hidden Form Fields

I have a form with the two below inputs
<div class="required form-group" style="display:none">
<label for="customer_firstname">{l s='First name'}
<sup>*</sup>
</label>
<input onkeyup="$('#firstname').val(this.value);" type="text" class="is_required validate form-control" data-validate="isName" id="customer_firstname" name="customer_firstname" value="{if isset($smarty.post.customer_firstname)}{$smarty.post.customer_firstname}{/if}" />
</div>
<div class="required form-group" style="display:none">
<label for="customer_lastname">{l s='Last name'}
<sup>*</sup>
</label>
<input onkeyup="$('#lastname').val(this.value);" type="text" class="is_required validate form-control" data-validate="isName" id="customer_lastname" name="customer_lastname" value="{if isset($smarty.post.customer_lastname)}{$smarty.post.customer_lastname}{/if}" />
</div>
As you can see both these fields are hidden. This is because I want to create a new input called full name and whatever the user types here gets filled into these first name and last name automatically.
So if full name is John Doe then first name will hold John and last name will hold Doe. Or if full name is Stuart Ben Mackenzie then fist name will hold Stuart Ben and last name will hold Mackenzie. How can I do this with Javascript??

You should use this:
<input id="fullname" type="text"/>
$('#fullname').val($('#firstname').val()+' '+$('#lastname').val());

This really depends on how you want to discern the first name from the last. If you want the last name to always be only 1 word then it you would parse the names as such.
Add to your input(s) which you need to track input a class or attribute then simply bind the keyup event handler to it such as
$("input[traced-input]").on("keyup", function(){
var tft = $(this); //short for thisTextField
if(tft.attr("id")==='fullname'){
//parse the names here into an array presumably
$("#firstname").val(namesArr['firstname']);
$("lastname").val(namesArr['lastname']);
}
});
Make sure you put the js in $(document).ready() and if the HTML content will be dynamically loaded then add a delegate such as
$(document).on("keyup", '.class or #id here', function () {
//do stuff
});

You can achive using bellow code:
<input id="fullname" type="text"/>
var fullname=$('#fullname').val();
var pieces = fullname.split(' ');
var customer_lastname=pieces[pieces.length-1];
$("#customer_lastname").val(customer_lastname);
pieces.pop();
var customer_firstname=pieces.join(" ");
$("#customer_firstname").val(customer_firstname);

$('#dfullname').on('keyup', function(e){
var fullname = $(this).val();
var splitFullName = fullname.split(' ');
$('#firstname').val(splitFullName[0]);
$('lastname').val(splitFullName[1]);
});
of course this will only work if you are having 1 first name and 1 last name, but it gives you the general idea.

How do I replace part of the value of attributes for a set of elements in jQuery?

I am trying to replace a series of 'for' attributes of labels based on their current contents.
The application is using AJAX to add an item to an invoice without refreshing the page. Upon receiving notification of a successful item add, my script should replace all the labels in the form whose 'for' attribute ends with '-new' with the same attribute minus the '-new' and adding ('-' + itemValue), where itemValue is the item Id of the invoice item that was added.
I know how to select all the labels I want to change at once:
jQuery('label[for$=new]')
I know how to get their 'for' attribute:
jQuery('label[for$=new]').attr('for')
I tried the JavaScript replace method:
jQuery('label[for$=new]').attr('for').replace(/-new/,itemValue)
But that appears to select each label's 'for' attribute, replace the text, and pass the replaced text back (to nothing), since I don't know how to identify the labels that have the 'for' attribute I want to replace.
Here's some sample HTML:
<form id="InvoiceItemsForm-1" action="<?=$_SERVER['PHP_SELF'];?>" method="post" name="InvoiceItemsForm-1" onsubmit="return false">
<div id="InvoiceItem-new-1" class="InvoiceItem">
<label for="InvoiceItemNumber-new">New Invoice Item Number: </label>
<input id="InvoiceItemNumber-new" class="InvoiceItemNumber" type="text" value="" name="InvoiceItemNumber-new">
<label for="InvoiceItemDescription-new">Item Description: </label>
<input id="InvoiceItemDescription-new" class="InvoiceItemDescription" type="text" value="" name="InvoiceItemDescription-new">
<label for="InvoiceItemAmount-new">Item Amount: </label>
<input id="InvoiceItemAmount-new" class="InvoiceItemAmount" type="text" value="" name="InvoiceItemAmount-new">
<input id="addInvoiceItem-1" width="25" type="image" height="25" src="/payapp/images/greenplus.th.png" alt="Add New Invoice Item" onclick="addInvoiceItemButtonPushed(this)" value="invoiceItem">
</div>
<button id="CloseInvoice-1" onclick="closeInvoice(this)" type="button">Close Invoice</button>
</form>
Once I get this to work, I'm going to replace all the ids for all the inputs. Same problem. I imagine the solution looks something like this:
jQuery('input[id$=new]').attr('id').replace(/-new/,itemValue)
I just cannot figure out the syntax for this at all.

No need to use .each() ... the .attr() method accepts a function as the second parameter that returns the new value to be used as replacement
jQuery('label[for$=new]').attr('for', function(index, currentValue){
return currentValue.replace(/-new/,'-' + itemValue);
});

If I may, why not just put the input tag inside the label tag? That way, you won't need a for attribute inside the label tag.
Next, a better way to accomplish what you're trying to do would be to use the invoice ID number as the ID for the surrounding div, and add a 'new` class for "new" invoice entries.
So your form would look something like this:
<form id="InvoiceItemsForm-1" action="<?=$_SERVER['PHP_SELF']" method="post" name="InvoiceItemsForm-1" onsubmit="return false">
<div class="InvoiceItem new">
<label>New Invoice Item Number: <input class="InvoiceItemNumber" type="text" value="" name="InvoiceItemNumber"></label>
<label>Item Description: <input class="InvoiceItemDescription" type="text" value="" name="InvoiceItemDescription-new"></label>
<label for="InvoiceItemAmount-new">Item Amount: <input class="InvoiceItemAmount" type="text" value="" name="InvoiceItemAmount-new"></label>
<input id="addInvoiceItem-1" width="25" type="image" height="25" src="/payapp/images/greenplus.th.png" alt="Add New Invoice Item" onclick="addInvoiceItemButtonPushed(this)" value="invoiceItem">
</div>
<button id="CloseInvoice-1" onclick="closeInvoice(this)" type="button">Close Invoice</button>
</form>
You'll still have all the targetability you need to get the new invoice item field data, but now, you only have two things to do to convert from a "new" invoice row to an "existing" invoice item row: add an id attribute to the div and remove the new class, both of which jQuery will let you do quite easily.

Not sure I get the question, but something like:
var oldFor = $('label[for$=new]').attr('for');
var newFor = oldfor.replace(/-new/,itemValue);
$('label[for$=new]').attr('for', newFor);
.attr( attributeName, value )
attributeName = The name of the attribute to set.
value = A value to set for the attribute.
When selecting multiple elements, you will need to iterate:
$('label[for$=new]').each(function(index) {
$(this).attr('for', $(this).attr('for').replace(/-new/, '-' + itemValue));
});

retrieving text field value using javascript

I want to retrieve textfield value using javascript. suppose i have a code like:
<input type='text' name='txt'>
And I want to retrieve it using javascript. I call a function when a button is clicked:
<input type='button' onclick='retrieve(txt)'>
What coding will the retrieve function consist of?

You can do this:
Markup:
<input type="text" name="txt" id="txt"/>
<input type="button" onclick="retrieve('txt');"/>
JavaScript:
function retrieve(id) {
var txtbox = document.getElementById(id);
var value = txtbox.value;
}

Let's say you have an input on your page with an id of input1, like this:
<input type="text" id="input1" />
You first need to get the element, and if you know the Id, you can use document.getElementById('input1'). Then, just call .value to get the value of the input box:
var value = document.getElementById('input1').value;
Update
Based on your markup, I would suggest specifying an id for your text box. Incase you don't have control over the markup, you can use document.getElementsByName, like so:
var value = document.getElementsByName('txt')[0].value;

One of the way is already explained by Andrew Hare.
You can also do it by entering the value in the textbox and getting a prompt box with entered message when a user click the button.
Let's say, you have a textbox and a input button
<input type="text" name="myText" size="20" />
<input type="button" value="Alert Text" onclick="retrieve()" />
The function for retrieve()
function retrieve()
{
var text = document.simpleForm.myText.value;
alert(text);
}