I'm trying to change a url input into a file input and vice-versa when user clicks radio button.
When I try to remove the accept attribute from the input, I get Uncaught TypeError: $(...).get(...).removeAttr is not a function
$('.form-check-input').on('change', function(event) {
if (this.id === 'radio-rss-feed') {
//// Change file input to url input
//// input
$('#feed-file').get(0).type = 'url';
$('#feed-file').get(0).name = 'feed-url';
//// THIS GETS ERROR
$('#feed-file').get(0).removeAttr('accept');
$('#feed-file').get(0).id = 'feed-url';
////label
$('#feed-url').prev().get(0).htmlFor = 'feed-url';
$('#feed-url').prev().get(0).textContent = 'Feed URL'
} else if (this.id === 'radio-rss-file') {
//// change url input to file input
//// input
$('#feed-url').get(0).type = 'file';
$('#feed-url').get(0).name = 'feed-file';
$('#feed-url').get(0).accept = ".rss,text/xml"
$('#feed-url').get(0).id = 'feed-file';
////label
$('#feed-file').prev().get(0).htmlFor = 'feed-file';
$('#feed-file').prev().get(0).textContent = 'Feed File'
} else {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method='post' id='rss-post-form'>
/// INPUT
<div id="rss-input-div">
<label for='feed-url' class='form-label'>Feed URL</label>
<input class='form-control' id='feed-url' name='feed-url' type='url'>
</div>
//// RADIO
<div id="feed-form-check">
<input type="radio" name="radio-rss" id="radio-rss-feed" checked>
<label for="radio-rss-feed" >Rss Feed</label>
</div>
<div id="file-form-check">
<input type="radio" name="radio-rss" id="radio-rss-file">
<label for="radio-rss-file" >Rss File</label>
</div>
</form>
CodePudding user response:
I can't comment yet, so hens the answer:
It's because it's not removeAttr()
but removeAttribute()
$('.form-check-input').on('change', function(event){
if (this.id === 'radio-rss-feed'){
//// Change file input to url input
//// input
$('#feed-file').get(0).type = 'url';
$('#feed-file').get(0).name = 'feed-url';
//// THIS GETS ERROR
$('#feed-file').get(0).removeAttribute('accept');
$('#feed-file').get(0).id = 'feed-url';
////label
$('#feed-url').prev().get(0).htmlFor = 'feed-url';
$('#feed-url').prev().get(0).textContent = 'Feed URL'
} else if (this.id === 'radio-rss-file'){
//// change url input to file input
//// input
$('#feed-url').get(0).type = 'file';
$('#feed-url').get(0).name = 'feed-file';
$('#feed-url').get(0).accept = ".rss,text/xml"
$('#feed-url').get(0).id = 'feed-file';
////label
$('#feed-file').prev().get(0).htmlFor = 'feed-file';
$('#feed-file').prev().get(0).textContent = 'Feed File'
} else {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method='post' id='rss-post-form'>
/// INPUT
<div id="rss-input-div">
<label for='feed-url' class='form-label'>Feed URL</label>
<input class='form-control' id='feed-url' name='feed-url' type='url'>
</div>
//// RADIO
<div id="feed-form-check">
<input type="radio" name="radio-rss" id="radio-rss-feed" checked>
<label for="radio-rss-feed" >Rss Feed</label>
</div>
<div id="file-form-check">
<input type="radio" name="radio-rss" id="radio-rss-file">
<label for="radio-rss-file" >Rss File</label>
</div>
</form>
And avoid calling same functions over and over again, execute it once and store it's result in a variable instead:
$('.form-check-input').on('change', function(event){
//// input
const input = $('#feed-file').get(0);
//// label
const label = $('#feed-url').prev().get(0);
if (this.id === 'radio-rss-feed'){
//// Change file input to url input
input.type = 'url';
input.name = 'feed-url';
//// THIS GETS ERROR
input.removeAttribute('accept');
input.id = 'feed-url';
////label
label.htmlFor = 'feed-url';
label.textContent = 'Feed URL'
} else if (this.id === 'radio-rss-file'){
//// change url input to file input
//// input
input.type = 'file';
input.name = 'feed-file';
input.accept = ".rss,text/xml"
input.id = 'feed-file';
////label
label.htmlFor = 'feed-file';
label.textContent = 'Feed File'
} else {
}
})