Javascript enabling input field after disable=true - javascript

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.

Related

Conditionally required form field (Checkbox)

I already checked multiple sites and posts regarding this topic, but couldn't find an answer yet. I simply want to fire the following JS code if someone clicked a specific Checkbox in my form:
function updateRequirements() {
var escortWrapper = document.querySelector(".elementor-field-type-html .elementor-field-group .elementor-column .elementor-field-group-field_ceffa28 .elementor-col-100");
if (escortWrapper.style.display != 'none') {
document.getElementById('escort').required = true;
} else {
document.getElementById('escort').required = false;
}
}
You can check and test that for yourself on the following site:
Advelio Website
If you click on the second checkbox field, there is a field appearing where you can type in your name. And this field is currently optional, but I want to make this required if someone clicked the second checkbox.
You can do it like this:
function updateRequirements() {
const btn = document.getElementById('escort');
btn.required = !btn.required;
}
document.querySelector("#requireCheck").addEventListener('click', updateRequirements);
<form>
<input type="checkbox" id="requireCheck">
<label for="requireCheck">Should the the other input be required?</label>
<br>
<input type="text" id="escort">
<input type="submit" value="submit">
</form>
I simplified the function updateRequirements for the scope of this answer, but it can be changed to anything or any condition.
You have to have event listener for click event and if you dont have create one and wrote the function with logic what to do if is click

delete function on multiple inputs

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));
}

focus() doesn't work in input (all browsers)

I know there is tons of questions like that on stackoverflow but none of them solved my problem. I'm trying to build a small "pyramid" word game. You have to find the right translation for a korean word, then a new input with a new word will pop up. Solve this word, the next input field will pop up, ...
HTML:
<input id="ha_1" class="halter" placeholder="안녕하세요" type="text" onblur="checkSol(id);"></input><br/>
<input id="ha_2" class="halter" placeholder="얼굴" type="text" onblur="checkSol(id);"></input><br/><br/>
<input id="ha_3" class="halter" placeholder="문" type="text" onblur="checkSol(id);"></input><br/><br/>
Here is the relevant piece of code:
// compare if user input is correct solution
if (user_input == solution){
// if correct, display the next input field:
$('#' + e_dies).nextAll('.halter:first').css('display', 'block');
// ==> supposed to focus the fadedIn input
$('#next_input').focus();
// count up to the next word
l_count++;
// give correct/incorrect feedback
if(l_count == last_sol){
tell_me.innerHTML = 'Correct';
return false;
};
} else if(document.getElementById(e_dies).value == "") {
tell_me.innerHTML = '';
}
This line here $('#' + e_dies).nextAll('.halter:first').css('display', 'block'); displays a input field. Right after, $('#next_input').focus(); is supposed to focus this input field , which just faded in. I tried some solutions like using setTimeout or moving it to the end of the function. Nothing worked for me.
Strangely, other commands like $('#next_input').css('color', 'red'); work just fine, just the .focus() makes trouble.
Help would be much appreciated!
Though the question seems to be not that clear i have implemented a small fiddle showing input box focus working on conditional value.I hope this can give some help
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function checkSol(id){
var solution="testname";
console.log(event);
var user_input=event.target.value;
if (user_input == solution){
// if correct, display the next input field:
// ==> supposed to focus the fadedIn input
$('#focusinputbox').focus();
}
}
</script>
<input id="ha_1" class="halter" placeholder="안녕하세요" type="text" onblur="checkSol(id);" /><br/>
<input id="ha_2" class="halter" placeholder="얼굴" type="text" onblur="checkSol(id);" /><br/><br/>
<input id="ha_3" class="halter" placeholder="문" type="text" onblur="checkSol(id);" /><br/><br/>
<input id ='focusinputbox' placeholder='inputtobefocussed'/>

Editing html input element from javascript bugs out

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/

Restore textfield's default value when user clicks the reset button JavaScript

I'm trying to get the textfields to return to their default value when the user clicks the Reset button.
All it does now when the user clicks the Reset button is replacing the user's text with ''.
How can I do it by using pure JavaScript (no jQuery)?
HTML:
<p>Type the first number</p>
<input id="first" type="text" placeholder="First Number" />
<p>Type the second number</p>
<input id="second" type="text" placeholder="Second Number" />
<button id="aButton">Apply</button>
<button id="rButton">Reset</button>
<div id="add"></div>
JAVASCRIPT:
app.onactivated = function (args) {
var aButton = document.getElementById("aButton");
aButton.addEventListener("click", buttonClickHandler, false);
var rButton = document.getElementById("rButton");
rButton.addEventListener("click", buttonResetHandler, false);
};
...
function buttonResetHandler(evetInfo) {
document.getElementById("first").innerText = '';
document.getElementById("second").innerText = '';
}
innerText is an invalid property that is implemented in IE browsers and is used for setting/getting text content of non-form elements, if the values should be set as default, you can use defaultValue property:
var a = document.getElementById("first"),
b = document.getElementById("second");
a.value = a.defaultValue;
b.value = b.defaultValue;
If you want to reset all the form elements, you can use .reset() method of DOM HTMLFormElement object:
document.forms["myForm"].reset();
location.reload(); // reloads the page
history.go(0); // deletes the history
But if you need to preserve some values inside of the page then reassign the values in the function again. To reassign, write the variable (declare in let to change later) again in the function and change the textContent again.
Replace,
document.getElementById("first").innerText
With,
document.getElementById("first").value
Example:
<input id="txtBox" type="text" value="lama">
<input type="button" value="reset lama" onclick='document.getElementById("txtBox").value="lama2";'>
create an init function that sets the default values for each input, then you can call that:
function initializeInputs() {
document.getElementById("first").value = '';
document.getElementById("second").value= '';
}
function buttonResetHandler(e) {
initializeInputs();
}

Categories