change value of input with inline function - javascript

i have a input and i want access value of input and change it with inline callback function . because of some reason i can not select input with id or class or anything else and i have to use the callback function
my input :
<input type = 'text' name = 'input_name' onkeyup = 'my_func()' />
with this i can access the value and send it to my_func but i can not change it
<input type = 'text' name = 'input_name' onkeyup = 'my_func(this.value)' />
function my_func(value){
alert(value);
}
in above function when user type something i want change the value of input.
how can i change that?

You can either write your javascript directly into the onkeyup event like so:
<input type = 'text' name = 'input_name' onkeyup = 'this.value="custom text"' />
Or, you can pass this through into your function, and then modify the .value property within your function:
function my_func(elem) {
elem.value = "custom text";
}
<input type='text' name='input_name' onkeyup='my_func(this)' />
Note: At the moment your event is only firing when you let go of the key. Consider using oninput event instead of onkeyup event:
function my_func(elem) {
elem.value = "custom text";
}
<input type='text' name='input_name' oninput='my_func(this)' />

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
value = The input's current value
<input type = 'text' name = 'input_name' onkeyup = 'my_func(this)' />
function my_func(input){
input.value = "hello!"
}

You can pass the element in the function and change the value in the function
function my_func(e){
e.value="hey!"
alert(e.value);
}
<input type = 'text' name = 'input_name' onkeyup = 'my_func(this)' />

You can give your input an id attribute and access it using document.getElementById method. Using this you then change value of the input.
Something like
document.getElementById(‘inputID’).value = ‘hello’;

Related

How can I bring input field texts to address bar?

If I type some texts in the input field, how can I bring those texts to address bar ?
for eg : I type abcd to input field, I need address bar like www.google.com/abcd
Try this:
function updateAddressBar() {
const inputValue = document.getElementById("inputField").value;
window.history.replaceState({}, '', `?value=${inputValue}`);
}
<form>
<input type="text" id="inputField" oninput="updateAddressBar()">
</form>
The oninput event is used to call the updateAddressBar function whenever the value of the input field changes. The function uses document.getElementById to get the value from the input field, and then window.history.replaceState to update the URL with the new value from the input field.
This can work:
<body>
<p>Typing something...</p>
<input type="text" id="Input1" onkeyup="displayResult()"><!--onkeypress can not function backspace-->
<br>
<button id="Hite">
Hite
</button>
<script>
function displayResult()
{
var text = "www.google.com";
var Input1Value = document.getElementById("Input1").value;
document.getElementById("Hite").innerHTML = text +"\\"+ Input1Value + "\\";
}
</script>
I using onkeyup event so when the value of the input changes, it will function to set the text. Also, the reason why I do not using onkeypress is: onkeypress can not function when you press backspace.
Then, if you want to get the address, you can use document.getElementById("Hite").innerHTML to get it (As you did not required to get it)

Can you access a HTML form data from the event property, or a "this" keyword, in javascript?

