I have bunch of inputs like:
<input />
<input />
<input />
and a button which ads extra input
<button>Add Input</button>
The issue is that when a user put the text in the input(s) and add
additional input afterwards (i.e. press Add Input) the entered text in old inputs disappears.
JSFiddle:
<div id="inputs"></div>
<button onclick="document.getElementById('inputs').innerHTML += '<input /><br>'">Add Input</button>
So I decided to update <input> value attribute. I have tried with onchange but had no luck.
The code with errors and trials is super simple and looks like:
function change_value(el) {
document.getElementById('some-id').value = el.value
}
<input id="some-id" value="${this.value}" onchange="change_value(this)" />
Will be grateful for any suggestions about how to keep <input value up-to-date with user text.
It depends on what content you want to update. You can find a snippet below, that works oninput and updates the textContent of a span.
const input = document.getElementById('some-id')
const display = document.getElementById('updated')
input.addEventListener('input', function(e) {
display.textContent = this.value
})
<input id="some-id" value="" /><br /><br />
<div>Updated value: <span id="updated"></span></div>
EDIT
A new snippet may clear things up a bit.
const btnAdd = document.getElementById('add')
btnAdd.addEventListener('click', function(e) {
var input = document.createElement('input');
input.type = "text";
document.getElementById('inputs').appendChild(input)
})
<div id="inputs"></div>
<button id="add">Add Input</button>
Use createElement() instead of innerHTML.
Try using innerHtml like this
document.getElementById('some-id').innerHtml instead of value
https://www.w3schools.com/js/js_htmldom_html.asp
Actually, it is not possible this way, maybe with some tricks like with any change store the value and create new input with the new value or change the innerHtml, maybe it works.
Related
I have a HTML page with an input field that the user enters a value into. The HTML code looks like this:
<div class="d-flex mg-b-0 mb-3" id="cbWrapper2">
<input type="number" name="message_average" class="form-control" id="id_message_average">
</div>
I'm trying to use JavaScript to get the value entered by the user so that I can then compare it against another value and write out the result, but I'm not sure how I collect the initial value being entered. What I have so far:
<script>
var value = document.getElementById("id_message_average").value;
console.log(value);
</script>
I'm just trying to write the value out for now so that I can tell it's working. Do I need to put it into some kind of event listener maybe when the user clicks onto another input field, or is there a way to have the script fire when a character is added?
There are indeed events to use to listen to changes in the input. One of them is called input, and you can use it like below.
The input event fires when the value of an <input>, <select>, or <textarea> element has been changed. More on MDN's doc.
var input = document.getElementById("id_message_average");
input.addEventListener("input", ()=>{
console.log(input.value)
});
<div class="d-flex mg-b-0 mb-3" id="cbWrapper2">
<input type="number" name="message_average" class="form-control" id="id_message_average">
</div>
For that you have add event listener.
let userInput = document.getElementById("id_message_average");
userInput.addEventListener("input", (e)=> {
console.log(e.target.value)
})'
You can use onClick function. If you choose onClick then you must need a button. Here is the example,
<form>
<div class="d-flex mg-b-0 mb-3" id="cbWrapper2">
<input type="number" name="message_average" class="form-control" id="id_message_average">
</div>
<button type='button' onclick="getInputValue()">Click me</button>
</form>
<script>
function getInputValue() {
var value = document.getElementById("id_message_average").value;
console.log(value);
}
</script>
How can you copy an hidden input value attribute, manipulate it and then change it with a click function? To be more precise:
This:
<input type="hidden" id="destination" value="/change1/change2/fixed-part" />
To this:
<input type="hidden" id="destination" value="/changedtext/fixed-part" />
I've made some process but couldn't get the desired result. So far I get the value, manipulate it (not sure if it works alright) but couldn't replace it with the original one.
Here is the jsfiddle:
https://jsfiddle.net/3ry4cc79/1/
Try this,
document.getElementById('destination').value = "/changedtext/fixed-part";
$("button").click(function(event){
event.preventDefault();
$('#destination').val(function() {
return this.value.replace('change1', 'changedtext')
});
alert("Changed Value:"+$('#destination').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="destination" name="_wp_http_referer" value="/change1/change2/fixed-part" />
Try this should work,
<input type="hidden" id="destination2" name="_wp_http_referer" value="/changedtext/fixed-part" />
<button>Click to change the value</button>
// Get the hidden element
let el = document.getElementById('destination');
// Add the new val you want to minipulate the hidden elemets value with
let newVal = 'changedtext';
// then at a later state, you click the button
this.clickToChange = function () {
// and voila, the value is replaced on the hidden element
el.value = el.value.replace('change1/change2', newVal);
}
I would like to clear a text box when a radio button above the text box is selected.
I have tried this:
function clearThis(target){
target = document.getElementById(target);
target.value = "";
}
<input type="radio" name="not_req" id="clear_req" value=""
title="Click here to clear the No Auth need flag"><span id="clear" onclick = 'clearThis("claims")' >Clear
The box I would like to clear is
<input type="text" size="5" name="auth_for" id="claims" value="{$prior_auth->get_auth_for()}" title="Set the number of times no auth can be used">
Took most of this from http://jsfiddle.net/BMrUb/ but I can see that the example is clearing the adjacent text box. I would like to clear a text box not adjacent to the radio button.
As Gerald said place your onclick="" in the <input type="radio" ... >, not in the <span>.
The problem is that it's the sibling input element that needs its value clearing, not the span, even though you only want it to clear when people click on the span element. So the example code below does this. You're also best off decoupling your javascript from your HTML by using event listeners (and not using the old-fashioned onclick attribute).
var clearSpanEl = document.getElementById("clear");
clearSpanEl.addEventListener("click", function(e) {
var inputEl = e.target.previousElementSibling;
inputEl.value = "";
}, false);
<input type="text" name="search" id="search" value="I can be cleared" />
<span id="clear">Clear results</span>
I've forked your JSFiddle here, so you can see it working.
I'm sure this is a simple mistake on my end but I cannot figure it out. I want users to be able to enter a number in a form field, click a button, then that many fields will be created. Here is my HTML and JavaScript so far. The removeChild works but it will not add fields:
<body>
<script language="javascript">
function addFields(){
var numFields = document.getElementById("numParts").value;
var theContainer = document.getElementById("partsList");
//document.write(numFields);
while (theContainer.hasChildNodes()) {
theContainer.removeChild(theContainer.lastChild);
}
for(i=0;i<numFields;i++){
var input = document.createElement("input");
input.type = "text";
input.name = "participant" + i;
theContainer.appendChild("input");
theContainer.appendChild(document.createElement("br"));
}
}
</script>
<form name="enterFields">
<input type="text" id="numParts" />
<input type="button" value="Add" onClick="addFields();" />
<div id="partsList">
<input type="text" />
</div>
</form>
</body>
The problem is that when you try to add the input with appendChild you are specifying a string, when you should be passing the actual element.
This is what you want (note the lack of quotes):
theContainer.appendChild(input);
Here is a working example
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);
}