Remove accept from form input with jquery

August 20, 2022

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 class="mb-3" 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 class="form-check form-check-inline" id="feed-form-check">
    <input class="form-check-input" type="radio" name="radio-rss" id="radio-rss-feed" checked>
    <label for="radio-rss-feed" class="form-check-label">Rss Feed</label>
  </div>

  <div class="form-check form-check-inline" id="file-form-check">
    <input class="form-check-input" type="radio" name="radio-rss" id="radio-rss-file">
    <label for="radio-rss-file" class="form-check-label">Rss File</label>
  </div>
</form>

>Solution :

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 class="mb-3" 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 class="form-check form-check-inline" id="feed-form-check">
      <input class="form-check-input" type="radio" name="radio-rss" id="radio-rss-feed" checked>
      <label for="radio-rss-feed" class="form-check-label">Rss Feed</label>
    </div>

    <div class="form-check form-check-inline" id="file-form-check">
      <input class="form-check-input" type="radio" name="radio-rss" id="radio-rss-file">
      <label for="radio-rss-file" class="form-check-label">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 {

  }
})