I know that you can easily get data from a form like:
function getData(event) {
event.preventDefault();
const inpt = document.getElementById("inpt").value;
return inpt;
}
//OR
function getData(event) {
event.preventDefault();
const inpt = document.getElementById('form').elements[0].value;
return inpt;
}
<form id="form" onsubmit="getData(event)">
<input id="inpt" type="text"></input>
</form>
what I'd like to know is if this same value could be reached through the event property or a this keyword, withou using a "getElementBy..." of any sort or any querySelector.
I think I like James' answer better. Much simpler. Haven't tested either too extensively sorry.
If you assign all of your form elements a name attribute, on the form submission event you can use the FormData Api to get their data. I believe this won't work on I.E. or other older browsers (check for browser compatibility).
Form Data: https://developer.mozilla.org/en-US/docs/Web/API/FormData#browser_compatibility
Object.fromEntries(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries#browser_compatibility
<form id="form" onsubmit="getData()">
<input name="input1" id="inpt" type="text"></input>
<input name="input2" id="NotNeededForThis" type="text"></input>
</form>
function getData(event) {
event.preventDefault();
const formData = new FormData(event.target);
const formObject = Object.fromEntries(data.entries());
return formObject;
}
This will return the object:
{
input1: "whatever the value was",
input2: "whatever the value was"
}
Since the event listener is set on the form, the form element is available as
event.target
And so the text field value would be accessible by
event.target.elements[0].value
The form element is also this within the submit handler, so you could also do
this.elements[0].value.
You can access the value of the input through the event directly. For example in the function to access the data of the input field with the name 'input1':
function getData(event){
//format event.target.nameOfInput.value
//for the input field with the name input1
let inp1 = event.target.input1.value;
//for the input field with the name input2
let inp2 = event.target.input2.value;
//
console.log( inp1 , inp2)
}

How can I enable / disable form fields from within the form tag?

I am trying to enable / disable inputs inside a form using a checkbox. For some reason, when I place the checkbox INSIDE the form tag my javascript function won't work.
This works:
<input type = 'checkbox' id ='check' onchange = 'check()' checked />
<form id = 'form'>
<input type 'text' id = 'text' disabled />
</form>
<script>
function check() {
var c = document.getElementById("check");
if (c.checked == true){
document.getElementById("text").disabled = true;
} else {
document.getElementById("text").disabled = false;
}
}
</script>
However, when I try to move the input id = 'check' INSIDE the form tag, the function won't work:
<form id = 'form'>
<input type = 'checkbox' id ='check' onchange = 'check()' checked />
<input type 'text' id = 'text' disabled />
</form>
<script>
function check() {
var c = document.getElementById("check");
if (c.checked == true){
document.getElementById("text").disabled = true;
} else {
document.getElementById("text").disabled = false;
}
}
</script>
This must be something very silly, but I can't figure it out.
Please notice: I am trying to use this inside a bigger, multi-page form that asks from residence information first and then, in the second tab/page, asks for mailing info. So, if the checkbox is checked I want mailing info fields to be disabled.
Any idea? Help is appreciated!
It looks like that inside a form the check variable what you want to call will be the HtmlNode itself because it got the same name(id).
So in you code with check() you are try to call the HtmlNode which is for sure not a function.
If you rename the function to something like test it will work fine.
or use the addEventListener method to pass the function itself and this will also keep your code cleaner.
You can have a look in this fiddle:
https://jsfiddle.net/k7xjv0Ls/
So this thing is probably a possibility to make it easy to manage forms it self. e.g. You don't need any <script> here at all, if you do something like this:
<form id = 'form'>
<input type = 'checkbox' id ='check' onchange = 'text.disabled = check.checked' />
<input type='text' id = 'text'/>
</form>
Explanation for all modern browsers like "Firefox, Chrome, Safari":
the id of an HTMLNode usually goes to the window object as an attribute to reference the HTMLNode itself.
If the HTMLNode is a input field AND it is inside a form tag it will always shadow all kinds of variables (Named functions, vars, consts and lets) but just inside the "Event Attribute" of the HTML, not in the javascript files or all what is inside the <script> tag.
In your case window.check is ambiguous - it could be window.check the function or window.check the field with id="check"
Try to never reuse function, var an element names/IDs
To dix your immediate issue, just rename and pass the checkbox
function checkIt(theCheck) {
const c = theCheck.checked
document.getElementById("text").disabled = c;
}
<form id='form'>
<input type='checkbox' id='check' onchange='checkIt(this)' checked />
<input type='text' id='text' disabled />
</form>
I however STRONGLY recommend to use event listeners
window.addEventListener("load", function() {
document.getElementById("check").addEventListener("change", function() {
document.getElementById("text").disabled = this.checked;
});
});
<form id='form'>
<input type='checkbox' id='check' checked />
<input type='text' id='text' disabled />
</form>

pass a variable name and evaluate it to that variable's value

I have a form with many buttons all of which print a value in the relevant textbox. the problem is the value is a fairly long text string and I would like to create a shorter variable eg. 'text' and make that variable equal to eg. 'some long sentence that I only want to type once'. any idea how I can edit this code to make this possible
function setInput(button, setValue) {
var buttonVal = button.value,
textbox = document.getElementById('input_' + buttonVal);
textbox.value = setValue;
<html>
<input type='submit' name='submit_a' value="a"
onclick="setInput(this,'make_me_a_variable'); return false;">
</html>
var textLookup = {
btnName1: "Long text",
btnName2: "Longer text"
};
// inside your function
var buttonText = ...,
inputText = textLookup[buttonText];
// do stuff with inputText;
Instead of defining the event handler in the HTML code, you could also create the event handler with javascript. You need to do that in another event handler for document.onload. When you do it earlier, the input HTML element might not have been parsed and created yet, so no event handler for it can be added.
<script>
// store your text in a variable
var inputText = 'make_me_a_variable';
// define some code which is executed when the page is loaded:
document.addEventListener("load",function(event){
// get the input by the id property I added to the HTML below.
var input = document.getElementById('submit_a');
// add an event handler for the click event (replaces the onclick HTML property)
input.addEventListener("click",function(event) {
setInput(this, inputText);
return false;
});
});
</script>
[...]
<input id="submit_a" type='submit' name='submit_a' value="a" >
You can create a variable and assign your long text to the variable and use it where ever you want.
Modified code
var longText = 'long text here'.
function setInput(button) {
var buttonVal = button.value,
textbox = document.getElementById('input_' + buttonVal);
textbox.value = longText ;
}
Html:
<input type='submit' name='submit_a' value="a"
onclick="setInput(this); return false;">

pass a value from javascript to html

I have a hidden field
<input type="hidden" name="smname" />
Now i have a function in a js file count(); How can I assign the return value to the hidden field?
You could give your hidden field an unique id:
<input type="hidden" name="smname" id="smname" />
and then in javascript:
document.getElementById('smname').value = count();
where count is the function you want to invoke and which returns the value:
var count = function() {
return 'some value';
};
Try:
document.getElementsByName('smname')[0].value = count();
You want to use code such as
document.getElementById("name")
then deal with it as an object. remember to define a name/id for your html element.
If you give the input element an id attribute you will be able to get a reference to it in javascript using the document.getElementById() method then set the value property of the element
HTML
<input id="surname" type="hidden" name="smname" />
Javascript
var input = document.getElementById("surname");
input.value = count();

Categories