I'm creating a post slug input, so when editing post title input it'll inherit it's value to the disabled slug input amd there is a button when clicking it enables the disabled input. It is working good, but I want on clicking the button it'll stop Inheriting values.
Here is my code :
<input type="text" id="a"/>
<input type="text" id="b" disabled/>
<button id="btn">Stop</button>
<script>
document.querySelector('#a').addEventListener('keyup', () => {
document.querySelector('#b').value = document.querySelector('#a').value;
});
document.querySelector('#btn').addEventListener('click', () => {
document.querySelector('#b').disabled = false;
});
</script>
I've googled, but i haven't found.
Thank You
You can removeEventListener of the a element keyup after clicking the button.
function onAKeyup() {
document.querySelector('#b').value = document.querySelector('#a').value;
}
document.querySelector('#a').addEventListener('keyup', onAKeyup);
document.querySelector('#btn').addEventListener('click', () => {
document.querySelector('#b').disabled = false;
document.querySelector('#a').removeEventListener('keyup', onAKeyup)
});
<input type="text" id="a"/>
<input type="text" id="b" disabled/>
<button id="btn">Stop</button>
Related
I have an input element and have two blur event on the same. First one I added as an eventListener and the second one as onBlur of that element.
I added a button and call a method on button click. The method triggers empty blur event on the element.
It doesn't trigger the onBlur I added as an eventListener.
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password" id="password" onBlur="Hello();">
<input type= "button" value ="Click" onClick=TriggerBlur();>
</form>
<script>
const password = document.querySelector('input[type="password"]');
password.addEventListener('blur', (event) => {
event.target.style.background = 'pink';
});
function TriggerBlur(){
$("#password").blur();
}
function Hello(){
alert("Hello");
}
</script>
Here is the jsFiddle: https://jsfiddle.net/17gsozLd/
When you click the button, you will see only an alert. The color of the text field won't change.
Instead of using $("#password").blur();
Use, dispatchEvent:
const event = new Event('blur');
password.dispatchEvent(event);
So, your final code should be like: (without the need of jquery)
const password = document.querySelector('input[type="password"]');
password.addEventListener('blur', (event) => {
event.target.style.background = 'pink';
});
function TriggerBlur(){
const event = new Event('blur');
password.dispatchEvent(event);
}
function Hello(){
alert("Hello");
}
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password" id="password" onBlur="Hello();">
<input type= "button" value ="Click" onClick=TriggerBlur();>
</form>
Im trying to figure out how can Javascript check if input field has any value, then it removes class value "is-invalid".
I have this code so far:
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName">
</form>
<script>
var checkInput = document.getElementById("inputName");
if (checkInput.value) {
element.classList.remove("is-invalid");
}
</script>
As you can see theres a red border (class="is-invalid") around the input. As soon as user puts any value in the inputfield, Javascript will remove class value "is-invalid".
Or might there be an easier option with jQuery?
You have a mistake in your code. You have used
element.classList.remove("is-invalid");
which is wrong, you have to use it like
checkInput.classList.remove("is-invalid");
You can use like this in javascript.
function check(){
var checkInput = document.getElementById("inputName");
if (checkInput.value) {
checkInput.classList.remove("is-invalid");
} else {
checkInput.classList.add("is-invalid");
}
}
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName" onkeyup="check()">
</form>
In Jquery you can try like
$('#inputName').keyup(function(e){
if ($('#inputName').val()) {
$('#inputName').removeClass("is-invalid");
} else {
$('#inputName').addClass("is-invalid");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName">
</form>
You need to add an event listener to the element to know when it changes.
var checkInput = document.getElementById("inputName");
checkInput.addEventListener('keyup', (e)=>{
if (e.target.value!==''){
e.target.classList.remove("is-invalid");
}
})
I have a requirement in java script
When i have a value in one field that value is copied into another field.
Once the same value copied in another field, a button can be clicked that makes the copied value so it cannot be changed and not even editable.
For first one i have done.
<input type='text' id='field_1'></br>
<input type='text' id='field_2'> </br>
$(document).ready(function () {
$('#field_1').on('change', function (e) {
$('#field_2').val($('#field_1').val());
});
});
You can bind an click handler to your button that will unbind your first input using unbind(). It can also make the second input readonly using .prop("readonly",true); and can disable itself using 1.prop("disabled", true);`
Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='field_1'></br>
<input type='text' id='field_2'> </br>
<input type='button' id='btnReadOnly' value="Make Readonly">
<script>
$(document).ready(function () {
$('#field_1').change(function (e) {
$('#field_2').val($('#field_1').val());
});
$('#btnReadOnly').click(function() {
$('#field_1').unbind();
$('#field_2').prop("readonly",true).css("background-color","#dddddd");
$('#btnReadOnly').prop("disabled", true);
});
});
</script>
You need to add readonly property to both your input fields on click of your button.
Like this :
$(document).ready(function () {
$("#not_editable").hide();
$('#field_1').on('change', function (e) {
$('#field_2').val($('#field_1').val());
if($(this).val()!='')
{
$("#not_editable").show();
}
});
$("#not_editable").click(function(){
$('#field_1').prop("readonly",true);
$('#field_2').prop("readonly",true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='field_1'></br>
<input type='text' id='field_2'> </br>
<button id="not_editable" type="button">Mark Un-editable</button>
I'm new to javascript / jquery so I may be missing something obvious, but I've found solutions that disable the submit button until all text fields are filled, and I've found solutions that disable it until a file is chosen. However, my form consists of a file input and 3 text fields and I cannot find a way of it being disabled until all text fields AND a file is chosen.
The distilled version of the code I'm working with is here:
HTML
<div>
<input type="file" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="Upload" class="submit" id="submit" disabled="disabled" />
</div>
JS
$('.submit').click(function() {
var empty = $(this).parent().find("input").filter(function() {
return this.value === "";
});
if(empty.length) {
$('.submit').prop('disabled', false);
}
});
})()
Thanks for your help
https://jsfiddle.net/xG2KS/482/
Try capture the event on those field and checking the empty values by using another function, see below code :
$(':input').on('change keyup', function () {
// call the function after
// both change and keyup event trigger
var k = checking();
// if value inc not 0
if (k) $('.submit').prop('disabled', true);
// if value inc is 0
else $('.submit').prop('disabled', false);
});
// this function check for empty values
function checking() {
var inc = 0;
// capture all input except submit button
$(':input:not(:submit)').each(function () {
if ($(this).val() == "") inc++;
});
return inc;
}
This is just an example, but the logic somehow like that.
Update :
Event Delegation. You might need read this
// document -> can be replaced with nearest parent/container
// which is already exist on the page,
// something that hold dynamic data(in your case form input)
$(document).on('change keyup',':input', function (){..});
DEMO
Please see this fiddle https://jsfiddle.net/xG2KS/482/
$('input').on('change',function(){
var empty = $('div').find("input").filter(function() {
return this.value === "";
});
if(empty.length>0) {
$('.submit').prop('disabled', true);
}
else{
$('.submit').prop('disabled', false);
}
});
[1]:
The trick is
don’t disable the submit button; otherwise the user can’t click on it and testing won’t work
only when processing, only return true if all tests are satisfied
Here is a modified version of the HTML:
<form id="test" method="post" enctype="multipart/form-data" action="">
<input type="file" name="file"><br>
<input type="text" name="name"><br>
<input type="text" name="email"><br>
<button name="submit" type="submit">Upload</button>
</form>
and some pure JavaScript:
window.onload=init;
function init() {
var form=document.getElementById('test');
form.onsubmit=testSubmit;
function testSubmit() {
if(!form['file'].value) return false;
if(!form['name'].value) return false;
if(!form['email'].value) return false;
}
}
Note that I have removed all traces of XHTML in the HTML. That’s not necessary, of course, but HTML5 does allow a simpler version of the above, without JavaScript. Simply use the required attribute:
<form id="test" method="post" enctype="multipart/form-data" action="">
<input type="file" name="file" required><br>
<input type="text" name="name" required><br>
<input type="text" name="email" required><br>
<button name="submit" type="submit">Upload</button>
</form>
This prevents form submission if a required field is empty and works for all modern (not IE8) browsers.
Listen for the input event on file and text input elements, count number of unfilled inputs and, set the submit button's disabled property based on that number. Check out the demo below.
$(':text,:file').on('input', function() {
//find number of unfilled inputs
var n = $(':text,:file').filter(function() {
return this.value.trim().length == 0;
}).length;
//set disabled property of submit based on number
$('#submit').prop('disabled', n != 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="file" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="Upload" class="submit" id="submit" disabled="disabled" />
</div>
For my approach, I'd rather use array to store if all the conditions are true. Then use every to make sure that all is true
$(function(){
function validateSubmit()
{
var result = [];
$('input[type=file], input[type=text]').each(function(){
if ($(this).val() == "")
result.push(false);
else
result.push(true);
});
return result;
}
$('input[type=file], input[type=text]').bind('change keyup', function(){
var res = validateSubmit().every(function(elem){
return elem == true;
});
if (res)
$('input[type=submit]').attr('disabled', false);
else
$('input[type=submit]').attr('disabled', true);
});
});
Fiddle
I have a page with multiple divs that all look like the example below.
Each div contains a field, a hidden field and a button.
How can I achieve that by click on the button the (visible) input field gets triggered ?
I need to trigger either a click or focus as both fire the same function.
Each button in question has the class="triggerBtn" and the corresponding input field has the class="inputField".
Example div:
<div>
<input type="text" class="inputField" id="field1" name="field1" />
<input type="hidden" name="field1" />
<button type="button" class="btn btn-primary triggerBtn">Find</button>
</div>
I guess you want:
$(".triggerBtn").click(function () {
$(this).closest('div').find('.inputField').focus();
});
add
Onclick="function()" see here
if you need to trigger it manually using jquery you can to this by
$("#field1").trigger("click");
see also here
$(".triggerBtn").on("click",function(e){
$(this).closest("div").find(".inputField").click();
//or $(this).closest("div").find(".inputField").focus();
});
$(".triggerBtn").parent().children("input[type:text]").first().focus()
Updated Jsfiddle: http://jsfiddle.net/ZmL4y/3/
$(document).on("click",".triggerBtn", function() {
var inputField = $(this).closest('div').find('.inputField');
if($(inputField).is(":visible"))
{
$(inputField ).focus();
}
});