I have a js funciont that erase the last digit on an input, it work fine, but the problem is that i have another input and doesn't work. It just erase te digit on the first input.
<script>
function deleteTag(){
var strng=document.getElementById('entrada_1').value;
document.getElementById('entrada_1').value=strng.substring(0,strng.length-1);
}
</script>
<form method="POST" action="dashboard.php">
<label>RUT</label>
<input id="entrada_1" placeholder="12345678-9" type="text" name="rut">
<label>pass</label>
<input id="entrada_2" placeholder="pass" type="password" name="pass">
</form>
it works fine when is used on the input "entrata_1" but on "entrada_2" doesn't work, how can i make it work where the focus is?
You should instead just use a button without wrapping it in an anchor tag, give an onclick attribute like such onclick="deleteTag();". Give both the input fields a class name like class='entrada'.
Then in the function:
function deleteTag(){
var allInputs = document.querySelectorAll('.entrada');
allInputs.forEach((input) => input.value = input.value.substring(0, input.value.length - 1));
}
Related
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)
So the problem is this:
I try to get the text that is inside a specific paragraph with a specific id name and pass it inside a contact form .
i tried this
var src = document.getElementById("ptext"),
dest = document.getElementById("inform");
src.addEventListener('input', function() {
dest.value = src.value;
}};
Where "ptext" is the id of the element with the text of the paragraph and the "inform" is the id of the field in contact form.
The above code will trigger when the user clicks a button.
I am new in Javascript so the code above is probably wrong or faulty.
UPDATE: The HTML Code is this :
<p id="pext">Hello this is the text that is to be imported inside the form field</p>
form field:
<input type="text" name="your-subject" value="" size="40" id="inform" aria-required="true" aria-invalid="false" placeholder="Subjext">
I'm not sure if this is what you were trying to do, but if you're trying to get the text of a paragraph into a form field on a button click (useful a lot of the time with hidden form fields), then here is a code snippet to help you:
var src = document.getElementById("ptext");
var dest = document.getElementById("inform");
var getText = function () {
dest.value = src.innerText;
event.preventDefault();
return false;
}
<p id="ptext">This is some fake text that we'll put into the form.</p>
<form onsubmit="getText()">
<label for="text">Info from paragraph:</label><br>
<input type="text" id="inform" name="text"><br><br>
<input type="submit" >
</form>
Hello and welcome to Stack Overflow :)
To get the text that is inside specific paragraph, use
var src = document.getElementById("ptext").innerText;
To assign the value to an input field (which is what I'm assuming you are trying to do), use
document.getElementById("inform").value = src;
If you supply us with HTML element we could be even more precise.
html:
<label>Label1</label><br>
<input type="text" name="first" onclick="somefunc()"><br>
<label>Label2</label><br>
<input type="text" name="second"><br>
Javascript:
function somefunc() {
var second = document.getElementsByName('second')[0];
second.disable = true;
}
When I click the first input the second is disabled (that was what I want), but when I type something into the first input field, then delete it, the second is still disabled. Is there a way so I can enable it again?
I couldn't find an other event which can solve this.
You can listen to the keyup event on the first input box and check the value of first input box for enabling or disabling second input.
<label>Label1</label><br>
<input type="text" name="first" onkeyup="somefunc()"><br>
<label>Label2</label><br>
<input type="text" name="second"><br>
<script>
function somefunc() {
var first = document.getElementsByName('first')[0];
var second = document.getElementsByName('second')[0];
if(first.value){
second.disabled = true;
}else{
second.disabled = false;
}
}
</script>
Seems you have missed enabling textbox here. If you can see in previous reply, you just need to re-enable textbox into same state as it was before.
I have an input form which looks like this:
<input type="number" value="0.00" step="0.05">
I found the step function which technically solves my increment problem changing it to 0.05 instead of the default 1. I have however not found a solution where I can change the increment without changing the valid inputs.
The input can take any number but the most common values will be in increments of 0.05. Is there a work-around for this? A solution using JavaScript is also more than welcome.
Thank you very much!
EDIT:
Adding nonvalidateto the html form-tag solved this for me. Now pressing the buttons use the increments I want but when I need to specify more accurately than the steps the form still accepts the values.
<form action="/run" novalidate>
<input type="number" value="0.00" step="0.05">
<input type="submit">
</form>
Using novalidate in the form tag will get rid of the validation for the whole form but keep the increments implemented by step.
Update
"I did add nonvalidate to the form tag. It let's me do what I want as of now but it might not be the best solution."
If you don't want your form "compromised" by novalidate, then have 2 forms:
Form A [No action or method]
All user interaction and calculations are here.
All inputs can be modified without worrying about built-in validation from the form.
Form B [Set action and method optional target]
The submit button resides within
Add a hidden input for each value on Form A you want to submit and ensure each has a name attribute and value.
Any client-side validation should be done here.
With that setup you'll need an event like onbeforesubmit so the values of Form A can transfer over to Form B before it submits to the server. Unfortunately I don't think it exist as a standard, but to emulate it is simple:
formA.onsubmit = b4Submit;
function b4Submit(event) {
hidden_Input_In_FormA.value = number_Input_With_Crazy_Step_In_FormA.value
return true;
}
So this contrived example shows an event handler that gets the value from one form then stores it in the other form. Next it continues by submitting whatever data it has. This is due to the callback returning true, should false be returned, the callback function itself dies and so does the submit event along with it.
The Demo has been updated to do what was just described above. Note: there are no novalidate attributes in use. The second form (Form B or form#tx) is sending text from a hidden input as far as it's concerned. A number like -103.002684109 is not valid if it's from an <input type='number'> but from a text or hidden input, it is just text (although I believe the actual data in most form controls is actually a string not a number).
"The input can take any number but the most common values will be in increments of 0.05. Is there a work-around for this? A solution using JavaScript is also more than welcome."
You can change any attribute you want on any tag AFAIK. Programatically the syntax is simple with Plain JavaScript:
Object.property = "string"
Object: a referenced <element> tag
property: when you reference an standard attribute like a property it's becomes a property.
string: the value must be a string
Here's a basic way of changing a standard attribute programmatically:
var obj = document.querySelector('a');
obj.href = "https://google.com"; //
The following Demo uses:
Document.Forms
HTMLFormElement.elements
HTMLFormControlsCollection
Dot Notation
Demo
Demo can send to a live test server the response is sent to an iframe to view
var ui = document.forms.ui;
var tx = document.forms.tx;
var u = ui.elements;
var x = tx.elements;
var D = u.digit;
var C = x.cache;
var lo = u.min;
var hi = u.max;
var inc = u.step; // I think this what you specificly
var t = u.type;
var chg = u.change;
chg.onclick = chgAttr;
tx.onsubmit = cacheVal;
function chgAttr(e) {
D.min = lo.value;
D.max = hi.value;
D.step = inc.value;
D.type = t.value;
}
function cacheVal(e) {
C.value = D.value;
return true;
}
body {
font: 400 16px/1.5 'Consolas'
}
#digit {
margin-right: 15px;
}
input,
output,
button,
select,
option,
label {
display: inline-block;
font: inherit
}
select {
padding: 3px 5px
}
[type='submit'] {
float: right;
}
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<style></style>
</head>
<body>
<form id='ui' oninput='out.value = digit.value'>
<fieldset>
<legend>Click Button to Change Input</legend>
<input id='digit' min='' max='' step='' type='number'>
<button id='change' type='button'>CHANGE</button>
<output id='out' for='digit'></output>
</fieldset>
<fieldset>
<legend>Attribute Adjustments</legend>
<input id='min' min='-2147483648' max='2147483648' type='number' placeholder='min'>
<input id='max' min='-2147483648' max='2147483648' type='number' placeholder='max'>
<input id='step' type='number' placeholder='step'>
<label for='type'>Type:
<select id='type'>
<option>number</option>
<option>text</option>
<option>range</option>
<option>hidden</option>
<option>color</option>
<option>time</option>
</select>
</label>
</fieldset>
</form>
<form id='tx' action='https://httpbin.org/post' method='post' target='response'>
<input id='cache' name='cache' type='hidden'>
<input type='submit'>
</form>
<iframe src='about:blank' name='response'></iframe>
<script></script>
</body>
</html>
I have this input field in html:
<input id="title" type="text" class="" />
A button will allow the user to randomize the value of the input field by calling a js function.
var title = document.getElementById("title");
title.removeAttribute("value");
title.setAttribute("value",random_name);
If the user wants to change the value auto-asigned by my function (aka random_name), he can simply type something else in the input field.
All works fine until now, however if the user changes his mind and clicks the randomize button again, the function is called and "value" attribute is modified, but the user still sees the last thing he typed and not the new random value.
Is there a way to fix this or maybe a workaround?
Just do title.value = random_name
You can set an input's value by element.value = "desired_value". If you use that, it works.
http://jsfiddle.net/f4gVR/2/
<input id="title" type="text" class="" />
<input type="button" class="" onclick="randomValue()" value="Random" />
function randomValue() {
var title = document.getElementById("title");
title.value = Math.random(); // assign random_name to title.value here
}
if it's your random_name bugging out, you should post the code. Try this first. Just replace Math.random() with random_name.
you need to use title.value = random_name; instead of title.setAttribute("value",random_name);
Fiddle: http://jsfiddle.net/4dhKa/