Click here to Skip to main content
15,905,322 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
html:
<p id="addBtn" onclick="addSkill()">Add Skill</p>
<button id="cancelBtn" onclick="redirect()">Cancel</button>
<div id="skillDiv">
<input type='text' id='skill' required>
</div>


javascript:
function addSkill(){
    var line1 = "<input type='text' id='skill' required>";
    document.getElementById('skillDiv').innerHTML+=line1;
}

function redirect(){
    document.getElementById("skill").removeAttribute("required");
    //redirect to differentpage
}


What I have tried:

Hello, I am trying to remove a "required" attribute from an input element. It works when it is applied to the direct html but does't when the element was created with innerHTML. How can I overcome this?
Posted
Updated 10-Jun-23 23:59pm
Comments
Member 15627495 11-Jun-23 1:46am    
with the provide code, it's a dual ( two ) tags with same Id...
it goes bug like this..

Id's are lost when in double.

function addSkill(){

    document.getElementById('skillDiv').innerHTML+= "<input type='text' id='skill' required>";
}

function redirect(){
    document.getElementById("skill").removeAttribute("required"); // there are two tags  'skill' so 
    // so DOM have an array with 2 slots.
    // watch your code by 'dev tools', you will see two tags 'id=skill'

}
Member 15627495 11-Jun-23 2:44am    
if you want multiple input for different skills :
<input name="skills[]" type="text">
<input name="skills[]" type="text">
<input name="skills[]" type="text">
<input name="skills[]" type="text">

//  this way you can have a output for all the skills value, in the array 'skills'


1 solution

Your 'redirect()' function is not removing the "required" attribute because the 'getElementById' method is searching for an element with the ID "skill," but there are multiple elements with the same ID since you're dynamically adding new input elements in your 'addSkill()' function.

You need to change your 'getElementById' to a class attribute (getElementsByClassName ) and use value "skill-input" as per my code below(or any other name you wish) instead of using the id attribute. This allows you to select all the input elements with that class using 'getElementsByClassName' in your 'redirect()' function.

Within your redirect() function, we loop through all the elements with the "skill-input" class and remove the "required" attribute from each of them -

<p id="addBtn" onclick="addSkill()">Add Skill</p>
<button id="cancelBtn" onclick="redirect()">Cancel</button>
<div id="skillDiv">
  <input type='text' class='skill-input' required>
</div>

<script>
function addSkill() {
//Creates the text element with a REQUIRED ATTRIBUTE...
  var line1 = "<input type='text' class='skill-input' required>";
  document.getElementById('skillDiv').innerHTML += line1;
}

function redirect() {
  var skillInputs = document.getElementsByClassName("skill-input");
//Get all of the text elements with SKILL-INPUT class and remove REQUIRED ATTRIBUTE...
  for (var i = 0; i < skillInputs.length; i++) {
    skillInputs[i].removeAttribute("required");
  }
  // Redirect to a different page
}
</script>


I have a working fiddle for you at Remove attribute from elements using getElementsByClassName[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900