How to link input button display:none behavior with the label - javascript

I want to link an input display: none button to a label so that when I click on the label, it has the same behavior of my hidden input button. How can I do this?
Below is my HTML5 code:
<label for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" th:required="true" />

If you want the label to trigger a click event on the input type=file, then use:
$('.uploadFile').click(function() {
$("#model1").unbind('click').bind('click');
})
I've also added how to add the file name to the label:
$('#model1').change(function() {
var filename = $(this).val().split('\\').pop();
$('.uploadFile').text(filename)
})
$('.uploadFile').click(function() {
$("#model1").unbind('click').bind('click');
})
$('#model1').change(function() {
var filename = $(this).val().split('\\').pop();
$('.uploadFile').text(filename)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1"
style="display:none;" th:required="true" />

You could use javascript, and have something like:
<label for="model1" class="uploadFile" onclick="handleClick()">File...</label>
and then define a handleclick() function which will process what you need to do with the button press.
The handleclick() could be as simple as:
$('#element').click();
or
$('#element').trigger('click');

Related

Stop Input From Inheriting Another Input's Value On Button Click

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>

change classname of parent span element using javascript

how can we change classname of parent span element on click of input radio button.
<label for="L">
<span class="lbllevel1">
<span class="label-size">L</span>
<input id="L" name="size" type="radio" value="L">
</span>
</label>
I want to add "selected" class to span element which is with class "lbllevel1" on click of radio button.
Basically, i need output as <span class="lbllevel1 selected"> when radio button is clicked
you can add an event listener to radio button for click event or change event, use document.getElementById('L') to get the input, and inside event handler function use e.currentTarget to get current clicked input, you can use .classList += to add class to element, something like this:
var input = document.getElementById('L');
input.addEventListener("click", function(e){
e.currentTarget.parentElement.classList += ' selected';
})
.selected{
background-color:#888888;
}
<label for="L">
<span class="lbllevel1">
<span class="label-size">L</span>
<input id="L" name="size" type="radio" value="L">
</span>
</label>
var lInput = document.getElementById("L");
lInput.addEventListener("click", function() {
lInput.parentNode.classList.add("selected");
})
You could listen to the change event of radio by then add parent element with selected class if radio is checked:
document.querySelector("#L").addEventListener("change", function () {
// check if radio is checked
if (this.checked)
{
// add .selected class to parent
this.parentElement.classList.add("selected");
}
});
working copy
<label for="L">
<span class="lbllevel1">
<span class="label-size">L</span>
<input id="L" name="size" onclick="changeAttr(this)" type="radio"
value="L">
</span>
</label>
<script>
function changeAttr(ele)
{
ele.parentElement.classList.add('newClass');
}
</script>
Please see if this is helpful or not :)
Check through name
if($("input:radio[name='Name']").is(":checked")) {
//write your code
}
Check through class
if($("input:radio[class='className']").is(":checked")) {
//write your code
}
Check through data
if($("input:radio[data-name='value']").is(":checked")) {
//write your code
}

Bind file input to a button using Vue.js

I'm trying to bind a input file to a button using Vue.js
Having the following:
<input type="file hidden>
<button>Choose</button>
In JQuery would be somthing like:
$('button').click(function() {
$('input[type=file]').click();
});
So, what this is doing is binding the click event on the button to the input file, this way I have complete control on the look of the button, it can even be a anchor or a image or any element to trigger the event to the input.
My question is: How can I accomplish this using Vue.js?
Thank you!
You can do this:
HTML:
<input id="fileUpload" type="file" hidden>
<button #click="chooseFiles()">Choose</button>
Vue.js:
methods: {
chooseFiles: function() {
document.getElementById("fileUpload").click()
},
...
EDIT - Update syntax:
methods: {
chooseFiles() {
document.getElementById("fileUpload").click()
},
...
Add a ref="file" to your <input> element and later use $refs.file to access it.
<input ref="file" type="file">
<div #click="selectFile()">click to select a file</div>
methods:{
selectFile(){
let fileInputElement = this.$refs.file;
fileInputElement.click();
// Do something with chosen file
}
}
👌 Demo: https://codepen.io/Jossef/pen/QWEbNGv
Simplest way to do this is to stylize a label element like a button, HTML only.
you can use the label html tag for doing this like below
<label for="upload-file" class="css-class">
<input type="file" id="upload-file" hidden #change="choosFile"/>
</label>
in this way you didn't need the button any more and you can customize the label with css as the way you like it
In Vue:
How code below works:
Open file explorer on button (label) click;
Select a file, continue;
#onChange will detect new file:
<label>
<button/> //this can be an icon, link,...
<input #change="doSomething" type="file" ref="file" accept="image/gif,
image/jpeg, image/png" hidden/>
</label>
Handle the file
doSomething(e: any) {
const file = e.target.files[0]
}
There is a much simpler way of way doing this using Vue 3
<input type="file" id="upload-file" name="upload-file" hidden>
<label for="upload-file" refs="upload-file" class="file-btn">Choose a file</label>
Using this you can add classes and styling to the label field.
This might help someone who is using coreui <CInputFile> tag.
for <CInputFile>, this.$refs.file.click() and this.$refs.file.$el.click() both doesn't work.
Because <CInputFile> wraps <div> around <input type="file">. so $el is actually a div element here, you need to go find the <input type="file"> tag and trigger the click() event on the <input type="file"> tag like this
this.$refs.file.$el.getElementsByTagName('input')[0].click().
<input ref="refName" type="file">
<div #click="selectFile()">Select file</div>
export default: {
methods:{
selectFile(){
// refs return list of objects with name 'refName' or if only one object
const r = this.$refs.refName[0] || this.$refs.refName;
r.click();
}
}
}

jQuery: trigger click or focus input field

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

add name= required with js (eForm Modx)

I use Modx eForm for my form.
My problem, I need to add :required to a couple of input fields but only when the checkbox is unchecked!
I have fields like this:
<input type="text" placeholder="Last name" id="deliver_lastname" name="deliver_lastname:required" class="[[!+fi.error.deliver_lastname:notempty=`error`]]" />
:required needs to be set after unchecking the checkbox.
I have a checkbox to default hide some fields.
<p id="shiptobilling" class="form-row">
Same as billing address <input type="checkbox" onclick="SetBilling(this.checked);" checked="checked" />
</p>
A little script to hide the div with fields into it:
<script type="text/javascript">
function SetBilling(checked) {
if (checked) {document.getElementById('deliveryaddres').style.display="none";}
else {document.getElementById('deliveryaddres').style.display="block";}
}
</script>
Can be made easier - let deliveryaddres will always be required, and when checkbox is checked just let the value of the field is synchronized with billingaddres.
Needed javascript:
<script type="text/javascript">
function SetBilling() {
var deliveryaddres = document.getElementById('deliveryaddres');
var billingaddres = document.getElementById('billingaddres');
var shiptobilling = document.getElementById('shiptobilling').getElementsByTagName('input')[0];
if (shiptobilling.checked) {
deliveryaddres.value = billingaddres.value;
}
}
</script>
Needed events "onclick" and "onchange" on inputs:
<input type="checkbox" id="deliveryaddres" onclick="SetBilling();" />
<input type="text" id="billingaddres" onchange="SetBilling();" />
Add something like
document.getElementById("deliver_lastname").required = true;

Categories

Resources