I have a <p> that prints a value is it possible that the value can be printed in the <input>?
for example:
<p>2</p>
<input type="number">2</input>
This will require the use of Javascript. Add an id to your paragraph and input so you can identify them, then set the value of your input field to the textContent of your paragraph:
let myParagraph = document.getElementById('my-paragraph');
let myInput = document.getElementById('my-input');
myInput.value = myParagraph.textContent;
<p id="my-paragraph">2</p>
<input type="number" id="my-input"/>
Input element has an attribute called value.
So you can do -
<input type="number" value=2 />
Related
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
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" />
how can i get that label tag input type="text" value?
This is not my code and the structure can't be altered
<div id="test">
<label class="control input text">
<span class="wrap">startdate</span>
<input type="text">
<span class="warning"></span>
</label>
</div>
Assuming you don't need to support anything below IE8, you can use document.querySelector to select that specific input element and then get its value via its .value property:
var value = document.querySelector('#test label.control input').value;
Just like that
var value = document.querySelector('#test .control input').value;
you can do that in jQuery
var html = $('#test lable').html();
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);
}
how to get hidden element value in javascript
using the following document function
document.getElementById("elementId").value;
elementId-> id defined for the hidden element
If the element has an id attribute and if it has a value attribute then you can use value property
document.getElementById( "hidElem" ).value;
for a hidden input element like
<input type="hidden" id="hidElem" />
otherwise you can use textContent property
document.getElementById( "hidElem" ).textContent;
for a hidden div element like
<div style="display: none;" id="hidElem">value of hidden element</div>
Putting ids on all your elements is overkill in my opinion. You can access them by their name attribute - all you need is a reference to the form object.
<form id="blah">
<input type="hidden" name="inputOne" value="1" />
<input type="hidden" name="inputTwo" value="2" />
</form>
var formObj = document.getElementById('blah');
alert("Input one value: " + formObj.inputOne.value);
alert("Input two value: " + formObj.inputTwo.value);
This applies to all types of form input.